/* ==========================================================================
   1. THEME DICTIONARY (CSS VARIABLES) - Monochrome Version
   ========================================================================== */

/* BASELINE (LIGHT MODE) */
:root {
    --site-bg: #ffffff;
    --heading-color: #111111;
    --text-color: #43454b;
    
    /* Monochrome Accents */
    --accent-color: #111111; 
    --header-link: #111111;
    
    --header-bg: #ffffff;
    --header-text: #43454b;
    
    --footer-bg: #ffffff;
    --footer-heading: #111111;
    --footer-text: #6d6d6d;
    
    --btn-bg: #eeeeee;
    --btn-text: #333333;
    --btn-alt-bg: #111111;
    --btn-alt-text: #ffffff;
    
    --wc-content-bg: #ffffff;
    --wc-secondary: #e6e6e6;
    --wc-highlight: #111111;

    --glass-bg: rgba(240, 240, 240, 0.5);
    --glass-border: #d3dce6;
    --glass-hover: rgba(150, 150, 150, 0.2);
    --glass-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

/* DARK MODE OVERRIDES */
[data-theme="dark"] {
    --site-bg: #121212;
    --heading-color: #ffffff;
    --text-color: #eeeeee;
    
    /* Monochrome Accents */
    --accent-color: #ffffff;
    --header-link: #ffffff;
    
    --header-bg: #121212;
    --header-text: #eeeeee;
    
    --footer-bg: #121212;
    --footer-heading: #ffffff;
    --footer-text: #cccccc;
    
    --btn-bg: #333333;
    --btn-text: #ffffff;
    --btn-alt-bg: #ffffff;
    --btn-alt-text: #000000;
    
    --wc-content-bg: #121212;
    --wc-secondary: #444444;
    --wc-highlight: #ffffff;

    --glass-bg: rgba(30, 30, 30, 0.5);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-hover: rgba(255, 255, 255, 0.05);
    --glass-shadow: 0 8px 15px rgba(0,0,0,0.5);
}

/* PASTEL MODE OVERRIDES */
[data-theme="pastel"] {
    --site-bg: #fffaf5;
    --heading-color: #444444;
    --text-color: #444444;
    
    /* Monochrome Accents */
    --accent-color: #444444;
    --header-link: #444444;
    
    --header-bg: #ffe6e6;
    --header-text: #663333;
    
    --footer-bg: #ffe6e6;
    --footer-heading: #663333;
    --footer-text: #663333;
    
    --btn-bg: #ffd9e1;
    --btn-text: #663333;
    --btn-alt-bg: #444444;
    --btn-alt-text: #ffffff;
    
    --wc-content-bg: #fffaf5;
    --wc-secondary: #cc6666;
    --wc-highlight: #444444;
}

/* ==========================================================================
   2. GLOBAL VARIABLE MAPPING (Overrides Storefront Core)
   ========================================================================== */

body { 
    background-color: var(--site-bg) !important; 
    color: var(--text-color) !important;
}
h1, h2, h3, h4, h5, h6, 
.site-main h1, .site-main h2 {
    color: var(--heading-color) !important;
    font-weight: 300;
}

a, a:visited, em { color: var(--accent-color) !important; text-decoration:none; }


ul, ol {
    margin: 0;
    padding: 0;
}

.site-footer { background-color: var(--footer-bg) !important; }
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4, .site-footer h5, .site-footer h6 { color: var(--footer-heading) !important; }
.site-footer, .site-footer p, .site-footer li { color: var(--footer-text) !important; }





button, .button, input[type=submit] { 
    background-color: var(--btn-bg) !important; 
    border-color: var(--btn-bg) !important; 
    color: var(--btn-text) !important; 
}
.button.alt, button.alt, input[type=submit].alt,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a, 
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt { 
    background-color: var(--btn-alt-bg) !important; 
    border-color: var(--btn-alt-bg) !important; 
    color: var(--btn-alt-text) !important;
}

.woocommerce div.product, .woocommerce ul.products li.product { background-color: var(--wc-content-bg) !important; }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button { 
    background-color: var(--wc-secondary) !important; 
    border-color: var(--wc-secondary) !important; 
}
.woocommerce .woocommerce-message, .woocommerce .woocommerce-info, .woocommerce .woocommerce-error { border-top-color: var(--wc-highlight) !important; }
.woocommerce, .woocommerce p, .woocommerce li { color: var(--text-color) !important; }
input, textarea, select {
    background-color: var(--site-bg);
    color: var(--text-color);
    border: 1px solid var(--wc-secondary);
}


/* ==========================================================================
   3. TYPOGRAPHY & STRUCTURAL LAYOUT
   ========================================================================== */

body { font-family: 'Noto Sans', sans-serif; }
html[lang="ar"] body { font-family: 'Noto Sans Arabic', sans-serif; }
html[lang="hi"] body { font-family: 'Noto Sans Devanagari', sans-serif; }
html[lang="zh-cn"] body { font-family: 'Noto Sans SC', sans-serif; }
html[lang="zh-tw"] body { font-family: 'Noto Sans TC', sans-serif; }
html[lang="ja"] body { font-family: 'Noto Sans JP', sans-serif; }
html[lang="ko"] body { font-family: 'Noto Sans KR', sans-serif; }
html[lang="th"] body { font-family: 'Noto Sans Thai', sans-serif; }

.site-content .col-full {
    max-width: none; 
    padding: 0;
    margin-left: 5vw;
    margin-right: 5vw;
}
@media (max-width:768px) {
    .site-content .col-full {
        margin-left: 1em;
        margin-right: 1em;
    }
}
.content-area, .site-main { margin: 0; }

/* Set page size */
.site-content {
    min-height: 60ch;
    margin-bottom: 6em; 
}

/* ==========================================================================
   Header (Masthead) Flex Layout
   ========================================================================== */
  
.masthead { color: var(--header-text) !important; }

.masthead a { color: var(--header-link) !important; }

.masthead { 
    background-color: var(--header-bg) !important; 
    display: flex;
    max-width: 80em;
    margin: 1em auto;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
}
/* Site Title – Animated */
.masthead-title {
    font-weight: 900;
    letter-spacing: -2px;
}
.masthead-title a {
    background: linear-gradient(45deg, #ff007f, #8a2be2, #007bff, #ff007f);
    background-size: 300% auto; 
    /* Swapped to 100% for the default state */
    background-position: 100% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-decoration: none;
    transition: background-position 0.8s ease-in-out, filter 0.4s ease;
    font-size: 2em; 
}

.masthead-title a:hover {
    /* Swapped to 0% for the hover state */
    background-position: 0% 50%;
    -webkit-text-stroke: 0px transparent;
}

.masthead-description {
    font-size: .8em;
    font-weight: 100;
    text-indent: 0.5em;
    margin:0;
}

.masthead .chromagi-os-menu {

}


/* --- Flex Navigation Alignment Calibration --- */

/* Force the outer component engine to stretch and absorb available workspace */
.masthead .search-container {
    flex-grow: 1;
    max-width: 480px; /* Establishes a premium, intentional upper sizing limit */
    min-width: 320px; /* Guarantees layout structural integrity on smaller viewports */
    margin-inline-start: 20px; /* Generates a clean spatial gap from your menu icons */
}

/* Ensure the form element scales up cleanly to match the container bounds */
.masthead .search-form {
    width: 100%;
}

/* UI Elements */
.search-field, 
.rounded_corners_class, 
.dropdown_product_cat, 
table.variations select { border-radius: 4px; }




/* ==========================================================================
   SEARCH BAR
   ========================================================================== */

@keyframes search_spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.search-container { position: relative; }

/* Form and Wrapper structure */
.search-form { position: relative; width: 100%; display: flex; align-items: stretch; height: 44px; }
.search-wrapper { flex-grow: 1; position: relative; padding: 0; width: 100%; }
/* Inject the Font Awesome magnifying glass before the input text */
.search-wrapper::before {
    content: "\f002";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 2em;
    top: 14px;
    color: var(--text-color);
    pointer-events: none; /* Ensures clicking the icon still focuses the input text */
    z-index: 2;
}

/* CRITICAL: Indent the input text so it doesn't collide with the icon overlay */
#chromagi-search-input {
    padding-left: 70px; /* Space away from search icon, but also inline with results titles */
}
/* Input field base state */
.search-field { 
    width: 100%; padding: 6px 15px; line-height: 30px; display: block; font-size: 12px; 
    height: 100%; outline: 0; box-sizing: border-box; 
    border-radius: 8px !important; background-color: var(--site-bg) !important; 
    color: var(--text-color) !important; border: 1px solid var(--glass-border) !important; 
    
    /* CLOSING PASS: Corners regain roundness over 0.15s, tracking the panel fold exactly */
    transition: border-radius 0.15s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease;
}

/* Input field when dropdown is actively open */
.search-container.dropdown-open .search-field {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-color: transparent !important;
    background-color: var(--glass-bg) !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    
    /* OPENING PASS: Flatten corners smoothly */
    transition: border-radius 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Dropdown Box Accordion Frame --- */
.search-results-box {
    position: absolute; 
    top: 100%; 
    left: 0; 
    z-index: 9999; 
    margin-top: -1px; 
    width: 100%; 
    font-size: 13px; 
    text-align: left; 
    line-height: 16px; 
    box-sizing: border-box; 
    
    border-radius: 0 0 8px 8px;
    background-color: var(--glass-bg) !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid var(--glass-border);
    border-top: none;
    box-shadow: var(--glass-shadow);
    
    display: block !important; 
    visibility: hidden;
    overflow: hidden; 
    max-height: 0;
    pointer-events: none; 
    
    transform: translateY(-5px);
    /* STARTING STATE: Hidden on close */
    opacity: 0; 
    
    /* CLOSING PASS: Uses a steep cubic-bezier curve on the opacity. 
       This holds the box solid during the initial pull-up, then kills 
       the opacity entirely right before the borders overlap. */
    transition: max-height 0.15s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.15s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.12s cubic-bezier(0.6, -0.28, 0.735, 0.045),
                visibility 0.1s;
}

/* Dropdown Activated State */
.search-container.dropdown-open .search-results-box {
    visibility: visible;
    max-height: 520px; 
    pointer-events: auto;
    transform: translateY(0);
    /* OPENING STATE: Fully solid */
    opacity: 1; 
    
    /* OPENING PASS: Linear fade-in alongside the smooth drop down */
    transition: max-height 0.15s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.15s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.1s linear,
                visibility 0.15s;
}

/* Dropdown Scroll Frame */
.search-results-box .search-result-scroll { max-height: 480px; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }

/* Structural Flex Row Baseline */
.search-results-box .search-result-item { 
    position: relative; 
    display: flex; 
    align-items: flex-start;
    gap: 5px; 
    border-bottom: 1px solid var(--glass-border); 
    padding: 5px; 
    text-decoration: none; 
    box-sizing: border-box; 
    transition: background-color 0.25s ease-in-out; 
}
.search-results-box .search-result-item:last-child { border-bottom: 0; }
.search-results-box .search-result-item:hover { background-color: var(--glass-hover); }
.search-results-box .search-result-link-top { position: absolute; top:0; left:0; right:0; bottom:0; opacity:0; z-index: 1; cursor: pointer; }

/* Pre-Allocated, Non-Crushable Media Slot Baseline */
.search-results-box .search-result-image { 
    flex: 0 0 60px; 
    width: 60px; 
    height: 60px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    box-sizing: border-box;
}
.search-results-box .search-result-image img { width: 100%; max-height: 60px; height: auto; display: block; object-fit: contain; }

/* Main Content Column Area */
.search-results-box .search-result-content { 
    flex-grow: 1; 
    min-width: 0; 
    display: block; 
}
.search-results-box .search-result-head { display: flex; justify-content: space-between; align-items: flex-start; }

/* Font Hierarchies */
.search-results-box .search-result-title { font-weight: 700; color: var(--heading-color); text-wrap: balance;}
.search-results-box .search-result-sku { display: block; font-size: 12px; font-family: monospace; color: var(--text-color); line-height: normal; font-weight: bold; }
.search-results-box .search-result-excerpt { display: block; font-size: 12px; color: var(--text-color); line-height: normal; text-align:justify; }
.search-results-box .search-no-result { padding: 15px; color: var(--text-color); text-align: center; }

/* Standard Badge Layout */
.search-result-platforms { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.search-results-box .badge { 
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; 
    background-color: var(--wc-secondary); 
    color: var(--text-color); 
    padding: 2px 6px; border-radius: 3px; white-space: nowrap; 
}

/* Coordinated Far Right UI Elements */
.search-clear { 
    display: none;
    color: var(--text-color); 
    position: absolute; 
    top: 0; 
    right: 15px;
    z-index: 2; 
    cursor: pointer; 
    height: 100%; 
    width: 20px; 
    text-align: center; 
    line-height: 44px; 
    font-size: 20px;
}

.search-loader { 
    display: none;
    border-color: var(--glass-border); 
    border-left-color: var(--accent-color); 
    position: absolute; 
    right: 15px; 
    top: 50%; 
    z-index: 999; 
    margin-top: -10px; 
    width: 20px; 
    height: 20px; 
    border-radius: 50%; 
    border-style: solid; 
    border-width: 3px; 
    animation: search_spin .7s infinite linear; 
    box-sizing: border-box; 
}

/* Dynamic Visibility States */
.search-form.search-processing .search-clear { display: none !important; }
.search-form.search-processing .search-loader { display: block !important; }
.search-form.search-active:not(.search-processing) .search-clear { display: block !important; }
.search-form.search-active:not(.search-processing) .search-loader { display: none !important; }

/* Unified View All Row */
/* Unified View All Row: Converted to a matching, full-width flex row panel */
.search-view-all-row { 
    position: relative;
    display: flex;
    align-items: center;
    border-top: 1px solid var(--glass-border) !important; 
    background-color: transparent !important; 
    padding: 15px; /* Matches standard item row internal padding */
    width: 100%; 
    box-sizing: border-box; 
    text-align: left; /* Snaps text out of center alignment to match list structure */
}

/* Force the hidden anchor overlay to span the entire outer row boundary box */
.search-view-all-row a { 
    display: block; 
    font-weight: bold; 
    color: var(--accent-color) !important; 
    text-decoration: none; 
    padding: 0;
    margin: 0;
}
.search-view-all-row span { 
    margin-inline-start: 75px;
}
/* Ensure hover background state transitions exactly like standard results */
.search-view-all-row:hover { 
    background-color: var(--glass-hover) !important; 
}
/* Custom Scrollbars */
.search-results-box .search-result-scroll { scrollbar-width: thin; scrollbar-color: var(--wc-secondary) transparent; }
.search-results-box .search-result-scroll::-webkit-scrollbar { width: 7px; background-color: transparent; }
.search-results-box .search-result-scroll::-webkit-scrollbar-track { background-color: transparent; }
.search-results-box .search-result-scroll::-webkit-scrollbar-thumb { background-color: var(--wc-secondary); border-radius: 10px; }


/* ==========================================================================
   4. GLOBAL NAVIGATION & SUB-MENUS
   ========================================================================== */


/* ==========================================================================
       1. CONTAINER & FLEX TRACK RESET
       ========================================================================== */
    nav.chromagi-os-menu,
    nav.chromagi-os-menu .os-menu-root,
    nav.chromagi-os-menu .os-dropdown-panel {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        font-family: 'Noto Sans', sans-serif !important;
        box-sizing: border-box !important;
    }
    
    nav.chromagi-os-menu .os-menu-root {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important; 
    }
    
    nav.chromagi-os-menu .os-menu-item {
        font-family: 'Noto Sans', sans-serif !important;
        position: relative !important;
        display: inline-block !important;
        box-sizing: border-box !important;
    }

    /* Top-level Root Text Settings */
    nav.chromagi-os-menu > .os-menu-root > .os-menu-item > a {
        font-weight: 600 !important;
        color: var(--header-text, #333) !important; 
        padding: 0.4em 0.8em !important;
        margin: 0 !important;
    }

    /* ==========================================================================
       2. DROPDOWN PANEL ENGINE (GLASS MORPHISM VARIABLES)
       ========================================================================== */
    nav.chromagi-os-menu .os-dropdown-panel {
        display: none !important;
        position: absolute !important;
        inset-block-start: 100% !important; /* Logical top */
        inset-inline-start: 0 !important;   /* Logical left */
        width: max-content !important; 
        min-width: 180px !important;    
        padding: 6px !important;
        z-index: 99999 !important;
        background: transparent !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
    }
    
    nav.chromagi-os-menu .os-menu-item:hover > .os-dropdown-panel {
        display: flex !important;
    }

    nav.chromagi-os-menu .os-dropdown-panel .os-menu-item:hover > .os-dropdown-panel {
            inset-block-start: -6px !important; 
            inset-inline-start: 100% !important; 
            margin-inline-start: 2px !important; 
        }
/* Exceptions to reverse the direction on small screens */
@media (max-width: 800px) {
    nav.chromagi-os-menu .collection-root .os-dropdown-panel .os-dropdown-panel .os-menu-item:hover > .os-dropdown-panel {
        inset-inline-start: auto !important;
        inset-inline-end: 100% !important;
        margin-inline-start: 0 !important;
        margin-inline-end: 2px !important;
    }
}

@media (max-width: 800px) {
    nav.chromagi-os-menu .menu-item-languages .os-dropdown-panel {
        inset-inline-start: auto !important;
        inset-inline-end: 0 !important;
        margin-inline-start: 0 !important;
        margin-inline-end: 2px !important;
        
    }
}
@media (max-width: 1024px) {
    nav.chromagi-os-menu .menu-item-utilities .os-dropdown-panel {
        inset-inline-start: auto !important;
        inset-inline-end: 0 !important;
        margin-inline-start: 0 !important;
        margin-inline-end: 2px !important;
        
    }

}
    nav.chromagi-os-menu .os-dropdown-panel .os-menu-item {
        display: block !important;
        width: 100% !important;
    }

    /* Glass Panels Layout Backdrop Filter Context Rules */
    nav.chromagi-os-menu .os-dropdown-panel::before {
        content: "" !important;
        position: absolute !important;
        inset-block-start: 0 !important; 
        inset-inline-start: 0 !important; 
        width: 100% !important; 
        height: 100% !important;
        background-color: var(--glass-bg, rgba(240, 240, 240, 0.85)) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border: 1px solid var(--glass-border, rgba(0, 0, 0, 0.1)) !important;
        border-radius: 10px !important;
        box-shadow: var(--glass-shadow, 0 8px 15px rgba(0,0,0,0.1)) !important;
        z-index: -1 !important;
        box-sizing: border-box !important;
    }
    
    /* ==========================================================================
       3. INTERNALS & SPACING SETTINGS
       ========================================================================== */
    nav.chromagi-os-menu a {
        box-sizing: border-box !important;
        font-family: 'Noto Sans', sans-serif !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important; 
        padding: 0.6em 1em !important;
        color: var(--text-color, #43454b) !important;
        text-decoration: none !important;
        border-radius: 8px !important;
        transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out !important;
        white-space: nowrap !important;
        cursor: pointer !important;
        font-size: 14px !important;
    }
    
    nav.chromagi-os-menu .os-dropdown-panel a:hover,
    nav.chromagi-os-menu .os-dropdown-panel a:focus {
        background-color: var(--glass-hover, rgba(150, 150, 150, 0.2)) !important;
        color: var(--heading-color, #111) !important;
    }

    /* Flyout arrows layout push metrics */
    nav.chromagi-os-menu .os-dropdown-panel .os-parent-item > a::after {
        content: "\f054" !important;
        display: inline-block !important;
        font-family: "Font Awesome 5 Free" !important;
        font-weight: 900 !important;
        font-size: 0.75em !important;
        margin-inline-start: auto !important; 
        padding-inline-start: 8em !important;
        opacity: 0.5 !important;
    }
    
    [dir="rtl"] nav.chromagi-os-menu .os-dropdown-panel .os-parent-item > a::after {
        content: "\f053" !important; 
    }

    /* ==========================================================================
       4. NATIVE ICON COLLAPSE LOGIC & VECTOR MAPS
       ========================================================================== */
    nav.chromagi-os-menu .menu-item-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-family: "Font Awesome 6 Free" !important;
        font-weight: 900 !important;
    }
    
    nav.chromagi-os-menu .menu-item-icon::before {
        display: inline-block !important;
        text-align: center !important;
        margin-inline-end: 0.5em !important; 
    }

    nav.chromagi-os-menu .menu-item-label {
        display: inline-flex !important;
        align-items: center !important;
    }

    /* Direct target bindings */
    nav.chromagi-os-menu .menu-item-theme_light .menu-item-icon::before { content: '\f185'; }
    nav.chromagi-os-menu .menu-item-theme_dark .menu-item-icon::before { content: '\f186'; }
    nav.chromagi-os-menu .menu-item-about .menu-item-icon::before { content: '\e4e3'; }
    nav.chromagi-os-menu .menu-item-login .menu-item-icon::before { content: '\f4fe'; }
    nav.chromagi-os-menu .menu-item-logout .menu-item-icon::before { content: '\f502'; }
    nav.chromagi-os-menu .menu-item-contact .menu-item-icon::before { content: '\f199'; }
    nav.chromagi-os-menu .menu-item-privacy .menu-item-icon::before { content: '\f21b'; }

    /* Action toggles configuration layers */
    nav.chromagi-os-menu .language-toggle > a > .menu-item-label { display: none !important; }
    nav.chromagi-os-menu .language-toggle > a > .menu-item-icon::before { content: '\f1ab'; }
    nav.chromagi-os-menu .theme-toggle > a > .menu-item-label { display: none !important; }
    nav.chromagi-os-menu .theme-toggle > a > .menu-item-icon::before { content: '\f042'; }
    nav.chromagi-os-menu .gashapon-toggle .menu-item-icon::before { content: '\f522'; }
    nav.chromagi-os-menu .utility-toggle .menu-item-icon::before { content: '\f0c9'; }
    
    nav.chromagi-os-menu .menu-item-login > a > .menu-item-icon::before { content: '\f502'; }
    nav.chromagi-os-menu .menu-item-contact > a > .menu-item-icon::before { content: '\f199'; }
    nav.chromagi-os-menu .menu-item-privacy > a > .menu-item-icon::before { content: '\f21b'; }
    
    /* Logical Language Menu Settings */
    nav.chromagi-os-menu .language-toggle .os-dropdown-panel {
        text-align: start !important;
    }
    
    nav.chromagi-os-menu .language-toggle .os-dropdown-panel .menu-item-icon::before {
        content: "" !important; 
        display: inline-block !important;
        width: 16px !important;
        height: 12px !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        margin-inline-end: 8px !important; 
        vertical-align: middle !important;
        filter: saturate(0%) !important;
        transition: filter 0.2s ease !important;
    }
    
    nav.chromagi-os-menu .language-toggle .os-dropdown-panel .os-menu-item:hover .menu-item-icon::before {
        filter: saturate(100%) !important;
    }

    /* Flag Map */
    nav.chromagi-os-menu .en .menu-item-icon::before { background-image: var(--flag-gb); }
    nav.chromagi-os-menu .ja_JP .menu-item-icon::before { background-image: var(--flag-jp); }
    nav.chromagi-os-menu .de_DE .menu-item-icon::before { background-image: var(--flag-de); }
    nav.chromagi-os-menu .es_ES .menu-item-icon::before { background-image: var(--flag-es); }
    nav.chromagi-os-menu .fr_FR .menu-item-icon::before { background-image: var(--flag-fr); }
    nav.chromagi-os-menu .fi_FI .menu-item-icon::before { background-image: var(--flag-fi); }
    nav.chromagi-os-menu .hu_HU .menu-item-icon::before { background-image: var(--flag-hu); }
    nav.chromagi-os-menu .it_IT .menu-item-icon::before { background-image: var(--flag-it); }
    nav.chromagi-os-menu .pl_PL .menu-item-icon::before { background-image: var(--flag-pl); }
    nav.chromagi-os-menu .pt_PT .menu-item-icon::before { background-image: var(--flag-pt); }
    nav.chromagi-os-menu .nl_NL .menu-item-icon::before { background-image: var(--flag-nl); }
    nav.chromagi-os-menu .sv_SE .menu-item-icon::before { background-image: var(--flag-se); }
    nav.chromagi-os-menu .ru_RU .menu-item-icon::before { background-image: var(--flag-ru); }
    nav.chromagi-os-menu .th_TH .menu-item-icon::before { background-image: var(--flag-th); }
    nav.chromagi-os-menu .hi_IN .menu-item-icon::before { background-image: var(--flag-in); }
    nav.chromagi-os-menu .tl_PH .menu-item-icon::before { background-image: var(--flag-ph); }
    nav.chromagi-os-menu .id_ID .menu-item-icon::before { background-image: var(--flag-id); }
    nav.chromagi-os-menu .ms_MY .menu-item-icon::before { background-image: var(--flag-my); }
    nav.chromagi-os-menu .vi_VN .menu-item-icon::before { background-image: var(--flag-vn); }
    nav.chromagi-os-menu .ko_KR .menu-item-icon::before { background-image: var(--flag-kr); }
    nav.chromagi-os-menu .zh_CN .menu-item-icon::before { background-image: var(--flag-cn); }
    nav.chromagi-os-menu .zh_TW .menu-item-icon::before { background-image: var(--flag-tw); }
    nav.chromagi-os-menu .ar .menu-item-icon::before { background-image: var(--flag-ps); }

/* ==========================================================================
   DROPDOWN ITEMS ICON SPACING
   ========================================================================== */

/* Default to 0 */
nav.chromagi-os-menu .os-dropdown-panel a .menu-item-icon {
    width: 0;
}

/* Specific list with the syntax error fixed */
.menu-item-about .menu-item-icon,
.menu-item-login .menu-item-icon,
.menu-item-logout .menu-item-icon,
.menu-item-contact .menu-item-icon,
.menu-item-privacy .menu-item-icon,
.menu-item-theme_light .menu-item-icon,
.menu-item-theme_dark .menu-item-icon, 
.en .menu-item-icon,
.ja_JP .menu-item-icon,
.de_DE .menu-item-icon,
.es_ES .menu-item-icon,
.fr_FR .menu-item-icon,
.fi_FI .menu-item-icon,
.hu_HU .menu-item-icon,
.it_IT .menu-item-icon,
.pl_PL .menu-item-icon,
.pt_PT .menu-item-icon,
.nl_NL .menu-item-icon,
.sv_SE .menu-item-icon,
.ru_RU .menu-item-icon,
.th_TH .menu-item-icon,
.hi_IN .menu-item-icon,
.tl_PH .menu-item-icon,
.id_ID .menu-item-icon,
.ms_MY .menu-item-icon,
.vi_VN .menu-item-icon,
.ko_KR .menu-item-icon,
.zh_CN .menu-item-icon,
.zh_TW .menu-item-icon,
.ar .menu-item-icon {
    width: 1.6em !important;
}



/* ==========================================================================
   5. BREADCRUMBS
   ========================================================================== */

.chromagi-breadcrumbs {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: .8em;
    font-weight: 300;
    margin-block: 1em;
}

/* Base Link Styling with Fluid Expanding Line */
.chromagi-breadcrumbs a,
.site-footer a {
    opacity: 0.8;
    color: var(--text-color) !important;
    text-decoration: none !important;
    padding-end: 1px;
    
    /* Draws a 1px flat line using your accent color */
    background-image: linear-gradient(var(--accent-color), var(--accent-color));
    
    /* Positions it at the bottom, starting at 0% width */
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    
    transition: background-size 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}

/* Hover States */
.chromagi-breadcrumbs a:hover,
.site-footer a:hover { 
    opacity: 1; 
    background-size: 100% 1px;
    color: var(--accent-color) !important;
}

/* RTL Override for Expanding Line */
html[dir="rtl"] .chromagi-breadcrumbs a,
html[dir="rtl"] .site-footer a {
    background-position: 100% 100%;
}

/* Logical Property Breadcrumb Separators */
.chromagi-breadcrumbs .breadcrumb-home a::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f015";
    margin-inline-end: 0.5em;
}

.breadcrumb-category-group::before, 
.breadcrumb-category + .breadcrumb-subcategory::before, 
.breadcrumb-product::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: .875em;
    opacity: 0.25;
    margin-inline: 0.5em;
    content: "\f054";
}

/* The single RTL override for chevrons */
[dir="rtl"] .breadcrumb-product::before {
    content: none;
}

[dir="rtl"] .breadcrumb-category-group::before, 
[dir="rtl"] .breadcrumb-category + .breadcrumb-subcategory::before, 
[dir="rtl"] .breadcrumb-product::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: .875em;
    opacity: 0.25;
    margin-inline: 0.5em;
    content: "\f053" !important;
}

.breadcrumb-subcategory + .breadcrumb-subcategory::before {
    content: "·";
    opacity: 0.25;
    margin-inline: 0.25em;
}

@media (max-width: 768px) {
    .breadcrumb-product { display: none; }
}


/* ==========================================================================
   6. PAGE HEADING SECTIONS
   ========================================================================== */

/* Dark Mode Strategy: Invert B&W Logos 
   (Rely strictly on the JS data-theme, no media queries) */
html[data-theme="dark"] img.is-invertible,
body.dark-mode img.is-invertible {
    filter: invert(1) brightness(0.9) contrast(1.1);
    transition: filter 0.3s ease;
}


/* ==========================================================================
   7. CUSTOM ITEM LOOP (Grid)
   ========================================================================== */

.itemloop-item {
    display: flex; 
    align-items: stretch; 
    list-style: none;
}

@media (min-width: 120px) { .itemloop-item { flex: 0 0 calc((100% - var(--category-gap)) / 2); } }
@media (min-width: 240px) { .itemloop-item { flex: 0 0 calc((100% - 2 * var(--category-gap)) / 3); } }
@media (min-width: 480px) { .itemloop-item { flex: 0 0 calc((100% - 3 * var(--category-gap)) / 4); } }
@media (min-width: 720px) { .itemloop-item { flex: 0 0 calc((100% - 4 * var(--category-gap)) / 5); } }
@media (min-width: 1024px) { .itemloop-item { flex: 0 0 calc((100% - 5 * var(--category-gap)) / 6); } }
@media (min-width: 1280px) { .itemloop-item { flex: 0 0 calc((100% - 9 * var(--category-gap)) / 8); } }

.itemloop-item a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    width: 100%;
    text-decoration: none;
    aspect-ratio: 1 / 1.1;
}

.itemloop-item-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    flex-shrink: 0;
}
.itemloop-item-image span {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.itemloop-item-image img, li.product-category img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    display: block;
    transition: all 0.5s ease;
    transform: scale(0.98);
}
.itemloop-item-image img:hover, li.product-category img:hover { transform: scale(1); }

.itemloop-item-title {
    display: flex;
    align-items: center;
    height: 2rem;
    font-size: .75em;
    text-align: center;
    margin: 0; 
    line-height: 1.2em;
}
.itemloop-item-title-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: box;
    line-clamp: 2;
    box-orient: vertical;
    overflow: hidden;
    text-wrap: balance;
}

@media (max-width: 480px) {
    .itemloop-item-title { font-size: 0.7em; font-weight: 400; overflow: auto; }
}
.itemloop-item-sku { font-size: 0.5em; }

/* ==========================================================================
   8. DESKTOP FOOTER SECTION AND MOBILE FOOTER BAR
   ========================================================================== */

/* Footer UI */
.site-footer {
    padding: 0; 
    border-block-start: 1px solid var(--wc-secondary); 
}

/* --- CHROMAGI FOOTER STRUCTURE --- */
.chromagi-footer-grid {
    display: flex;
    justify-content: flex-end; /* Modern "float right" */
    gap: 10vw; /* Scales the gap cleanly on larger monitors */
    padding: 3rem 0; 
}

.chromagi-footer-grid ul li {
    margin-bottom: 0.5rem;
}

.chromagi-footer-grid ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Mobile: Switch to a vertical column and align left for readability */
@media (max-width: 768px) {
    .chromagi-footer-grid {
        justify-content: space-evenly;
        gap: 2rem;
        padding-bottom: 4rem; 
    }
}

.footer-heading {
    padding-bottom: 1em;
}

.site-footer .widget { 
    margin: 0;
}
.site-footer h2 {
    font-size: 0.9em;
    font-weight: 600;
}
.site-footer p, 
.site-footer ul { 
    font-size: 0.8em;
    font-weight: 400;
}







/* ==========================================================================
   IN MIGRATION: SEARCH BAR (UPDATED FOR NATIVE CUSTOM HANDLER)
   ========================================================================== */

.aws-container {
    margin-inline-start: 1em;
}

input.aws-search-field { border-radius: 4px !important; }

/* Fixed Selector: Underscore to Hyphen */
.aws-search-result .aws-result-image img { max-height: 8em; object-fit: contain; }

/* --- 1. BASE SEARCH INPUT (RESTING STATE) --- */

.aws-search-label {
    display: none;
}

.aws-container .aws-search-field {
    background-color: var(--site-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--glass-border) !important;
    
    font-size: 12px;
}
.aws-wrapper {
        height: 36px;
}
.aws-container .aws-search-form {
    height: 42px !important; 
}

.aws-container .aws-search-field {
    height: 100% !important;
    line-height: 42px !important; 
    padding-block: 0 !important; 
    padding-inline-start: 12px !important; 
}

.aws-container .search-results-container {
    top: 50% !important;
    margin-top: -10px !important; 
}

.aws-container .aws-search-form .aws-search-field {
    border-radius: 10px !important;
    transition: border-radius 0.1s ease; 
}

/* Completely remove the theme's injected magnifying glass */
.widget_search form:not(.wp-block-search)::before,
.widget_product_search form:not(.wp-block-search)::before {
    content: "" !important; 
    display: none !important; 
}

/* --- 2. GLASSMORPHISM & DYNAMIC BORDERS --- */

/* The Results Pane: Base Glass Effect */
.aws-search-result {
    background-color: var(--glass-bg) !important; 
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    border: 1px solid var(--glass-border) !important;
    border-block-start: none !important; 
    border-radius: 0 0 10px 10px !important;
    overflow: hidden !important;
    box-shadow: var(--glass-shadow) !important;
}

/* The Search Input: Turn to Glass ONLY when results are open */
body:has(.aws-search-result:not([style*="display: none"])) .aws-container .aws-search-form .aws-search-field {
    background-color: var(--glass-bg) !important; 
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    border: 1px solid var(--glass-border) !important;
    border-block-end-color: transparent !important; 
    border-radius: 10px 10px 0 0 !important; 
}

/* Active State: Flatten the bottom corners ONLY when results are visible */
body:has(.aws-search-result:not([style*="display: none"])) .aws-container .aws-search-form .aws-search-field {
    border-radius: 10px 10px 0 0 !important;
}

/* --- 3. RESULT ITEMS --- */

/* Fixed Selector: Underscore to Hyphen */
.aws-search-result .aws-result-item {
    background-color: transparent !important;
    border-radius: 10px !important; 
    border: none !important;
    box-shadow: none !important;
    transition: background-color 0.25s ease-in-out !important; 
    margin-block: 2px !important;
    margin-inline: 4px !important;
}

/* Fixed Selector: Added padding wrapper rules for anchor layouts inside custom nodes */
.aws-search-result .aws-result-item a {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 8px !important;
    text-decoration: none !important;
    color: var(--text-color) !important;
}

/* Fixed Selector: Cleaned up typographic hierarchies to support custom spans */
.aws-search-result .aws-title {
    display: block !important;
    font-weight: 500;
}

.aws-search-result .aws-sku,
.aws-search-result .aws-excerpt {
    display: block !important;
    font-size: .8em !important;
    opacity: 0.8;
}

.aws-search-result .aws-result-item:hover {
    background-color: var(--glass-hover) !important; 
}

/* --- 4. SCROLLBARS & CONTAINER STRUCTURAL ALIGNMENT --- */

/* Fixed Selector: Maps to the native scrolling container layout inside your JS */
.aws-search-results-wrapper {
    max-height: 450px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--wc-secondary) transparent !important;
}

.aws-search-results-wrapper::-webkit-scrollbar {
    width: 7px;
    background-color: transparent !important;
}

.aws-search-results-wrapper::-webkit-scrollbar-track {
    background-color: transparent !important;
    box-shadow: none;
}

.aws-search-results-wrapper::-webkit-scrollbar-thumb {
    background-color: var(--wc-secondary) !important;
    border-radius: 10px; 
}

/* --- 5. BUTTON & ICON (DARK MODE SYNC) --- */
[data-theme*="dark"] .aws-container .aws-search-form .aws-form-btn {
    background-color: var(--btn-bg) !important;
    border-color: var(--glass-border) !important;
}

[data-theme*="dark"] .aws-container .aws-search-form .aws-search-btn_icon {
    color: var(--header-text) !important;
}