/**
 * USAI Lighting Mega Menu Styles
 * Clean, modern mega menu design matching the brand aesthetic
 */

/* =============================================
   CSS VARIABLES
   ============================================= */
/* Note: All color variables are defined in style.css and will automatically use dark mode values when [data-theme="dark"] is set */
:root {
    --max-width: 1400px;
}

/* =============================================
   DESKTOP MEGA MENU STYLES
   ============================================= */

/* Make header sticky so mega menu stays aligned when scrolling */
header {
    position: sticky !important;
    top: 0 !important;
    z-index: 10000 !important;
    background: var(--background-color-white); /* Header background */
}

/* Header Layout Adjustments */
.header-wrap {
    display: flex !important;
    flex-direction: column !important;
    max-width: var(--max-width) !important;
    margin: 0 auto !important;
    padding: var(--spacing-xl) var(--spacing-3xl-lg) 0 var(--spacing-3xl-lg) !important;
    /* background-color: var(--background-color-white, var(--white)) !important; */
    gap: 15px !important;
}

/* Top Row: Logo, Search (centered), Filter */
.header-top-row {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 30px !important;
    width: 100% !important;
}

.header-left {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
}

.header-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
}

.header-right {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    justify-content: flex-end !important;
    flex: 0 0 auto !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Bottom Row: Navigation Menu */
.header-bottom-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

/* Main Navigation Container */
.mega-menu-container {
    display: flex;
    align-items: center;
    gap: 0;
}

/* Primary Navigation Links */
.mega-nav {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

.mega-nav > li {
    position: static;
}

.mega-nav > li > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-xl);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.2s ease, text-shadow 0.2s ease;
    white-space: nowrap;
}

/* Remove dropdown arrows from all mega menu items */
.mega-nav a::after,
.mega-nav li a::after,
.mega-panel a::after,
.mega-panel li a::after,
.mega-column a::after,
.mega-column li a::after,
.menu-item-has-children a::after {
    content: none !important;
    display: none !important;
}

/* Hover state - color only */
.mega-nav > li > a:hover,
.mega-nav > li:hover > a {
    color: var(--primary-color);
}

/* Active/clicked state - faux-bold using text-shadow (prevents layout shift) */
.mega-nav > li.active > a {
    color: var(--primary-color);
    text-shadow: 0.4px 0 0 currentColor, -0.4px 0 0 currentColor;
}

/* Active state indicator */
.mega-nav > li.active > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 2px;
    background: var(--primary-color);
}

/* Mega Menu Dropdown Panel */
.mega-panel {
    position: fixed;
    left: 0;
    transform: none;
    top: var(--mega-menu-top, 100px); /* Dynamically set by JavaScript */
    width: 100%;
    max-width: 100%;
    background: var(--background-color); /* Same gray as header */
    /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); */
    border-top: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    /* Above docked chat (z-index 9999) so open mega panels are not covered by the sidebar */
    z-index: 10050;
    max-height: calc(100vh - var(--mega-menu-top, 100px) - 20px);
    overflow-y: auto;
}

.mega-nav > li:hover .mega-panel,
.mega-nav > li.active .mega-panel {
    opacity: 1;
    visibility: visible;
}

/* Panel Content Container.
   Issue #4: 5-column panels (e.g. "Deep Dive", Products) were dropping
   the 5th column to a second row because auto-fit + minmax(140px) +
   4vw side padding couldn't fit five tracks until ~1300px. The 1280px
   lock-in threshold left a gap (laptop split-screen, narrow desktops,
   iPad-landscape) where the auto-fit branch wrapped early. Lock 5 tracks
   in at 1024px+, tighten side padding to 2vw and gap to 16px, and lower
   the auto-fit floor to 120px so the fallback wraps gracefully but as
   late as possible. The < 768px mobile collapse rule further down the
   file (`grid-template-columns: unset !important;`) is unaffected. */
.mega-panel-content {
    width: 100%;
    margin: 0 auto;
    padding: var(--spacing-3xl) 2vw;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 16px 16px;
}

@media (min-width: 1024px) {
    /* `!important` is required to override the legacy `.mega-panel-content {
       grid-template-columns: repeat(4, 1fr); }` and
       `.menu-item-has-children:nth-child(N) .mega-panel-content { ... repeat(5,
       1fr) }` rules that live in the WordPress Customizer "Additional CSS"
       panel on develop. Those rules are database-stored and load AFTER theme
       CSS, so without `!important` they always win and the per-item
       `--mega-cols` post-meta inline style has no effect. The Customizer
       rules can be removed by an admin (Appearance -> Customize -> Additional
       CSS) but until they are, this rule keeps the per-item override authoritative. */
    .mega-panel-content {
        grid-template-columns: repeat(var(--mega-cols, 4), minmax(0, 1fr)) !important;
        padding: var(--spacing-3xl) 2vw;
        gap: 16px 16px;
    }
}

/* Narrow-desktop tightening (<= 1280px): when the viewport is small enough
   that 5 columns get cramped, scale the inter-column gap with the viewport so
   the border-right divider line stays clear of the text on either side.
   Without this the divider visually overlaps long links like "Phase Dimming
   (Forward & Reverse)" and "Color Select Tunable White".
   The bumped-specificity selector (`.mega-menu-container ...`) is required to
   beat the WP Customizer Additional CSS rule on develop:
       @media (max-width: 1200px) {
           .mega-panel-content { gap: 50px !important; ... }
       }
   That rule is database-stored and ships in the wp-custom-css inline <style>
   block AFTER the theme CSS, so a same-specificity `!important` ties and
   the Customizer wins by source order. The ancestor-class qualifier here
   bumps specificity (0,2,1) above the Customizer's (0,1,1) so the theme
   rule reliably wins. clamp() keeps the gap between 6px and 20px and lets
   it shrink with the viewport — small enough to keep columns wide, never
   so large that the layout looks like a 50px-gap two-column page. */
@media (max-width: 1280px) {
    .mega-menu-container .mega-panel-content {
        gap: clamp(6px, 1.2vw, 20px) !important;
    }
    .mega-menu-container .mega-column {
        padding-right: clamp(8px, 1vw, 16px) !important;
    }
}

/* Column Styling.
   `!important` on min-width is required because the WP Customizer Additional
   CSS panel sets `.mega-column { min-width: 240px; }` which loads after the
   theme CSS. With 5 columns × 240px the panel can't shrink below 1200px of
   content, so on narrower viewports each column's text overflows past its
   grid track and visually crosses the next column's `border-right` divider
   line ("bleeds into" the separator). Forcing `min-width: 0` lets the grid
   track govern column width; long anchor text wraps via `overflow-wrap`. */
.mega-column {
    min-width: 0 !important;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Wrap long menu-item text instead of overflowing the column. The base
   .mega-nav anchor rule above only enforces `white-space: nowrap` on the
   top-level triggers (`.mega-nav > li > a`), so column anchors inherit the
   default `normal` value. Be explicit anyway because some legacy Customizer
   rules apply `nowrap` to descendants. */
.mega-column li,
.mega-column li > a {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.mega-column-title {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-strong);
    color: var(--text-color) !important;
    margin-bottom: var(--spacing-xs);
    padding-bottom: 6px;
    border-bottom: none;
    text-transform: none;
    letter-spacing: normal;
}

.mega-column-headers a {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-strong);
    margin-top: 5px;
    padding-top: 5px;
    color: var(--black) !important;
}

/* =============================================
   CUSTOM MEGA-MENU CALLOUTS
   -----------------------------------------------
   These classes are set on individual menu items in
   WordPress > Menus (stored in the DB, not in theme
   files). Prior to this block they had no dedicated
   styling, so they rendered as flat body text with
   no visual hierarchy and nothing keyed to the
   current theme. All colors below resolve to
   :root / [data-theme="dark"] tokens defined in
   style.css so light + dark both work automatically.
   ============================================= */

/* Description callouts: "Deep Dive — Your reference…",
   "Build Your Spec Live — Every product page…",
   "Here's Why It's USAI …", "Share Your Project …",
   plus the MODIFICATIONS / FILTER BY TIERS blurbs. */
/* Highlighted "Description Dive" callout block. Background uses
   --discripition-dive-bg (defined in style.css :root + [data-theme="dark"]) so
   the panel stays readable in both light and dark mode. The legacy hard-coded
   #fef2ea background that previously lived in Customizer Additional CSS / the
   Mega Menu plugin's Custom Styling should be removed from the develop DB so
   this rule wins. */
.mega-column li.discripition_dive {
    background: var(--discripition-dive-bg);
    padding: 15px;
    border-radius: 12px;
}

.mega-column li.discripition_dive a,
.mega-column li.discripition_items a {
    color: var(--text-color-gray-darker);
    padding: 6px 0 10px;
    line-height: var(--line-height-sm);
    white-space: normal;
}

.mega-column li.discripition_dive a span,
.mega-column li.discripition_dive a .space_bottom {
    display: block;
    color: var(--text-color);
    font-weight: var(--font-weight-strong);
    font-size: var(--font-size-xs);
    margin-bottom: 4px;
}

.mega-column li.discripition_dive a strong {
    display: inline-block;
    margin-top: 6px;
    color: var(--primary-color);
    font-weight: var(--font-weight-strong);
}

.mega-column li.discripition_dive a:hover strong {
    text-decoration: underline;
}

/* Sub-section headers inside a mega column (e.g.
   "FILTER BY OPTICS", "COLOR QUALITY", "DIMMING &
   CONTROLS", "APERTURE CHOICES"). */
.mega-column li.menu-header a {
    color: var(--text-color);
    font-weight: var(--font-weight-strong);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-top: var(--spacing-sm);
}

/* Right-arrow CTA rows ("Compare All Tiers",
   "Explore All", "View All Projects", …). */
.mega-column li.right_icon_menu a {
    color: var(--primary-color);
    font-weight: var(--font-weight-medium);
}

/* Tier selector cards (Tier 1 / 2 / 3 in the
   Products mega panel). */
.mega-column .tier-cards {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
}

.mega-column .tier-cards .tier-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mega-column .tier-cards .tier-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    background: var(--tier-3-color);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-2xs);
    flex-shrink: 0;
}

.mega-column .tier-cards .tier-circle.tier-purple {
    background: var(--tier-2-color);
}

.mega-column .tier-cards .tier-circle.tier-blue {
    background: var(--tier-1-color);
}

.mega-column .tier-cards .tier-text h3 {
    color: var(--text-color);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-strong);
    margin: 0;
}

.mega-column .tier-cards .tier-text.purple-text h3 {
    color: var(--tier-2-color);
}

.mega-column .tier-cards .tier-text.blue-text h3 {
    color: var(--tier-1-color);
}

.mega-column .tier-cards .tier-text p {
    color: var(--text-color-gray-darker);
    margin: 0;
    font-size: var(--font-size-1xs);
}

.mega-column .tier-cards .tier-arrow img {
    width: 16px;
    height: auto;
    filter: none;
}

/* Chevron asset is a dark-on-light PNG; invert it
   in dark mode so it reads against the dark panel. */
[data-theme="dark"] .mega-column .tier-cards .tier-arrow img {
    filter: invert(1) brightness(0.9);
}

/* Aperture-sizes grid under CEILING CONSIDERATIONS. */
.mega-column .inch-list {
    display: flex;
    gap: 18px;
}

.mega-column .inch-list .col p {
    color: var(--text-color-gray-darker);
    margin: 2px 0;
    font-size: var(--font-size-2xs);
}

/* Visually hidden mega-column titles (used on
   FILTER BY TIERS / COLOR TECHNOLOGIES / SPOTLIGHT
   where the heading is implied by the content). */
.mega-column-title .hide-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Ensure mega-column-title uses text-color variable in all contexts */
.mega-panel .mega-column-title,
.mega-panel-content .mega-column-title {
    color: var(--text-color) !important;
}

/* Dark mode styling for mega-column-title */
[data-theme="dark"] .mega-column-title,
[data-theme="dark"] .mega-panel .mega-column-title,
[data-theme="dark"] .mega-panel-content .mega-column-title {
    color: var(--text-color) !important;
}

/* Column Links */
.mega-column ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mega-column li {
    margin-bottom: 3px;
}

.mega-column a {
    display: block;
    font-size: var(--font-size-2xs);
    color: var(--text-color-gray-darker);
    text-decoration: none;
    padding: 1px 0;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.mega-column a:hover {
    color: var(--primary-color);
    padding-left: 6px;
}

/* First column header link in first menu item */
ul#menu-mega-menu li:first-child .mega-column:first-child a {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-strong);
    margin-bottom: 5px;
    padding-bottom: 5px;
    color: var(--black) !important;
}

/* Special link styling for highlighted items */
.mega-column a.featured {
    color: var(--primary-color);
    font-weight: var(--font-weight-medium);
}

/* Icon indicators for certain items (USAI Color Technologies) */
.mega-column .color-indicator {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: var(--spacing-xs);
    vertical-align: middle;
}

.color-indicator.classic-white {
    background: var(--background-color-white);
    border: 1px solid var(--border-color-lighter);
}

.color-indicator.warm-glow {
    background: var(--color-warm-glow);
}

.color-indicator.dim-to-warm {
    background: linear-gradient(135deg, var(--color-warm-glow), var(--color-primary-orange-alt2));
}

.color-indicator.tunable {
    background: linear-gradient(135deg, var(--color-blue-indicator), var(--color-cyan-indicator));
}

.color-indicator.infinite {
    background: linear-gradient(135deg, var(--color-purple-indicator), var(--color-pink-indicator), var(--color-gold-indicator));
}

/* Tier badges - Perfect circles with $ symbols */
.tier-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    aspect-ratio: 1 / 1;
    border-radius: 50% !important;
    font-size: var(--font-size-1xs);
    font-weight: var(--font-weight-bold);
    color: var(--white);
    margin-left: 3px;
    padding: 0 !important;
    flex-shrink: 0;
    flex-grow: 0;
    box-sizing: border-box;
}

.tier-badge.tier-3-color { background: var(--tier-3-color); }
.tier-badge.tier-2-color { background: var(--tier-2-color); }
.tier-badge.tier-1-color { background: var(--tier-1-color); }

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Search bar — matches USAI AI Search Demo (#search-bar / .search-wrap) */
.mega-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: var(--white) !important;
    border: 1px solid var(--border-color-lighter);
    border-radius: 24px;
    padding: 9px 16px;
    min-width: 280px;
    max-width: 500px;
    width: 100%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, border-radius 0.25s ease,
        padding 0.25s ease, align-items 0.25s ease;
}

.mega-search-bar:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 1px 8px rgba(244, 126, 44, 0.12);
}

.usai-header-search-wrap {
    position: relative;
    max-width: 500px;
    width: 100%;
    z-index: 20;
}

.mega-search-bar input,
.mega-search-bar textarea.ai-search-input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 13px;
    color: var(--text-color);
    background-color: transparent;
    flex: 1;
    min-width: 0;
    width: 100%;
    padding: 0;
    margin: 0;
    resize: none;
    line-height: 1.5;
    min-height: 18px;
    max-height: 100px;
    font-family: inherit;
    box-sizing: border-box;
    overflow: hidden;
    transition: min-height 0.25s ease, line-height 0.25s ease, padding 0.25s ease;
}

.mega-search-bar textarea.ai-search-input {
    display: block;
    align-self: center;
    margin-top: 1px; /* demo .search-wrap svg margin-top — optical align with icon */
}

.mega-search-bar.usai-search-expanded textarea.ai-search-input {
    line-height: 1.5;
    min-height: 24px;
    padding: 2px 0;
    align-self: stretch;
}

.mega-search-bar.usai-search-expanded {
    align-items: flex-start;
    border-radius: 16px;
    padding: 12px 16px;
}

.mega-search-bar input::placeholder,
.mega-search-bar textarea.ai-search-input::placeholder {
    color: var(--text-color-gray-lighter);
    line-height: inherit;
    opacity: 1;
}

.mega-search-bar:not(.usai-search-expanded) textarea.ai-search-input::placeholder {
    line-height: 1.5;
    color: var(--text-color-gray-lighter, #aaa);
}

.mega-search-bar .search-clear {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-color-gray-lighter);
    font-size: 20px;
    line-height: 1;
    padding: 0 4px;
    flex-shrink: 0;
}

.mega-search-bar.usai-search-has-text .search-clear {
    display: block;
}

.search-examples {
    font-size: 11px;
    color: var(--text-color-gray-lighter);
    line-height: 1.6;
    margin-top: 6px;
    padding-left: 2px;
}

.search-examples[hidden] {
    display: none !important;
}

/* CSS-only fallback: whenever the header search wrap has focus, force the
   "Try:" examples row to render in flow regardless of any stale JS that may
   still toggle the [hidden] attribute (e.g. cached Cluster B build that
   hid examples while the lookahead overlay was open). */
.usai-header-search-wrap:focus-within .search-examples {
    display: block !important;
}

/* Round 5: lookahead autocomplete dropdown.
   Pinned to the search-bar wrapper, which already has position:relative. */
.usai-lookahead {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 4px;
    background: var(--background-color, #fff);
    border: 1px solid var(--gray-border, #d6d6d6);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    z-index: 30;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.usai-lookahead[hidden] {
    display: none !important;
}

.usai-lookahead-item {
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--gray-border-light, #efefef);
    text-align: left;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--text-color, #222);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    width: 100%;
}

.usai-lookahead-item:last-child {
    border-bottom: 0;
}

.usai-lookahead-item:hover,
.usai-lookahead-item:focus,
.usai-lookahead-item.is-active {
    background: var(--brand-bg-light, #f5f7fa);
    outline: none;
}

.usai-lookahead-name {
    font-weight: 600;
}

.usai-lookahead-meta {
    font-size: 11px;
    color: var(--text-color-gray, #777);
    margin-top: 1px;
}

.search-examples-label {
    font-weight: 600;
    margin-right: 6px;
    color: var(--text-color-gray);
}

.search-example-prompt {
    background: none;
    border: none;
    border-bottom: 1px dashed var(--gray-border);
    color: var(--text-color);
    cursor: pointer;
    font-size: inherit;
    padding: 0;
    margin-right: 10px;
    margin-bottom: 4px;
}

.search-example-prompt:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.search-powered {
    /* Kept hidden in all modes. The visible "powered by us-ai" indicator is the
       legacy .mega-search-bar::after overlay (gated to AI MODE below); this <p>
       would otherwise double it, so it stays hidden everywhere. */
    display: none;
    font-size: 9px;
    color: var(--text-color-gray-lighter);
    margin: 4px 0 0;
    text-align: right;
    letter-spacing: 0.02em;
}

.search-powered em {
    color: var(--primary-color);
    font-style: italic;
    font-weight: 600;
}

.mega-search-bar .search-icon {
    color: var(--text-color-gray-lighter, #aaa);
    flex-shrink: 0;
    font-size: var(--font-size-xs);
    margin-top: 1px;
}

[data-theme='dark'] .mega-search-bar .search-icon {
    color: var(--text-color-gray-light);
}

[data-theme='dark'] .mega-search-bar:focus-within {
    box-shadow: 0 1px 8px rgba(204, 74, 31, 0.2);
}

/* Right-side buttons */
.mega-nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: var(--spacing-xl);
    align-self: center;
}

/* Lightswitch Toggle - Traditional Wall Switch Style */
.lightswitch-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    width: 30.6px;
    height: 43.2px;
}

.lightswitch-toggle:hover {
    transform: scale(1.05);
    transition: transform 0.1s ease;
}

.lightswitch-toggle:active {
    transform: scale(0.98);
}

/* Switch Plate - Traditional rectangular wall plate */
.lightswitch-plate {
    position: relative;
    width: 27px;
    height: 39.6px;
    background: var(--white);
    border: 1.5px solid var(--gray-border);
    border-radius: 3px;
    box-shadow: 
        inset 0 1px 2px rgba(0, 0, 0, 0.1),
        0 2px 4px rgba(0, 0, 0, 0.15),
        0 1px 0 rgba(255, 255, 255, 0.5);
    padding: 2.7px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

[data-theme="dark"] .lightswitch-plate {
    background: var(--white);
    border-color: var(--gray-border);
    box-shadow: 
        inset 0 1px 2px rgba(0, 0, 0, 0.2),
        0 2px 4px rgba(0, 0, 0, 0.3),
        0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Toggle Switch - The actual switch lever that moves up/down */
.lightswitch-toggle-switch {
    position: relative;
    width: 21.6px;
    height: 34.2px;
    background: var(--white);
    border: 1px solid var(--gray-border);
    border-radius: 2px;
    box-shadow: 
        inset 0 1px 2px rgba(0, 0, 0, 0.1),
        0 1px 0 rgba(255, 255, 255, 0.6);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
}

[data-theme="dark"] .lightswitch-toggle-switch {
    background: var(--white);
    border-color: var(--gray-border);
    box-shadow: 
        inset 0 1px 2px rgba(0, 0, 0, 0.2),
        0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Toggle Lever - The visible switch handle */
.lightswitch-toggle-switch::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 15.3px;
    height: 6.3px;
    background: linear-gradient(180deg, #e8e8e8 0%, #c0c0c0 100%);
    border: 1px solid #999;
    border-radius: 2px;
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.5),
        0 1px 2px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(0, 0, 0, 0.1);
    transition: top 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
                background 0.2s ease,
                box-shadow 0.2s ease;
    z-index: 2;
}

/* Disable transitions on initial page load to prevent animation */
html.theme-initializing .lightswitch-toggle-switch::before {
    transition: none !important;
}

[data-theme="dark"] .lightswitch-toggle-switch::before {
    background: linear-gradient(180deg, #d0d0d0 0%, #a0a0a0 100%);
    border-color: #888;
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.3),
        0 1px 2px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* ON position - lever at top (light mode) */
.lightswitch-toggle:not(.dark-mode) .lightswitch-toggle-switch::before {
    top: 4.5px;
    background: linear-gradient(180deg, var(--primary-color) 0%, var(--primary-color-dark) 100%);
    border-color: var(--primary-color-dark);
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.3),
        0 1px 2px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(0, 0, 0, 0.2),
        0 0 8px rgba(244, 126, 44, 0.4);
}

/* OFF position - lever at bottom (dark mode) */
.lightswitch-toggle.dark-mode .lightswitch-toggle-switch::before {
    top: 23.4px;
}

/* ON indicator - top section glow when light mode */
.lightswitch-toggle:not(.dark-mode) .lightswitch-toggle-switch {
    background: linear-gradient(to bottom, 
        rgba(244, 126, 44, 0.15) 0%, 
        rgba(244, 126, 44, 0.15) 40%,
        transparent 40%,
        transparent 100%);
}

/* OFF indicator - bottom section when dark mode */
.lightswitch-toggle.dark-mode .lightswitch-toggle-switch {
    background: linear-gradient(to bottom, 
        transparent 0%, 
        transparent 60%,
        rgba(0, 0, 0, 0.1) 60%,
        rgba(0, 0, 0, 0.1) 100%);
}

/* Remove "ON" label - no text needed */
.lightswitch-toggle-switch::after {
    display: none;
}

/* Add subtle divider line in plate */
.lightswitch-plate::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 2.7px;
    right: 2.7px;
    height: 1px;
    background: var(--gray-border);
    transform: translateY(-50%);
    z-index: 0;
    opacity: 0.5;
}

[data-theme="dark"] .lightswitch-plate::after {
    background: var(--gray-border);
    opacity: 0.3;
}

.mega-nav-actions .product-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--primary-color-alt);
    color: var(--white) !important;
    padding: 4px var(--spacing-2xl);
    border-radius: 30px;
    font-size: var(--font-size-1xs);
    font-weight: var(--font-weight-normal);
    text-decoration: none !important;
    white-space: nowrap;
}

.mega-nav-actions .product-filter-btn:hover {
    background: var(--primary-color-alt);
    color: var(--white) !important;
}

.mega-nav-actions .product-filter-btn svg {
    width: 18px;
    height: 12px;
    stroke: currentColor;
    flex-shrink: 0;
}

.mega-nav-actions .product-filter-btn__icon {
    width: 18px;
    height: 12px;
    color: currentColor;
    fill: currentColor;
    stroke: none;
    flex-shrink: 0;
}

.mega-nav-actions .product-filter-btn img {
    width: 12px;
    height: 12px;
    filter: brightness(0) invert(1);
    flex-shrink: 0;
}

.mega-nav-actions .user-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: var(--spacing-sm);
    border-radius: 50%;
    background: var(--background-color-gray);
    cursor: pointer;
    overflow: hidden;
    text-decoration: none;
    opacity: 0.6;
}

.mega-nav-actions .user-icon .user-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.mega-nav-actions .user-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* =============================================
   MOBILE MEGA MENU STYLES
   ============================================= */

/* Mobile Menu Toggle Button */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    cursor: pointer;
    padding: var(--spacing-sm);
    z-index: 10001;
}

.mobile-menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text-color, var(--black));
    border-radius: 2px;
    transition: all 0.3s ease;
}

.mobile-menu-toggle span:nth-child(1) {
    margin-bottom: 6px;
}

.mobile-menu-toggle span:nth-child(2) {
    margin-bottom: 6px;
}

/* Animated hamburger to X */
.mobile-menu-toggle.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-menu-overlay.active {
    display: block;
    opacity: 1;
}

/* Mobile Menu Panel */
.mobile-mega-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    background: var(--background-color-white);
    z-index: 9999;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    visibility: hidden;
}

.mobile-mega-menu.active {
    transform: translateX(0);
    visibility: visible;
}

/* Mobile Menu Header */
.mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-xl);
    border-bottom: 1px solid var(--gray-border-alt6);
    background: var(--background-color-white);
    position: sticky;
    top: 0;
    z-index: 10;
}

.mobile-menu-logo img {
    height: 30px;
    width: auto;
}

.mobile-menu-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--background-color-light);
    border-radius: 50%;
    cursor: pointer;
    font-size: var(--font-size-sm2);
    color: var(--text-color-gray);
    transition: background 0.2s ease;
    text-shadow: none !important;
}

.mobile-menu-close:hover {
    background: var(--background-color-light, var(--gray-lighter));
}

/* Mobile Search */
.mobile-menu-search {
    padding: var(--spacing-md) var(--spacing-xl);
    background: var(--background-color-lightest);
    border-bottom: 1px solid var(--gray-border-alt6);
}

.mobile-menu-search input {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color-lighter);
    border-radius: 25px;
    font-size: var(--font-size-2xs);
    outline: none;
    background: var(--background-color-white);
    transition: border-color 0.2s ease;
}

.mobile-menu-search input:focus {
    border-color: var(--primary-color);
}

/* Mobile Navigation Items */
.mobile-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-nav-item {
    border-bottom: 1px solid var(--gray-border-alt7);
}

.mobile-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-lg) var(--spacing-xl);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--text-color);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.mobile-nav-link:hover,
.mobile-nav-item.active > .mobile-nav-link {
    background: var(--background-color-lightest);
    color: var(--primary-color);
}

.mobile-nav-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    transition: transform 0.3s ease;
}

.mobile-nav-arrow svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.mobile-nav-item.active > .mobile-nav-link .mobile-nav-arrow {
    transform: rotate(180deg);
}

/* Mobile Submenu */
.mobile-submenu {
    display: none;
    background: var(--background-color-gray-lightest);
    padding: 0;
}

.mobile-nav-item.active > .mobile-submenu {
    display: block;
}

.mobile-submenu-section {
    padding: var(--spacing-md) var(--spacing-xl);
    border-bottom: 1px solid var(--gray-border-alt7);
}

.mobile-submenu-section:last-child {
    border-bottom: none;
}

.mobile-submenu-title {
    font-size: var(--font-size-1xs);
    font-weight: var(--font-weight-strong);
    color: var(--text-color-gray-light);
    text-transform: none;
    letter-spacing: normal;
    margin-bottom: var(--spacing-sm);
    padding-left: var(--spacing-sm);
}

.mobile-submenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-submenu li {
    margin-bottom: 2px;
}

.mobile-submenu a {
    display: block;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-2xs);
    color: var(--text-color-gray-darkest);
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.2s ease, color 0.2s ease;
}

.mobile-submenu a:hover {
    background: var(--background-color-white);
    color: var(--primary-color);
}

/* Mobile Quick Actions */
.mobile-quick-actions {
    padding: var(--spacing-xl);
    border-top: 1px solid var(--gray-border-alt6);
    background: var(--background-color-lightest);
}

.mobile-quick-actions a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: var(--spacing-md) var(--spacing-xl);
    background: var(--primary-color);
    color: var(--white);
    border-radius: 25px;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    margin-bottom: var(--spacing-sm);
    transition: background 0.2s ease;
}

.mobile-quick-actions a:last-child {
    margin-bottom: 0;
}

.mobile-quick-actions a:hover {
    opacity: 0.9;
}

/* =============================================
   RESPONSIVE BREAKPOINTS
   ============================================= */

@media screen and (max-width: 768px) {
    /* Hide desktop menu, show mobile toggle */
    .header-bottom-row,
    .mega-nav,
    .mega-search-bar {
        display: none !important;
    }

    .mega-nav-actions .product-filter-btn__label--long {
        display: none !important;
    }

    .mega-nav-actions .product-filter-btn__label--short {
        display: inline !important;
    }
    
    /* Header adjustments for mobile */
    .header-wrap {
        padding: var(--spacing-sm) var(--spacing-md) 0 var(--spacing-md) !important;
        gap: 0 !important;
    }
    
    .header-top-row {
        display: flex !important;
        grid-template-columns: unset !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }
    
    .header-center {
        display: none !important;
    }
    
    .header-left {
        flex: 1;
        min-width: 0;
    }
    
    .header-right {
        flex: 0 0 auto !important;
        gap: 10px !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        position: static !important;
    }
    
    .header-right > .mega-nav-actions {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
        width: auto !important;
        max-width: none !important;
        height: 44px !important; /* Match hamburger height */
        align-self: center !important;
        float: none !important;
        clear: none !important;
    }
    
    .header-right > .mobile-menu-toggle {
        display: flex !important;
        flex: 0 0 44px !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        flex-direction: column !important; /* For hamburger lines */
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        align-self: center !important;
        padding: 0 !important;
        margin: 0 !important;
        float: none !important;
        clear: none !important;
    }
    
    .mega-nav-actions .product-filter-btn {
        padding: 4px var(--spacing-md);
        height: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 !important;
    }

    /* Collapse non-essential header actions into the mobile drawer so the
       logo + hamburger always fit (prevents the hamburger being pushed
       off-screen on narrow phones). Product Filter + login/profile are
       available in .mobile-quick-actions; the lightswitch stays in-header. */
    .header-right .mega-nav-actions .product-filter-btn,
    .header-right .mega-nav-actions .user-icon {
        display: none !important;
    }

    .mobile-menu-header {
        padding: var(--spacing-md);
    }
    
    .mobile-nav-link {
        padding: var(--spacing-md);
        font-size: var(--font-size-xs);
    }
}

@media screen and (max-width: 480px) {
    .header-wrap {
        padding: var(--spacing-sm) var(--spacing-md) 0 var(--spacing-md);
    }
    
    .header_logo {
        max-width: 120px;
    }
    
    .mobile-mega-menu {
        max-width: 100%;
    }
}

/* =============================================
   HIDE DEFAULT WORDPRESS MENU
   ============================================= */

/* Only hide when new mega menu is active */
.mega-menu-active .main-menu-wrap {
    display: none !important;
}

.mega-menu-active .hamburger-menu {
    display: none !important;
}

/* =============================================
   Product Filter button label visibility
   ============================================= */

/* Default (desktop): show long label, hide short label.
   Mobile rule at max-width 768px swaps these (see above). */
.mega-nav-actions .product-filter-btn__label--short {
    display: none;
}

/* =============================================
   Mega-nav gap responsive override
   ----------------------------------------------
   The gap: 60px/67px !important rules on .mega-nav appear to be injected by
   Customizer Additional CSS (not committed in the theme files). On screens
   under 1024px those gaps are too wide. Use 3vw instead in that range.
   The `body ` prefix + !important raise specificity so this beats the
   Customizer rules without modifying them.
   ============================================= */
@media screen and (min-width: 769px) and (max-width: 1023.98px) {
    body .mega-nav {
        gap: 3vw !important;
    }
}

/* =============================================================
   AI MODE toggle + classic/AI search-bar modes. Scoped to
   .usai-header-search-wrap.usai-has-modes, which now renders site-wide so
   every page matches the SearchWP search experience. Classic (SearchWP) is
   the default everywhere; the legacy /usai-search page starts in AI mode.
   ============================================================= */
@property --usai-aimode-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.usai-aimode-toggle {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    flex-shrink: 0;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--background-color-gray-lighter);
    padding: 4px 12px 4px 9px;
    /* padding-right: 2px; */
    cursor: pointer;
    font-family: var(--font-family-primary);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: initial;
    line-height: 1;
    color: var(--text-color-gray, #666);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
    transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    white-space: nowrap;
}

.usai-aimode-toggle:hover {
    border-color: var(--primary-color, #f47e2c);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.usai-aimode-stars {
    display: inline-flex;
    line-height: 0;
    /* Solid brand-orange stars (currentColor on the SVG paths). */
    color: var(--primary-color, #f47e2c);
}

.usai-aimode-stars svg {
    display: block;
    width: 18px;
    height: 18px;
}

/* "BETA" suffix: all caps, 50% of the label size, bottom-aligned with the label. */
.usai-aimode-beta {
    position: relative;
    font-size: 50%;
    font-weight: 700;
    letter-spacing: 0.08em;
    align-self: flex-end;
    bottom: 4px;
    right: -2px;
    /* margin-left: -2px; */
    color: var(--text-color-gray-light, #888);
}

/* Stars stay solid orange in both search modes (no grayscale in classic). */
.usai-mode-classic .usai-aimode-stars svg {
    filter: none;
    opacity: 1;
}

body .usai-header-search-wrap.usai-mode-classic .search-examples {
    display: none !important;
}

/* The visible "powered by us-ai" credit is a legacy ::after overlay on the
   search bar, defined in the Customizer "Additional CSS" (<style id="wp-custom-css">)
   as `.mega-search-bar::after, .mobile-menu-search::after { content: " powered by us-ai" }`.
   It originally rendered on EVERY page and in classic mode. Gate it to AI MODE
   only (higher-specificity + !important so it wins over the later inline custom
   CSS), and nudge it right in AI mode so it clears the "Ask me anything"
   placeholder. */
.usai-header-search-wrap:not(.usai-mode-ai) .mega-search-bar::after,
.mobile-menu-search:not(.usai-mode-ai)::after {
    content: none !important;
}
.usai-mode-ai .mega-search-bar::after,
.usai-mode-ai.mobile-menu-search::after {
    left: 132px !important;
}

/* AI mode: colored stars, dark label, animated rainbow ring, helpers enabled. */
.usai-mode-ai .usai-aimode-stars svg {
    filter: none;
    opacity: 1;
}

/* Active (AI mode engaged): brand-emphasized pill so the toggle reads as "on". */
.usai-mode-ai .usai-aimode-toggle {
    color: var(--text-color, #231f20);
    background: var(--primary-color-light, rgba(245, 127, 45, 0.15));
    border-color: var(--primary-color, #f47e2c);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
}

.usai-mode-ai .usai-aimode-beta {
    color: var(--primary-color-orange-darkest, #e36a00);
}

.usai-mode-ai .mega-search-bar {
    position: relative;
    border-color: transparent !important;
    background-clip: padding-box;
}

.usai-mode-ai .mega-search-bar::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.6px;
    background: conic-gradient(from var(--usai-aimode-angle),
        #ff3b30, #ff9500, #ffcc00, #34c759, #007aff, #af52de, #ff3b30);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask-composite: exclude;
    animation: usai-aimode-rotate 6s linear infinite;
    pointer-events: none;
    z-index: 0;
}

.usai-mode-ai .mega-search-bar > * {
    position: relative;
    z-index: 1;
}

@keyframes usai-aimode-rotate {
    to { --usai-aimode-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
    .usai-mode-ai .mega-search-bar::before { animation: none; }
}

/* cache-bust 20260701T210000Z */