/* ==========================================================================
           1. CSS Variables & Reset
           ========================================================================== */
        

        :root {
            --page-max: 1100px;
            --primary: #16a34a;       --primary-hover: #15803d; --primary-light: #dcfce7;
            --primary-rgb: 22, 163, 74;
            --accent: #f97316;        --accent-dark: #c2410c;   --accent-light: #ffedd5;
            --bg-color: #faf7f0;      --surface: #ffffff;
            --text-main: #1c1917;     --text-body: #44403c;     --text-muted: #78716c;
            --border: #d6d3d1;        --border-focus: #86efac;
            --error: #ef4444;         --error-light: #fee2e2;
            --success: #16a34a;       --warning: #f59e0b;
            --header-from: #14532d;   --header-to: #052e16;     --header-muted: #bbd8c3;

            --primary-ink: var(--primary-hover); --on-accent: #fff;
            --line: #e7e5e4;          --line-soft: #f1efec;     --surface-alt: #fcfbf9;   --surface-rgb: 255 255 255;

            --radius-md: 12px;        --radius-sm: 8px;
            --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
            --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.05);
            --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.04);
            --shadow-glow: 0 0 0 4px rgba(var(--primary-rgb), 0.18);
            --shadow-error: 0 0 0 4px rgba(239, 68, 68, 0.15);

            --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

            /* Logo colours */
            --logo-from: #4ade80;     --logo-to: #15803d;
            --leaf-from: #f97316;     --leaf-to: #fdba74;
        }

        @media (min-width: 1500px) { :root { --page-max: 1280px; } }

        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: 'Inter', system-ui, sans-serif; background-color: var(--bg-color); color: var(--text-main); line-height: 1.5; padding: 50px 20px; }

        /* ==========================================================================
           2. Animations
           ========================================================================== */
        @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

        .form-section { opacity: 0; animation: fadeInUp 0.5s ease-out forwards; }
        .form-section:nth-child(1) { animation-delay: 0.1s; }
        .form-section:nth-child(2) { animation-delay: 0.2s; }
        .form-section:nth-child(3) { animation-delay: 0.3s; }
        .form-section:nth-child(4) { animation-delay: 0.4s; }
        .form-section:nth-child(5) { animation-delay: 0.5s; }
        .shake-animation { animation: shake 0.3s ease-in-out; }

        /* ==========================================================================
           3. Layout
           ========================================================================== */
        .enterprise-form-container { max-width: var(--page-max); margin: 0 auto; background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
        .form-header { background: linear-gradient(135deg, var(--header-from) 0%, var(--header-to) 100%); color: white; padding: 40px; position: relative; overflow: hidden; }
        .form-header::after { content: ''; position: absolute; top: -50px; right: -50px; width: 250px; height: 250px; background: linear-gradient(135deg, var(--primary), var(--primary-hover)); border-radius: 50%; opacity: 0.2; filter: blur(40px); }
        .form-header h2 { font-size: 1.8rem; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.025em; position: relative; z-index: 1;}
        .form-header p { color: var(--header-muted); font-size: 1rem; position: relative; z-index: 1;}
        .form-body { padding: 40px; }
        .form-section { margin-bottom: 45px; }
        .form-section-title { font-size: 1.1rem; font-weight: 600; color: var(--primary); border-bottom: 2px solid var(--primary-light); padding-bottom: 12px; margin-bottom: 25px; text-transform: uppercase; letter-spacing: 0.05em; display: flex; align-items: center; gap: 10px; }

        .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
        .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
        @media (max-width: 768px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

        /* ==========================================================================
           4. Form Controls & States
           ========================================================================== */
        .form-group { display: flex; flex-direction: column; margin-bottom: 24px; position: relative; }
        .form-group label { font-size: 0.85rem; font-weight: 600; margin-bottom: 8px; color: var(--text-main); }
        .required::after { content: " *"; color: var(--error); }

        .form-control { width: 100%; padding: 12px 16px; font-size: 0.95rem; font-family: inherit; color: var(--text-main); background-color: var(--bg-color); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: var(--transition); box-shadow: var(--shadow-sm); }
        .form-control:hover:not(:disabled) { border-color: var(--border-focus); }
        .form-control:focus { outline: none; border-color: var(--primary); background-color: var(--surface); box-shadow: var(--shadow-glow); }
        .form-control::placeholder { color: #a8a29e; }

        textarea.form-control { resize: vertical; min-height: 100px; }

        /* Disabled & Readonly */
        .form-control:disabled, .form-control[readonly] { background-color: var(--line); color: #78716c; cursor: not-allowed; border-color: #d6d3d1; box-shadow: none; }
        .form-control[readonly] { cursor: default; background-color: var(--line-soft); }

        .help-text { font-size: 0.8rem; color: var(--text-muted); margin-top: 6px; }

        /* Password Wrapper */
        .password-wrapper { position: relative; width: 100%; }
        .password-toggle { position: absolute; right: 14px; top: 12px; cursor: pointer; color: var(--text-muted); transition: color 0.2s; }
        .password-toggle:hover { color: var(--primary); }
        .password-wrapper input { padding-right: 45px; }

        /* Custom Native Color Picker */
        input[type="color"].form-control { padding: 4px; height: 46px; cursor: pointer; }
        input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
        input[type="color"]::-webkit-color-swatch { border: none; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1); }

        /* Checkboxes & Radios */
        .radio-group, .checkbox-group { display: flex; gap: 20px; flex-wrap: wrap; padding: 10px 0; }
        .choice-label { display: flex; align-items: center; font-weight: 500; cursor: pointer; font-size: 0.95rem; }
        .choice-label input { appearance: none; -webkit-appearance: none; margin-right: 10px; width: 20px; height: 20px; border: 2px solid var(--border); transition: var(--transition); cursor: pointer; position: relative; background: var(--surface); }
        .choice-label input[type="checkbox"] { border-radius: 6px; }
        .choice-label input[type="radio"] { border-radius: 50%; }
        .choice-label:hover input { border-color: var(--primary); }
        .choice-label input:checked { background-color: var(--primary); border-color: var(--primary); box-shadow: var(--shadow-glow); }
        .choice-label input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 5px; top: 1px; width: 6px; height: 11px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); animation: checkmark 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
        .choice-label input[type="radio"]:checked::after { content: ''; position: absolute; top: 4px; left: 4px; width: 8px; height: 8px; background: white; border-radius: 50%; animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
        @keyframes checkmark { 0% { height: 0; width: 0; opacity: 0; } 100% { height: 11px; width: 6px; opacity: 1; } }
        @keyframes popIn { 0% { transform: scale(0); } 100% { transform: scale(1); } }

        /* ==========================================================================
           5. Plugins & Advanced UI
           ========================================================================== */
        /* Select2 */
        .select2-container--default .select2-selection--single { height: 46px; border: 1px solid var(--border); border-radius: var(--radius-sm); display: flex; align-items: center; background-color: var(--bg-color); transition: var(--transition); box-shadow: var(--shadow-sm); }
        .select2-container--default .select2-selection--single:hover { border-color: var(--border-focus); }
        .select2-container--open .select2-selection--single, .select2-container--default .select2-selection--single:focus { outline: none; background-color: var(--surface); border-color: var(--primary) !important; box-shadow: var(--shadow-glow) !important; }
        .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text-main); padding-left: 16px; font-size: 0.95rem; }
        .select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px; right: 10px; }
        .select2-dropdown { border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); overflow: hidden; }
        .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: var(--primary); }
        .select2-container--default .select2-results__group { background: var(--line-soft); color: var(--text-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }

        /* Custom Multi-Select */
        .ms-container { position: relative; width: 100%; }
        .ms-header { width: 100%; padding: 12px 16px; background: var(--bg-color); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 0.95rem; min-height: 46px; transition: var(--transition); box-shadow: var(--shadow-sm); }
        .ms-container.active .ms-header { border-color: var(--primary); background: var(--surface); box-shadow: var(--shadow-glow); }
        .ms-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); margin-top: 8px; z-index: 1000; display: none; overflow: hidden; }
        .ms-container.active .ms-dropdown { display: block; animation: fadeInUp 0.2s ease-out forwards; }
        .ms-search-box { padding: 12px; border-bottom: 1px solid var(--border); background: var(--bg-color); }
        .ms-search-box input { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); outline: none; transition: var(--transition); }
        .ms-search-box input:focus { border-color: var(--primary); box-shadow: var(--shadow-glow); }
        .ms-options { max-height: 220px; overflow-y: auto; padding: 8px 0; }
        .ms-option { padding: 10px 16px; display: flex; align-items: center; cursor: pointer; font-size: 0.95rem; }
        .ms-option:hover { background-color: var(--bg-color); }
        .ms-option input { margin-right: 12px; accent-color: var(--primary); transform: scale(1.2); }
        .ms-option.hidden { display: none; }
        .badge { display: inline-flex; align-items: center; background: var(--primary-light); color: var(--primary-ink); font-weight: 600; font-size: 0.8rem; padding: 4px 10px; border-radius: 20px; margin-right: 6px; }

        /* File Dropzone */
        .dropzone { border: 2px dashed var(--border); border-radius: var(--radius-md); padding: 40px 20px; text-align: center; background-color: var(--bg-color); cursor: pointer; transition: var(--transition); position: relative; overflow: hidden; }
        .dropzone::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--primary); opacity: 0; transition: var(--transition); z-index: 0; }
        .dropzone:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-md); }
        .dropzone.dragover { border-color: var(--primary); transform: scale(1.02); }
        .dropzone.dragover::before { opacity: 0.05; }
        .dropzone * { position: relative; z-index: 1; }
        .dropzone input[type="file"] { position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; cursor: pointer; z-index: 2; }
        .dropzone-icon { font-size: 2.5rem; color: var(--primary); margin-bottom: 12px; transition: transform 0.3s; }
        .dropzone:hover .dropzone-icon { transform: translateY(-5px); }

        .file-list { margin-top: 15px; list-style: none; }
        .file-list li { background: var(--surface); padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; font-size: 0.9rem; display: flex; justify-content: space-between; align-items: center; box-shadow: var(--shadow-sm); animation: fadeInUp 0.3s ease-out; }
        .remove-file { color: var(--text-muted); cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: var(--transition); background: var(--bg-color); }
        .remove-file:hover { color: var(--error); background: var(--error-light); }

        /* Toggles, Sliders, Ratings */
        .toggle-switch { position: relative; display: inline-block; width: 52px; height: 28px; }
        .toggle-switch input { opacity: 0; width: 0; height: 0; }
        .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--border); transition: 0.4s; border-radius: 28px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); }
        .toggle-slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; transition: 0.4s; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
        .toggle-switch input:checked + .toggle-slider { background-color: var(--success); }
        .toggle-switch input:focus + .toggle-slider { box-shadow: 0 0 1px var(--success), var(--shadow-glow); }
        .toggle-switch input:checked + .toggle-slider:before { transform: translateX(24px); }
        .toggle-wrapper { display: flex; align-items: center; gap: 12px; height: 46px; }

        .range-wrapper { display: flex; align-items: center; gap: 15px; height: 46px; }
        .range-wrapper input[type="range"] { flex-grow: 1; accent-color: var(--primary); cursor: pointer; }
        .range-output { background: var(--primary-light); color: var(--primary-ink); padding: 4px 12px; border-radius: 20px; font-weight: 700; font-size: 0.85rem; min-width: 50px; text-align: center; }

        .star-rating { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 6px; height: 46px; align-items: center; }
        .star-rating input { display: none; }
        .star-rating label { font-size: 2rem; color: #d6d3d1; cursor: pointer; transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); line-height: 1; }
        .star-rating input:checked ~ label, .star-rating label:hover, .star-rating label:hover ~ label { color: var(--warning); transform: scale(1.15); }

        /* ==========================================================================
           6. Validation & Toasts
           ========================================================================== */
        .invalid-feedback { display: none; color: var(--error); font-size: 0.85rem; margin-top: 6px; font-weight: 500; }
        .form-control.is-invalid { border-color: var(--error); box-shadow: var(--shadow-error); background-color: var(--error-light); }
        .is-invalid + .select2-container--default .select2-selection--single { border-color: var(--error); box-shadow: var(--shadow-error); background-color: var(--error-light); }
        .ms-container.is-invalid .ms-header { border-color: var(--error); box-shadow: var(--shadow-error); background-color: var(--error-light); }

        .toast-container { position: fixed; bottom: 30px; right: 30px; z-index: 9999; display: flex; flex-direction: column; gap: 15px; }
        .toast { min-width: 320px; padding: 16px 20px; background: var(--surface); border-radius: var(--radius-md); box-shadow: 0 10px 40px -10px rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: space-between; animation: slideInRight 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; border-left: 6px solid; }
        .toast-success { border-color: var(--success); } .toast-warning { border-color: var(--warning); } .toast-error { border-color: var(--error); }
        .toast.hiding { animation: fadeOutRight 0.4s ease-out forwards; }
        .toast-icon { margin-right: 15px; font-size: 1.4rem; }
        .toast-message { font-size: 0.95rem; font-weight: 500; color: var(--text-main); flex-grow: 1; }
        .toast-close { cursor: pointer; color: var(--text-muted); background: none; border: none; font-size: 1.5rem; transition: var(--transition); }
        .toast-close:hover { color: var(--error); transform: scale(1.1); }

        @keyframes slideInRight { 0% { transform: translateX(120%); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
        @keyframes fadeOutRight { 0% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(120%); opacity: 0; } }

        /* ==========================================================================
           7. Buttons & WYSIWYG
           ========================================================================== */
        .form-actions { padding: 30px 40px; background: var(--bg-color); border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 16px; border-radius: 0 0 var(--radius-md) var(--radius-md); }
        .btn { padding: 12px 28px; font-size: 1rem; font-weight: 600; border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition); border: none; display: inline-flex; align-items: center; justify-content: center; }
        .btn:active { transform: scale(0.97); }
        .btn-outline { background: var(--surface); border: 2px solid var(--border); color: var(--text-main); }
        .btn-outline:hover { border-color: var(--text-muted); background: var(--bg-color); }
        .btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-hover)); color: white; box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3); }
        .btn-primary:hover { box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.4); transform: translateY(-1px); }

        .note-editor.note-frame { border-color: var(--border) !important; border-radius: var(--radius-sm) !important; overflow: hidden; box-shadow: var(--shadow-sm); }
        .note-toolbar { background-color: var(--bg-color) !important; border-bottom: 1px solid var(--border) !important; }



        /* Adjusted Body for Sidebar Layout */
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-main);
            line-height: 1.5;
            margin: 0;
            padding: 0;
        }

        /* ==========================================================================
           3. Sidebar & Main Layout
           ========================================================================== */
        /* The Left Sidebar */
        .omni-sidebar {
            width: var(--side-w);
            background-color: var(--surface);
            border-right: 1px solid var(--border);
            box-shadow: var(--shadow-sm);
            height: 100vh;
            position: fixed;
            top: 0;
            left: 0;
            overflow-y: auto;
            z-index: 1050;
            display: flex;
            flex-direction: column;
        }

        .omni-sidebar-header {
            padding: 24px 20px;
            border-bottom: 1px solid var(--border);
            position: sticky;
            top: 0;
            background: var(--surface);
            z-index: 2;
        }

        .omni-brand {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--text-main);
            text-decoration: none;
            letter-spacing: -0.025em;
        }
        .omni-brand svg { color: var(--primary); }

        /* Main Content Wrapper */
        .omni-main-content {
            margin-left: var(--side-w); /* Offset by sidebar width */
            padding: 40px;
            min-height: 100vh;
        }

        /* ==========================================================================
           3.1 Accordion Navigation (Multi-Level)
           ========================================================================== */
        /* Base List Styling */
        .omni-nav-menu, .omni-dropdown-menu {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .omni-nav-menu { padding: 15px 0; }
        .omni-nav-item { margin-bottom: 2px; }

        /* All Links */
        .omni-nav-link {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 20px;
            font-size: 0.95rem;
            font-weight: 500;
            color: var(--text-main);
            text-decoration: none;
            transition: background-color 0.2s, color 0.2s;
            border-left: 3px solid transparent;
            cursor: pointer;
        }

        .omni-nav-link:hover {
            background-color: var(--bg-color);
            color: var(--primary);
        }

        /* Submenu Container (Hidden by JS initially) */
        .omni-dropdown-menu {
            display: none;
            background-color: var(--bg-color);
            border-top: 1px solid var(--border);
            border-bottom: 1px solid var(--border);
        }

        /* Arrow Icons for Submenus */
        .nav-arrow {
            width: 16px;
            height: 16px;
            opacity: 0.5;
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* Rotated state applied via JS toggle */
        .nav-arrow.open {
            transform: rotate(180deg);
            opacity: 1;
            color: var(--primary);
        }



    /* ==========================================================================
       8. Active Menu Item
       ========================================================================== */
    /* .active = the current category and its ancestors; .current = the category itself */
    .omni-nav-link.active { color: var(--primary); }
    .omni-nav-link.current { background-color: var(--primary-light); }
    .omni-sidebar .omni-nav-link.current { border-left-color: var(--primary); }

    /* ==========================================================================
       9. Page Header Extras (breadcrumb, menu switcher)
       ========================================================================== */
    .omni-breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; font-size: 0.85rem; color: #a8a29e; margin-bottom: 12px; position: relative; z-index: 1; }
    .omni-breadcrumb li + li::before { content: "›"; margin-right: 6px; }
    .omni-breadcrumb a { color: #d6d3d1; text-decoration: none; transition: var(--transition); }
    .omni-breadcrumb a:hover { color: white; }

    .omni-switcher { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; position: relative; z-index: 1; font-size: 0.85rem; color: #a8a29e; }
    .omni-switcher a { color: #d6d3d1; text-decoration: none; padding: 4px 12px; border-radius: 20px; border: 1px solid var(--text-body); transition: var(--transition); }
    .omni-switcher a:hover { color: white; border-color: var(--primary); }
    .omni-switcher a.active { background: var(--primary); border-color: var(--primary); color: white; }

    /* ==========================================================================
       10. Chips, Cards & Grids
       ========================================================================== */
    .omni-chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
    .omni-chip-list .badge { text-decoration: none; padding: 6px 14px; margin: 0; transition: var(--transition); }
    .omni-chip-list .badge:hover { background: var(--primary); color: white; }

    .omni-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; }
    .omni-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); overflow: hidden; text-decoration: none; color: var(--text-main); transition: var(--transition); }
    .omni-card:hover { border-color: var(--border-focus); box-shadow: var(--shadow-md); transform: translateY(-2px); }
    .omni-card-media { aspect-ratio: 1; background: var(--bg-color); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--line); }
    .omni-card-media img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
    .omni-card-body { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex-grow: 1; }
    .omni-card-title { font-size: 0.95rem; font-weight: 600; line-height: 1.35; }
    .omni-card-meta { font-size: 0.8rem; color: var(--text-muted); }
    .omni-card-links { list-style: none; display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
    .omni-card-links a { color: var(--text-muted); font-size: 0.9rem; text-decoration: none; }
    .omni-card-links a:hover { color: var(--primary); }

    .omni-price-block { margin-top: auto; }
    .omni-price { font-weight: 700; color: var(--text-main); display: flex; align-items: baseline; gap: 8px; }
    .omni-save { display: block; margin-top: 2px; font-size: 0.78rem; font-weight: 600; color: var(--success); }
    .omni-price-old { font-weight: 500; font-size: 0.85rem; color: var(--text-muted); text-decoration: line-through; }
    .omni-stock { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
    .omni-stock.in_stock { color: var(--success); }
    .omni-stock.out_of_stock, .omni-stock.unavailable { color: var(--error); }
    .omni-stock.backorder, .omni-stock.unknown { color: var(--warning); }

    .omni-empty { padding: 40px 20px; text-align: center; color: var(--text-muted); border: 2px dashed var(--border); border-radius: var(--radius-md); background: var(--bg-color); }

    /* ==========================================================================
       11. Product Detail
       ========================================================================== */
    .omni-product { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 40px; }
    .omni-product-media { background: var(--bg-color); border: 1px solid var(--border); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; aspect-ratio: 1; }
    .omni-product-media img { width: 100%; height: 100%; object-fit: contain; padding: 24px; }
    .omni-product .omni-price { font-size: 1.6rem; }
    .omni-spec-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
    .omni-spec-table th, .omni-spec-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
    .omni-spec-table th { width: 35%; color: var(--text-muted); font-weight: 600; }
    @media (max-width: 768px) { .omni-product { grid-template-columns: 1fr; } }

    /* ==========================================================================
       12. Pagination
       ========================================================================== */
    .omni-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; list-style: none; margin-top: 40px; }
    .omni-pagination a, .omni-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text-main); text-decoration: none; font-weight: 500; font-size: 0.9rem; transition: var(--transition); }
    .omni-pagination a:hover { border-color: var(--primary); color: var(--primary); }
    .omni-pagination .active span { background: var(--primary); border-color: var(--primary); color: white; }
    .omni-pagination .disabled span { color: #a8a29e; background: var(--bg-color); }

    /* ==========================================================================
       13. Product Tabs
       ========================================================================== */
    .omni-tab-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; background: var(--bg-color); border: 1px solid var(--line); border-radius: 999px; width: fit-content; max-width: 100%; margin-bottom: 24px; }
    .omni-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; font: inherit; font-weight: 600; font-size: 0.88rem; color: var(--text-muted); background: transparent; border: none; border-radius: 999px; cursor: pointer; transition: var(--transition); }
    .omni-tab:hover { color: var(--primary); background: rgba(var(--primary-rgb), 0.08); }
    .omni-tab[aria-selected="true"] { color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-hover)); box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.35); }
    .omni-tab:focus-visible { outline: none; box-shadow: var(--shadow-glow); }
    .omni-tab-icon { display: inline-flex; }
    .omni-tab-panel { padding: 24px 28px; background: linear-gradient(180deg, var(--bg-color), var(--surface)); border: 1px solid var(--line); border-radius: var(--radius-md); animation: fadeInUp 0.3s ease-out; }
    .omni-tab-panel[hidden] { display: none; }
    .omni-richtext { line-height: 1.7; color: var(--text-body); }
    .omni-richtext p { margin-bottom: 12px; }
    .omni-richtext p:last-child, .omni-richtext ul:last-child { margin-bottom: 0; }
    .omni-richtext ul { list-style: none; padding: 0; margin-bottom: 12px; display: grid; gap: 10px; }
    .omni-richtext ul li { position: relative; padding-left: 30px; }
    .omni-richtext ul li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center / 12px no-repeat; }
    .omni-richtext ol { padding-left: 22px; margin-bottom: 12px; }
    .omni-richtext table { border-collapse: collapse; margin-bottom: 12px; width: 100%; }
    .omni-richtext th, .omni-richtext td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; }
    .omni-tab-panel .omni-spec-table tr:nth-child(even) { background: rgba(var(--primary-rgb), 0.04); }
    @media (max-width: 600px) { .omni-tab-list { border-radius: var(--radius-md); width: 100%; } .omni-tab { flex: 1 1 auto; justify-content: center; padding: 10px 12px; } .omni-tab-panel { padding: 18px; } }

    /* ==========================================================================
       14. Page Heading & Menu Layout Picker
       ========================================================================== */
    .omni-crumbs { padding: 14px 40px; background: var(--surface); border-bottom: 1px solid var(--line); border-radius: var(--radius-md) var(--radius-md) 0 0; }
    .omni-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; list-style: none; font-size: 0.85rem; color: var(--text-muted); }
    .omni-crumbs li + li::before { content: "/"; margin-right: 8px; color: #d6d3d1; }
    .omni-crumbs a { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); text-decoration: none; font-weight: 500; transition: var(--transition); }
    .omni-crumbs a:hover { color: var(--primary); }
    .omni-crumbs li:last-child a, .omni-crumbs [aria-current] { color: var(--text-main); font-weight: 600; }

    .form-header { padding: 32px 40px; }
    .form-header:not(.has-crumbs) { border-radius: var(--radius-md) var(--radius-md) 0 0; }
    .form-header h2 { font-size: 1.7rem; line-height: 1.25; margin-bottom: 0; }
    .form-header h2 + p { margin-top: 6px; }
    .omni-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin-top: 16px; position: relative; z-index: 1; }
    .omni-hero-chips li { padding: 5px 14px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); color: var(--line); }
    .omni-hero-chips li.brand { background: rgba(var(--primary-rgb), 0.28); border-color: rgba(134, 239, 172, 0.5); color: #fff; }

    .omni-layout-picker { position: fixed; right: 20px; bottom: calc(20px + var(--compare-h, 0px)); z-index: 1100; }
    /* Keep the picker clear of the fixed menu bar, whichever side it sits on. */
    .menu-right .omni-layout-picker { right: calc(var(--side-w) + 20px); }
    .menu-bottom .omni-layout-picker { bottom: calc(88px + var(--compare-h, 0px)); }
    .omni-layout-picker summary { list-style: none; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); box-shadow: var(--shadow-md); cursor: pointer; transition: var(--transition); }
    .omni-layout-picker summary::-webkit-details-marker { display: none; }
    .omni-layout-picker summary:hover, .omni-layout-picker[open] summary { color: var(--primary); border-color: var(--primary); }
    .omni-layout-panel { position: absolute; right: 0; bottom: 56px; width: 220px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); animation: fadeInUp 0.2s ease-out; }
    .omni-layout-panel strong { display: block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 10px; }
    /* No empty band above the top menu bar; slimmer top spacing for the other layouts. */
    body.menu-top { padding-top: 0; }
    body.menu-bottom { padding-top: 24px; }
    body.menu-left .omni-main-content, body.menu-right .omni-main-content { padding-top: 24px; }
    .omni-layout-options { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
    .omni-layout-options a { text-align: center; padding: 8px; border-radius: var(--radius-sm); border: 1px solid var(--border); font-size: 0.85rem; font-weight: 600; color: var(--text-main); text-decoration: none; transition: var(--transition); }
    .omni-layout-options a:hover { border-color: var(--primary); color: var(--primary); }
    .omni-layout-options a.active { background: var(--primary); border-color: var(--primary); color: #fff; }
    @media (max-width: 768px) { .omni-crumbs, .form-header { padding-left: 20px; padding-right: 20px; } }

    /* ==========================================================================
       15. Catalogue Toolbar, Cards & Skeletons
       ========================================================================== */
    .omni-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 24px; }
    .omni-search { position: relative; flex: 1 1 220px; max-width: 360px; }
    .omni-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
    .omni-search .form-control { padding-left: 38px; }
    .omni-sort { width: auto; min-width: 180px; }
    .omni-toggle input { position: absolute; opacity: 0; pointer-events: none; }
    .omni-toggle span { display: inline-flex; align-items: center; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: 0.85rem; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: var(--transition); user-select: none; }
    .omni-toggle span:hover { border-color: var(--primary); color: var(--primary); }
    .omni-toggle input:checked + span { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3); }
    .omni-toggle input:focus-visible + span { box-shadow: var(--shadow-glow); }
    .omni-result-count { margin-left: auto; font-size: 0.85rem; color: var(--text-muted); font-weight: 500; }
    #product-results[aria-busy="true"] { min-height: 320px; }

    .omni-card { position: relative; }
    .omni-card-top { position: relative; overflow: hidden; }
    .omni-card-media { overflow: hidden; text-decoration: none; }
    .omni-card-media img { transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
    .omni-card:hover .omni-card-media img { transform: scale(1.07); }
    .omni-card-body { text-decoration: none; color: inherit; }
    .omni-card-body:focus-visible, .omni-quick-add:focus-visible { outline: none; box-shadow: var(--shadow-glow); }

    .omni-badge { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 4px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; color: #fff; }
    .omni-badge.sale { background: var(--accent); color: var(--on-accent); }
    .omni-badge.soldout { background: #57534e; }

    .omni-add-btn { position: relative; overflow: hidden; }
    .omni-add-btn .done { display: none; align-items: center; gap: 6px; }
    .omni-add-btn.is-added .lbl { display: none; }
    .omni-add-btn.is-added .done { display: inline-flex; animation: popIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
    .omni-add-btn.is-added { background: var(--success) !important; box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4) !important; color: #fff !important; }
    .omni-add-btn .done svg { stroke-dasharray: 24; stroke-dashoffset: 24; }
    .omni-add-btn.is-added .done svg { animation: drawCheck 0.4s 0.1s ease-out forwards; }
    .omni-add-btn.is-loading { pointer-events: none; }
    .omni-add-btn.is-loading .lbl { opacity: 0; }
    .omni-add-btn.is-loading::after { content: ""; position: absolute; width: 18px; height: 18px; top: 50%; left: 50%; margin: -9px 0 0 -9px; border: 2.5px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; }
    .omni-add-btn:disabled { opacity: 0.55; cursor: not-allowed; }
    @keyframes spin { to { transform: rotate(360deg); } }
    @keyframes drawCheck { to { stroke-dashoffset: 0; } }
    @keyframes popIn { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

    .omni-quick-add { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; padding: 10px; border: none; border-radius: var(--radius-sm); background: var(--text-main); color: #fff; font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; opacity: 0; transform: translateY(140%); transition: var(--transition); }
    .omni-card:hover .omni-quick-add, .omni-quick-add:focus-visible { opacity: 1; transform: translateY(0); }
    .omni-quick-add:hover:not(:disabled) { background: var(--primary); }
    .omni-card-stepper { display: none; position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; align-items: center; justify-content: space-between; padding: 4px; border-radius: var(--radius-sm); background: var(--primary); color: #fff; box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.4); }
    .omni-card-stepper button { width: 36px; height: 32px; border: none; border-radius: 6px; background: rgba(255, 255, 255, 0.18); color: #fff; font-size: 1.15rem; font-weight: 700; cursor: pointer; transition: var(--transition); }
    .omni-card-stepper button:hover { background: rgba(255, 255, 255, 0.32); }
    .omni-card-stepper span { font-weight: 700; font-size: 0.95rem; }
    .omni-card.in-cart .omni-card-stepper { display: flex; animation: popIn 0.25s ease-out; }
    .omni-card.in-cart .omni-quick-add { display: none; }
    @media (hover: none) { .omni-quick-add { opacity: 1; transform: none; position: static; margin: 0 12px 12px; width: calc(100% - 24px); } .omni-card-stepper { position: static; margin: 0 12px 12px; } .omni-card-top { overflow: visible; } }

    .omni-announce { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; max-width: var(--page-max); margin: 0 auto 20px; padding: 10px 44px 10px 16px; border-radius: var(--radius-sm); background: var(--primary-light); color: var(--primary-ink); font-size: 0.875rem; font-weight: 600; text-align: center; }
    .omni-announce[hidden] { display: none; }
    .omni-announce svg { flex: none; }
    .omni-announce button { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border: none; border-radius: 50%; background: transparent; color: inherit; font-size: 0.8rem; cursor: pointer; }
    .omni-announce button:hover { background: rgba(var(--primary-rgb), 0.15); }

    .skel-block, .skel-line { background: linear-gradient(90deg, var(--line) 25%, var(--line-soft) 37%, var(--line) 63%); background-size: 400% 100%; animation: shimmer 1.3s ease infinite; }
    .skel-line { display: block; height: 12px; border-radius: 6px; }
    .omni-skel, .omni-skel:hover { pointer-events: none; transform: none; box-shadow: var(--shadow-sm); border-color: var(--border); }
    @keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

    /* ==========================================================================
       16. Cart
       ========================================================================== */
    .omni-cart { position: fixed; right: 20px; bottom: calc(76px + var(--compare-h, 0px)); z-index: 1100; }
    .menu-right .omni-cart { right: calc(var(--side-w) + 20px); }
    .menu-bottom .omni-cart { bottom: calc(144px + var(--compare-h, 0px)); }
    .omni-cart-fab { position: relative; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; border: none; background: linear-gradient(135deg, var(--primary), var(--primary-hover)); color: #fff; box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.4); cursor: pointer; transition: var(--transition); }
    .omni-cart-fab:hover { transform: translateY(-2px); }
    .omni-cart-fab.bump { animation: bump 0.45s ease; }
    @keyframes bump { 30% { transform: scale(1.25) rotate(-8deg); } 60% { transform: scale(0.95); } 100% { transform: scale(1); } }
    .omni-cart-count { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-size: 0.7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg-color); }
    .omni-cart-count[hidden] { display: none; }
    .omni-cart-panel { position: absolute; right: 0; bottom: 58px; width: min(340px, calc(100vw - 40px)); max-height: 70vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); animation: fadeInUp 0.2s ease-out; }
    .omni-cart-panel[hidden] { display: none; }
    .omni-cart-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
    .omni-cart-close { border: none; background: none; cursor: pointer; font-size: 1rem; color: var(--text-muted); }
    .omni-cart-items { list-style: none; overflow-y: auto; padding: 6px 16px; }
    .omni-cart-items li { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
    .omni-cart-items img { width: 44px; height: 44px; object-fit: contain; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-color); }
    .omni-cart-items li > div:first-child { grid-column: 1 / span 2; }
    .omni-cart-items li > img + div { grid-column: 2; }
    .omni-cart-items a { display: block; font-size: 0.85rem; font-weight: 600; color: var(--text-main); text-decoration: none; line-height: 1.3; }
    .omni-cart-items small { color: var(--text-muted); font-size: 0.75rem; }
    .omni-cart-qty { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; }
    .omni-cart-qty button { width: 26px; height: 26px; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); cursor: pointer; }
    .omni-cart-qty button:hover { border-color: var(--primary); color: var(--primary); }
    .omni-cart-empty { padding: 28px 16px; text-align: center; color: var(--text-muted); font-size: 0.9rem; }
    .omni-cart-empty[hidden], .omni-cart-foot[hidden] { display: none; }
    .omni-cart-foot { padding: 14px 16px; border-top: 1px solid var(--line); }
    .omni-cart-foot small { color: var(--text-muted); }
    .omni-cart-total { display: flex; justify-content: space-between; margin-bottom: 4px; }

    /* ==========================================================================
       17. Product Page: Gallery, Buy Box, Accordion, Sticky Bar
       ========================================================================== */
    .omni-gallery { position: sticky; top: 20px; align-self: start; min-width: 0; }
    .omni-gallery-stage { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: var(--bg-color); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; cursor: zoom-in; }
    .omni-gallery-stage img { width: 100%; height: 100%; object-fit: contain; padding: 24px; transition: transform 0.25s ease-out, opacity 0.12s; will-change: transform; }
    .omni-gallery-stage.is-zoomed { cursor: zoom-out; }
    .omni-gallery-stage.is-zoomed img { transform: scale(2.3); }
    .omni-zoom-hint { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: rgba(15, 23, 42, 0.7); color: #fff; font-size: 0.75rem; font-weight: 600; pointer-events: none; transition: opacity 0.2s; }
    .is-zoomed .omni-zoom-hint { opacity: 0; }
    .omni-thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; padding-bottom: 4px; }
    .omni-thumb { flex: none; width: 72px; height: 72px; padding: 4px; border: 2px solid transparent; border-radius: var(--radius-sm); background: var(--bg-color); cursor: pointer; transition: var(--transition); }
    .omni-thumb img { width: 100%; height: 100%; object-fit: contain; }
    .omni-thumb:hover { border-color: var(--border-focus); }
    .omni-thumb[aria-selected="true"] { border-color: var(--primary); }

    .omni-delivery { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 10px 14px; background: #ecfdf5; color: #065f46; border-radius: var(--radius-sm); font-size: 0.9rem; }
    .omni-buy-row { display: flex; gap: 12px; margin-top: 20px; }
    .omni-qty { display: inline-flex; align-items: stretch; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
    .omni-qty button { width: 42px; border: none; background: var(--bg-color); font-size: 1.2rem; cursor: pointer; transition: var(--transition); }
    .omni-qty button:hover { background: var(--primary-light); color: var(--primary-ink); }
    .omni-qty input { width: 54px; text-align: center; border: none; font: inherit; font-weight: 600; -moz-appearance: textfield; background: transparent; }
    .omni-qty input::-webkit-outer-spin-button, .omni-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
    .omni-qty:focus-within { border-color: var(--primary); box-shadow: var(--shadow-glow); }
    .omni-add-main { flex: 1; min-height: 48px; }

    .omni-accordion { margin-top: 28px; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
    .omni-acc-item + .omni-acc-item { border-top: 1px solid var(--line); }
    .omni-acc-item h3 { margin: 0; font-size: 1rem; }
    .omni-acc-trigger { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: var(--surface); border: none; font: inherit; font-weight: 600; color: var(--text-main); cursor: pointer; transition: var(--transition); }
    .omni-acc-trigger:hover { background: var(--bg-color); color: var(--primary); }
    .omni-acc-trigger:focus-visible { outline: none; box-shadow: inset var(--shadow-glow); }
    .omni-acc-trigger .chev { transition: transform 0.3s; flex: none; }
    .omni-acc-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }
    .omni-acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; }
    .omni-acc-item:has(.omni-acc-trigger[aria-expanded="true"]) .omni-acc-panel { grid-template-rows: 1fr; }
    .omni-acc-inner { min-height: 0; overflow: hidden; padding: 0 20px; }
    .omni-acc-inner::after { content: ""; display: block; height: 16px; }
    .omni-acc-inner p { margin-bottom: 8px; }
    .omni-acc-inner .omni-spec-table tr:nth-child(even) { background: rgba(var(--primary-rgb), 0.04); }

    .omni-sticky-bar { position: fixed; left: 0; right: 0; bottom: var(--compare-h, 0px); z-index: 1040; background: rgb(var(--surface-rgb) / 0.92); backdrop-filter: blur(10px); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08); transform: translateY(110%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
    .omni-sticky-bar.is-visible { transform: translateY(0); }
    .menu-bottom .omni-sticky-bar { bottom: calc(var(--menu-bar-h) + var(--compare-h, 0px)); }
    .menu-left .omni-sticky-bar { left: var(--side-w); }
    .menu-right .omni-sticky-bar { right: var(--side-w); }
    .omni-sticky-inner { max-width: var(--page-max); margin: 0 auto; display: flex; align-items: center; gap: 16px; padding: 10px 20px; }
    .omni-sticky-thumb { width: 44px; height: 44px; object-fit: contain; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-color); }
    .omni-sticky-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
    .omni-sticky-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.95rem; }
    .omni-sticky-info .omni-price { font-size: 0.95rem; margin-top: 0; }
    .omni-sticky-bar .btn { min-width: 150px; padding: 10px 20px; }
    .omni-rail-wrap { position: relative; }
    .omni-rail { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 4px; padding: 6px 4px 18px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
    .omni-rail::-webkit-scrollbar { height: 8px; }
    .omni-rail::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
    .omni-rail > .omni-card { flex: 0 0 220px; scroll-snap-align: start; }
    .omni-rail:focus-visible { outline: none; box-shadow: var(--shadow-glow); border-radius: var(--radius-sm); }
    .omni-rail-more { flex: 0 0 160px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; text-decoration: none; color: var(--primary-ink); background: var(--primary-light); border-radius: var(--radius-sm); font-size: 0.9rem; transition: var(--transition); }
    .omni-rail-more:hover { background: var(--primary); color: #fff; }
    .omni-rail-btn { position: absolute; top: 40%; z-index: 5; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-main); box-shadow: var(--shadow-md); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition); }
    .omni-rail-btn[hidden] { display: none; }
    .omni-rail-btn:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
    .omni-rail-btn.prev { left: -14px; }
    .omni-rail-btn.next { right: -14px; }
    @media (max-width: 768px) { .omni-rail > .omni-card { flex-basis: 170px; } .omni-rail-btn { display: none !important; } }
    @media (max-width: 768px) { .omni-gallery { position: static; } .omni-buy-row { flex-wrap: wrap; } .omni-sticky-bar .btn { min-width: 0; } }
    /* ==========================================================================
       18. Compare Products
       ========================================================================== */
    body.has-compare { --compare-h: 66px; }
    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .muted { color: var(--text-muted); font-weight: 400; font-size: 0.8rem; }
    .omni-notice { padding: 12px 16px; margin-bottom: 20px; border-radius: var(--radius-sm); background: #fef3c7; color: #92400e; font-weight: 500; font-size: 0.9rem; }

    .omni-compare-toggle { position: absolute; top: 54px; right: 12px; z-index: 3; cursor: pointer; }
    .omni-compare-toggle input { position: absolute; opacity: 0; pointer-events: none; }
    .omni-compare-toggle.inline span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgb(var(--surface-rgb) / 0.92); border: 1px solid var(--border); font-size: 0.72rem; font-weight: 700; color: var(--text-muted); transition: var(--transition); }
    .omni-compare-toggle.inline span::before { content: ""; width: 12px; height: 12px; border: 2px solid var(--border); border-radius: 3px; transition: var(--transition); }
    .omni-compare-toggle.inline:hover span { border-color: var(--primary); color: var(--primary); }
    .omni-compare-toggle.inline input:checked + span { background: var(--primary); border-color: var(--primary); color: #fff; }
    .omni-compare-toggle.inline input:checked + span::before { border-color: #fff; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 10px no-repeat; }
    .omni-compare-toggle input:focus-visible + span { box-shadow: var(--shadow-glow); }

    /* Card variant: a round icon that appears on hover/focus (always visible on touch) and stays once selected. */
    .omni-compare-toggle:not(.inline) { opacity: 0; transform: scale(0.85); transition: var(--transition); }
    .omni-card:hover .omni-compare-toggle, .omni-card:focus-within .omni-compare-toggle, .omni-compare-toggle:has(input:checked) { opacity: 1; transform: none; }
    .omni-compare-toggle .cmp-icon { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgb(var(--surface-rgb) / 0.95); border: 1px solid var(--border); color: var(--text-muted); box-shadow: var(--shadow-sm); transition: var(--transition); }
    .omni-compare-toggle:hover .cmp-icon { border-color: var(--primary); color: var(--primary); }
    .omni-compare-toggle input:checked + .cmp-icon { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.4); }
    .omni-compare-toggle input:focus-visible + .cmp-icon { box-shadow: var(--shadow-glow); }
    @media (hover: none) { .omni-compare-toggle:not(.inline) { opacity: 1; transform: none; } .omni-compare-toggle .cmp-icon { width: 30px; height: 30px; opacity: 0.9; } }
    .omni-compare-toggle.inline { position: static; display: inline-block; margin-top: 14px; }
    .omni-compare-toggle.inline span { padding: 8px 14px; font-size: 0.85rem; }

    .omni-compare-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1045; background: rgb(var(--surface-rgb) / 0.95); backdrop-filter: blur(10px); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.1); animation: fadeInUp 0.25s ease-out; }
    .omni-compare-bar[hidden] { display: none; }
    .menu-bottom .omni-compare-bar { bottom: var(--menu-bar-h); }
    .menu-left .omni-compare-bar { left: var(--side-w); }
    .menu-right .omni-compare-bar { right: var(--side-w); }
    .omni-compare-inner { max-width: var(--page-max); margin: 0 auto; display: flex; align-items: center; gap: 14px; padding: 10px 20px; min-height: 66px; }
    .omni-compare-title span { color: var(--text-muted); font-weight: 500; font-size: 0.85rem; }
    .omni-compare-items { flex: 1; min-width: 0; display: flex; gap: 8px; list-style: none; overflow-x: auto; }
    .omni-compare-items li { flex: none; display: flex; align-items: center; gap: 8px; max-width: 200px; padding: 4px 6px 4px 4px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); font-size: 0.78rem; font-weight: 600; }
    .omni-compare-items img { width: 32px; height: 32px; object-fit: contain; border-radius: 4px; background: var(--bg-color); }
    .omni-compare-items span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .omni-compare-items button { border: none; background: none; cursor: pointer; color: var(--text-muted); font-size: 0.8rem; }
    .omni-compare-items button:hover { color: var(--error); }
    .omni-compare-hint { font-size: 0.8rem; color: var(--text-muted); }
    .omni-compare-hint[hidden] { display: none; }
    #compare-go.is-disabled { opacity: 0.5; }
    .omni-compare-toast { position: fixed; left: 50%; bottom: calc(90px + var(--compare-h, 0px)); transform: translateX(-50%); z-index: 1200; max-width: min(460px, calc(100vw - 32px)); padding: 12px 18px; border-radius: var(--radius-sm); background: var(--text-main); color: #fff; font-size: 0.875rem; box-shadow: var(--shadow-lg); animation: fadeInUp 0.2s ease-out; }
    .omni-compare-toast[hidden] { display: none; }
    @media (max-width: 700px) { .omni-compare-hint, .omni-compare-title span { display: none; } .menu-left .omni-compare-bar, .menu-right .omni-compare-bar { left: 0; right: 0; } }

    .omni-compare-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 20px; }
    .omni-compare-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); }
    .omni-compare-table { width: 100%; min-width: calc(150px + var(--cols) * 220px); border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 0.9rem; }
    .omni-compare-table th, .omni-compare-table td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line-soft); overflow-wrap: anywhere; }
    .omni-compare-table th:first-child { width: 150px; position: sticky; left: 0; z-index: 2; background: var(--bg-color); color: var(--text-muted); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
    .omni-compare-table tr[hidden] { display: none; }
    .omni-compare-table tbody tr:hover td { background: rgba(var(--primary-rgb), 0.03); }
    .omni-compare-head { position: relative; text-align: center !important; background: var(--surface); }
    .omni-compare-head small { display: block; color: var(--text-muted); font-size: 0.75rem; margin-top: 4px; }
    .omni-compare-img { display: flex; justify-content: center; margin-bottom: 10px; }
    .omni-compare-img img { width: 120px; height: 120px; object-fit: contain; }
    .omni-compare-name { font-weight: 600; color: var(--text-main); text-decoration: none; line-height: 1.35; }
    .omni-compare-name:hover { color: var(--primary); }
    .omni-compare-remove { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bg-color); color: var(--text-muted); text-decoration: none; font-size: 0.75rem; transition: var(--transition); }
    .omni-compare-remove:hover { background: var(--error-light); color: var(--error); }
    .omni-compare-price { font-size: 1.15rem; font-weight: 700; display: block; margin-bottom: 4px; }
    td.is-best { background: #ecfdf5; }
    .omni-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; margin-top: 4px; }
    .omni-pill.sale { background: var(--accent-light); color: var(--accent-dark); }
    .omni-pill.best { background: var(--success); color: #fff; }
    .omni-compare-text { max-height: 240px; overflow-y: auto; font-size: 0.85rem; line-height: 1.55; }
    .omni-compare-table tfoot td, .omni-compare-table tfoot th { border-bottom: none; }
    .omni-compare-table tfoot .btn { width: 100%; padding: 10px; font-size: 0.9rem; }
    /* ==========================================================================
       19. Header Bar, Search, Home Page, Wishlist, Reviews, Footer
       ========================================================================== */
    .omni-topbar { max-width: var(--page-max); margin: 0 auto 20px; display: flex; align-items: center; gap: 14px; position: sticky; top: var(--navbar-h, 0px); z-index: 1040; padding: 8px 0; background: var(--bg-color); }
    .omni-topbar-brand { display: flex; flex: none; }
    .omni-topbar-brand svg { flex: none; }
    .omni-delivery-badge { flex: none; display: flex; flex-direction: column; justify-content: center; padding: 6px 12px; border-radius: var(--radius-sm); background: var(--primary); color: #fff; line-height: 1.15; text-align: center; }
    .omni-delivery-badge small { font-size: 0.62rem; opacity: 0.85; }
    .omni-delivery-badge strong { font-size: 0.85rem; white-space: nowrap; }
    .omni-searchbar { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
    .omni-searchbar > svg { position: absolute; left: 16px; color: var(--text-muted); pointer-events: none; }
    .omni-searchbar input { width: 100%; height: 46px; padding: 0 18px 0 44px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font: inherit; color: var(--text-main); transition: var(--transition); }
    .omni-ph { position: absolute; left: 44px; right: 18px; top: 0; bottom: 0; display: flex; align-items: center; color: var(--text-muted); font-size: 0.95rem; pointer-events: none; white-space: nowrap; overflow: hidden; transition: opacity 0.15s; }
    .omni-ph.is-hidden { opacity: 0; }
    .omni-ph-word { display: inline-block; height: 1.5em; overflow: hidden; vertical-align: bottom; }
    .omni-ph-text { display: inline-block; color: var(--text-main); font-weight: 600; line-height: 1.5; transition: transform 0.3s ease, opacity 0.3s ease; }
    .omni-ph-text.is-leaving { transform: translateY(-110%); opacity: 0; }
    .omni-ph-text.is-entering { transform: translateY(110%); opacity: 0; }
    .omni-ph-text.no-anim { transition: none; }
    .omni-searchbar input:focus { outline: none; border-color: var(--primary); box-shadow: var(--shadow-glow); }
    .omni-suggest { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 1200; max-height: 70vh; overflow-y: auto; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
    .omni-suggest[hidden] { display: none; }
    .omni-suggest a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--text-main); text-decoration: none; font-size: 0.9rem; }
    .omni-suggest a:hover, .omni-suggest a.is-active { background: var(--primary-light); }
    .omni-suggest img { width: 40px; height: 40px; object-fit: contain; border-radius: 6px; background: var(--bg-color); flex: none; }
    .omni-suggest-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
    .omni-suggest-text span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
    .omni-suggest-price { font-weight: 700; font-size: 0.82rem; white-space: nowrap; }
    .omni-suggest-cat { font-weight: 600; }
    .omni-suggest-all { justify-content: center; color: var(--primary) !important; font-weight: 700; }
    .omni-suggest-empty { padding: 14px; color: var(--text-muted); font-size: 0.88rem; }
    .omni-topbar-icons { flex: none; display: flex; gap: 6px; }
    .omni-icon-link { position: relative; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: transparent; color: var(--text-body); cursor: pointer; transition: var(--transition); }
    .omni-icon-link:hover { background: var(--primary-light); color: var(--primary); }
    .omni-badge-count { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--accent); color: var(--on-accent); font-size: 0.68rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
    .omni-badge-count[hidden] { display: none; }
    .omni-recent { position: relative; }
    .omni-recent-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 1200; width: 300px; max-height: 60vh; overflow-y: auto; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
    .omni-recent-panel[hidden] { display: none; }
    .omni-recent-panel ul { list-style: none; margin-top: 8px; }
    .omni-recent-panel a { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: var(--radius-sm); color: var(--text-main); text-decoration: none; font-size: 0.85rem; font-weight: 600; }
    .omni-recent-panel a:hover { background: var(--primary-light); }
    .omni-recent-panel img { width: 36px; height: 36px; object-fit: contain; border-radius: 6px; background: var(--bg-color); }
    @media (max-width: 760px) { .omni-topbar { flex-wrap: wrap; } .omni-searchbar { order: 5; flex-basis: 100%; } .omni-topbar-icons { margin-left: auto; } }

    .omni-home { max-width: var(--page-max); margin: 0 auto; }
    .omni-hero { position: relative; overflow: hidden; border-radius: var(--radius-md); margin-bottom: 32px; box-shadow: var(--shadow-md); }
    .omni-hero-track { display: flex; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
    .omni-hero-slide { flex: 0 0 100%; min-height: 240px; display: flex; align-items: center; padding: 40px 64px; text-decoration: none; color: #fff; background: radial-gradient(circle at 85% 20%, rgba(255, 255, 255, 0.22), transparent 45%), linear-gradient(120deg, var(--from), var(--to)); }
    .omni-hero-copy { display: flex; flex-direction: column; gap: 10px; max-width: 520px; }
    .omni-hero-copy strong { font-size: clamp(1.5rem, 4vw, 2.3rem); line-height: 1.15; letter-spacing: -0.02em; }
    .omni-hero-copy span { font-size: 1.05rem; opacity: 0.92; }
    .omni-hero-copy em { align-self: flex-start; margin-top: 8px; padding: 10px 22px; border-radius: 999px; background: #fff; color: #1c1917; font-style: normal; font-weight: 700; font-size: 0.9rem; }
    .omni-hero-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: none; border-radius: 50%; background: rgb(var(--surface-rgb) / 0.9); color: var(--text-main); font-size: 1.5rem; line-height: 1; cursor: pointer; box-shadow: var(--shadow-md); }
    .omni-hero-btn.prev { left: 14px; }
    .omni-hero-btn.next { right: 14px; }
    .omni-hero-dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; }
    .omni-hero-dots button { width: 9px; height: 9px; padding: 0; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.55); cursor: pointer; transition: var(--transition); }
    .omni-hero-dots button[aria-selected="true"] { width: 24px; border-radius: 5px; background: #fff; }
    @media (max-width: 640px) { .omni-hero-slide { padding: 28px 24px 40px; min-height: 200px; } .omni-hero-btn { display: none; } }

    .omni-section { margin-bottom: 36px; }
    .omni-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
    .omni-section-head h2 { font-size: 1.35rem; letter-spacing: -0.02em; }
    .omni-section-head a { color: var(--primary); font-weight: 700; text-decoration: none; font-size: 0.9rem; }
    .omni-section-head a:hover { text-decoration: underline; }
    .omni-tiles { display: grid; grid-template-columns: repeat(var(--tile-cols, 5), minmax(0, 1fr)); gap: 16px; }
    .omni-tile { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; text-decoration: none; color: var(--text-main); font-size: 0.85rem; font-weight: 600; }
    .omni-tile-img { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; transition: var(--transition); }
    .omni-tile-img img { width: 80%; height: 80%; object-fit: contain; transition: transform 0.4s; }
    .omni-tile:hover .omni-tile-img { border-color: var(--primary); box-shadow: var(--shadow-md); }
    .omni-tile:hover img { transform: scale(1.08); }
    .omni-home .omni-card { background: var(--surface); }

    .omni-wish { position: absolute; top: 12px; right: 12px; z-index: 3; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--border); background: rgb(var(--surface-rgb) / 0.95); color: #d6d3d1; cursor: pointer; transition: var(--transition); box-shadow: var(--shadow-sm); }
    .omni-wish svg { fill: transparent; transition: var(--transition); }
    .omni-wish:hover { color: var(--error); border-color: var(--error); }
    .omni-wish.is-on { color: var(--error); border-color: var(--error); }
    .omni-wish.is-on svg { fill: currentColor; }
    .omni-wish.inline { position: static; width: 40px; height: 40px; }
    .omni-wish.inline.plain { color: var(--text-muted); }
    .omni-wish.inline.plain:hover { color: var(--primary); border-color: var(--primary); }
    .omni-pack { position: absolute; left: 12px; bottom: 12px; z-index: 1; max-width: 55%; padding: 2px 8px; border-radius: 6px; background: rgb(var(--surface-rgb) / 0.92); border: 1px solid var(--line); font-size: 0.72rem; font-weight: 700; color: var(--text-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
    @media (hover: none) { .omni-pack { bottom: 12px; } }

    .omni-buybox { position: relative; }
    .omni-buy-actions { position: absolute; top: 0; right: 0; display: flex; gap: 8px; }
    .omni-brand-line { color: var(--primary); font-weight: 700; font-size: 0.85rem; margin-bottom: 4px; padding-right: 100px; }
    .omni-product-title { font-size: 1.45rem; line-height: 1.3; letter-spacing: -0.02em; margin: 0 0 6px; padding-right: 100px; overflow-wrap: anywhere; }
    .omni-brand-line + .omni-product-title { padding-right: 100px; }
    .omni-name-note { margin: 0 0 8px; font-size: 0.85rem; color: var(--text-muted); }
    .omni-name-note.is-bonus { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--accent-light); color: var(--accent-dark); font-weight: 600; }
    .omni-name-note.is-bonus svg { flex: none; margin-top: 2px; }
    .omni-name-note.is-bonus strong { font-weight: 800; }
    @media (max-width: 520px) { .omni-product-title, .omni-brand-line { padding-right: 0; } .omni-buy-actions { position: static; margin-bottom: 10px; } }
    .omni-rating-line { display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 10px; text-decoration: none; color: var(--text-main); font-size: 0.9rem; }
    .omni-stars { color: #f59e0b; letter-spacing: 1px; }
    .omni-variants { margin-top: 18px; }
    .omni-variants-label { display: block; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 8px; }
    .omni-variant-list { display: flex; flex-wrap: wrap; gap: 8px; }
    .omni-variant { display: flex; flex-direction: column; align-items: center; padding: 8px 16px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); text-decoration: none; color: var(--text-main); font-size: 0.85rem; transition: var(--transition); }
    .omni-variant small { color: var(--text-muted); font-size: 0.72rem; }
    .omni-variant:hover { border-color: var(--primary); }
    .omni-variant.is-current { border-color: var(--primary); background: var(--primary-light); }
    .omni-notify { margin-top: 16px; padding: 14px; border: 1px dashed var(--border); border-radius: var(--radius-sm); background: var(--bg-color); font-size: 0.9rem; }
    .omni-notify-row { display: flex; gap: 8px; margin-top: 8px; }
    .omni-notify-row .btn { padding: 10px 18px; font-size: 0.9rem; white-space: nowrap; }
    .omni-form-ok { padding: 10px 14px; border-radius: var(--radius-sm); background: #dcfce7; color: #166534; font-size: 0.88rem; font-weight: 600; margin: 8px 0; }
    .omni-link { color: var(--primary); font-weight: 600; }
    .omni-explore { margin-top: 12px; display: grid; gap: 8px; }
    .omni-explore a { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-main); text-decoration: none; font-weight: 600; font-size: 0.9rem; transition: var(--transition); }
    .omni-explore a:hover { border-color: var(--primary); color: var(--primary); }

    .omni-collapse.is-clamped { max-height: 260px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
    .omni-collapse-toggle { margin-top: 10px; padding: 0; border: none; background: none; color: var(--primary); font: inherit; font-weight: 700; cursor: pointer; }
    .omni-collapse-toggle[hidden] { display: none; }

    .omni-reviews-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px; }
    .omni-rating-big { font-size: 3rem; font-weight: 700; line-height: 1; }
    .omni-rating-big small { font-size: 1rem; color: var(--text-muted); margin-left: 4px; }
    .omni-rating-summary .omni-stars { font-size: 1.3rem; margin: 6px 0; }
    .omni-rating-bars { list-style: none; margin-top: 12px; display: grid; gap: 6px; font-size: 0.8rem; }
    .omni-rating-bars li { display: grid; grid-template-columns: 28px 1fr 24px; gap: 8px; align-items: center; }
    .omni-rating-bars .bar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
    .omni-rating-bars .bar span { display: block; height: 100%; background: #f59e0b; border-radius: 4px; }
    .omni-review { padding: 14px 0; border-bottom: 1px solid var(--line); }
    .omni-review-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 4px; }
    .omni-review h4 { font-size: 0.95rem; margin: 4px 0; }
    .omni-review p { color: var(--text-body); font-size: 0.9rem; }
    .omni-review-form { margin-top: 24px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-color); }
    .omni-review-form h4 { margin-bottom: 12px; }
    .omni-star-input { border: none; display: flex; flex-direction: row-reverse; justify-content: flex-end; margin-bottom: 14px; }
    .omni-star-input legend { float: left; width: 100%; font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; }
    .omni-star-input input { position: absolute; opacity: 0; pointer-events: none; }
    .omni-star-input label { font-size: 1.9rem; line-height: 1; color: #d6d3d1; cursor: pointer; padding: 0 2px; transition: color 0.15s; }
    .omni-star-input label:hover, .omni-star-input label:hover ~ label, .omni-star-input input:checked ~ label { color: #f59e0b; }
    .omni-star-input input:focus-visible + label { outline: 2px solid var(--primary); border-radius: 4px; }
    .omni-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
    .field-error { color: var(--error); font-size: 0.8rem; margin-top: 6px; display: block; }
    @media (max-width: 768px) { .omni-reviews-grid { grid-template-columns: 1fr; } }

    .omni-free-ship { margin-bottom: 10px; font-size: 0.8rem; font-weight: 600; }
    .omni-free-ship-bar { display: block; height: 6px; margin-top: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
    .omni-free-ship-bar span { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 3px; transition: width 0.4s ease; }
    .omni-free-ship.is-done { color: var(--primary-ink); }
    .omni-free-ship.is-done .omni-free-ship-bar span { background: var(--primary); }

    .omni-policy p { margin-bottom: 14px; max-width: 70ch; }
    .omni-policy-help { margin-top: 20px; padding: 14px 18px; border-radius: var(--radius-sm); background: var(--primary-light); color: var(--primary-ink); display: flex; flex-direction: column; gap: 2px; font-size: 0.9rem; }
    .badge.is-current { background: var(--primary); color: #fff; }

    .omni-footer { max-width: var(--page-max); margin: 48px auto 0; padding: 32px 0 8px; border-top: 1px solid var(--line); color: var(--text-body); font-size: 0.88rem; }
    .omni-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 28px; }
    .omni-footer-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.1rem; color: var(--text-main); text-decoration: none; margin-bottom: 8px; }
    .omni-footer strong { display: block; margin-bottom: 8px; color: var(--text-main); }
    .omni-footer ul { list-style: none; display: grid; gap: 6px; }
    .omni-footer a { color: var(--text-body); text-decoration: none; }
    .omni-footer ul a:hover { color: var(--primary); }
    .omni-footer-note { margin-top: 24px; color: var(--text-muted); font-size: 0.8rem; }
    @media (max-width: 760px) { .omni-footer-grid { grid-template-columns: 1fr 1fr; } }

    .omni-help { position: fixed; left: 20px; bottom: 20px; z-index: 1100; display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px; background: #16a34a; color: #fff; text-decoration: none; font-weight: 700; font-size: 0.9rem; box-shadow: 0 6px 16px rgba(22, 163, 74, 0.4); transition: var(--transition); }
    .omni-help:hover { transform: translateY(-2px); }
    .menu-left .omni-help { left: calc(var(--side-w) + 20px); }
    .menu-bottom .omni-help { bottom: 84px; }
    @media (max-width: 640px) { .omni-help span { display: none; } .omni-help { padding: 14px; } }
    /* ==========================================================================
       20. Mobile first: header, drawer, tab bar, grids, touch targets
       ========================================================================== */
    .omni-burger, .omni-topbar-name, .omni-tabbar, .omni-drawer, .omni-drawer-backdrop { display: none; }
    .hint-tap { display: none; }
    @media (hover: none) { .hint-hover { display: none; } .hint-tap { display: inline; } }
    .omni-buybox .omni-stock { display: block; margin-bottom: 6px; }

    @media (max-width: 900px) {
        :root { --tabbar-h: 60px; }
        body.no-tabbar { --tabbar-h: 0px; }

        /* The desktop menus (top, left, right, bottom) are replaced by the drawer + tab bar. */
        .omni-navbar, .omni-sidebar, .omni-navbar-bottom { display: none !important; }
        .omni-main-content { margin: 0 !important; padding: 0 !important; min-height: 0 !important; }
        body.menu-top, body.menu-bottom, body.menu-left, body.menu-right {
            padding: 0 12px calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 20px);
        }
        body.no-tabbar { padding-bottom: calc(92px + env(safe-area-inset-bottom) + var(--compare-h, 0px)); }
        body.drawer-open { overflow: hidden; }

        /* Header: sticky, two compact rows (menu / logo / cart, then search) */
        .omni-topbar { position: sticky; top: 0; z-index: 1030; margin: 0 -12px 12px; padding: calc(6px + env(safe-area-inset-top)) 12px 10px; gap: 6px 10px; flex-wrap: wrap; background: var(--surface); border-bottom: 1px solid var(--line); }
        .omni-burger { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: -10px; border: none; background: none; color: var(--text-main); cursor: pointer; }
        .omni-topbar-name { display: inline; font-weight: 700; font-size: 1.05rem; color: var(--text-main); }
        .omni-topbar-brand { align-items: center; gap: 8px; text-decoration: none; }
        .omni-delivery-badge { flex-direction: row; align-items: baseline; gap: 4px; padding: 4px 9px; border-radius: 999px; }
        .omni-delivery-badge small { display: none; }
        .omni-delivery-badge strong { font-size: 0.74rem; }
        .omni-topbar-icons { margin-left: auto; }
        .omni-topbar-icons > :not(.omni-cart-icon) { display: none; }
        .omni-cart-icon { display: flex; width: 44px; height: 44px; }
        .omni-searchbar { order: 5; flex: 1 1 100%; }
        .omni-searchbar input { height: 44px; font-size: 16px; }
        .omni-ph { font-size: 1rem; }
        .omni-suggest { position: fixed; left: 12px; right: 12px; top: auto; max-height: 55vh; }
        .omni-announce { margin: 0 0 12px; padding: 8px 40px 8px 12px; font-size: 0.8rem; }

        /* Content frame: edge to edge, tighter padding */
        .enterprise-form-container { box-shadow: var(--shadow-sm); }
        .form-body { padding: 16px; }
        .form-header { padding: 18px 16px; }
        .form-header h2 { font-size: 1.35rem; }
        .omni-crumbs { padding: 10px 16px; }
        .omni-crumbs ol { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
        .omni-crumbs ol::-webkit-scrollbar { display: none; }
        .omni-footer { margin-top: 28px; }

        /* Floating desktop helpers are replaced by the tab bar / drawer */
        .omni-layout-picker, .omni-help, .omni-cart-fab { display: none !important; }
        .omni-cart { right: 0; bottom: 0; }
        .omni-cart-panel { position: fixed; left: 0; right: 0; bottom: 0; width: auto; max-height: 82vh; border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom); animation: sheetUp 0.25s ease-out; }
        #omni-cart:has(.omni-cart-panel:not([hidden]))::before { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: -1; }
        .omni-cart-close { width: 44px; height: 44px; font-size: 1.1rem; }
        .omni-cart-qty button { width: 36px; height: 36px; }
        @keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

        /* Bottom tab bar */
        .omni-tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1060; padding-bottom: env(safe-area-inset-bottom); background: rgb(var(--surface-rgb) / 0.97); backdrop-filter: blur(10px); border-top: 1px solid var(--line); }
        body.no-tabbar .omni-tabbar { display: none; }
        .omni-tabbar a, .omni-tabbar button { position: relative; flex: 1; min-height: var(--tabbar-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: none; background: none; color: var(--text-muted); font: inherit; font-size: 0.68rem; font-weight: 600; text-decoration: none; cursor: pointer; }
        .omni-tabbar a.is-active, .omni-tabbar a:active, .omni-tabbar button:active { color: var(--primary); }
        .omni-tab-badge { position: absolute; top: 7px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--accent); color: var(--on-accent); font-size: 0.62rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
        .omni-tab-badge[hidden] { display: none; }

        /* Drawer */
        .omni-drawer-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 1200; background: rgba(0, 0, 0, 0.5); }
        .omni-drawer { display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; z-index: 1210; width: min(88vw, 340px); background: var(--surface); transform: translateX(-100%); visibility: hidden; transition: transform 0.28s ease, visibility 0s 0.28s; padding-bottom: env(safe-area-inset-bottom); box-shadow: var(--shadow-lg); }
        .omni-drawer.is-open { transform: none; visibility: visible; transition: transform 0.28s ease; }
        .omni-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: calc(10px + env(safe-area-inset-top)) 8px 10px 16px; border-bottom: 1px solid var(--line); }
        .omni-drawer-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--text-main); text-decoration: none; }
        .omni-drawer-close { width: 44px; height: 44px; border: none; background: none; font-size: 1.1rem; color: var(--text-muted); cursor: pointer; }
        .omni-drawer-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 24px; }
        .omni-drawer-title { padding: 18px 16px 6px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
        .omni-drawer ul { list-style: none; }
        .omni-drawer-quick a, .omni-drawer-list a, .omni-drawer-list summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 16px; color: var(--text-main); text-decoration: none; font-size: 0.95rem; font-weight: 500; cursor: pointer; list-style: none; }
        .omni-drawer-list summary::-webkit-details-marker { display: none; }
        .omni-drawer-list summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(45deg); transition: transform 0.2s; margin-right: 4px; }
        .omni-drawer-list details[open] > summary { color: var(--primary); font-weight: 700; }
        .omni-drawer-list details[open] > summary::after { transform: rotate(-135deg); }
        .omni-drawer-list ul { background: var(--bg-color); }
        .omni-drawer-list ul a, .omni-drawer-list ul summary { padding-left: 32px; font-size: 0.9rem; }
        .omni-drawer-list ul ul a { padding-left: 48px; }
        .omni-drawer-list a.all { color: var(--primary); font-weight: 700; }
        .omni-drawer-loading { padding: 12px 16px; color: var(--text-muted); font-size: 0.9rem; }
        .omni-drawer-quick a:active, .omni-drawer-list a:active, .omni-drawer-list summary:active { background: var(--primary-light); }

        /* Compare bar and toasts sit above the tab bar */
        .omni-compare-bar, .menu-left .omni-compare-bar, .menu-right .omni-compare-bar, .menu-bottom .omni-compare-bar { left: 0; right: 0; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); z-index: 1055; }
        .omni-compare-toast { bottom: calc(var(--tabbar-h) + var(--compare-h, 0px) + 24px + env(safe-area-inset-bottom)); }
        body.has-compare { --compare-h: 62px; }

        /* Product page: the buy bar is always visible (the tab bar steps aside) */
        .omni-sticky-bar, .menu-left .omni-sticky-bar, .menu-right .omni-sticky-bar, .menu-bottom .omni-sticky-bar { left: 0; right: 0; bottom: var(--compare-h, 0px); transform: none !important; padding-bottom: env(safe-area-inset-bottom); }
        .omni-sticky-inner { padding: 10px 12px; gap: 10px; }
        .omni-add-main { white-space: nowrap; min-width: 0; }
        .omni-buy-row { gap: 8px; }
        .omni-qty button { width: 44px; min-height: 48px; }
        .omni-tab-list { flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; scroll-snap-type: x proximity; }
        .omni-tab-list::-webkit-scrollbar { display: none; }
        .omni-tab { flex: none; scroll-snap-align: start; min-height: 44px; }

        /* Touch sizing and no zoom-on-focus */
        .form-control, select, textarea, input { font-size: 16px; }
        .btn { min-height: 44px; }
        .omni-icon-link { width: 44px; height: 44px; }

        /* Compare table: narrower label column so more of each product shows */
        .omni-compare-table { min-width: calc(96px + var(--cols) * 168px); }
        .omni-compare-table th:first-child { width: 96px; padding: 10px 8px; font-size: 0.64rem; }
        .omni-compare-table th, .omni-compare-table td { padding: 10px 10px; }
        .omni-compare-img img { width: 84px; height: 84px; }
        .omni-compare-tools { gap: 8px; }

        /* Home: category tiles become a swipe row; shelves run edge to edge */
        .omni-hero { margin-bottom: 20px; border-radius: var(--radius-md); }
        .omni-hero-slide { min-height: 170px; padding: 22px 20px 38px; }
        .omni-section { margin-bottom: 24px; }
        .omni-tiles { display: flex; gap: 12px; overflow-x: auto; margin: 0 -12px; padding: 0 12px 6px; scroll-snap-type: x proximity; scrollbar-width: none; }
        .omni-tiles::-webkit-scrollbar { display: none; }
        .omni-tile { flex: 0 0 84px; scroll-snap-align: start; font-size: 0.75rem; }
        .omni-home .omni-rail { margin: 0 -12px; padding-left: 12px; padding-right: 12px; scroll-padding-left: 12px; }
        .form-body .omni-rail { margin: 0 -16px; padding-left: 16px; padding-right: 16px; scroll-padding-left: 16px; }
        .omni-rail-btn { display: none !important; }
    }

    /* Tablets: three columns */
    @media (min-width: 641px) and (max-width: 900px) { .omni-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }

    /* Phones: two compact columns, like a shopping app */
    @media (max-width: 640px) {
        .omni-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
        .omni-card-body { padding: 10px; gap: 4px; }
        .omni-card-title { font-size: 0.84rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .omni-card-meta { font-size: 0.72rem; }
        .omni-price { font-size: 0.92rem; flex-wrap: wrap; gap: 0 6px; }
        .omni-price-old { font-size: 0.72rem; }
        .omni-save { font-size: 0.7rem; }
        .omni-badge { top: 8px; left: 8px; padding: 3px 8px; font-size: 0.66rem; }
        .omni-pack { left: 8px; bottom: 8px; font-size: 0.64rem; padding: 1px 6px; }
        .omni-wish { top: 8px; right: 8px; width: 36px; height: 36px; }
        .omni-compare-toggle:not(.inline) { top: 50px; right: 8px; }
        .omni-compare-toggle .cmp-icon { width: 36px; height: 36px; }
        .omni-quick-add { margin: 0 8px 8px; width: calc(100% - 16px); padding: 9px; font-size: 0.8rem; min-height: 40px; }
        .omni-card-stepper { margin: 0 8px 8px; }
        .omni-card-stepper button { width: 40px; height: 36px; }
        .omni-rail > .omni-card { flex-basis: 152px; }
        .omni-rail { gap: 10px; }
        .omni-rail-more { flex-basis: 120px; }
        .omni-toolbar { gap: 8px; }
        .omni-search { flex: 1 1 100%; max-width: none; }
        .omni-sort { flex: 1; min-width: 0; }
        .omni-result-count { display: none; }
        .omni-section-head h2 { font-size: 1.15rem; }
        .omni-footer-grid { grid-template-columns: 1fr 1fr; }
    }

    /* Desktop: the cart opens from the header icon; the panel drops down under it. */
    @media (min-width: 901px) {
        .omni-cart, .menu-bottom .omni-cart { top: calc(var(--navbar-h, 0px) + 74px); bottom: auto; }
        .omni-cart-fab { display: none; }
        .omni-cart-panel { top: 0; bottom: auto; }
        .omni-cart-icon { position: relative; }
    }

    /* Product page: accordion and category links sit full width under the image and buy box. */
    .omni-product-more { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px; align-items: start; }
    .omni-product-more .omni-explore { display: grid; gap: 10px; margin: 0; }
    @media (max-width: 768px) { .omni-product-more { grid-template-columns: 1fr; } }

    /* Reviews: with none yet, the form takes the full width. */
    .omni-reviews-grid.is-empty { grid-template-columns: 1fr; gap: 12px; }
    .omni-reviews-grid.is-empty .omni-review-form { max-width: 640px; }
    .omni-star-input { flex-wrap: wrap-reverse; }
    .omni-star-input legend { order: 100; }

    /* Cards without a photo show a neutral placeholder. */
    .omni-card-media .omni-noimg { width: 38%; color: #d6d3d1; }

    @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .omni-gallery-stage.is-zoomed img { transform: none; } }

    /* ---- Checkout, orders and accounts ---- */
    .omni-checkout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
    .omni-checkout[hidden] { display: none; }
    .omni-checkout-main { display: grid; gap: 20px; }
    .omni-co-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px; }
    .omni-co-card h2, .omni-checkout-summary h2 { font-size: 1.05rem; margin: 0 0 14px; color: var(--text-main); }
    .omni-checkout-summary { position: sticky; top: 90px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px; display: grid; gap: 12px; }
    .omni-pay-option { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; cursor: pointer; min-height: 48px; }
    .omni-pay-option:has(input:checked) { border-color: var(--primary); background: var(--primary-light); }
    .omni-pay-option input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--primary); }
    .omni-pay-option small { display: block; color: var(--text-muted); font-weight: 400; }
    .omni-pay-detail { padding: 12px 12px 0; margin: -4px 0 12px; border-left: 3px solid var(--primary); }
    .omni-co-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
    .omni-co-lines li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
    .omni-co-lines li:not(:has(img)) { grid-template-columns: 1fr auto; }
    .omni-co-lines img { width: 48px; height: 48px; object-fit: contain; border-radius: var(--radius-sm); background: #fff; }
    .omni-co-lines small { display: block; color: var(--text-muted); }
    .omni-co-totals { margin: 0; display: grid; gap: 8px; }
    .omni-co-totals div { display: flex; justify-content: space-between; gap: 12px; }
    .omni-co-totals dt { color: var(--text-muted); }
    .omni-co-totals dd { margin: 0; font-weight: 600; }
    .omni-co-totals .is-total { border-top: 1px solid var(--border); padding-top: 10px; font-size: 1.1rem; }
    .omni-co-totals .is-total dt { color: var(--text-main); font-weight: 700; }
    .omni-order-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; text-decoration: none; color: inherit; }
    .omni-order-row small { display: block; }
    @media (max-width: 900px) {
        .omni-checkout { grid-template-columns: 1fr; }
        .omni-checkout-summary { position: static; order: -1; }
    }

    /* ---- Home: trust strip, promo tiles, flash deals, brands ---- */
    .omni-hero-slide.has-image { background: linear-gradient(90deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.1) 70%), var(--img) center / cover, linear-gradient(135deg, var(--from), var(--to)); }
    .omni-trust { list-style: none; margin: -12px 0 28px; padding: 14px 20px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
    .omni-trust li { display: flex; align-items: center; gap: 12px; color: var(--primary); }
    .omni-trust strong { display: block; font-size: 0.9rem; color: var(--text-main); }
    .omni-trust small { display: block; font-size: 0.78rem; color: var(--text-muted); }
    .omni-promos { display: grid; grid-template-columns: repeat(var(--promo-cols, 3), minmax(0, 1fr)); gap: 16px; margin-bottom: 32px; }
    .omni-promo { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-height: 140px; padding: 20px; border-radius: var(--radius-md); color: #fff; text-decoration: none; background: linear-gradient(135deg, var(--from), var(--to)); transition: var(--transition); }
    .omni-promo.has-image { background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.05) 70%), var(--img) center / cover, linear-gradient(135deg, var(--from), var(--to)); }
    .omni-promo:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
    .omni-promo strong { font-size: 1.15rem; line-height: 1.2; }
    .omni-promo span { font-size: 0.88rem; opacity: 0.92; }
    .omni-promo em { margin-top: 6px; font-style: normal; font-weight: 700; font-size: 0.85rem; }
    .omni-flash { padding: 18px; border-radius: var(--radius-md); background: linear-gradient(135deg, #fff7ed, #ffedd5); border: 1px solid #fed7aa; }
    .omni-flash[hidden] { display: none; }
    .omni-countdown { font-size: 0.9rem; color: var(--accent-dark); font-weight: 600; }
    .omni-countdown b { font-variant-numeric: tabular-nums; padding: 3px 8px; margin-left: 4px; border-radius: 6px; background: var(--accent-dark); color: #fff; }
    .omni-brands { display: flex; flex-wrap: wrap; gap: 10px; }
    .omni-brands a { padding: 10px 18px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text-main); font-weight: 600; font-size: 0.9rem; text-decoration: none; transition: var(--transition); }
    .omni-brands a:hover { border-color: var(--primary); color: var(--primary); box-shadow: var(--shadow-sm); }
    @media (max-width: 900px) {
        .omni-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 20px; padding: 12px; gap: 12px; }
        .omni-promos { display: flex; overflow-x: auto; scroll-snap-type: x proximity; margin: 0 -12px 24px; padding: 0 12px; scrollbar-width: none; }
        .omni-promo { flex: 0 0 78%; scroll-snap-align: start; min-height: 120px; }
        .omni-flash { margin: 0 -12px 28px; border-radius: 0; padding: 14px 12px; }
        .omni-brands { flex-wrap: nowrap; overflow-x: auto; margin: 0 -12px; padding: 0 12px 4px; scrollbar-width: none; }
        .omni-brands a { flex: none; }
    }

    /* Category listing polish */
    .omni-catalog { padding: 28px 32px 36px; }
    .omni-catalog .form-section { margin-bottom: 24px; }
    .omni-subcats-title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 12px; }
    .omni-catalog .omni-chip-list { gap: 10px; }
    .omni-catalog .omni-chip-list .badge { gap: 6px; padding: 9px 16px; font-size: 0.88rem; background: var(--surface); color: var(--text-main); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
    .omni-catalog .omni-chip-list .badge svg { opacity: 0.5; transition: var(--transition); }
    .omni-catalog .omni-chip-list .badge:hover { background: var(--primary); border-color: var(--primary); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3); }
    .omni-catalog .omni-chip-list .badge:hover svg { opacity: 1; transform: translateX(2px); }
    .omni-catalog .omni-toolbar { position: sticky; top: calc(var(--navbar-h, 0px) + 8px); z-index: 20; gap: 10px; padding: 12px 14px; margin-bottom: 24px; background: rgb(var(--surface-rgb) / 0.94); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
    .omni-catalog .omni-search { max-width: 380px; }
    .omni-catalog .omni-search .form-control, .omni-catalog .omni-sort { padding-top: 10px; padding-bottom: 10px; border-radius: 999px; }
    .omni-catalog .omni-search .form-control { padding-left: 40px; }
    .omni-catalog .omni-sort { padding-left: 16px; padding-right: 12px; cursor: pointer; }
    .omni-catalog .omni-toggle span { padding: 9px 16px; background: var(--bg-color); }
    .omni-catalog .omni-result-count { padding-left: 4px; white-space: nowrap; }
    .omni-catalog .omni-card-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 20px; }
    .omni-catalog .omni-card { border-color: var(--line); border-radius: var(--radius-md); box-shadow: 0 1px 3px rgba(28, 25, 23, 0.06); }
    .omni-catalog .omni-card:hover { border-color: var(--border-focus); box-shadow: 0 12px 28px -8px rgba(28, 25, 23, 0.18); transform: translateY(-4px); }
    .omni-catalog .omni-card-media { background: #fff; border-bottom: none; }
    .omni-catalog .omni-card-body { padding: 14px 16px 18px; gap: 8px; border-top: 1px solid var(--line-soft); }
    .omni-catalog .omni-card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; color: var(--text-main); }
    .omni-catalog .omni-price { font-size: 1.05rem; color: var(--primary-ink); }
    .omni-catalog .omni-price-old { color: var(--text-muted); }
    .omni-catalog .omni-pagination a, .omni-catalog .omni-pagination span { border-radius: 999px; }
    @media (max-width: 768px) {
        .omni-catalog { padding: 18px 14px 28px; }
        .omni-catalog .omni-toolbar { position: static; }
        .omni-catalog .omni-search { max-width: none; flex-basis: 100%; }
        .omni-catalog .omni-sort { flex: 1; }
        .omni-catalog .omni-result-count { flex-basis: 100%; margin-left: 0; }
        .omni-catalog .omni-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    }

    /* Page header: compact, light and neutral instead of the large dark-green banner */
    .form-header { background: var(--surface); color: var(--text-main); padding: 18px 32px; border-bottom: 1px solid var(--line); border-left: 4px solid var(--primary); }
    .form-header::after { display: none; }
    .form-header:not(.has-crumbs) { border-radius: var(--radius-md) var(--radius-md) 0 0; }
    .form-header h2 { font-size: 1.45rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; color: var(--text-main); }
    .form-header p { font-size: 0.9rem; color: var(--text-muted); }
    .form-header .omni-hero-chips { margin-top: 10px; }
    .form-header .omni-hero-chips li { background: var(--bg-color); border-color: var(--line); color: var(--text-body); }
    .form-header .omni-hero-chips li.brand { background: var(--primary-light); border-color: transparent; color: var(--primary-ink); }
    .omni-crumbs { padding: 10px 32px; background: var(--bg-color); }
    @media (max-width: 768px) { .form-header { padding: 14px 16px; } .omni-crumbs { padding: 10px 16px; } }

    /* Typewriter caret on the animated search placeholder */
    .omni-ph-word { height: auto; overflow: visible; }
    .omni-ph-text::after { content: ""; display: inline-block; width: 2px; height: 1.15em; margin-left: 2px; vertical-align: text-bottom; background: var(--primary); animation: caretBlink 1s steps(1) infinite; }
    .omni-ph-text.is-static::after { display: none; }
    @keyframes caretBlink { 50% { opacity: 0; } }

    /* Typography: Plus Jakarta Sans for headings, prices, buttons and navigation; Inter stays for body copy */
    :root { --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; }
    body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: 'cv11', 'ss01'; line-height: 1.6; }
    h1, h2, h3, h4, .form-header h2, .form-section-title, .omni-subcats-title, .omni-card-title, .omni-price, .omni-compare-price, .omni-topbar-name, .admin-brand, .omni-tab, .omni-badge, .omni-pill, .btn, .badge, .omni-toggle span, .omni-nav-link, .omni-crumbs, .omni-pagination a, .omni-pagination span, .omni-result-count, .omni-stock, .omni-delivery-badge, .theme-name { font-family: var(--font-display); }
    h1, h2, h3 { letter-spacing: -0.025em; }
    .form-header h2 { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; }
    .form-header p { font-size: 0.95rem; letter-spacing: 0.005em; }
    .omni-subcats-title { font-weight: 700; letter-spacing: 0.1em; }
    .omni-card-title { font-weight: 600; font-size: 0.96rem; letter-spacing: -0.01em; line-height: 1.4; }
    .omni-price { font-weight: 800; font-size: 1.1rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
    .omni-price-old { font-weight: 500; font-size: 0.82rem; }
    .omni-card-meta, .omni-pack { font-size: 0.78rem; letter-spacing: 0.01em; }
    .omni-stock { font-weight: 700; letter-spacing: 0.08em; }
    .btn { font-weight: 700; letter-spacing: 0.01em; }
    .badge, .omni-toggle span, .omni-crumbs a { font-weight: 600; letter-spacing: 0.005em; }
    .omni-crumbs ol { font-size: 0.82rem; }
    .omni-product .omni-price { font-size: 1.9rem; }
    label, .form-label { font-weight: 600; letter-spacing: 0.01em; }

    /* Flat catalogue layout: no outer card, filter sidebar + results */
    .enterprise-form-container.omni-flat { background: transparent; border: none; box-shadow: none; border-radius: 0; }
    .omni-flat .omni-crumbs { padding: 0 0 10px; background: transparent; border: none; border-radius: 0; }
    .omni-flat .form-header { background: transparent; border: none; border-radius: 0; padding: 0 0 22px; }
    .omni-flat .form-header h2 { font-size: 2rem; }
    .omni-flat .form-body.omni-catalog { padding: 0; }
    .omni-shop { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: start; }
    .omni-filters { position: sticky; top: calc(var(--navbar-h, 0px) + 80px); display: flex; flex-direction: column; gap: 14px; }
    .omni-filters form, .omni-filters .omni-subcats { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 18px; }
    .omni-filters .omni-filter-group + .omni-filter-group { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
    .omni-filters .omni-subcats { margin: 0; padding: 18px; border-top: 1px solid var(--line); }
    .omni-filter-title { font-family: var(--font-display); font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 12px; }
    .omni-filters .omni-search { max-width: none; }
    .omni-check { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; font-size: 0.92rem; font-weight: 500; color: var(--text-body); user-select: none; }
    .omni-check input { position: absolute; opacity: 0; pointer-events: none; }
    .omni-check-box { flex: none; width: 20px; height: 20px; border: 2px solid var(--border); border-radius: 6px; background: var(--surface); transition: var(--transition); display: inline-flex; align-items: center; justify-content: center; }
    .omni-check:hover .omni-check-box { border-color: var(--primary); }
    .omni-check input:checked + .omni-check-box { background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 13px no-repeat; border-color: var(--primary); }
    .omni-check input:focus-visible + .omni-check-box { box-shadow: var(--shadow-glow); }
    .omni-filter-clear { margin-top: 18px; width: 100%; padding: 9px; border: 1px dashed var(--border); border-radius: var(--radius-sm); background: transparent; font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: var(--transition); }
    .omni-filter-clear:hover { border-color: var(--primary); color: var(--primary); }
    .omni-subcat-list { list-style: none; display: flex; flex-direction: column; gap: 2px; }
    .omni-subcat-list a { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--text-body); text-decoration: none; font-size: 0.92rem; font-weight: 500; transition: var(--transition); }
    .omni-subcat-list a svg { opacity: 0.35; transition: var(--transition); }
    .omni-subcat-list a:hover { background: var(--primary-light); color: var(--primary-ink); }
    .omni-subcat-list a:hover svg { opacity: 1; transform: translateX(2px); }
    .omni-results-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
    .omni-results-bar .omni-result-count { margin-left: 0; font-size: 0.92rem; font-weight: 600; color: var(--text-main); }
    .omni-sort-wrap { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; font-size: 0.85rem; font-weight: 600; color: var(--text-muted); }
    .omni-results-bar .omni-sort { min-width: 190px; padding: 8px 14px; border-radius: 999px; }
    .omni-filters-toggle { display: none; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font: inherit; font-size: 0.85rem; font-weight: 700; color: var(--text-main); cursor: pointer; }
    .omni-shop .omni-card-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
    @media (max-width: 900px) {
        .omni-shop { grid-template-columns: 1fr; gap: 16px; }
        .omni-filters { position: static; display: none; }
        .omni-filters.is-open { display: flex; }
        .omni-filters-toggle { display: inline-flex; }
        .omni-sort-wrap > span { display: none; }
        .omni-results-bar .omni-sort { min-width: 0; }
        .omni-flat .form-header h2 { font-size: 1.6rem; }
    }

    /* Product cards: add-to-cart row under the price; heart and compare appear on hover */
    .omni-card .omni-card-foot { padding: 0 14px 14px; }
    .omni-card .omni-quick-add { position: static; display: flex; align-items: center; justify-content: center; width: 100%; margin: 0; padding: 10px; opacity: 1; transform: none; border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--primary-light); color: var(--primary-ink); font-family: var(--font-display); font-weight: 700; font-size: 0.86rem; }
    .omni-card .omni-quick-add:hover:not(:disabled) { background: var(--primary); color: #fff; box-shadow: 0 6px 14px rgba(var(--primary-rgb), 0.3); }
    .omni-card .omni-quick-add:disabled { background: var(--bg-color); color: var(--text-muted); border-color: var(--border); }
    .omni-card .omni-card-stepper { position: static; margin: 0; }
    .omni-card.in-cart .omni-quick-add { display: none; }
    .omni-card .omni-wish { opacity: 0; transform: scale(0.85); }
    .omni-card:hover .omni-wish, .omni-card:focus-within .omni-wish, .omni-card .omni-wish.is-on { opacity: 1; transform: none; }
    @media (hover: none) { .omni-card .omni-wish { opacity: 1; transform: none; } }
    @media (max-width: 768px) { .omni-card .omni-card-foot { padding: 0 8px 8px; } }
    .omni-card .omni-card-body { padding-bottom: 12px; }

    .omni-price-range { display: flex; align-items: center; gap: 8px; color: var(--text-muted); }
    .omni-price-range .form-control { padding: 9px 10px; font-size: 0.88rem; min-width: 0; -moz-appearance: textfield; }
    .omni-price-range .form-control::-webkit-outer-spin-button, .omni-price-range .form-control::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
    .omni-card-rating { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; line-height: 1; }
    .omni-card-rating .omni-stars { font-size: 0.82rem; letter-spacing: 0; }
    .omni-card-rating .muted { font-size: 0.76rem; }

    /* Product page buy box */
    .omni-buy-row { align-items: stretch; gap: 12px; margin-top: 22px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
    .omni-buy-row .omni-qty { border: 1.5px solid var(--border); border-radius: 999px; background: var(--bg-color); }
    .omni-buy-row .omni-qty button { width: 44px; background: transparent; font-size: 1.3rem; font-weight: 600; color: var(--text-body); }
    .omni-buy-row .omni-qty button:hover:not(:disabled) { background: var(--primary-light); color: var(--primary-ink); }
    .omni-buy-row .omni-qty input { width: 48px; font-size: 1.05rem; font-family: var(--font-display); }
    .omni-buy-row .omni-add-main { min-height: 52px; border-radius: 999px; font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; letter-spacing: 0.01em; box-shadow: 0 8px 20px -6px rgba(var(--primary-rgb), 0.55); }
    .omni-buy-row .omni-add-main:hover:not(:disabled) { box-shadow: 0 12px 26px -6px rgba(var(--primary-rgb), 0.65); transform: translateY(-2px); }
    .omni-buy-row .omni-add-main .lbl { display: inline-flex; align-items: center; gap: 10px; }
    .omni-buy-row .omni-add-main:disabled { background: var(--bg-color); color: var(--text-muted); box-shadow: none; border: 1px solid var(--border); }
    .omni-product .omni-compare-toggle.inline { margin-top: 16px; }
    .omni-product .omni-compare-toggle.inline span { background: transparent; border-style: dashed; }
    @media (max-width: 480px) { .omni-buy-row { padding: 10px; } .omni-buy-row .omni-qty { width: 100%; justify-content: space-between; } .omni-buy-row .omni-qty input { flex: 1; } .omni-buy-row .omni-add-main { flex-basis: 100%; } }

    /* Compare page */
    .omni-compare-page .omni-compare-tools { padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
    .omni-compare-clear { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font: inherit; font-family: var(--font-display); font-size: 0.85rem; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: var(--transition); }
    .omni-compare-clear:hover { border-color: var(--error); color: var(--error); background: var(--error-light); }
    .omni-compare-scroll { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
    .omni-compare-table { border-collapse: separate; border-spacing: 0; }
    .omni-compare-table th, .omni-compare-table td { border-right: none; border-bottom: 1px solid var(--line-soft); padding: 16px 20px; }
    .omni-compare-table thead th { border-bottom: 1px solid var(--line); background: var(--surface); }
    .omni-compare-table th:first-child { background: var(--bg-color); font-family: var(--font-display); font-size: 0.74rem; letter-spacing: 0.08em; color: var(--text-muted); border-right: 1px solid var(--line); }
    .omni-compare-table thead th:first-child { background: var(--bg-color); }
    .omni-compare-table tbody tr:nth-child(even) td { background: var(--surface-alt); }
    .omni-compare-table tbody tr:hover td { background: rgba(var(--primary-rgb), 0.05); }
    .omni-compare-table td:not(:last-child), .omni-compare-table thead th:not(:last-child):not(:first-child) { border-right: 1px solid var(--line-soft); }
    .omni-compare-head { padding: 24px 20px 20px !important; }
    .omni-compare-img { width: 150px; height: 150px; margin: 0 auto 14px; align-items: center; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius-md); transition: var(--transition); }
    .omni-compare-img:hover { border-color: var(--border-focus); box-shadow: var(--shadow-md); transform: translateY(-2px); }
    .omni-compare-img img { width: 130px; height: 130px; }
    .omni-compare-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-family: var(--font-display); font-size: 0.98rem; font-weight: 700; letter-spacing: -0.01em; }
    .omni-compare-head small { display: inline-block; margin-top: 8px; padding: 2px 10px; border-radius: 999px; background: var(--primary-light); color: var(--primary-ink); font-weight: 600; }
    .omni-compare-remove { top: 12px; right: 12px; width: 28px; height: 28px; border: 1px solid var(--line); background: var(--surface); }
    .omni-compare-price { font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text-main); }
    td.is-best { background: linear-gradient(180deg, rgba(var(--primary-rgb), 0.1), rgba(var(--primary-rgb), 0.04)) !important; box-shadow: inset 0 3px 0 var(--primary); }
    .omni-pill { padding: 3px 10px; font-size: 0.7rem; letter-spacing: 0.02em; }
    .omni-compare-table tfoot td, .omni-compare-table tfoot th { background: var(--bg-color); border-top: 1px solid var(--line); border-bottom: none; padding: 16px 20px; }
    .omni-compare-table tfoot .btn { border-radius: 999px; padding: 12px; font-family: var(--font-display); font-weight: 700; box-shadow: 0 8px 20px -8px rgba(var(--primary-rgb), 0.6); }
    .omni-compare-table tfoot .btn .lbl { display: inline-flex; align-items: center; gap: 8px; }
    .omni-compare-table tfoot .btn:disabled { background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); box-shadow: none; }
    @media (max-width: 700px) { .omni-compare-head { padding: 18px 12px 14px !important; } .omni-compare-img { width: 110px; height: 110px; } .omni-compare-img img { width: 94px; height: 94px; } }

    /* Compare table: every product is its own visible column (gutter + alternating tint) */
    .omni-compare-table { border-collapse: separate; border-spacing: 0; }
    .omni-compare-table thead th:not(:first-child), .omni-compare-table tbody td, .omni-compare-table tfoot td { border-left: 4px solid var(--bg-color); border-right: none !important; background: var(--surface); }
    .omni-compare-table thead th:not(:first-child):nth-child(odd), .omni-compare-table tbody td:nth-child(odd), .omni-compare-table tfoot td:nth-child(odd) { background: rgba(var(--primary-rgb), 0.055); }
    .omni-compare-table thead th:not(:first-child) { border-top: 4px solid var(--primary); border-bottom: 2px solid var(--line); }
    .omni-compare-table tbody tr:nth-child(even) td { background: inherit; }
    .omni-compare-table tbody tr:nth-child(even) td:nth-child(even) { background: var(--surface); }
    .omni-compare-table tbody tr:nth-child(even) td:nth-child(odd) { background: rgba(var(--primary-rgb), 0.055); }
    .omni-compare-table tbody td { border-bottom: 1px solid var(--line); }
    .omni-compare-table tbody tr:hover td { background: rgba(var(--primary-rgb), 0.11) !important; }
    .omni-compare-table td.is-best { background: linear-gradient(180deg, rgba(var(--primary-rgb), 0.18), rgba(var(--primary-rgb), 0.08)) !important; }
    .omni-compare-table tfoot td { border-top: 2px solid var(--line); }
    .omni-compare-table th:first-child { border-right: 2px solid var(--line); }
    .omni-compare-scroll { border: 2px solid var(--line); }

    /* Compare page: fixes and additions */
    .omni-compare-page { padding: 0 !important; }
    .omni-compare-page .omni-compare-tools { margin-bottom: 16px; }
    .omni-compare-tools-left { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
    .omni-diff-legend { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--text-muted); }
    .omni-diff-legend i, .omni-compare-table tr.is-diff > th:first-child::after { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12); }
    .omni-compare-table tr.is-diff > th:first-child::after { margin-left: 8px; vertical-align: middle; }
    .omni-compare-scroll { overflow: clip; }
    .omni-compare-table { min-width: calc(170px + var(--cols) * 230px); }
    .omni-compare-table th:first-child { width: 170px; overflow-wrap: normal; word-break: normal; hyphens: manual; line-height: 1.35; }
    .omni-compare-table td, .omni-compare-table thead th:not(:first-child) { overflow-wrap: break-word; }
    .omni-compare-head { padding: 20px 18px 18px !important; }
    .omni-compare-head.is-best { box-shadow: inset 0 4px 0 var(--success); }
    .omni-compare-buy { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
    .omni-compare-badges { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; min-height: 22px; }
    .omni-compare-buy .btn { width: 100%; margin-top: 6px; padding: 11px; border-radius: 999px; font-family: var(--font-display); font-weight: 700; box-shadow: 0 8px 20px -8px rgba(var(--primary-rgb), 0.6); }
    .omni-compare-buy .btn .lbl { display: inline-flex; align-items: center; gap: 8px; }
    .omni-compare-buy .btn:disabled { background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); box-shadow: none; }
    .omni-compare-table td { padding: 14px 20px; }

    .omni-clamp { max-height: 168px; overflow: hidden; position: relative; }
    .omni-clamp:not(.is-short)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 44px; background: linear-gradient(transparent, rgb(var(--surface-rgb) / 0.96)); pointer-events: none; }
    tr.is-open .omni-clamp { max-height: none; }
    tr.is-open .omni-clamp::after { display: none; }
    .omni-compare-text { max-height: none; overflow: visible; }
    .omni-clamp-more { margin-top: 6px; padding: 0; border: none; background: none; font: inherit; font-size: 0.82rem; font-weight: 700; color: var(--primary); cursor: pointer; }
    .omni-clamp-more:hover { text-decoration: underline; }

    /* Plain dots for spec lists; ticks only for the features row */
    .omni-compare-text ul li { padding-left: 20px; }
    .omni-compare-text ul li::before { width: 7px; height: 7px; top: 8px; left: 3px; background: var(--primary); opacity: 0.55; }
    tr.has-ticks .omni-compare-text ul li { padding-left: 30px; }
    tr.has-ticks .omni-compare-text ul li::before { width: 18px; height: 18px; top: 4px; left: 0; background: var(--success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center / 12px no-repeat; opacity: 1; }

    /* Compact sticky product bar */
    .omni-compare-mini { position: sticky; top: calc(var(--navbar-h, 0px) + 68px); z-index: 30; display: grid; grid-template-columns: 170px repeat(var(--cols), minmax(0, 1fr)); margin-bottom: 8px; background: rgb(var(--surface-rgb) / 0.96); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); animation: fadeInUp 0.2s ease-out; }
    .omni-compare-mini[hidden] { display: none; }
    .omni-compare-mini-item { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 12px; border-left: 4px solid var(--bg-color); }
    .omni-compare-mini-item img { width: 40px; height: 40px; object-fit: contain; flex: none; border-radius: 6px; background: #fff; }
    .omni-compare-mini-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
    .omni-compare-mini-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.82rem; font-family: var(--font-display); }
    .omni-compare-mini-text small { font-weight: 700; color: var(--primary-ink); }
    .omni-compare-mini .btn { flex: none; padding: 7px 14px; font-size: 0.8rem; border-radius: 999px; }

    @media (max-width: 900px) {
        .omni-compare-scroll { overflow-x: auto; overflow-y: clip; scroll-snap-type: x proximity; }
        .omni-compare-mini { display: none !important; }
    }
    @media (max-width: 700px) {
        .omni-compare-table { min-width: calc(104px + var(--cols) * 74vw); }
        .omni-compare-table th:first-child { width: 104px; font-size: 0.68rem; padding: 12px 10px; }
        .omni-compare-table thead th:not(:first-child), .omni-compare-table td { scroll-snap-align: start; padding-left: 14px; padding-right: 14px; }
    }

    .omni-compare-head .omni-compare-name { min-height: 2.8em; }
    .omni-compare-head small { min-height: 22px; }
    .omni-compare-buy .omni-compare-price { line-height: 1.2; }
    .omni-compare-buy .omni-compare-badges { min-height: 26px; }

    @media (max-width: 900px) { .omni-compare-scroll { scroll-padding-left: 170px; } }
    @media (max-width: 700px) { .omni-compare-scroll { scroll-padding-left: 104px; } }

    /* Sticky filter sidebar: never taller than the window; it scrolls inside itself so the lower items stay reachable */
    .omni-filters { max-height: calc(100vh - var(--navbar-h, 0px) - 96px); overflow-y: auto; overscroll-behavior: contain; padding: 2px 4px 2px 2px; margin: -2px -4px -2px -2px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
    .omni-filters::-webkit-scrollbar { width: 6px; }
    .omni-filters::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
    @media (max-height: 640px) { .omni-filters { position: static; max-height: none; overflow: visible; } }
    @media (max-width: 900px) { .omni-filters { max-height: none; overflow: visible; margin: 0; padding: 0; } }

    /* Help button: bottom-right (below the cart button) so it never covers the filter sidebar */
    .omni-help, .menu-left .omni-help { left: auto; right: 20px; bottom: calc(20px + var(--compare-h, 0px)); }
    .menu-right .omni-help { right: calc(var(--side-w) + 20px); }
    .menu-bottom .omni-help { bottom: calc(var(--menu-bar-h) + 20px + var(--compare-h, 0px)); }

    .omni-filters .omni-subcats { padding: 14px 14px 10px; }
    .omni-filters .omni-subcats .omni-filter-title { margin-bottom: 6px; padding: 0 6px; }
    .omni-subcat-list a { padding: 8px 10px; }

    .omni-filter-search .omni-search { max-width: none; }
    .omni-filter-search .form-control { background: var(--surface); box-shadow: var(--shadow-md); border-radius: 999px; padding: 11px 16px 11px 40px; }

    /* "All filters" header and search options */
    .omni-filters-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px 0; }
    .omni-filters-head h2 { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text-main); }
    .omni-filters-head h2 svg { color: var(--primary); }
    .omni-filter-clear-link { border: none; background: none; font: inherit; font-size: 0.82rem; font-weight: 700; color: var(--primary); cursor: pointer; padding: 4px 8px; border-radius: 999px; transition: var(--transition); }
    .omni-filter-clear-link:hover { background: var(--primary-light); color: var(--primary-ink); }
    .omni-search-options { margin-top: 8px; font-size: 0.85rem; }
    .omni-search-options summary { cursor: pointer; padding: 4px 8px; font-weight: 600; color: var(--text-muted); list-style: none; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; transition: var(--transition); }
    .omni-search-options summary::-webkit-details-marker { display: none; }
    .omni-search-options summary::before { content: "+"; display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary-light); color: var(--primary-ink); font-weight: 800; line-height: 1; }
    .omni-search-options[open] summary::before { content: "−"; }
    .omni-search-options summary:hover { color: var(--primary); }
    .omni-search-options fieldset { border: none; margin: 10px 0 0; padding: 0; min-width: 0; }
    .omni-search-options legend { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; padding: 0 4px; }
    .omni-pill-group { display: flex; flex-wrap: wrap; gap: 6px; }
    .omni-pill-group label { cursor: pointer; }
    .omni-pill-group input { position: absolute; opacity: 0; pointer-events: none; }
    .omni-pill-group span { display: inline-flex; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-weight: 600; font-size: 0.8rem; color: var(--text-body); transition: var(--transition); }
    .omni-pill-group span:hover { border-color: var(--primary); color: var(--primary); }
    .omni-pill-group input:checked + span { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 4px 10px -3px rgba(var(--primary-rgb), 0.6); }
    .omni-pill-group input:focus-visible + span { box-shadow: var(--shadow-glow); }

    /* Sharper product images: photos are 1000x800, so the tile matches that ratio and the picture fills it */
    .omni-card-media { aspect-ratio: 5 / 4; }
    .omni-card-media img { padding: 4px; image-rendering: -webkit-optimize-contrast; filter: contrast(1.05) saturate(1.06); transform: translateZ(0); backface-visibility: hidden; }
    .omni-card:hover .omni-card-media img { transform: scale(1.04) translateZ(0); }
    .omni-card-media .omni-noimg { width: 30%; }

    /* Cart panel links and the full cart page */
    .omni-cart-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
    .omni-cartpage { padding: 0 !important; }
    .omni-cartpage .omni-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 60px 20px; }
    .omni-cartpage-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
    .omni-cartpage-head, .omni-cartpage-list li { display: grid; grid-template-columns: minmax(0, 1fr) 110px 150px 120px 36px; gap: 14px; align-items: center; }
    .omni-cartpage-head { padding: 0 18px 8px; font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
    .omni-cartpage-list { list-style: none; display: grid; gap: 12px; }
    .omni-cartpage-list li { padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: var(--transition); }
    .omni-cartpage-list li:hover { box-shadow: var(--shadow-md); border-color: var(--border-focus); }
    .omni-cartpage-product { display: flex; align-items: center; gap: 14px; min-width: 0; }
    .omni-cartpage-product img { width: 72px; height: 58px; object-fit: contain; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); flex: none; }
    .omni-cartpage-product > a:last-child { font-family: var(--font-display); font-weight: 600; line-height: 1.35; color: var(--text-main); text-decoration: none; }
    .omni-cartpage-product > a:last-child:hover { color: var(--primary); }
    .omni-cartpage-price { color: var(--text-body); font-variant-numeric: tabular-nums; }
    .omni-cartpage-line { font-family: var(--font-display); font-size: 1.02rem; font-variant-numeric: tabular-nums; }
    .omni-cartpage-list .omni-qty { border-radius: 999px; background: var(--bg-color); }
    .omni-cartpage-list .omni-qty button { width: 38px; background: transparent; }
    .omni-cartpage-list .omni-qty input { width: 44px; color: var(--text-main); }
    .omni-cartpage-remove { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--text-muted); cursor: pointer; transition: var(--transition); }
    .omni-cartpage-remove:hover { border-color: var(--error); color: var(--error); background: var(--error-light); }
    .omni-cartpage-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 18px; }
    .omni-cartpage-summary { position: sticky; top: calc(var(--navbar-h, 0px) + 80px); padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
    .omni-cartpage-summary h2 { font-size: 1.1rem; margin-bottom: 14px; }
    .omni-cartpage-summary dl > div { display: flex; justify-content: space-between; padding: 8px 0; color: var(--text-body); }
    .omni-cartpage-summary dd { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-main); }
    .omni-cartpage-summary .omni-cartpage-total { margin-top: 6px; padding-top: 14px; border-top: 1px dashed var(--border); font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; }
    .omni-cartpage-summary .muted { margin: 8px 0 16px; }
    .omni-cartpage-summary .btn { width: 100%; padding: 14px; border-radius: 999px; text-decoration: none; font-family: var(--font-display); font-weight: 700; }
    @media (max-width: 900px) {
        .omni-cartpage-grid { grid-template-columns: 1fr; }
        .omni-cartpage-summary { position: static; }
    }
    @media (max-width: 700px) {
        .omni-cartpage-head { display: none; }
        .omni-cartpage-list li { grid-template-columns: 1fr auto; grid-template-areas: "product remove" "price price" "qty line"; gap: 10px 12px; padding: 14px; }
        .omni-cartpage-list li > .omni-cartpage-product { grid-area: product; }
        .omni-cartpage-list li > .omni-cartpage-remove { grid-area: remove; }
        .omni-cartpage-list li > .omni-cartpage-price { grid-area: price; font-size: 0.88rem; }
        .omni-cartpage-list li > .omni-qty { grid-area: qty; justify-self: start; }
        .omni-cartpage-list li > .omni-cartpage-line { grid-area: line; justify-self: end; }
    }

    .omni-cartpage [hidden], .omni-cartpage .omni-empty[hidden], .omni-cartpage-grid[hidden] { display: none !important; }

    /* Interactive cart buttons: ripple, sliding arrow, loading state, two-step clear */
    .omni-btn-fx { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; text-decoration: none; cursor: pointer; border: 2px solid transparent; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s, background 0.25s, color 0.25s, border-color 0.25s; -webkit-tap-highlight-color: transparent; }
    .omni-btn-fx::after { content: ""; position: absolute; left: var(--x, 50%); top: var(--y, 50%); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: currentColor; opacity: 0; pointer-events: none; }
    .omni-btn-fx.is-rippling::after { animation: fxRipple 0.65s ease-out; }
    @keyframes fxRipple { from { opacity: 0.35; transform: scale(1); } to { opacity: 0; transform: scale(34); } }
    .omni-btn-fx:hover { transform: translateY(-2px); }
    .omni-btn-fx:active { transform: translateY(0) scale(0.97); }
    .omni-btn-fx:focus-visible, .omni-clear-btn:focus-visible { outline: none; box-shadow: var(--shadow-glow); }
    .omni-btn-fx.primary { color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-hover)); box-shadow: 0 8px 20px -8px rgba(var(--primary-rgb), 0.7); }
    .omni-btn-fx.primary::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%); transform: translateX(-120%); }
    .omni-btn-fx.primary:hover { box-shadow: 0 14px 28px -8px rgba(var(--primary-rgb), 0.85); }
    .omni-btn-fx.primary:hover::before { transform: translateX(120%); transition: transform 0.7s ease; }
    .omni-btn-fx.outline { color: var(--text-main); background: var(--surface); border-color: var(--border); }
    .omni-btn-fx.outline:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-light); }
    .omni-btn-fx .fx-arrow { transition: transform 0.25s ease; }
    .omni-btn-fx:hover .fx-arrow { transform: translateX(4px); }
    .omni-btn-fx:hover .fx-arrow.back { transform: translateX(-4px); }
    .omni-btn-fx.is-loading { pointer-events: none; opacity: 0.85; }
    .omni-btn-fx.is-loading .fx-arrow { display: none; }
    .omni-btn-fx.is-loading::before { content: ""; position: static; width: 16px; height: 16px; border: 2.5px solid rgba(255, 255, 255, 0.45); border-top-color: currentColor; border-radius: 50%; background: none; transform: none; animation: spin 0.7s linear infinite; }
    .omni-btn-fx.outline.is-loading::before { border-color: var(--border); border-top-color: var(--primary); }
    .omni-cart-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
    .omni-cart-links .omni-btn-fx { padding: 11px 10px; font-size: 0.88rem; }
    .omni-clear-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 10px; padding: 8px 14px; border: 1px dashed var(--border); border-radius: 999px; background: transparent; font: inherit; font-family: var(--font-display); font-size: 0.82rem; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: var(--transition); }
    .omni-clear-btn:hover { color: var(--error); border-color: var(--error); background: var(--error-light); }
    .omni-clear-btn.is-armed { color: #fff; background: var(--error); border: 1px solid var(--error); animation: armedPulse 0.9s ease-in-out infinite; }
    @keyframes armedPulse { 50% { box-shadow: 0 0 0 5px rgba(239, 68, 68, 0.25); } }
    .omni-cartpage-actions .omni-clear-btn { width: auto; margin: 0; padding: 10px 18px; }

    .omni-cart-toast { position: fixed; left: 50%; bottom: calc(24px + var(--compare-h, 0px)); transform: translateX(-50%); z-index: 1300; display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 18px; border-radius: 999px; background: var(--text-main); color: var(--bg-color); font-size: 0.9rem; font-weight: 500; box-shadow: var(--shadow-lg); }
    .omni-cart-toast[hidden] { display: none; }
    .omni-cart-toast.is-in { animation: toastIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
    @keyframes toastIn { from { opacity: 0; transform: translate(-50%, 20px) scale(0.95); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
    .omni-cart-toast button { border: none; border-radius: 999px; padding: 6px 14px; background: var(--primary); color: #fff; font: inherit; font-weight: 700; cursor: pointer; transition: var(--transition); }
    .omni-cart-toast button:hover { transform: scale(1.06); }
    .menu-bottom .omni-cart-toast { bottom: calc(var(--menu-bar-h) + 24px + var(--compare-h, 0px)); }

    /* Cart page motion */
    .omni-cartpage-list li.is-new { animation: rowIn 0.35s ease-out; }
    .omni-cartpage-list li.is-flash { animation: rowFlash 0.7s ease-out; }
    .omni-cartpage-list li.is-leaving { animation: rowOut 0.26s ease-in forwards; pointer-events: none; }
    @keyframes rowIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
    @keyframes rowFlash { 0% { background: var(--primary-light); } 100% { background: var(--surface); } }
    @keyframes rowOut { to { opacity: 0; transform: translateX(40px) scale(0.97); } }
    .is-bump { animation: numBump 0.35s ease-out; }
    @keyframes numBump { 40% { transform: scale(1.08); color: var(--primary); } }
    .omni-cartpage-list .omni-qty button { transition: var(--transition); touch-action: manipulation; user-select: none; }
    .omni-cartpage-list .omni-qty button:active { transform: scale(0.85); background: var(--primary); color: #fff; }
    .omni-cartpage-remove:active { transform: scale(0.85) rotate(90deg); }
    .omni-cartpage-summary .omni-free-ship.is-celebrate { animation: shipCelebrate 0.9s ease-out; }
    @keyframes shipCelebrate { 30% { transform: scale(1.04); } 60% { transform: scale(0.99); } }
    .omni-cartpage-summary .omni-btn-fx.primary { width: 100%; padding: 15px; font-size: 1rem; }
    .omni-cartpage-bar { display: none; }
    @media (max-width: 900px) {
        .omni-cartpage-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: fixed; left: 12px; right: 12px; bottom: 76px; z-index: 1200; padding: 10px 12px 10px 18px; background: rgb(var(--surface-rgb) / 0.96); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-lg); animation: toastIn 0.3s ease-out; }
        .omni-cartpage-bar[hidden] { display: none; }
        .omni-cartpage-bar small { display: block; font-size: 0.7rem; color: var(--text-muted); line-height: 1; }
        .omni-cartpage-bar strong { font-family: var(--font-display); font-size: 1.05rem; }
        .omni-cartpage-bar .omni-btn-fx { padding: 10px 18px; }
        .omni-cartpage { padding-bottom: 80px !important; }
    }
    @media (prefers-reduced-motion: reduce) { .omni-btn-fx, .omni-btn-fx::before, .omni-btn-fx::after, .omni-cartpage-list li, .is-bump, .omni-clear-btn.is-armed, .omni-cart-toast { animation: none !important; transition: none !important; } }

    /* Cart page quantity stepper: three cells share the width, so the gaps around - and + match */
    .omni-cartpage-list .omni-qty { display: grid; grid-template-columns: 1fr 1.25fr 1fr; align-items: stretch; width: 100%; max-width: 150px; }
    .omni-cartpage-list .omni-qty button, .omni-cartpage-list .omni-qty input { width: 100%; min-width: 0; padding: 0; display: flex; align-items: center; justify-content: center; text-align: center; }
    .omni-cartpage-list .omni-qty button { height: 38px; font-size: 1.25rem; line-height: 1; }
    .omni-cartpage-list .omni-qty input { height: 38px; }
    @media (max-width: 700px) { .omni-cartpage-list li > .omni-qty { width: 150px; } }

    /* Search box category dropdown */
    .omni-searchbar.has-scope > svg { display: none; }
    .omni-search-scope { position: absolute; left: 6px; top: 6px; bottom: 6px; z-index: 2; display: flex; align-items: center; }
    .omni-search-scope select { height: 100%; max-width: 100%; padding: 0 28px 0 14px; border: none; border-radius: 999px; background: var(--primary-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 11px center / 12px no-repeat; color: var(--primary-ink); font: inherit; font-size: 0.85rem; font-weight: 600; font-family: var(--font-display); cursor: pointer; appearance: none; -webkit-appearance: none; text-overflow: ellipsis; transition: var(--transition); }
    .omni-search-scope select:hover { background-color: color-mix(in srgb, var(--primary) 22%, var(--surface)); }
    .omni-search-scope select:focus-visible { outline: none; box-shadow: var(--shadow-glow); }
    .omni-search-scope select option { color: var(--text-main); background: var(--surface); font-weight: 500; }
    .omni-searchbar.has-scope input { padding-left: var(--scope-w, 160px); }
    .omni-searchbar.has-scope .omni-ph { left: var(--scope-w, 160px); }
    @media (max-width: 760px) { .omni-search-scope select { font-size: 0.8rem; padding-left: 12px; } }

    /* Sitemap page */
    .omni-sitemap { padding: 0 !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
    .omni-sitemap-card { padding: 22px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
    .omni-sitemap-card h2 { font-size: 1.05rem; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--primary-light); }
    .omni-sitemap-wide { grid-column: 1 / -1; }
    .omni-sitemap-links { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px 18px; }
    .omni-sitemap a { color: var(--text-body); text-decoration: none; transition: var(--transition); }
    .omni-sitemap a:hover { color: var(--primary); }
    .omni-sitemap-links a { display: block; padding: 6px 0; font-weight: 500; }
    .omni-sitemap-links a:hover { transform: translateX(4px); }
    .omni-sitemap-tree { columns: 3 260px; column-gap: 28px; }
    .omni-sitemap-root { break-inside: avoid; margin-bottom: 22px; }
    .omni-sitemap-rootlink { display: inline-block; margin-bottom: 6px; font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: var(--primary-ink) !important; }
    .omni-sitemap-branch { list-style: none; margin-left: 4px; padding-left: 14px; border-left: 2px solid var(--line); }
    .omni-sitemap-branch .omni-sitemap-branch { margin-top: 2px; }
    .omni-sitemap-branch li { padding: 3px 0; font-size: 0.9rem; position: relative; }
    .omni-sitemap-branch li::before { content: ""; position: absolute; left: -14px; top: 14px; width: 10px; height: 2px; background: var(--line); }
    @media (max-width: 760px) { .omni-sitemap { grid-template-columns: 1fr; } }

    /* RSS: pill on category pages and the feeds page */
    .omni-rss-pill + .omni-rss-pill { margin-left: 0; }
    .omni-rss-pill { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 6px 12px; border-radius: 999px; background: var(--primary-light); color: var(--primary-ink); font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; text-decoration: none; transition: var(--transition); }
    .omni-rss-pill:hover { background: var(--primary); color: #fff; transform: translateY(-1px); }
    .omni-rss-pill + .omni-sort-wrap { margin-left: 0; }
    .omni-feeds { padding: 0 !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
    .omni-feed-list { list-style: none; display: grid; gap: 12px; }
    .omni-feed-list li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-color); }
    .omni-feed-list strong { display: block; font-family: var(--font-display); }
    .omni-feed-list li > div span { font-size: 0.85rem; color: var(--text-muted); }
    .omni-feed-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; margin-bottom: 14px; }
    .omni-feed-fields label:not(.omni-check) { display: grid; gap: 6px; font-size: 0.8rem; font-weight: 700; color: var(--text-muted); }
    .omni-feed-result { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; }
    .omni-feed-result input { font-size: 0.82rem; }
    .omni-feeds .omni-btn-fx { padding: 10px 16px; font-size: 0.85rem; white-space: nowrap; }
    @media (max-width: 900px) { .omni-feeds { grid-template-columns: 1fr; } .omni-feed-list li, .omni-feed-result { grid-template-columns: 1fr 1fr; } .omni-feed-list li > div, .omni-feed-result input { grid-column: 1 / -1; } }

    .omni-feeds .omni-sitemap-links a { color: var(--text-body); text-decoration: none; font-weight: 500; }
    .omni-feeds .omni-sitemap-links a:hover { color: var(--primary); transform: translateX(4px); }

    /* Button labels always use the button's own colour (never a muted style from a parent list) */
    .omni-btn-fx span { color: inherit; font-size: inherit; }
    .omni-btn-fx.primary, .omni-btn-fx.primary span { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28); }
    .omni-btn-fx.outline, .omni-btn-fx.outline span { color: var(--text-main); }
    .omni-btn-fx.outline:hover, .omni-btn-fx.outline:hover span { color: var(--primary-ink); }

    /* Feeds page: one row per feed with a block per format */
    .omni-feed-list li { grid-template-columns: 1fr; }
    .omni-feed-actions { display: grid; gap: 8px; }
    .omni-feed-format { display: grid; grid-template-columns: 92px auto 1fr; gap: 8px; align-items: center; }
    .omni-feed-format b { font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
    .omni-feed-format .omni-btn-fx.primary { justify-self: start; }
    .omni-feeds .omni-sitemap-links li { display: flex; align-items: center; gap: 8px; }
    .omni-feed-cat { flex: 1; font-weight: 600; color: var(--text-body); }
    .omni-feeds .omni-sitemap-links li a { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--primary-light); color: var(--primary-ink); font-size: 0.75rem; font-weight: 700; }
    .omni-feeds .omni-sitemap-links li a:hover { background: var(--primary); color: #fff; transform: none; }

    /* Subscribe box on product pages */
    .omni-subscribe { margin-top: 20px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--primary); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
    .omni-subscribe h3 { display: flex; align-items: center; gap: 8px; font-size: 1rem; color: var(--text-main); }
    .omni-subscribe h3 svg { color: var(--primary); }
    .omni-subscribe p { margin: 4px 0 10px; font-size: 0.88rem; color: var(--text-muted); }
    .omni-subscribe-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px dashed var(--line); font-size: 0.88rem; }
    .omni-subscribe-row > span { flex: 1; font-weight: 600; color: var(--text-body); }
    .omni-subscribe-row a, .omni-subscribe-row button { padding: 4px 12px; border: none; border-radius: 999px; background: var(--primary-light); color: var(--primary-ink); font: inherit; font-size: 0.78rem; font-weight: 700; text-decoration: none; cursor: pointer; transition: var(--transition); }
    .omni-subscribe-row a:hover, .omni-subscribe-row button:hover { background: var(--primary); color: #fff; }
    .omni-subscribe-row button span { color: inherit; flex: none; font-weight: inherit; }
    .omni-subscribe-more { display: inline-block; margin-top: 8px; font-size: 0.82rem; font-weight: 700; color: var(--primary-ink); text-decoration: none; }
    .omni-subscribe-more:hover { text-decoration: underline; }

    /* Saved addresses and the account tabs */
    .omni-address-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
    .omni-address header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
    .omni-address p { margin: 2px 0; color: var(--text-body); font-size: 0.9rem; }
    .omni-address footer { display: flex; gap: 8px; margin-top: 12px; }
    .admin-tabs { display: flex; gap: 6px; padding: 5px; width: fit-content; background: var(--bg-color); border: 1px solid var(--line); border-radius: 999px; }
    .admin-tabs a { padding: 8px 18px; border-radius: 999px; text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 0.88rem; color: var(--text-muted); transition: var(--transition); }
    .admin-tabs a.active { background: linear-gradient(135deg, var(--primary), var(--primary-hover)); color: #fff; }
    .check-inline { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--text-body); cursor: pointer; }

    /* Log in / register: palette-coloured showcase + floating-label card */
    .omni-auth { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); max-width: 1000px; margin: 10px auto 0; border-radius: calc(var(--radius-md) * 1.5); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--line); background: var(--surface); animation: fadeInUp 0.5s ease-out; }
    .omni-auth-showcase { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 44px 38px; color: #fff; background: radial-gradient(260px circle at var(--mx, -400px) var(--my, -400px), var(--fx-glow, rgba(255, 255, 255, 0.25)), transparent 70%), linear-gradient(135deg, var(--menu-from) 0%, var(--menu-mid) 55%, var(--menu-to) 110%); background-size: 100% 100%, 200% 200%; animation: authFlow 16s ease-in-out infinite; }
    @keyframes authFlow { 0%, 100% { background-position: 0 0, 0% 50%; } 50% { background-position: 0 0, 100% 50%; } }
    .omni-auth-orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(2px); opacity: 0.35; animation: authFloat 9s ease-in-out infinite alternate; }
    .orb-1 { width: 220px; height: 220px; top: -70px; right: -60px; background: var(--primary); }
    .orb-2 { width: 150px; height: 150px; bottom: 50px; left: -50px; background: var(--accent); animation-duration: 12s; animation-direction: alternate-reverse; }
    .orb-3 { width: 90px; height: 90px; bottom: -30px; right: 60px; background: rgba(255, 255, 255, 0.4); animation-duration: 7s; }
    @keyframes authFloat { to { transform: translate(18px, 26px) scale(1.12); } }
    .omni-auth-brand { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; margin-bottom: 10px; font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; color: #fff; text-decoration: none; }
    .omni-auth-showcase h2 { font-size: 2rem; line-height: 1.15; letter-spacing: -0.03em; color: #fff; }
    .omni-auth-showcase > p { color: rgba(255, 255, 255, 0.82); line-height: 1.6; }
    .omni-auth-perks { list-style: none; display: grid; gap: 14px; margin-top: 14px; }
    .omni-auth-perks li { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(4px); transition: var(--transition); }
    .omni-auth-perks li:hover { background: rgba(255, 255, 255, 0.16); transform: translateX(6px); }
    .omni-auth-perks li > span { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--accent); color: var(--on-accent); }
    .omni-auth-perks strong { display: block; font-family: var(--font-display); font-size: 0.95rem; }
    .omni-auth-perks small { color: rgba(255, 255, 255, 0.72); font-size: 0.8rem; }
    .omni-auth-card { padding: 44px 42px; }
    .omni-auth-card h1 { font-size: 1.9rem; letter-spacing: -0.03em; }
    .omni-auth-sub { margin: 4px 0 22px; color: var(--text-muted); }
    .omni-auth-alert { margin-bottom: 16px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--error-light); color: var(--error); font-weight: 600; font-size: 0.9rem; border-left: 4px solid var(--error); }
    .omni-float { position: relative; margin-bottom: 16px; }
    .omni-float input { width: 100%; height: 56px; padding: 22px 46px 6px 16px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-color); color: var(--text-main); font: inherit; font-size: 1rem; transition: var(--transition); }
    .omni-float input:hover { border-color: var(--border-focus); }
    .omni-float input:focus { outline: none; border-color: var(--primary); background: var(--surface); box-shadow: var(--shadow-glow); }
    .omni-float input.is-invalid { border-color: var(--error); background: var(--error-light); }
    .omni-float label { position: absolute; left: 17px; top: 17px; color: var(--text-muted); font-size: 1rem; pointer-events: none; transform-origin: left top; transition: transform 0.18s ease, color 0.18s ease; }
    .omni-float input:focus + label, .omni-float input:not(:placeholder-shown) + label { transform: translateY(-11px) scale(0.78); color: var(--primary-ink); font-weight: 600; }
    .omni-float-ok { position: absolute; right: 16px; top: 19px; padding: 2px; border-radius: 50%; background: var(--success); color: #fff; opacity: 0; transform: scale(0.4); transition: var(--transition); pointer-events: none; }
    .omni-float.is-valid .omni-float-ok { opacity: 1; transform: scale(1); }
    .omni-eye { position: absolute; right: 8px; top: 8px; width: 40px; height: 40px; display: grid; place-items: center; border: none; border-radius: 50%; background: transparent; color: var(--text-muted); cursor: pointer; transition: var(--transition); }
    .omni-eye:hover { background: var(--primary-light); color: var(--primary-ink); }
    .omni-eye .eye-off { display: none; }
    .omni-eye.is-on .eye-on { display: none; }
    .omni-eye.is-on .eye-off { display: block; }
    .omni-caps { margin: -6px 0 12px; padding: 6px 12px; width: fit-content; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: 0.8rem; font-weight: 700; }
    .omni-caps[hidden] { display: none; }
    .omni-strength { display: flex; align-items: center; gap: 12px; margin: -6px 0 16px; }
    .omni-strength[hidden] { display: none; }
    .omni-strength-bar { flex: 1; height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; }
    .omni-strength-bar i { display: block; height: 100%; width: 0; border-radius: 6px; transition: width 0.3s ease, background 0.3s ease; }
    .omni-strength small { min-width: 64px; font-weight: 700; color: var(--text-muted); }
    .omni-auth-remember { display: flex; align-items: center; gap: 10px; margin: 4px 0 18px; cursor: pointer; color: var(--text-body); font-size: 0.92rem; user-select: none; }
    .omni-auth-remember input { position: absolute; opacity: 0; pointer-events: none; }
    .omni-auth-remember input:checked + .omni-check-box { background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 13px no-repeat; border-color: var(--primary); }
    .omni-auth-submit { width: 100%; padding: 15px; font-size: 1.02rem; }
    .omni-auth-demo { margin-top: 18px; padding: 12px 14px; border: 1px dashed var(--border); border-radius: var(--radius-sm); background: var(--bg-color); font-size: 0.85rem; }
    .omni-auth-demo small { color: var(--text-muted); font-weight: 400; }
    .omni-auth-demo div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
    .omni-auth-demo button { padding: 5px 14px; border: none; border-radius: 999px; background: var(--primary-light); color: var(--primary-ink); font: inherit; font-weight: 700; font-size: 0.8rem; cursor: pointer; transition: var(--transition); }
    .omni-auth-demo button:hover { background: var(--primary); color: #fff; transform: translateY(-1px); }
    .omni-auth-or { display: flex; align-items: center; gap: 12px; margin: 22px 0 14px; color: var(--text-muted); font-size: 0.85rem; }
    .omni-auth-or::before, .omni-auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
    .omni-auth-links { display: grid; gap: 12px; justify-items: center; }
    .omni-auth-links .omni-btn-fx { width: 100%; }
    .omni-auth-links > a:not(.omni-btn-fx) { color: var(--text-muted); font-size: 0.88rem; text-decoration: none; }
    .omni-auth-links > a:not(.omni-btn-fx):hover { color: var(--primary); text-decoration: underline; }
    @media (max-width: 800px) {
        .omni-auth { grid-template-columns: 1fr; }
        .omni-auth-showcase { padding: 28px 24px; }
        .omni-auth-showcase h2 { font-size: 1.5rem; }
        .omni-auth-perks { display: none; }
        .omni-auth-card { padding: 28px 22px; }
    }
    @media (prefers-reduced-motion: reduce) { .omni-auth, .omni-auth-showcase, .omni-auth-orb { animation: none; } }

    /* Autofilled fields: browsers fill them without telling :placeholder-shown, so lift the label ourselves */
    .omni-float.has-value label { transform: translateY(-11px) scale(0.78); color: var(--primary-ink); font-weight: 600; }
    .omni-float input:-webkit-autofill + label { transform: translateY(-11px) scale(0.78); color: var(--primary-ink); font-weight: 600; }
    .omni-float input:autofill + label { transform: translateY(-11px) scale(0.78); color: var(--primary-ink); font-weight: 600; }
    .omni-float input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--bg-color) inset; -webkit-text-fill-color: var(--text-main); caret-color: var(--text-main); animation-name: authAutofill; animation-duration: 0.01s; }
    .omni-float input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--surface) inset, var(--shadow-glow); }
    @keyframes authAutofill { from { opacity: 1; } to { opacity: 1; } }

    /* Easy log in / sign up: big text and targets, one question at a time, Bangla beside English */
    .omni-easy { font-size: 1.05rem; }
    .omni-bn { display: block; margin-top: 2px; font-size: 0.85em; font-weight: 600; color: var(--text-muted); letter-spacing: 0; }
    .omni-easy h1 .omni-bn { font-size: 0.55em; }
    .omni-big-label { display: block; margin: 18px 0 8px; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--text-main); }
    .omni-big-label .omni-bn { font-family: inherit; }
    .omni-big-input { width: 100%; height: 64px; padding: 0 18px; border: 2px solid var(--border); border-radius: 14px; background: var(--bg-color); color: var(--text-main); font: inherit; font-size: 1.3rem; transition: var(--transition); }
    .omni-big-input::placeholder { color: var(--text-muted); opacity: 0.7; font-size: 1.05rem; }
    .omni-big-input:hover { border-color: var(--border-focus); }
    .omni-big-input:focus { outline: none; border-color: var(--primary); background: var(--surface); box-shadow: var(--shadow-glow); }
    .omni-big-input.is-invalid { border-color: var(--error); background: var(--error-light); }
    .omni-hint { margin: 8px 2px 0; color: var(--text-muted); font-size: 0.92rem; line-height: 1.45; }
    .omni-pass { position: relative; }
    .omni-pass .omni-big-input { padding-right: 112px; }
    .omni-showpw { position: absolute; right: 8px; top: 8px; bottom: 8px; min-width: 92px; padding: 0 12px; border: none; border-radius: 10px; background: var(--primary-light); color: var(--primary-ink); font: inherit; font-family: var(--font-display); font-weight: 800; font-size: 0.95rem; line-height: 1.15; cursor: pointer; transition: var(--transition); }
    .omni-showpw small { display: block; font-size: 0.78em; font-weight: 600; }
    .omni-showpw:hover { background: var(--primary); color: #fff; }
    .omni-showpw [data-label-hide], .omni-showpw.is-on [data-label-show] { display: none; }
    .omni-showpw.is-on [data-label-hide] { display: inline; }
    .omni-easy .omni-auth-submit { padding: 18px; font-size: 1.15rem; border-radius: 16px; margin-top: 6px; }
    .omni-easy .omni-auth-remember { margin: 16px 0 10px; font-size: 1rem; }
    .omni-easy .omni-check-box { width: 26px; height: 26px; border-radius: 8px; }
    .omni-help-box { margin-top: 22px; padding: 16px 18px; border-radius: var(--radius-md); background: var(--primary-light); border: 1px dashed var(--primary); }
    .omni-help-box strong { font-family: var(--font-display); }
    .omni-help-box p { margin: 4px 0 12px; color: var(--text-body); font-size: 0.95rem; }
    .omni-help-box div { display: flex; flex-wrap: wrap; gap: 10px; }
    .omni-help-link { display: inline-flex; align-items: center; padding: 11px 16px; border-radius: 999px; background: var(--surface); color: var(--text-main); font-weight: 700; font-size: 0.92rem; text-decoration: none; box-shadow: var(--shadow-sm); transition: var(--transition); }
    .omni-help-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--primary); }
    .omni-help-link.whatsapp { background: #16a34a; color: #fff; }
    .omni-help-link.whatsapp:hover { color: #fff; filter: brightness(1.08); }
    .omni-auth-links > a:not(.omni-btn-fx) { font-size: 0.95rem; padding: 4px 0; }

    /* Registration steps */
    .omni-steps { display: flex; align-items: center; gap: 0; list-style: none; margin: 18px 0 6px; }
    .omni-steps[hidden], .omni-step-count[hidden] { display: none; }
    .omni-steps li { display: flex; align-items: center; flex: none; }
    .omni-steps li + li::before { content: ""; width: 44px; height: 4px; margin: 0 6px; border-radius: 4px; background: var(--line); transition: var(--transition); }
    .omni-steps li.is-done + li::before, .omni-steps li.is-current::before { background: var(--primary); }
    .omni-steps span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--line); color: var(--text-muted); font-family: var(--font-display); font-weight: 800; transition: var(--transition); }
    .omni-steps li.is-current span { background: var(--primary); color: #fff; box-shadow: 0 0 0 5px rgba(var(--primary-rgb), 0.2); transform: scale(1.08); }
    .omni-steps li.is-done span { background: var(--success); color: #fff; font-size: 0; }
    .omni-steps li.is-done span::after { content: "✓"; font-size: 1.1rem; }
    .omni-step-count { margin: 6px 0 4px; color: var(--text-muted); font-size: 0.9rem; font-weight: 600; }
    .omni-step { border: none; padding: 0; margin: 0; min-width: 0; }
    .omni-step legend { padding: 0; margin: 16px 0 14px; font-family: var(--font-display); }
    .omni-step-q { display: block; font-size: 1.55rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text-main); }
    .omni-step legend .omni-bn { font-size: 1.05rem; }
    .js-wizard .omni-step:not(.is-current) { display: none; }
    .js-wizard .omni-step.is-current { animation: stepIn 0.3s ease-out; }
    @keyframes stepIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
    .omni-step.shake { animation: shake 0.3s ease-in-out; }
    .omni-step-error { min-height: 1.4em; margin: 8px 2px 0; color: var(--error); font-weight: 700; font-size: 0.95rem; }
    .omni-step-error a { color: var(--primary); }
    .omni-optional { margin-top: 18px; padding: 12px 14px; border: 1px dashed var(--border); border-radius: 14px; }
    .omni-optional summary { cursor: pointer; font-weight: 700; color: var(--text-body); }
    .omni-optional summary small { font-weight: 500; color: var(--text-muted); }
    .omni-optional .omni-big-input { margin-top: 12px; }
    .omni-wizard-nav { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
    .omni-wizard-nav .omni-btn-fx { flex: 1; }
    .omni-wizard-nav .omni-btn-fx[hidden], .omni-nav-back[hidden] { display: none; }
    .omni-nav-back { flex: none; padding: 16px 18px; border: 2px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text-main); font: inherit; font-family: var(--font-display); font-weight: 700; cursor: pointer; transition: var(--transition); }
    .omni-nav-back small { display: block; font-size: 0.75em; color: var(--text-muted); font-weight: 600; }
    .omni-nav-back:hover { border-color: var(--primary); color: var(--primary); }
    .omni-nav-next small { margin-left: 6px; opacity: 0.85; font-weight: 600; }
    @media (max-width: 800px) { .omni-step-q { font-size: 1.4rem; } .omni-big-input { height: 60px; } }
    .omni-welcome { font-size: 1.05rem; padding: 14px 16px; animation: fadeInUp 0.4s ease-out; }

    /* Log in / register fill the window: no search bar, banner or footer, and no page scroll */
    body.is-bare { padding: 0 20px; overflow: hidden; }
    body.is-bare .omni-navbar { margin-bottom: 0; }
    body.is-bare .omni-help, body.is-bare .omni-cart, body.is-bare .omni-compare-bar, body.is-bare .omni-layout-picker { display: none !important; }
    body.is-bare .omni-auth { max-width: 1120px; width: 100%; margin: 14px auto; height: calc(100vh - var(--navbar-h, 0px) - 28px); height: calc(100dvh - var(--navbar-h, 0px) - 28px); min-height: 0; }
    body.is-bare .omni-auth-showcase { padding: 28px 34px; gap: 10px; justify-content: space-between; }
    body.is-bare .omni-auth-showcase h2 { font-size: 1.7rem; }
    body.is-bare .omni-auth-brand { margin-bottom: 0; }
    body.is-bare .omni-auth-perks { gap: 8px; margin-top: 4px; }
    body.is-bare .omni-auth-perks li { padding: 8px 12px; }
    body.is-bare .omni-auth-perks li > span { width: 36px; height: 36px; }
    body.is-bare .omni-auth-card { padding: 22px 40px; display: flex; flex-direction: column; justify-content: center; overflow-y: auto; }
    body.is-bare .omni-auth-card h1 { font-size: 1.6rem; margin: 2px 0 0; }
    .omni-auth-back { display: none; width: fit-content; margin-bottom: 4px; color: var(--text-muted); font-size: 0.9rem; font-weight: 600; text-decoration: none; }
    .omni-auth-back:hover { color: var(--primary); }
    body.is-bare .omni-big-label { margin: 12px 0 5px; font-size: 1rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
    body.is-bare .omni-big-label .omni-bn { display: inline; margin: 0; font-size: 0.82rem; }
    body.is-bare .omni-big-input { height: 54px; font-size: 1.2rem; }
    body.is-bare .omni-pass .omni-big-input { padding-right: 104px; }
    body.is-bare .omni-showpw { min-width: 84px; }
    body.is-bare .omni-easy .omni-auth-submit, body.is-bare .omni-auth-submit { padding: 15px; margin-top: 4px; }
    .omni-auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0 10px; }
    .omni-auth-row .omni-auth-remember { margin: 0; }
    .omni-forgot-line { display: none; color: var(--primary-ink); font-weight: 700; font-size: 0.92rem; text-decoration: none; }
    .omni-forgot-line:hover { text-decoration: underline; }
    .omni-auth-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-weight: 600; color: var(--text-body); }
    .omni-auth-foot .omni-btn-fx { flex: none; padding: 11px 20px; }
    .omni-bn-inline { display: block; font-size: 0.8rem; color: var(--text-muted); font-weight: 600; }
    .omni-auth-small { margin: 10px 0 0; text-align: center; font-size: 0.88rem; color: var(--text-muted); }
    .omni-auth-small a { color: var(--text-muted); text-decoration: none; }
    .omni-auth-small a:hover { color: var(--primary); text-decoration: underline; }
    body.is-bare .omni-auth-demo { margin-top: 10px; padding: 8px 12px; }
    body.is-bare .omni-auth-demo div { margin-top: 6px; }
    body.is-bare .omni-auth-alert { margin: 8px 0 0; padding: 9px 12px; font-size: 0.88rem; }
    body.is-bare .omni-caps { margin: 6px 0 0; }
    body.is-bare .omni-step legend { margin: 6px 0 10px; }
    body.is-bare .omni-step-q { font-size: 1.45rem; }
    body.is-bare .omni-steps { margin: 12px 0 4px; }
    body.is-bare .omni-steps span { width: 34px; height: 34px; }
    body.is-bare .omni-step-count { margin: 4px 0 0; }
    body.is-bare .omni-hint { margin-top: 6px; font-size: 0.88rem; }
    body.is-bare .omni-step-error { min-height: 1.2em; margin-top: 6px; }
    body.is-bare .omni-optional { margin-top: 10px; padding: 8px 12px; }
    body.is-bare .omni-wizard-nav { margin-top: 14px; }
    body.is-bare .omni-nav-back { padding: 10px 16px; }
    /* the help box lives in the coloured panel, so it takes that panel's colours */
    .omni-auth-showcase .omni-help-box { margin-top: 0; padding: 12px 14px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); }
    .omni-auth-showcase .omni-help-box p { color: rgba(255, 255, 255, 0.85); margin: 2px 0 8px; font-size: 0.88rem; }
    .omni-auth-showcase .omni-help-box strong { color: #fff; }
    .omni-auth-showcase .omni-help-box .omni-bn { color: rgba(255, 255, 255, 0.75); }
    .omni-auth-showcase .omni-help-link { padding: 8px 14px; font-size: 0.86rem; }
    /* short windows: keep it all on screen */
    @media (max-height: 760px) {
        body.is-bare .omni-auth-showcase h2 { font-size: 1.45rem; }
        body.is-bare .omni-auth-showcase > p { display: none; }
        body.is-bare .omni-auth-perks .omni-auth-perks small, body.is-bare .omni-auth-perks small { display: none; }
        body.is-bare .omni-auth-card { padding-top: 14px; padding-bottom: 14px; }
        body.is-bare .omni-big-input { height: 48px; }
        body.is-bare .omni-big-label { margin-top: 8px; }
    }
    /* phones and narrow windows: just the form, with a link back and the forgot-password line */
    @media (max-width: 800px) {
        body.is-bare { padding: 0 12px; }
        body.is-bare .omni-auth { grid-template-columns: 1fr; margin: 8px auto; height: calc(100vh - var(--navbar-h, 0px) - 16px); height: calc(100dvh - var(--navbar-h, 0px) - 16px); border-radius: var(--radius-md); }
        body.is-bare .omni-auth-showcase { display: none; }
        body.is-bare .omni-auth-card { padding: 16px 18px; }
        .omni-auth-back, .omni-forgot-line { display: inline-block; }
    }

    html:has(body.is-bare) { overflow: hidden; }
    body.is-bare .omni-auth-showcase { justify-content: flex-start; gap: 12px; }
    body.is-bare .omni-auth-showcase .omni-auth-brand { margin-bottom: 0; }
    body.is-bare .omni-auth-showcase > h2 { margin-top: auto; }
    body.is-bare .omni-auth-showcase .omni-auth-perks { margin-bottom: auto; }
    body.is-bare .omni-auth-showcase .omni-help-box { margin-top: 6px; }
    @media (max-height: 680px) {
        body.is-bare .omni-auth { margin-top: 8px; margin-bottom: 8px; height: calc(100dvh - var(--navbar-h, 0px) - 16px); }
        body.is-bare .omni-auth-card { padding-top: 10px; padding-bottom: 10px; }
        body.is-bare .omni-auth-card h1 { font-size: 1.4rem; }
        body.is-bare .omni-auth-card h1 .omni-bn { display: none; }
        body.is-bare .omni-big-input { height: 44px; font-size: 1.1rem; }
        body.is-bare .omni-big-label { margin-top: 6px; }
        body.is-bare .omni-big-label .omni-bn { display: none; }
        body.is-bare .omni-auth-demo { display: none; }
        body.is-bare .omni-auth-foot { margin-top: 8px; padding-top: 8px; }
        body.is-bare .omni-auth-small { margin-top: 6px; }
        body.is-bare .omni-step-q { font-size: 1.3rem; }
        body.is-bare .omni-step legend .omni-bn { font-size: 0.9rem; }
        body.is-bare .omni-auth-showcase .omni-help-box p { display: none; }
    }

    /* Category browsing: the categories page, the bar on category pages, and the header's Categories panel */
    .omni-cats { padding: 0 !important; }
    .omni-cats-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
    .omni-cats-search { flex: 1 1 320px; max-width: 520px; }
    .omni-cats-search .form-control { padding: 14px 16px 14px 46px; border-radius: 999px; font-size: 1rem; background: var(--surface); box-shadow: var(--shadow-md); }
    .omni-cats-search svg { left: 16px; }
    .omni-cats-count { color: var(--text-muted); font-weight: 600; }
    .omni-cats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
    .omni-catcard { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; transition: var(--transition); animation: fadeInUp 0.4s ease-out both; }
    .omni-catcard[hidden] { display: none; }
    .omni-catcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--border-focus); }
    .omni-catcard-head { display: flex; align-items: center; gap: 16px; padding: 18px; text-decoration: none; color: var(--text-main); background: linear-gradient(135deg, var(--primary-light), transparent 70%); }
    .omni-catcard-photo { flex: none; width: 84px; height: 84px; display: grid; place-items: center; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius-md); overflow: hidden; color: var(--text-muted); }
    .omni-catcard-photo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; transition: transform 0.4s ease; }
    .omni-catcard:hover .omni-catcard-photo img { transform: scale(1.08); }
    .omni-catcard-title { flex: 1; min-width: 0; }
    .omni-catcard-title strong { display: block; font-family: var(--font-display); font-size: 1.25rem; letter-spacing: -0.02em; line-height: 1.2; }
    .omni-catcard-title small { color: var(--text-muted); font-size: 0.88rem; }
    .omni-catcard-go { flex: none; padding: 8px; box-sizing: content-box; border-radius: 50%; background: var(--primary); color: #fff; transition: var(--transition); }
    .omni-catcard-head:hover .omni-catcard-go { transform: translateX(4px); box-shadow: 0 6px 14px rgba(var(--primary-rgb), 0.4); }
    .omni-catcard-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 18px 14px; }
    .omni-catcard-chips li.is-extra { display: none; }
    .omni-catcard.is-open .omni-catcard-chips li.is-extra { display: list-item; }
    .omni-catcard-chips a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-color); color: var(--text-body); font-size: 0.9rem; font-weight: 600; text-decoration: none; transition: var(--transition); }
    .omni-catcard-chips a small { padding: 1px 7px; border-radius: 999px; background: var(--line); color: var(--text-muted); font-size: 0.72rem; }
    .omni-catcard-chips a:hover { background: var(--primary); border-color: var(--primary); color: #fff; transform: translateY(-1px); }
    .omni-catcard-chips a:hover small { background: rgba(255, 255, 255, 0.25); color: #fff; }
    .omni-catcard-chips li.is-hit a { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
    .omni-catcard-chips li.is-dim { opacity: 0.35; }
    .omni-catcard-more { margin: -4px 18px 14px; align-self: flex-start; padding: 0; border: none; background: none; color: var(--primary-ink); font: inherit; font-size: 0.88rem; font-weight: 700; cursor: pointer; }
    .omni-catcard-more:hover { text-decoration: underline; }

    .omni-catstrip { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-sm); overflow: hidden; }
    .omni-catstrip-all { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: linear-gradient(135deg, var(--primary), var(--primary-hover)); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 0.88rem; text-decoration: none; white-space: nowrap; box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3); transition: var(--transition); }
    .omni-catstrip-all:hover { transform: translateY(-1px); }
    .omni-catstrip ul { list-style: none; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
    .omni-catstrip ul::-webkit-scrollbar { display: none; }
    .omni-catstrip ul a { display: block; padding: 9px 16px; border-radius: 999px; color: var(--text-body); font-weight: 600; font-size: 0.9rem; text-decoration: none; white-space: nowrap; transition: var(--transition); }
    .omni-catstrip ul a:hover { background: var(--primary-light); color: var(--primary-ink); }
    .omni-catstrip ul a.is-active { background: var(--primary-light); color: var(--primary-ink); box-shadow: inset 0 0 0 2px var(--primary); }

    .omni-allcats { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; height: 46px; border: none; border-radius: 999px; background: linear-gradient(135deg, var(--primary), var(--primary-hover)); color: #fff; font: inherit; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; cursor: pointer; box-shadow: 0 6px 16px -4px rgba(var(--primary-rgb), 0.6); transition: var(--transition); }
    .omni-allcats:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -4px rgba(var(--primary-rgb), 0.7); }
    .omni-allcats-chev { transition: transform 0.2s ease; }
    .omni-allcats.is-open .omni-allcats-chev { transform: rotate(180deg); }
    .omni-allcats-panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1300; max-height: min(78vh, 640px); overflow-y: auto; padding: 18px 20px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: 0 24px 50px -12px rgba(11, 18, 32, 0.4); animation: fadeInUp 0.2s ease-out; }
    .omni-allcats-panel[hidden] { display: none; }
    .omni-allcats-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
    .omni-allcats-head strong { font-family: var(--font-display); font-size: 1.1rem; }
    .omni-allcats-head a { color: var(--primary-ink); font-weight: 700; font-size: 0.9rem; text-decoration: none; }
    .omni-allcats-head a:hover { text-decoration: underline; }
    .omni-allcats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px 22px; }
    .omni-allcats-root { display: flex; align-items: center; gap: 12px; padding: 8px; margin: -8px -8px 4px; border-radius: var(--radius-sm); text-decoration: none; color: var(--text-main); transition: var(--transition); }
    .omni-allcats-root:hover { background: var(--primary-light); }
    .omni-allcats-photo { flex: none; width: 46px; height: 46px; display: grid; place-items: center; background: #fff; border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden; }
    .omni-allcats-photo img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
    .omni-allcats-root strong { display: block; font-family: var(--font-display); font-size: 0.98rem; line-height: 1.2; }
    .omni-allcats-root small { color: var(--text-muted); font-size: 0.78rem; }
    .omni-allcats-group ul { list-style: none; display: grid; gap: 1px; padding-left: 58px; }
    .omni-allcats-group ul a { display: block; padding: 4px 8px; margin-left: -8px; border-radius: 6px; color: var(--text-body); font-size: 0.88rem; text-decoration: none; transition: var(--transition); }
    .omni-allcats-group ul a:hover { background: var(--bg-color); color: var(--primary); padding-left: 12px; }
    .omni-allcats-group ul a.more { color: var(--primary-ink); font-weight: 700; }
    @media (max-width: 900px) { .omni-allcats, .omni-allcats-panel { display: none !important; } }
    @media (max-width: 700px) { .omni-catstrip-all span, .omni-catstrip-all { padding: 9px 12px; } .omni-cats-grid { grid-template-columns: 1fr; } }

    .omni-results-title { margin-bottom: 16px; }
    .omni-results-title h1 { font-size: 2rem; letter-spacing: -0.03em; line-height: 1.15; color: var(--text-main); }
    .omni-results-title p { margin-top: 4px; color: var(--text-muted); }
    @media (max-width: 760px) { .omni-results-title h1 { font-size: 1.5rem; } }

    /* Customer account area */
    .omni-acct { max-width: var(--page-max); margin: 0 auto; display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 28px; align-items: start; }
    .omni-acct-side { position: sticky; top: calc(var(--navbar-h, 0px) + 84px); display: grid; gap: 14px; }
    .omni-acct-card { display: grid; justify-items: center; gap: 4px; padding: 28px 20px 22px; text-align: center; color: #fff; border-radius: var(--radius-lg, 20px); background: linear-gradient(135deg, var(--primary), var(--primary-hover)); box-shadow: 0 18px 36px -14px rgba(var(--primary-rgb), 0.55); overflow: hidden; position: relative; }
    .omni-acct-card::after { content: ""; position: absolute; width: 180px; height: 180px; right: -60px; top: -70px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
    .omni-acct-card strong { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: -0.02em; }
    .omni-acct-card small { opacity: 0.9; word-break: break-all; }
    .omni-acct-since { margin-top: 8px; padding: 3px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.2); font-size: 0.75rem; font-weight: 700; }
    .omni-acct-avatar { display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: 8px; border-radius: 50%; background: #fff; color: var(--primary-ink); font-family: var(--font-display); font-size: 2rem; font-weight: 800; box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.35); position: relative; z-index: 1; transition: var(--transition); }
    .omni-acct-card:hover .omni-acct-avatar { transform: rotate(-6deg) scale(1.06); }
    .omni-acct-nav { display: grid; gap: 4px; padding: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
    .omni-acct-nav a, .omni-acct-logout { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: none; border-radius: var(--radius-sm); background: none; color: var(--text-body); font: inherit; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; transition: var(--transition); }
    .omni-acct-nav a span { flex: 1; }
    .omni-acct-nav a small { min-width: 26px; padding: 2px 8px; border-radius: 999px; background: var(--line); color: var(--text-muted); font-size: 0.75rem; font-weight: 700; text-align: center; }
    .omni-acct-nav a:hover { background: var(--primary-light); color: var(--primary-ink); transform: translateX(4px); }
    .omni-acct-nav a.is-active { background: linear-gradient(135deg, var(--primary-light), transparent); color: var(--primary-ink); box-shadow: inset 4px 0 0 var(--primary); }
    .omni-acct-nav a.is-active small { background: var(--primary); color: #fff; }
    .omni-acct-logout { margin-top: 6px; border-top: 1px solid var(--line); border-radius: 0 0 var(--radius-sm) var(--radius-sm); color: #b91c1c; }
    .omni-acct-logout:hover { background: #fee2e2; transform: translateX(4px); }
    .omni-acct-head h1 { font-size: 2rem; letter-spacing: -0.03em; line-height: 1.15; }
    .omni-acct-head p { margin: 4px 0 20px; color: var(--text-muted); }

    .omni-acct-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 20px; }
    .omni-acct-stat { display: grid; gap: 2px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); text-decoration: none; box-shadow: var(--shadow-sm); transition: var(--transition); }
    .omni-acct-stat strong { font-family: var(--font-display); font-size: 1.6rem; color: var(--primary-ink); letter-spacing: -0.03em; }
    .omni-acct-stat span { color: var(--text-muted); font-size: 0.85rem; font-weight: 600; }
    .omni-acct-stat:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--border-focus); }

    .omni-acct-panel { margin-bottom: 20px; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); animation: fadeInUp 0.35s ease-out; }
    .omni-acct-panel[hidden] { display: none; }
    .omni-acct-panel h2 { margin-bottom: 18px; font-size: 1.15rem; }
    .omni-acct-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; margin-bottom: 16px; }
    .omni-acct-fields.is-single { grid-template-columns: minmax(0, 460px); }
    .omni-acct-field.is-wide { grid-column: 1 / -1; }
    .omni-acct-field label { display: block; margin-bottom: 6px; font-weight: 700; font-size: 0.9rem; color: var(--text-main); }
    .omni-acct-field label small { color: var(--text-muted); font-weight: 500; }
    .omni-acct-field .form-control { padding: 13px 14px; font-size: 1rem; border-radius: var(--radius-sm); }
    .omni-acct-field .omni-pass { position: relative; }
    .omni-acct-field .omni-pass .form-control { padding-right: 76px; }
    .omni-acct-field .omni-showpw { position: absolute; right: 8px; top: 8px; bottom: 8px; min-width: 64px; transform: none; padding: 0 10px; border: none; border-radius: 8px; background: var(--primary-light); color: var(--primary-ink); font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; }
    .omni-acct-field .omni-showpw [data-label-hide], .omni-acct-field .omni-showpw.is-shown [data-label-show] { display: none; }
    .omni-acct-field .omni-showpw.is-shown [data-label-hide] { display: inline; }
    .omni-acct-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 8px; }
    .omni-acct-meter i { height: 6px; border-radius: 99px; background: var(--line); transition: background 0.25s ease; }
    .omni-acct-meter[data-level="0"] i:nth-child(-n+1) { background: #ef4444; }
    .omni-acct-meter[data-level="1"] i:nth-child(-n+2) { background: #f59e0b; }
    .omni-acct-meter[data-level="2"] i:nth-child(-n+3) { background: #84cc16; }
    .omni-acct-meter[data-level="3"] i { background: #16a34a; }
    .omni-acct-hint { display: block; min-height: 1.1em; margin-top: 6px; color: var(--text-muted); font-size: 0.82rem; }
    .omni-acct-hint.is-good { color: #15803d; font-weight: 700; }
    .omni-acct-hint.is-bad { color: #b91c1c; }
    .omni-acct-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

    .omni-acct-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
    .omni-acct-filters a { padding: 8px 16px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-body); font-weight: 700; font-size: 0.88rem; text-decoration: none; transition: var(--transition); }
    .omni-acct-filters a small { margin-left: 4px; color: var(--text-muted); }
    .omni-acct-filters a:hover { border-color: var(--primary); color: var(--primary-ink); transform: translateY(-1px); }
    .omni-acct-filters a.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
    .omni-acct-filters a.is-active small { color: rgba(255, 255, 255, 0.85); }
    .omni-acct-order { display: block; margin-bottom: 14px; padding: 18px 20px 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); color: inherit; text-decoration: none; box-shadow: var(--shadow-sm); transition: var(--transition); animation: fadeInUp 0.35s ease-out both; }
    .omni-acct-order:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--border-focus); }
    .omni-acct-order-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
    .omni-acct-order-top > span:first-child { flex: 1; min-width: 160px; }
    .omni-acct-order-top strong { font-family: var(--font-display); }
    .omni-acct-order-top small { display: block; color: var(--text-muted); font-size: 0.82rem; }
    .omni-acct-total { font-size: 1.1rem; color: var(--primary-ink); }
    .omni-acct-status { padding: 5px 14px; border-radius: 999px; background: var(--line); color: var(--text-body); font-size: 0.8rem; font-weight: 800; }
    .omni-acct-status.is-pending { background: #fef3c7; color: #92400e; }
    .omni-acct-status.is-confirmed { background: #dbeafe; color: #1e40af; }
    .omni-acct-status.is-out_for_delivery { background: #ede9fe; color: #5b21b6; }
    .omni-acct-status.is-delivered { background: #dcfce7; color: #166534; }
    .omni-acct-status.is-cancelled { background: #fee2e2; color: #991b1b; }
    .omni-acct-steps { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 18px; }
    .omni-acct-steps i { position: relative; height: 6px; background: var(--line); }
    .omni-acct-steps i:first-child { border-radius: 99px 0 0 99px; }
    .omni-acct-steps i:last-child { border-radius: 0 99px 99px 0; }
    .omni-acct-steps i.is-done { background: var(--primary); }
    .omni-acct-steps b { position: absolute; top: 12px; left: 0; color: var(--text-muted); font-size: 0.72rem; font-weight: 700; font-style: normal; white-space: nowrap; }
    .omni-acct-steps i.is-done b { color: var(--primary-ink); }

    .omni-acct-addresses { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-bottom: 20px; }
    .omni-acct-address { display: flex; flex-direction: column; gap: 4px; padding: 20px; background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); text-align: left; font: inherit; transition: var(--transition); }
    .omni-acct-address:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
    .omni-acct-address.is-default { border-color: var(--primary); background: linear-gradient(160deg, var(--primary-light), var(--surface) 55%); }
    .omni-acct-address header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
    .omni-acct-pin { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--primary-light); color: var(--primary-ink); }
    .omni-acct-address header strong { flex: 1; font-family: var(--font-display); font-size: 1.05rem; }
    .omni-acct-default { padding: 3px 10px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 0.72rem; font-weight: 800; }
    .omni-acct-address p { margin: 0; color: var(--text-body); font-size: 0.92rem; line-height: 1.5; }
    .omni-acct-address p.who { font-weight: 700; color: var(--text-main); }
    .omni-acct-address footer { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 14px; }
    .omni-acct-danger:hover { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }
    .omni-acct-address.is-add { align-items: center; justify-content: center; min-height: 190px; border-style: dashed; border-color: var(--border); background: transparent; color: var(--text-muted); cursor: pointer; box-shadow: none; }
    .omni-acct-address.is-add:hover { border-color: var(--primary); color: var(--primary-ink); background: var(--primary-light); }
    .omni-acct-plus { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 1.9rem; line-height: 1; transition: var(--transition); }
    .omni-acct-address.is-add:hover .omni-acct-plus { transform: rotate(90deg) scale(1.1); }
    .omni-acct-chips { display: flex; gap: 6px; margin-top: 8px; }
    .omni-acct-chips button { padding: 4px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-color); color: var(--text-body); font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: var(--transition); }
    .omni-acct-chips button:hover { background: var(--primary); border-color: var(--primary); color: #fff; }

    .omni-acct-dialog { margin: auto; width: min(420px, 92vw); padding: 30px 26px 24px; border: none; border-radius: var(--radius-lg, 20px); background: var(--surface); color: var(--text-main); text-align: center; box-shadow: 0 30px 70px -10px rgba(11, 18, 32, 0.55); }
    .omni-acct-dialog::backdrop { background: rgba(11, 18, 32, 0.55); backdrop-filter: blur(3px); }
    .omni-acct-dialog[open] { animation: fadeInUp 0.25s ease-out; }
    .omni-acct-dialog-icon { display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: 12px; border-radius: 50%; background: #fee2e2; color: #b91c1c; }
    .omni-acct-dialog h2 { font-size: 1.3rem; margin-bottom: 6px; }
    .omni-acct-dialog p { color: var(--text-muted); }
    .omni-acct-dialog-actions { display: flex; gap: 10px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }

    @media (max-width: 900px) {
        .omni-acct { grid-template-columns: 1fr; gap: 16px; }
        .omni-acct-side { position: static; }
        .omni-acct-card { grid-template-columns: auto 1fr; justify-items: start; text-align: left; column-gap: 16px; padding: 18px; }
        .omni-acct-avatar { grid-row: span 3; margin: 0; width: 60px; height: 60px; font-size: 1.6rem; }
        .omni-acct-since { margin-top: 2px; justify-self: start; }
        .omni-acct-nav { display: flex; overflow-x: auto; scrollbar-width: none; padding: 8px; }
        .omni-acct-nav a, .omni-acct-logout { flex: none; padding: 10px 14px; white-space: nowrap; }
        .omni-acct-logout { margin: 0; border-top: none; }
        .omni-acct-head h1 { font-size: 1.5rem; }
    }
    @media (max-width: 600px) { .omni-acct-stats, .omni-acct-fields { grid-template-columns: 1fr; } .omni-acct-steps b { font-size: 0.62rem; } }
    .omni-acct .btn { text-decoration: none; }

    .omni-userchip { flex: none; display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-sm); }
    .omni-userchip-name { display: flex; align-items: center; gap: 8px; padding: 2px 10px 2px 2px; border-radius: 999px; color: var(--text-main); text-decoration: none; transition: var(--transition); }
    .omni-userchip-name:hover { background: var(--primary-light); }
    .omni-userchip-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--primary-hover)); color: #fff; font-family: var(--font-display); font-weight: 800; }
    .omni-userchip-text { display: grid; line-height: 1.1; max-width: 110px; }
    .omni-userchip-text small { color: var(--text-muted); font-size: 0.7rem; }
    .omni-userchip-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); font-size: 0.92rem; }
    .omni-userchip-out { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: none; border-radius: 999px; background: #fee2e2; color: #991b1b; font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: var(--transition); }
    .omni-userchip-out:hover { background: #dc2626; color: #fff; }
    .omni-userchip-login { flex: none; display: inline-flex; align-items: center; height: 42px; padding: 0 20px; border-radius: 999px; background: linear-gradient(135deg, var(--primary), var(--primary-hover)); color: #fff; font-family: var(--font-display); font-weight: 700; text-decoration: none; box-shadow: 0 6px 16px -4px rgba(var(--primary-rgb), 0.6); transition: var(--transition); }
    .omni-userchip-login:hover { transform: translateY(-1px); }
    @media (max-width: 900px) { .omni-userchip-out span { display: none; } .omni-userchip-out { padding: 0 10px; } }
    @media (max-width: 480px) { .omni-userchip-text { display: none; } .omni-userchip-name { padding-right: 2px; } }

    .omni-acct-address { position: relative; cursor: default; outline: none; }
    .omni-acct-address:focus-visible, .omni-acct-address.is-selected { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.18), var(--shadow-lg); }
    .omni-acct-address.is-selected::before { content: "✓"; position: absolute; top: -10px; right: -10px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 800; animation: fadeInUp 0.2s ease-out; }
    .omni-acct-address-view { display: flex; flex-direction: column; gap: 4px; flex: 1; }
    .omni-acct-address-view[hidden], .omni-acct-address-edit[hidden], .omni-acct-confirm[hidden], .omni-acct-toast[hidden] { display: none; }
    .omni-acct-address header form { margin: 0; }
    .omni-acct-star { width: 34px; height: 34px; border: none; border-radius: 50%; background: transparent; color: var(--text-muted); font-size: 1.3rem; line-height: 1; cursor: pointer; transition: var(--transition); }
    .omni-acct-star:hover { background: #fef3c7; color: #d97706; transform: scale(1.2) rotate(15deg); }
    .omni-acct-default { background: linear-gradient(135deg, #f59e0b, #d97706); }
    .omni-acct-zone { display: inline-block; margin-left: 8px; padding: 1px 10px; border-radius: 999px; background: var(--line); color: var(--text-body); font-size: 0.75rem; font-weight: 700; vertical-align: 1px; }
    .omni-acct-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 14px; }
    .omni-acct-tools button, .omni-acct-tools a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-body); font: inherit; font-size: 0.8rem; font-weight: 700; text-decoration: none; cursor: pointer; transition: var(--transition); }
    .omni-acct-tools button:hover, .omni-acct-tools a:hover { background: var(--primary); border-color: var(--primary); color: #fff; transform: translateY(-2px); }
    .omni-acct-tools .is-danger:hover { background: #dc2626; border-color: #dc2626; }
    .omni-acct-address-edit { display: grid; gap: 10px; animation: fadeInUp 0.25s ease-out; }
    .omni-acct-address-edit .omni-acct-field label { margin-bottom: 3px; font-size: 0.8rem; }
    .omni-acct-address-edit .form-control { padding: 9px 12px; font-size: 0.92rem; }
    .omni-acct-address-edit .omni-acct-actions { margin-top: 4px; }
    .omni-acct-confirm { display: grid; align-content: center; justify-items: center; gap: 6px; flex: 1; min-height: 150px; text-align: center; animation: fadeInUp 0.2s ease-out; }
    .omni-acct-confirm strong { font-family: var(--font-display); }
    .omni-acct-confirm span { color: var(--text-muted); font-size: 0.88rem; }
    .omni-acct-confirm form { display: flex; gap: 8px; margin-top: 8px; }
    .omni-acct-delete { background: #dc2626 !important; border-color: #dc2626 !important; }
    .omni-acct-toast { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); padding: 6px 16px; border-radius: 999px; background: #166534; color: #fff; font-size: 0.82rem; font-weight: 700; box-shadow: var(--shadow-md); animation: fadeInUp 0.2s ease-out; }



    :root { --menu-bar-h: 48px; --side-w: 232px; --menu-dark: #0b1220; --menu-from: color-mix(in srgb, var(--primary-hover) 70%, var(--menu-dark)); --menu-mid: var(--menu-dark); --menu-to: color-mix(in srgb, var(--accent-dark) 45%, var(--menu-dark)); --footer-from: var(--menu-from); --footer-mid: var(--menu-mid); --footer-to: var(--menu-to); }

    /* ---- Bars (top and bottom) ---- */
    .omni-navbar, .omni-navbar-bottom { background: linear-gradient(100deg, var(--menu-from) 0%, var(--menu-mid) 60%, var(--menu-to) 100%); border: none; overflow: visible; }
    .omni-navbar { box-shadow: 0 10px 30px -14px rgba(11, 18, 32, 0.6); }
    .omni-navbar-bottom { box-shadow: 0 -10px 30px -14px rgba(11, 18, 32, 0.6); }
    .omni-navbar::after, .omni-navbar-bottom::before { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--primary), var(--accent), var(--primary)); background-size: 200% 100%; animation: menuShine 6s linear infinite; }
    .omni-navbar::after { bottom: 0; }
    .omni-navbar-bottom::before { top: 0; }
    @keyframes menuShine { to { background-position: -200% 0; } }
    .omni-nav-container { height: var(--menu-bar-h); }
    .omni-navbar .omni-nav-menu > .omni-nav-item > .omni-nav-link, .omni-navbar-bottom .omni-nav-menu > .omni-nav-item > .omni-nav-link { position: relative; padding: 6px 13px; font-size: 0.86rem; color: rgba(255, 255, 255, 0.85); border-radius: 999px; }
    .omni-navbar .omni-nav-menu, .omni-navbar-bottom .omni-nav-menu { gap: 4px; }
    .omni-navbar .omni-nav-menu > .omni-nav-item > .omni-nav-link::after, .omni-navbar-bottom .omni-nav-menu > .omni-nav-item > .omni-nav-link::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 0; height: 2px; border-radius: 2px; background: var(--accent); transition: width 0.25s ease, left 0.25s ease; }
    .omni-navbar .omni-nav-menu > .omni-nav-item:hover > .omni-nav-link::after, .omni-navbar-bottom .omni-nav-menu > .omni-nav-item:hover > .omni-nav-link::after { width: calc(100% - 26px); left: 13px; }
    .omni-navbar .omni-nav-menu > .omni-nav-item > .omni-nav-link:hover, .omni-navbar .omni-nav-menu > .omni-nav-item:hover > .omni-nav-link,
    .omni-navbar-bottom .omni-nav-menu > .omni-nav-item > .omni-nav-link:hover, .omni-navbar-bottom .omni-nav-menu > .omni-nav-item:hover > .omni-nav-link { color: #fff; background: rgba(255, 255, 255, 0.12); }
    .omni-navbar .omni-nav-menu > .omni-nav-item > .omni-nav-link.active, .omni-navbar-bottom .omni-nav-menu > .omni-nav-item > .omni-nav-link.active,
    .omni-navbar .omni-nav-menu > .omni-nav-item > .omni-nav-link.current, .omni-navbar-bottom .omni-nav-menu > .omni-nav-item > .omni-nav-link.current { color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-hover)); box-shadow: 0 6px 16px -4px rgba(var(--primary-rgb), 0.8); }
    .omni-navbar .nav-arrow, .omni-navbar-bottom .nav-arrow { width: 12px; height: 12px; }
    .omni-navbar .omni-nav-menu > .omni-nav-item > .omni-nav-link .nav-arrow, .omni-navbar-bottom .omni-nav-menu > .omni-nav-item > .omni-nav-link .nav-arrow { opacity: 0.7; }

    /* ---- Dropdowns of the bars (white cards with an accent edge) ---- */
    .omni-navbar .omni-dropdown-menu, .omni-navbar-bottom .omni-dropdown-menu { border: none; border-radius: var(--radius-md); padding: 6px; box-shadow: 0 18px 40px -10px rgba(11, 18, 32, 0.38); min-width: 210px; }
    .omni-navbar .omni-dropdown-menu { border-top: 3px solid var(--accent); border-radius: 0 0 var(--radius-md) var(--radius-md); }
    .omni-navbar-bottom .omni-dropdown-menu { border-bottom: 3px solid var(--accent); border-radius: var(--radius-md) var(--radius-md) 0 0; }
    .omni-navbar .omni-dropdown-menu .omni-dropdown-menu, .omni-navbar-bottom .omni-dropdown-menu .omni-dropdown-menu { border: none; border-left: 3px solid var(--accent); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
    .omni-navbar .omni-dropdown-menu .omni-nav-link, .omni-navbar-bottom .omni-dropdown-menu .omni-nav-link { border-radius: var(--radius-sm); padding: 7px 12px; font-size: 0.86rem; font-weight: 500; }
    .omni-navbar .omni-dropdown-menu .omni-nav-link:hover, .omni-navbar-bottom .omni-dropdown-menu .omni-nav-link:hover { background: linear-gradient(90deg, var(--primary-light), transparent); color: var(--primary-ink); padding-left: 16px; }

    /* ---- Sidebars (left and right) ---- */
    .omni-sidebar { background: linear-gradient(175deg, var(--menu-from) 0%, var(--menu-mid) 70%, var(--menu-to) 130%); border: none; box-shadow: 0 0 30px -10px rgba(11, 18, 32, 0.6); isolation: isolate; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.25) transparent; }
    .omni-sidebar::before, .omni-sidebar::after { content: ""; position: absolute; z-index: -1; width: 200px; height: 200px; border-radius: 50%; filter: blur(48px); pointer-events: none; animation: menuGlow 8s ease-in-out infinite alternate; }
    .omni-sidebar::before { top: -70px; background: var(--primary); opacity: 0.4; }
    .omni-sidebar::after { bottom: -80px; background: var(--accent); opacity: 0.28; animation-direction: alternate-reverse; }
    .menu-left .omni-sidebar::before, .menu-left .omni-sidebar::after { left: -70px; }
    .menu-right .omni-sidebar::before, .menu-right .omni-sidebar::after { right: -70px; }
    @keyframes menuGlow { to { transform: translate(14px, 22px) scale(1.15); } }
    .omni-sidebar-header { padding: 14px 16px; background: transparent; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
    .omni-sidebar .omni-nav-menu { padding: 8px 8px 16px; }
    .omni-sidebar .omni-nav-item { margin-bottom: 1px; }
    .omni-sidebar .omni-nav-link { padding: 8px 12px; font-size: 0.86rem; color: rgba(255, 255, 255, 0.8); border-left: none; border-radius: var(--radius-sm); position: relative; }
    .omni-sidebar .omni-nav-link:hover { background: rgba(255, 255, 255, 0.1); color: #fff; transform: translateX(3px); }
    .omni-sidebar .omni-nav-link.active { color: #fff; background: rgba(255, 255, 255, 0.08); }
    .omni-sidebar .omni-nav-link.current { color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-hover)); box-shadow: 0 6px 16px -4px rgba(var(--primary-rgb), 0.8); }
    .omni-sidebar .omni-dropdown-menu { background: rgba(0, 0, 0, 0.22); border: none; border-radius: var(--radius-sm); margin: 2px 0 4px; }
    .omni-sidebar .nav-arrow { width: 14px; height: 14px; }
    .omni-sidebar .nav-arrow.open { color: var(--accent); }
    .omni-sidebar .omni-nav-link:hover .nav-arrow { opacity: 1; }
    .menu-left .omni-main-content, .menu-right .omni-main-content { padding: 28px; }

    /* ---- Brand (all positions) ---- */
    .omni-navbar .omni-brand, .omni-navbar-bottom .omni-brand, .omni-sidebar .omni-brand { color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; gap: 8px; }
    .omni-navbar .omni-brand svg, .omni-navbar-bottom .omni-brand svg, .omni-sidebar .omni-brand svg { color: inherit; width: 24px; height: 24px; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35)); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
    .omni-navbar .omni-brand:hover svg, .omni-navbar-bottom .omni-brand:hover svg, .omni-sidebar .omni-brand:hover svg { transform: rotate(-10deg) scale(1.12); }

    .omni-nav-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
    @media (prefers-reduced-motion: reduce) { .omni-navbar::after, .omni-navbar-bottom::before, .omni-sidebar::before, .omni-sidebar::after { animation: none; } .omni-sidebar .omni-nav-link:hover { transform: none; } }

    /* ---- Footer: same dark themed gradient as the menus, so the page is framed top and bottom ---- */
    .omni-footer { position: relative; overflow: hidden; margin-top: 56px; padding: 40px 40px 18px; border: none; border-radius: var(--radius-md); color: rgba(255, 255, 255, 0.72); background: linear-gradient(120deg, var(--footer-from) 0%, var(--footer-mid) 60%, var(--footer-to) 100%); box-shadow: 0 20px 40px -20px rgba(11, 18, 32, 0.55); isolation: isolate; }
    .omni-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--primary), var(--accent), var(--primary)); background-size: 200% 100%; animation: menuShine 6s linear infinite; }
    .omni-footer::after { content: ""; position: absolute; z-index: -1; right: -60px; bottom: -90px; width: 260px; height: 260px; border-radius: 50%; background: var(--accent); opacity: 0.22; filter: blur(60px); pointer-events: none; }
    .omni-footer strong { font-family: var(--font-display); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); margin-bottom: 12px; }
    .omni-footer-brand { color: #fff; font-family: var(--font-display); font-weight: 800; }
    .omni-footer a { color: rgba(255, 255, 255, 0.72); transition: var(--transition); }
    .omni-footer ul a { display: inline-block; }
    .omni-footer ul a:hover { color: #fff; transform: translateX(4px); }
    .omni-footer-grid p, .omni-footer > div p { color: rgba(255, 255, 255, 0.65); }
    .omni-footer-note { margin-top: 28px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.5); }
    @media (max-width: 760px) { .omni-footer { padding: 28px 20px 14px; } }
    @media (prefers-reduced-motion: reduce) { .omni-footer::before { animation: none; } }

    /* Top bar runs edge to edge: cancel the page's side padding */
    @media (min-width: 901px) { .menu-top .omni-navbar { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; } }

    /* Tighter vertical rhythm under the top bar (it used to leave a 40px gap before the search bar) */
    .omni-navbar { margin-bottom: 8px; }
    .omni-topbar { margin-bottom: 6px; }
    .omni-flat .omni-crumbs { padding-bottom: 6px; }
    .omni-flat .form-header { padding-bottom: 14px; }

    /* Soft colour wash behind every page, taken from the active theme's primary and accent colours */
    body { background-image: radial-gradient(1100px 460px at 6% -6%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 70%), radial-gradient(900px 440px at 100% 0%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%); background-repeat: no-repeat; }

    /* ---- Interactive colour: flowing palette gradient + a pointer-following glow in the accent colour ---- */
    :root { --fx-glow: color-mix(in srgb, var(--accent) 42%, transparent); }
    .omni-navbar, .omni-navbar-bottom {
        background: radial-gradient(240px circle at var(--mx, -400px) var(--my, -400px), var(--fx-glow), transparent 70%),
                    linear-gradient(100deg, var(--menu-from) 0%, var(--menu-mid) 45%, var(--menu-to) 75%, var(--menu-from) 100%);
        background-size: 100% 100%, 220% 100%;
        animation: menuFlowX 18s ease-in-out infinite;
    }
    .omni-sidebar {
        background: radial-gradient(220px circle at var(--mx, -400px) var(--my, -400px), var(--fx-glow), transparent 70%),
                    linear-gradient(175deg, var(--menu-from) 0%, var(--menu-mid) 45%, var(--menu-to) 75%, var(--menu-from) 100%);
        background-size: 100% 100%, 100% 240%;
        animation: menuFlowY 20s ease-in-out infinite;
    }
    .omni-footer {
        background: radial-gradient(320px circle at var(--mx, -400px) var(--my, -400px), var(--fx-glow), transparent 70%),
                    linear-gradient(120deg, var(--footer-from) 0%, var(--footer-mid) 45%, var(--footer-to) 75%, var(--footer-from) 100%);
        background-size: 100% 100%, 220% 100%;
        animation: menuFlowX 22s ease-in-out infinite;
    }
    @keyframes menuFlowX { 0%, 100% { background-position: 0 0, 0% 50%; } 50% { background-position: 0 0, 100% 50%; } }
    @keyframes menuFlowY { 0%, 100% { background-position: 0 0, 50% 0%; } 50% { background-position: 0 0, 50% 100%; } }

    /* Menu items: accent glow on hover, palette-coloured current item */
    .omni-navbar .omni-nav-menu > .omni-nav-item > .omni-nav-link:hover, .omni-navbar .omni-nav-menu > .omni-nav-item:hover > .omni-nav-link,
    .omni-navbar-bottom .omni-nav-menu > .omni-nav-item > .omni-nav-link:hover, .omni-navbar-bottom .omni-nav-menu > .omni-nav-item:hover > .omni-nav-link {
        background: color-mix(in srgb, var(--accent) 26%, rgba(255, 255, 255, 0.06)); box-shadow: 0 0 22px -4px color-mix(in srgb, var(--accent) 80%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
    }
    .omni-navbar .omni-nav-menu > .omni-nav-item > .omni-nav-link.current, .omni-navbar-bottom .omni-nav-menu > .omni-nav-item > .omni-nav-link.current,
    .omni-navbar .omni-nav-menu > .omni-nav-item > .omni-nav-link.active, .omni-navbar-bottom .omni-nav-menu > .omni-nav-item > .omni-nav-link.active {
        background: linear-gradient(135deg, var(--primary), var(--primary-hover)); box-shadow: 0 6px 18px -4px rgba(var(--primary-rgb), 0.85), inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
    }
    .omni-sidebar .omni-nav-link:hover { background: color-mix(in srgb, var(--accent) 22%, rgba(255, 255, 255, 0.06)); box-shadow: inset 3px 0 0 var(--accent), 0 0 20px -6px color-mix(in srgb, var(--accent) 80%, transparent); }
    .menu-right .omni-sidebar .omni-nav-link:hover { box-shadow: inset -3px 0 0 var(--accent), 0 0 20px -6px color-mix(in srgb, var(--accent) 80%, transparent); }
    .omni-sidebar .omni-nav-link.current { box-shadow: 0 6px 18px -4px rgba(var(--primary-rgb), 0.85), inset 3px 0 0 var(--accent); }
    .omni-navbar .omni-dropdown-menu .omni-nav-link:hover, .omni-navbar-bottom .omni-dropdown-menu .omni-nav-link:hover {
        background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 24%, transparent), transparent); color: var(--text-main); box-shadow: inset 3px 0 0 var(--accent); padding-left: 16px;
    }
    .omni-navbar .omni-brand:hover, .omni-navbar-bottom .omni-brand:hover, .omni-sidebar .omni-brand:hover { text-shadow: 0 0 18px var(--accent); }

    /* Footer: accent links with a sliding underline, glowing brand */
    .omni-footer ul a { position: relative; }
    .omni-footer ul a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; border-radius: 2px; background: var(--accent); transition: width 0.25s ease; }
    .omni-footer ul a:hover { color: #fff; text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 70%, transparent); }
    .omni-footer ul a:hover::after { width: 100%; }
    .omni-footer-brand:hover { text-shadow: 0 0 20px var(--accent); }
    .omni-footer-note { border-top-color: color-mix(in srgb, var(--accent) 35%, transparent); }
    @media (prefers-reduced-motion: reduce) { .omni-navbar, .omni-navbar-bottom, .omni-sidebar, .omni-footer { animation: none; } }