/* =====================================================================
   HMKAS RFQ PORTAL — PREMIUM DESIGN SYSTEM
   Architecture: enterprise-grade SaaS (Linear / Stripe / Vercel lineage)
   Authored for a procurement experience that feels trustworthy & fast.
   ===================================================================== */

/* ---------- Design Tokens ---------- */
:root {
    /* Neutrals (slate foundation) */
    --neutral-0: #ffffff;
    --neutral-25: #fcfcfd;
    --neutral-50: #f8fafc;
    --neutral-100: #f1f5f9;
    --neutral-150: #eef2f7;
    --neutral-200: #e2e8f0;
    --neutral-300: #cbd5e1;
    --neutral-400: #94a3b8;
    --neutral-500: #64748b;
    --neutral-600: #475569;
    --neutral-700: #334155;
    --neutral-800: #1e293b;
    --neutral-900: #0f172a;
    --neutral-950: #020617;

    /* Primary — Indigo (enterprise trust) */
    --primary-50: #eef2ff;
    --primary-100: #e0e7ff;
    --primary-200: #c7d2fe;
    --primary-300: #a5b4fc;
    --primary-400: #818cf8;
    --primary-500: #6366f1;
    --primary-600: #4f46e5;
    --primary-700: #4338ca;
    --primary-800: #3730a3;

    /* Accent — Blue (for CTAs, links, selection) */
    --accent-50: #eff6ff;
    --accent-100: #dbeafe;
    --accent-400: #60a5fa;
    --accent-500: #3b82f6;
    --accent-600: #2563eb;
    --accent-700: #1d4ed8;

    /* Status */
    --success-50: #ecfdf5;
    --success-100: #d1fae5;
    --success-500: #10b981;
    --success-600: #059669;
    --success-700: #047857;

    --warning-50: #fffbeb;
    --warning-100: #fef3c7;
    --warning-500: #f59e0b;
    --warning-600: #d97706;
    --warning-700: #b45309;

    --danger-50: #fef2f2;
    --danger-100: #fee2e2;
    --danger-500: #ef4444;
    --danger-600: #dc2626;
    --danger-700: #b91c1c;

    --info-50: #eff6ff;
    --info-100: #dbeafe;
    --info-500: #3b82f6;
    --info-600: #2563eb;

    /* Surfaces */
    --bg-body: #f1f5f9;
    --bg-body-grad: radial-gradient(ellipse at top, #eef2ff 0%, #f1f5f9 50%, #f8fafc 100%);
    --bg-surface: #ffffff;
    --bg-surface-alt: #f8fafc;
    --bg-surface-raised: #ffffff;
    --bg-overlay: rgba(15, 23, 42, 0.56);
    --bg-overlay-strong: rgba(15, 23, 42, 0.72);
    --bg-glass: rgba(255, 255, 255, 0.78);
    --bg-glass-dark: rgba(15, 23, 42, 0.72);

    /* Text */
    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-tertiary: #64748b;
    --text-muted: #94a3b8;
    --text-inverse: #ffffff;
    --text-brand: #4f46e5;

    /* Borders */
    --border-subtle: #e2e8f0;
    --border-default: #cbd5e1;
    --border-strong: #94a3b8;
    --border-focus: #6366f1;

    /* Spacing (8px grid + finer steps) */
    --space-0: 0;
    --space-0-5: 2px;
    --space-1: 4px;
    --space-1-5: 6px;
    --space-2: 8px;
    --space-2-5: 10px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 48px;
    --space-10: 64px;
    --space-11: 80px;

    /* Radius */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-3xl: 28px;
    --radius-full: 9999px;

    /* Shadows (layered, subtle) */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 12px 24px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.04);
    --shadow-xl: 0 24px 48px rgba(15, 23, 42, 0.14), 0 8px 16px rgba(15, 23, 42, 0.06);
    --shadow-2xl: 0 32px 64px rgba(15, 23, 42, 0.18);
    --shadow-ring: 0 0 0 3px rgba(99, 102, 241, 0.18);
    --shadow-ring-danger: 0 0 0 3px rgba(239, 68, 68, 0.18);
    --shadow-ring-success: 0 0 0 3px rgba(16, 185, 129, 0.18);
    --shadow-glow-primary: 0 0 0 1px rgba(99, 102, 241, 0.3), 0 8px 20px rgba(99, 102, 241, 0.25);

    /* Typography */
    --font-sans: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, monospace;

    --fs-xs: 11px;
    --fs-sm: 12px;
    --fs-base: 14px;
    --fs-md: 15px;
    --fs-lg: 16px;
    --fs-xl: 18px;
    --fs-2xl: 20px;
    --fs-3xl: 24px;
    --fs-4xl: 30px;
    --fs-5xl: 36px;
    --fs-6xl: 48px;

    --lh-tight: 1.2;
    --lh-snug: 1.35;
    --lh-normal: 1.5;
    --lh-relaxed: 1.65;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;

    --tracking-tightest: -0.04em;
    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.02em;
    --tracking-wider: 0.06em;

    /* Motion */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast: 120ms;
    --dur-default: 180ms;
    --dur-slow: 260ms;
    --dur-slower: 400ms;

    /* Z-index scale */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-header: 500;
    --z-overlay: 1000;
    --z-modal: 10000;
    --z-toast: 15000;
    --z-tooltip: 20000;
    --z-loader: 99999;

    /* Layout */
    --header-height: 56px;
    --sidebar-width: 380px;
    --content-max: 1440px;
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
    color: var(--text-primary);
    background-color: var(--bg-body);
    background-image:
        radial-gradient(1200px 600px at 100% -10%, rgba(99, 102, 241, 0.08), transparent 60%),
        radial-gradient(800px 500px at -10% 110%, rgba(59, 130, 246, 0.06), transparent 60%),
        linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    background-attachment: fixed;
    min-height: 100vh;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    letter-spacing: var(--tracking-tight);
    line-height: var(--lh-tight);
}

h1 { font-size: var(--fs-4xl); font-weight: var(--fw-bold); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }
h5 { font-size: var(--fs-lg); }
h6 { font-size: var(--fs-base); }

p { color: var(--text-secondary); line-height: var(--lh-relaxed); }

a {
    color: var(--primary-600);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--primary-700); }

img { max-width: 100%; height: auto; display: block; }

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

button { cursor: pointer; background: none; border: none; }

input, select, textarea {
    -webkit-appearance: none;
    appearance: none;
}

::selection {
    background-color: var(--primary-200);
    color: var(--primary-900);
}

/* Scrollbar styling */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--neutral-300);
    border-radius: var(--radius-full);
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--neutral-400); background-clip: padding-box; }

/* ---------- Focus Rings (accessibility) ---------- */
:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
button:focus-visible,
.btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-ring);
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
}

/* =====================================================================
   TOP NAVIGATION HEADER
   Sticky enterprise nav — brand mark, actions, subtle glass effect
   ===================================================================== */
.rfq-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-2) var(--space-5);
    gap: var(--space-2);
    background: var(--bg-glass);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-xs);
}

/* Inline search inside the header, next to the brand */
.rfq-header-search {
    position: relative;
    flex: 0 1 420px;
    min-width: 220px;
    display: inline-flex;
    align-items: center;
    height: 38px;
    margin: 0 var(--space-3);
    background: var(--neutral-50);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-full);
    transition: all var(--dur-fast) var(--ease-out);
}
.rfq-header-search:hover { border-color: var(--border-default); }
.rfq-header-search:focus-within {
    background: var(--bg-surface);
    border-color: var(--border-focus);
    box-shadow: var(--shadow-ring);
}
.rfq-header-search-icon {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.rfq-header-search-input {
    flex: 1;
    height: 100%;
    padding: 0 var(--space-4) 0 0;
    background: transparent;
    border: 0;
    outline: none;
    font-size: var(--fs-sm);
    color: var(--text-primary);
}
.rfq-header-search-input::placeholder {
    color: var(--text-muted);
    font-weight: var(--fw-regular);
}

/* Second header row: category pills + MOQ toggle */
.rfq-header-filters {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1-5) var(--space-2);
    background: var(--neutral-50);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
}
/* min-width:0 lets the pill bar shrink and scroll sideways instead of
   stretching the page (on phones it pushed the layout to ~1570px wide). */
.rfq-header-filters { min-width: 0; max-width: 100%; }
.rfq-header-filters .category-pill-bar { flex: 1; gap: 2px; min-width: 0; }
.rfq-header-filters .category-pill {
    height: 30px;
    padding: 0 var(--space-3);
    font-size: var(--fs-xs);
}
.rfq-header-filters .compact-toggle {
    height: 30px;
    padding: 0 var(--space-3);
    background: transparent;
    border-color: transparent;
}
.rfq-header-filters .compact-toggle:hover {
    background: var(--bg-surface);
    border-color: var(--border-subtle);
}

@media (max-width: 720px) {
    .rfq-header-search { margin: 0; order: 3; width: 100%; max-width: none; }
    .rfq-header-inner { flex-wrap: wrap; }
    .rfq-header-filters { flex-wrap: wrap; }
}
.rfq-header-inner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
}
.rfq-header-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}
.rfq-header-title-group { display: inline-flex; align-items: center; min-width: 0; }

.rfq-header-logo {
    height: 30px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
    transition: transform var(--dur-default) var(--ease-out);
}
.rfq-header-logo:hover { transform: scale(1.03); }

.rfq-header-title {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    letter-spacing: var(--tracking-tight);
    white-space: nowrap;
    margin: 0;
}

.rfq-lang-topright {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: nowrap;
    justify-content: flex-end;
    flex-shrink: 0;
    margin-left: auto;
}
.rfq-lang-topright .rfq-header-actions {
    flex-wrap: nowrap;
}

/* ---------- Buttons (unified system) ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 40px;
    padding: 0 var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    letter-spacing: var(--tracking-normal);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color var(--dur-fast) var(--ease-out),
        color var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-default) var(--ease-out),
        transform var(--dur-fast) var(--ease-out);
    user-select: none;
    text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn:disabled,
.btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-primary {
    background: linear-gradient(180deg, var(--primary-500) 0%, var(--primary-600) 100%);
    color: var(--text-inverse);
    border-color: var(--primary-700);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 1px 2px rgba(79, 70, 229, 0.25),
        0 2px 6px rgba(79, 70, 229, 0.20);
}
.btn-primary:hover {
    background: linear-gradient(180deg, var(--primary-600) 0%, var(--primary-700) 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.20) inset,
        0 4px 12px rgba(79, 70, 229, 0.30),
        0 2px 4px rgba(79, 70, 229, 0.20);
    transform: translateY(-1px);
}
.btn-primary:active {
    background: var(--primary-700);
    box-shadow: 0 1px 2px rgba(79, 70, 229, 0.20);
}

.btn-secondary {
    background-color: var(--bg-surface);
    color: var(--text-secondary);
    border-color: var(--border-default);
    box-shadow: var(--shadow-xs);
}
.btn-secondary:hover {
    background-color: var(--neutral-50);
    color: var(--text-primary);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
}

.btn-large {
    height: 48px;
    padding: 0 var(--space-6);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    border-radius: var(--radius-lg);
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1em;
    transition: transform var(--dur-default) var(--ease-out);
}
.btn-primary:hover .btn-icon { transform: translateX(2px); }

/* Help button */
.btn-help {
    height: 40px;
    padding: 0 var(--space-4);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
}
.help-text { font-weight: var(--fw-medium); }

/* View toggle */
.view-toggle-container {
    display: inline-flex;
    background-color: var(--neutral-100);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 3px;
    gap: 2px;
}
.view-toggle-btn {
    height: 32px;
    padding: 0 var(--space-3);
    border: 1px solid transparent;
    background: transparent;
    color: var(--neutral-400);
    border-radius: var(--radius-sm);
    box-shadow: none;
    font-size: var(--fs-md);
    opacity: 0.75;
    transition: all var(--dur-fast) var(--ease-out);
}
.view-toggle-btn:hover {
    background: var(--bg-surface);
    color: var(--text-secondary);
    box-shadow: none;
    transform: none;
    opacity: 1;
}
.view-toggle-btn.active {
    background: var(--primary-600);
    color: var(--text-inverse);
    border-color: var(--primary-700);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 2px 6px rgba(99, 102, 241, 0.30);
    opacity: 1;
}
.view-toggle-btn.active:hover {
    background: var(--primary-700);
    color: var(--text-inverse);
}
.view-toggle-btn .view-icon { color: currentColor; width: 14px; height: 14px; }
.view-icon { font-size: 1em; line-height: 1; }
.view-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
}
.view-toggle-text { letter-spacing: var(--tracking-tight); }

/* Help button — prominent question mark badge */
.btn-help {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--fw-semibold);
}
.help-icon-badge {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    background: var(--primary-600);
    color: var(--text-inverse);
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: var(--fw-bold);
    line-height: 1;
    box-shadow: 0 1px 3px rgba(99,102,241,0.35);
}
.btn-help:hover .help-icon-badge {
    background: var(--primary-700);
    transform: scale(1.08);
}

/* Keep the whole actions cluster on a single line */
.rfq-header-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: nowrap;
    white-space: nowrap;
}
.rfq-header-actions > * { flex-shrink: 0; }

/* Language buttons */
.btn-lang {
    height: 38px;
    width: 38px;
    padding: 0;
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}
.btn-lang:hover {
    background: var(--neutral-50);
    border-color: var(--border-default);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.btn-lang img {
    width: 24px;
    height: 18px;
    border-radius: 3px;
    object-fit: cover;
    pointer-events: none;
}
.btn-lang-soon {
    opacity: 0.55;
    cursor: not-allowed;
    position: relative;
}
.btn-lang-soon:hover {
    transform: none;
    background: var(--bg-surface);
}
.btn-lang-soon::after {
    content: 'Yakında';
    position: absolute;
    bottom: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.82);
    color: #fff;
    font-size: 0.72em;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s;
    z-index: 5;
}
.btn-lang-soon:hover::after { opacity: 1; }

/* Catalog button */
.catalog-button-container { display: inline-flex; }
.btn-catalog {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 40px;
    padding: 0 var(--space-4);
    background: linear-gradient(135deg, var(--neutral-900) 0%, var(--neutral-800) 100%);
    color: var(--text-inverse);
    border: 1px solid var(--neutral-700);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-wide);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        var(--shadow-sm);
    transition: all var(--dur-default) var(--ease-out);
}
.btn-catalog:hover {
    background: linear-gradient(135deg, var(--neutral-800) 0%, var(--neutral-700) 100%);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.catalog-icon { font-size: 1.1em; filter: grayscale(0.1); }

/* =====================================================================
   LANGUAGE SELECTION SCREEN (first-time)
   ===================================================================== */
.language-selection {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: linear-gradient(135deg, #eef2ff 0%, #f8fafc 50%, #e0e7ff 100%);
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    animation: fadeIn var(--dur-slow) var(--ease-out);
}
.language-selection.active { display: flex; }

.language-content {
    max-width: 520px;
    width: 100%;
    text-align: center;
    padding: var(--space-10) var(--space-8);
    background: var(--bg-surface);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-2xl);
    animation: scaleIn var(--dur-slower) var(--ease-spring);
}
.language-content h2 {
    font-size: var(--fs-3xl);
    margin-bottom: var(--space-2);
    letter-spacing: var(--tracking-tight);
}
.language-content p {
    color: var(--text-tertiary);
    margin-bottom: var(--space-8);
    font-size: var(--fs-md);
}

.language-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

.language-option {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-4);
    background: var(--neutral-50);
    border: 2px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--dur-default) var(--ease-out);
}
.language-option:hover {
    background: var(--bg-surface);
    border-color: var(--primary-400);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.language-option img {
    width: 48px;
    height: 36px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-xs);
}
.language-name {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
}
.language-option.lang-soon {
    cursor: not-allowed;
    opacity: 0.7;
}
.language-option.lang-soon:hover {
    transform: none;
    border-color: var(--border-subtle);
    background: var(--neutral-50);
    box-shadow: none;
}
.lang-soon-badge {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    padding: 2px var(--space-2);
    background: var(--warning-500);
    color: var(--text-inverse);
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}
.lang-soon { position: relative; }

/* =====================================================================
   WELCOME / ONBOARDING MODAL
   ===================================================================== */
.welcome-section {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: var(--bg-overlay);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    animation: fadeIn var(--dur-default) var(--ease-out);
}
.welcome-section.active { display: flex; }

.welcome-content {
    position: relative;
    max-width: 640px;
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    background: var(--bg-surface);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2xl);
    padding: var(--space-9) var(--space-8) var(--space-7);
    text-align: center;
    animation: scaleIn var(--dur-slow) var(--ease-spring);
}
.welcome-section { place-items: center; }

/* =====================================================================
   ONBOARDING GUIDE WIZARD (6-slide tour)
   ===================================================================== */
.guide-wizard {
    max-width: 720px;
    padding: var(--space-8) var(--space-8) var(--space-6);
    text-align: left;
}
.guide-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}
.guide-dot {
    position: relative;
    width: 32px;
    height: 6px;
    border: none;
    padding: 0;
    background: var(--neutral-200);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
}
.guide-dot:hover { background: var(--primary-300); }
.guide-wizard[data-step="1"] .guide-dot[data-step="1"],
.guide-wizard[data-step="2"] .guide-dot[data-step="2"],
.guide-wizard[data-step="3"] .guide-dot[data-step="3"],
.guide-wizard[data-step="4"] .guide-dot[data-step="4"],
.guide-wizard[data-step="5"] .guide-dot[data-step="5"],
.guide-wizard[data-step="6"] .guide-dot[data-step="6"] {
    width: 44px;
    background: linear-gradient(90deg, var(--primary-500), var(--primary-600));
    box-shadow: 0 2px 6px rgba(99,102,241,0.35);
}
.guide-wizard[data-step="2"] .guide-dot[data-step="1"],
.guide-wizard[data-step="3"] .guide-dot[data-step="1"],
.guide-wizard[data-step="3"] .guide-dot[data-step="2"],
.guide-wizard[data-step="4"] .guide-dot[data-step="1"],
.guide-wizard[data-step="4"] .guide-dot[data-step="2"],
.guide-wizard[data-step="4"] .guide-dot[data-step="3"],
.guide-wizard[data-step="5"] .guide-dot[data-step="1"],
.guide-wizard[data-step="5"] .guide-dot[data-step="2"],
.guide-wizard[data-step="5"] .guide-dot[data-step="3"],
.guide-wizard[data-step="5"] .guide-dot[data-step="4"],
.guide-wizard[data-step="6"] .guide-dot[data-step="1"],
.guide-wizard[data-step="6"] .guide-dot[data-step="2"],
.guide-wizard[data-step="6"] .guide-dot[data-step="3"],
.guide-wizard[data-step="6"] .guide-dot[data-step="4"],
.guide-wizard[data-step="6"] .guide-dot[data-step="5"] {
    background: var(--primary-300);
}

.guide-slides { position: relative; min-height: 340px; }
.guide-slide {
    display: none;
    animation: guideSlideIn var(--dur-slow) var(--ease-out);
}
.guide-wizard[data-step="1"] .guide-slide[data-step="1"],
.guide-wizard[data-step="2"] .guide-slide[data-step="2"],
.guide-wizard[data-step="3"] .guide-slide[data-step="3"],
.guide-wizard[data-step="4"] .guide-slide[data-step="4"],
.guide-wizard[data-step="5"] .guide-slide[data-step="5"],
.guide-wizard[data-step="6"] .guide-slide[data-step="6"] {
    display: block;
}
@keyframes guideSlideIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.guide-illustration {
    width: 140px;
    height: 140px;
    margin: 0 auto var(--space-4);
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 30% 20%, #eef2ff 0%, #f8fafc 80%);
    border: 1px solid var(--primary-100);
    border-radius: var(--radius-2xl);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6), 0 8px 24px -12px rgba(99,102,241,0.25);
}
.guide-illustration svg { width: 100%; height: 100%; }

.guide-eyebrow {
    text-align: center;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color: var(--primary-600);
    margin-bottom: var(--space-2);
}
.guide-title {
    text-align: center;
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
    margin: 0 0 var(--space-3);
}
.guide-lede {
    text-align: center;
    max-width: 520px;
    margin: 0 auto var(--space-5);
    color: var(--text-secondary);
    font-size: var(--fs-md);
    line-height: var(--lh-relaxed);
}

.guide-checklist {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 480px;
    display: grid;
    gap: var(--space-2);
}
.guide-checklist li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--neutral-50);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    line-height: var(--lh-snug);
}
.gc-check {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    background: var(--success-500);
    color: var(--text-inverse);
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: var(--fw-bold);
}

.guide-tips {
    list-style: none;
    padding: var(--space-4) var(--space-5);
    margin: 0 auto;
    max-width: 540px;
    background: linear-gradient(180deg, var(--primary-50), var(--bg-surface));
    border: 1px solid var(--primary-100);
    border-radius: var(--radius-lg);
    display: grid;
    gap: var(--space-2-5);
}
.guide-tips li {
    position: relative;
    padding-left: var(--space-5);
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
    color: var(--text-secondary);
}
.guide-tips li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 8px;
    height: 8px;
    background: var(--primary-500);
    border-radius: var(--radius-full);
    box-shadow: 0 0 0 3px var(--primary-100);
}
.guide-tips li strong {
    color: var(--text-primary);
    font-weight: var(--fw-semibold);
}

.guide-finish-cta {
    margin: var(--space-5) auto 0;
    max-width: 480px;
    padding: var(--space-3) var(--space-4);
    text-align: center;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--success-700);
    background: var(--success-50);
    border: 1px solid var(--success-200);
    border-radius: var(--radius-md);
}

.guide-nav {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-6) 0 var(--space-4);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border-subtle);
}
.guide-nav-spacer { flex: 1; }
.guide-wizard[data-step="1"] .guide-back-btn { visibility: hidden; }
@media (max-width: 560px) {
    .guide-wizard { padding: var(--space-7) var(--space-5) var(--space-5); }
    .guide-illustration { width: 120px; height: 120px; }
    .guide-title { font-size: var(--fs-xl); }
    .guide-nav { flex-wrap: wrap; }
    .guide-nav-spacer { display: none; }
}
.welcome-content h2 {
    font-size: var(--fs-3xl);
    margin-bottom: var(--space-2);
}
.welcome-content > p {
    color: var(--text-tertiary);
    margin-bottom: var(--space-7);
    font-size: var(--fs-md);
}

.welcome-close-btn {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 1;
    color: var(--text-tertiary);
    background: var(--neutral-100);
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
}
.welcome-close-btn:hover {
    background: var(--danger-50);
    color: var(--danger-600);
    transform: rotate(90deg);
}

.steps-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-7);
}

.step-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-6) var(--space-3);
    background: linear-gradient(180deg, var(--neutral-50) 0%, var(--bg-surface) 100%);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    transition: all var(--dur-default) var(--ease-out);
}
.step-item:hover {
    border-color: var(--primary-300);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.step-number {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-3);
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    color: var(--text-inverse);
    border-radius: var(--radius-full);
    font-weight: var(--fw-bold);
    font-size: var(--fs-lg);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.30);
}
.step-content h3 {
    font-size: var(--fs-lg);
    margin-bottom: var(--space-1);
}
.step-content p {
    font-size: var(--fs-sm);
    color: var(--text-tertiary);
    line-height: var(--lh-snug);
}

.welcome-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
}

.welcome-dont-show {
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
}
.dont-show-checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    color: var(--text-tertiary);
    font-size: var(--fs-sm);
    user-select: none;
}
.dont-show-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.checkmark {
    width: 18px;
    height: 18px;
    display: inline-block;
    background: var(--bg-surface);
    border: 1.5px solid var(--border-default);
    border-radius: var(--radius-xs);
    position: relative;
    transition: all var(--dur-fast) var(--ease-out);
}
.dont-show-checkbox:hover .checkmark { border-color: var(--primary-400); }
.dont-show-checkbox input:checked + .checkmark {
    background: var(--primary-600);
    border-color: var(--primary-600);
}
.dont-show-checkbox input:checked + .checkmark::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 9px;
    border: solid var(--text-inverse);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* =====================================================================
   LOADING OVERLAY
   ===================================================================== */
.loading-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-loader);
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--bg-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: fadeIn var(--dur-fast) var(--ease-out);
}
.loading-overlay > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-7) var(--space-8);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
}
.loading-overlay p {
    font-size: var(--fs-sm);
    color: var(--text-tertiary);
    font-weight: var(--fw-medium);
    margin: 0 !important;
}

.loading-spinner {
    width: 44px;
    height: 44px;
    border: 3px solid var(--neutral-200);
    border-top-color: var(--primary-600);
    border-radius: var(--radius-full);
    animation: spin 0.8s linear infinite;
}

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

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.94) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
    from { opacity: 0; transform: translateX(12px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* =====================================================================
   PAGE LAYOUT
   ===================================================================== */
.page-container {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--space-7) var(--space-6) var(--space-9);
}

.main-content-area {
    width: 100%;
}

.container {
    width: 100%;
    background: transparent;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
}

.unified-interface-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--sidebar-width);
    gap: var(--space-6);
    align-items: flex-start;
}

/* =====================================================================
   SEARCH & FILTER AREA
   ===================================================================== */
.search-results-area {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.search-area-box {
    padding: var(--space-5);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.sa-search-row {
    position: relative;
    display: flex;
    align-items: center;
}
.sa-search-icon {
    position: absolute;
    left: var(--space-4);
    color: var(--text-muted);
    pointer-events: none;
    font-size: 16px;
    line-height: 1;
}
.sa-search-input {
    width: 100%;
    height: 48px;
    padding: 0 var(--space-4) 0 var(--space-10);
    background: var(--neutral-50);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    transition: all var(--dur-default) var(--ease-out);
}
.sa-search-input::placeholder {
    color: var(--text-muted);
    font-weight: var(--fw-regular);
}
.sa-search-input:hover {
    background: var(--bg-surface);
    border-color: var(--border-default);
}
.sa-search-input:focus {
    background: var(--bg-surface);
    border-color: var(--border-focus);
    box-shadow: var(--shadow-ring);
}

.sa-filter-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr) 140px auto;
    gap: var(--space-3);
    align-items: end;
}

.sa-filter-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1-5);
    min-width: 0;
}
.sa-filter-item-sm { max-width: 160px; }
.sa-filter-item-toggle {
    align-self: end;
    padding-bottom: 2px;
}

.sa-filter-label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-tertiary);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
}

.sa-filter-select,
.sa-filter-input {
    width: 100%;
    height: 40px;
    padding: 0 var(--space-3);
    background: var(--bg-surface);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    transition: all var(--dur-fast) var(--ease-out);
    cursor: pointer;
}
.sa-filter-select {
    padding-right: var(--space-8);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 12px;
}
.sa-filter-select:hover,
.sa-filter-input:hover {
    border-color: var(--border-default);
}
.sa-filter-select:focus,
.sa-filter-input:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: var(--shadow-ring);
}
.sa-filter-select:disabled {
    background-color: var(--neutral-50);
    color: var(--text-muted);
    cursor: not-allowed;
}

/* Horizontal category pill bar (replaces category/subcategory/catalog-page dropdowns) */
.category-pill-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}
.category-pill-bar {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    overflow-x: auto;
    scrollbar-width: none;
    padding: var(--space-1) 0;
    scroll-behavior: smooth;
}
.category-pill-bar::-webkit-scrollbar { display: none; }
.category-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    height: 36px;
    padding: 0 var(--space-4);
    background: transparent;
    border: 1.5px solid transparent;
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
}
.category-pill:hover {
    background: var(--neutral-100);
    color: var(--text-primary);
}
.category-pill.active {
    background: var(--primary-50);
    color: var(--primary-700);
    border-color: var(--primary-200);
    font-weight: var(--fw-semibold);
    box-shadow: 0 1px 2px rgba(99,102,241,0.12);
}
.category-pill .pill-code {
    display: inline-block;
    padding: 1px 6px;
    background: var(--neutral-100);
    color: var(--text-muted);
    border-radius: var(--radius-xs);
    font-size: 10px;
    font-weight: var(--fw-bold);
    font-family: var(--font-mono);
}
.category-pill.active .pill-code {
    background: var(--primary-100);
    color: var(--primary-700);
}
.compact-toggle {
    flex: 0 0 auto;
    height: 36px;
}
@media (max-width: 640px) {
    .category-pill-row { flex-direction: column; align-items: stretch; gap: var(--space-2); }
    .compact-toggle { align-self: flex-end; }
}

/* ---- Category Mega Menu ---- */
.cat-mega-wrap {
    position: relative;
    flex: 0 0 auto;
    z-index: 900;
}
.cat-mega-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 32px;
    padding: 0 var(--space-3);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    color: var(--text-primary);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
    transition: all var(--dur-fast) var(--ease-out);
}
.cat-mega-trigger:hover,
.cat-mega-trigger.open {
    background: var(--neutral-100);
    border-color: var(--border-default);
}
.cat-mega-trigger svg { pointer-events: none; flex-shrink: 0; }
.cat-mega-caret { color: var(--text-tertiary); transition: transform var(--dur-fast) var(--ease-out); }
.cat-mega-trigger.open .cat-mega-caret,
.cat-mega-wrap.hover-open .cat-mega-caret { transform: rotate(180deg); }

/* Active category chip next to the Categories button */
.cat-active { flex: 1; min-width: 0; display: flex; align-items: center; }
.cat-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    max-width: 100%;
    height: 32px;
    padding: 0 var(--space-1) 0 var(--space-3);
    background: color-mix(in srgb, var(--cat-color) 9%, var(--bg-surface));
    border: 1px solid color-mix(in srgb, var(--cat-color) 30%, transparent);
    border-radius: var(--radius-full);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    animation: fadeIn var(--dur-default) var(--ease-out);
}
.cat-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cat-color); flex-shrink: 0; }
.cat-chip-main {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    color: var(--text-tertiary);
    cursor: pointer;
    white-space: nowrap;
}
.cat-chip-main:hover { color: var(--cat-color); text-decoration: underline; }
.cat-chip-sep { color: var(--text-muted); }
.cat-chip-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cat-chip-clear {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-tertiary);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.cat-chip-clear:hover { background: color-mix(in srgb, var(--cat-color) 16%, transparent); color: var(--text-primary); }
.rfq-header-filters .compact-toggle { margin-left: auto; }

/* Mega menu: "All categories" row + current category highlight */
.cat-mega-all { color: var(--text-secondary); }
.cat-mega-all.is-active,
.cat-mega-item.is-active > .cat-mega-link { background: var(--neutral-100); }
.cat-mega-item.is-active > .cat-mega-link .cat-mega-label { text-decoration: underline; text-underline-offset: 3px; }
.cat-mega-divider { height: 1px; margin: var(--space-1) var(--space-3); background: var(--border-subtle); }

.cat-mega-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 300px;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: var(--space-2) 0;
    z-index: 901;
}
.cat-mega-dropdown.show { display: block; }
.cat-mega-wrap.hover-open > .cat-mega-dropdown { display: block; }
.cat-mega-wrap.hover-open > .cat-mega-trigger {
    background: var(--neutral-100);
    color: var(--text-primary);
    border-color: var(--border-subtle);
}

.cat-mega-item {
    position: relative;
}
.cat-mega-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    text-decoration: none;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    transition: background var(--dur-fast) var(--ease-out);
    white-space: nowrap;
}
.cat-mega-link:hover {
    background: var(--neutral-50);
}
.cat-mega-link img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    flex-shrink: 0;
}
.cat-mega-link .cat-mega-label { flex: 1; text-align: left; }
.cat-mega-link .cat-mega-arrow {
    margin-left: auto;
    font-size: 10px;
    color: var(--text-muted);
    transition: transform var(--dur-fast) var(--ease-out);
}
.cat-mega-item:hover > .cat-mega-link .cat-mega-arrow {
    transform: translateX(2px);
}

.cat-mega-sub {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 220px;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: var(--space-2) 0;
    z-index: 902;
}
.cat-mega-item:hover > .cat-mega-sub {
    display: block;
}
.cat-mega-sub-link {
    display: block;
    padding: var(--space-1-5) var(--space-4);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    white-space: nowrap;
    transition: all var(--dur-fast) var(--ease-out);
}
.cat-mega-sub-link:hover {
    background: var(--neutral-50);
    color: var(--text-primary);
}

@media (max-width: 640px) {
    .cat-mega-dropdown {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: 70vh;
        overflow-y: auto;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        min-width: unset;
    }
    .cat-mega-sub {
        position: static;
        border: none;
        box-shadow: none;
        padding-left: var(--space-6);
        min-width: unset;
    }
    .cat-mega-item:hover > .cat-mega-sub { display: block; }
}

/* Toggle switch */
.sa-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2-5);
    cursor: pointer;
    user-select: none;
    height: 40px;
    padding: 0 var(--space-3);
    background: var(--neutral-50);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-md);
    transition: all var(--dur-fast) var(--ease-out);
}
.sa-toggle-label:hover {
    background: var(--bg-surface);
    border-color: var(--border-default);
}
.sa-toggle-checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.sa-toggle-switch {
    position: relative;
    width: 34px;
    height: 20px;
    background: var(--neutral-300);
    border-radius: var(--radius-full);
    transition: background-color var(--dur-default) var(--ease-out);
    flex-shrink: 0;
}
.sa-toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--bg-surface);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur-default) var(--ease-spring);
}
.sa-toggle-checkbox:checked + .sa-toggle-switch {
    background: var(--primary-600);
}
.sa-toggle-checkbox:checked + .sa-toggle-switch::after {
    transform: translateX(14px);
}
.sa-toggle-text {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Old filter classes, hidden (legacy) */
.filters, .filter-group { display: none; }

/* =====================================================================
   PRODUCT RESULTS AREA
   ===================================================================== */
.product-results-area {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.product-count {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--text-tertiary);
    text-align: left;
    font-style: normal;
}
.product-count::before { content: ''; }

/* Pagination */
.pagination-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--space-2);
    background: var(--neutral-50);
    border-radius: var(--radius-md);
}
.pagination-controls .btn {
    height: 36px;
    min-width: 36px;
    padding: 0 var(--space-3);
    font-size: var(--fs-sm);
}
.pagination-controls span#pageInfo,
.pagination-controls span#pageInfoBottom {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
    padding: 0 var(--space-3);
    letter-spacing: var(--tracking-normal);
}
.pagination-controls label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--text-tertiary);
}
.pagination-controls select {
    height: 34px;
    padding: 0 var(--space-6) 0 var(--space-3);
    background: var(--bg-surface);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--text-primary);
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-2) center;
}
.pagination-controls select:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: var(--shadow-ring);
}

/* =====================================================================
   PRODUCT TABLE
   ===================================================================== */
.product-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    table-layout: fixed;
}

.product-table th {
    padding: var(--space-3) var(--space-4);
    background: var(--neutral-50);
    color: var(--text-tertiary);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-align: left;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
}

.product-table td {
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    vertical-align: middle;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.product-table tbody tr:last-child td { border-bottom: none; }

.product-table tbody tr {
    transition: background-color var(--dur-fast) var(--ease-out);
}
.product-table tbody tr:hover {
    background: var(--primary-50);
}

/* Column layout: 1 = thumbnail, 2 = product code, 3 = description, 4 = action */
.product-table th:nth-child(1), .product-table td:nth-child(1) {
    width: 68px;
    text-align: center;
}
.product-table th:nth-child(2), .product-table td:nth-child(2) {
    width: 14%;
    min-width: 110px;
    text-align: center;
}
.product-table th:nth-child(3), .product-table td:nth-child(3) {
    width: auto;
    min-width: 240px;
}
.product-table th:nth-child(4), .product-table td:nth-child(4) {
    width: 12%;
    min-width: 100px;
    text-align: center;
}

.product-table td:nth-child(2) {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--primary-700);
    letter-spacing: var(--tracking-normal);
}

.product-table td:nth-child(3) {
    color: var(--text-primary);
    font-weight: var(--fw-medium);
}

/* Legacy thumbnail rule (emoji-preview images); the list-view thumbnails
   are styled by .product-thumb instead */
.product-table td img:not(.product-thumb) {
    width: 44px !important;
    height: 44px !important;
    object-fit: contain !important;
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border-subtle) !important;
    background: var(--neutral-50);
    flex-shrink: 0;
    cursor: pointer;
    transition: transform var(--dur-default) var(--ease-out), box-shadow var(--dur-default) var(--ease-out);
}
.product-table td img:not(.product-thumb):hover {
    transform: scale(1.08);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-300);
}

/* Quantity input — used in table + inline cards */
.quantity-input {
    width: 100%;
    max-width: 100px;
    height: 36px;
    padding: 0 var(--space-2-5);
    background: var(--bg-surface);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    text-align: center;
    font-variant-numeric: tabular-nums;
    transition: all var(--dur-fast) var(--ease-out);
    -moz-appearance: textfield;
}
.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.quantity-input:hover { border-color: var(--border-default); }
.quantity-input:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: var(--shadow-ring);
}

/* Add-to-basket button (table) */
.btn-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1-5);
    height: 36px;
    padding: 0 var(--space-3);
    background: linear-gradient(180deg, var(--primary-500), var(--primary-600));
    color: var(--text-inverse);
    border: 1px solid var(--primary-700);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 1px 3px rgba(79, 70, 229, 0.25);
    transition: all var(--dur-default) var(--ease-out);
}
.btn-add:hover {
    background: linear-gradient(180deg, var(--primary-600), var(--primary-700));
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.2) inset,
        0 4px 10px rgba(79, 70, 229, 0.32);
}
.btn-add:active { transform: translateY(0); }
.btn-add:disabled {
    background: var(--neutral-200);
    color: var(--text-muted);
    border-color: var(--border-subtle);
    box-shadow: none;
    cursor: not-allowed;
}

/* =====================================================================
   STATUS BADGES (both table-cell variant and .status-badge variant)
   ===================================================================== */
.status-active,
.status-passive,
.status-control,
.status-inactive,
.status-special-product,
.status-unknown {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: 4px var(--space-2-5);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-wide);
    border-radius: var(--radius-full);
    white-space: nowrap;
    border: 1px solid transparent;
    line-height: 1.4;
}

/* Reset table cell to be container for status chip */
td.status-active,
td.status-passive,
td.status-control,
td.status-inactive,
td.status-special-product,
td.status-unknown {
    display: table-cell;
    padding: var(--space-4);
    background: transparent;
    color: inherit;
    border: none;
    border-bottom: 1px solid var(--border-subtle);
    border-radius: 0;
}

td.status-active > span:first-child,
td.status-passive > span:first-child,
td.status-control > span:first-child,
td.status-inactive > span:first-child,
td.status-special-product > span:first-child,
td.status-unknown > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: 4px var(--space-2-5);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-wide);
    border-radius: var(--radius-full);
    white-space: nowrap;
    border: 1px solid transparent;
    line-height: 1.4;
}

/* Status variants */
td.status-active > span:first-child,
.status-active,
.status-badge.available,
.status-badge.active {
    background: var(--success-50);
    color: var(--success-700);
    border-color: var(--success-200);
}
td.status-active > span:first-child::before,
.status-active::before,
.status-badge.available::before,
.status-badge.active::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--success-500);
    box-shadow: 0 0 0 2px var(--success-100);
    flex-shrink: 0;
}

/* New / Limited status variants */
.status-badge.new {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}
.status-badge.new::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: #3b82f6;
    box-shadow: 0 0 0 2px #dbeafe;
    flex-shrink: 0;
}
.status-badge.limited {
    background: var(--warning-50);
    color: var(--warning-700);
    border-color: var(--warning-200);
}
.status-badge.limited::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--warning-500);
    box-shadow: 0 0 0 2px var(--warning-100);
    flex-shrink: 0;
}

td.status-control > span:first-child,
td.status-passive > span:first-child,
.status-control,
.status-passive,
.status-badge.control {
    background: var(--warning-50);
    color: var(--warning-700);
    border-color: var(--warning-100);
}
td.status-control > span:first-child::before,
td.status-passive > span:first-child::before,
.status-control::before,
.status-passive::before,
.status-badge.control::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--warning-500);
    box-shadow: 0 0 0 2px var(--warning-100);
    flex-shrink: 0;
}

td.status-inactive > span:first-child,
.status-inactive,
.status-badge.unavailable {
    background: var(--danger-50);
    color: var(--danger-700);
    border-color: var(--danger-100);
}
td.status-inactive > span:first-child::before,
.status-inactive::before,
.status-badge.unavailable::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--danger-500);
    box-shadow: 0 0 0 2px var(--danger-100);
    flex-shrink: 0;
}

td.status-special-product > span:first-child,
.status-special-product {
    background: linear-gradient(135deg, var(--primary-100), var(--primary-50));
    color: var(--primary-700);
    border-color: var(--primary-200);
}
td.status-special-product > span:first-child::before,
.status-special-product::before {
    content: '✦';
    font-size: 10px;
    color: var(--primary-600);
    line-height: 1;
}

td.status-unknown > span:first-child,
.status-unknown {
    background: var(--neutral-100);
    color: var(--neutral-600);
    border-color: var(--neutral-200);
}
td.status-unknown > span:first-child::before,
.status-unknown::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--neutral-400);
    flex-shrink: 0;
}

/* Status tooltip icon */
.status-tooltip-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    font-size: 12px;
    color: var(--text-muted);
    cursor: help;
}
.status-tooltip-popup {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 220px;
    max-width: 280px;
    padding: var(--space-3);
    background: var(--neutral-900);
    color: var(--text-inverse);
    border-radius: var(--radius-md);
    font-size: var(--fs-xs);
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-tooltip);
    pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease-out), visibility var(--dur-fast) var(--ease-out);
}
.status-tooltip-popup::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--neutral-900);
}
.status-tooltip-icon:hover .status-tooltip-popup {
    visibility: visible;
    opacity: 1;
}

.status-bestseller {
    margin-left: var(--space-1-5);
    color: var(--warning-700);
    font-weight: var(--fw-bold);
    font-size: var(--fs-xs);
    background: var(--warning-50);
    padding: 2px var(--space-1-5);
    border-radius: var(--radius-xs);
    border: 1px solid var(--warning-100);
}

/* Golden "setup (special production) available" indicator — list + grid */
.setup-avail-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 9px 3px 7px;
    border-radius: 999px;
    color: #6b4e00;
    background: linear-gradient(135deg, #fff4cc, #ffe08a);
    border: 1px solid #e8c15a;
    box-shadow: 0 1px 2px rgba(184, 134, 11, .25);
    white-space: nowrap;
    vertical-align: middle;
}
.setup-avail-badge .sab-dot { color: #d4a017; font-size: 9px; }

/* Status badge (for cards) */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: 4px var(--space-2-5);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-wide);
    border-radius: var(--radius-full);
    white-space: nowrap;
    border: 1px solid transparent;
    line-height: 1.4;
}

/* =====================================================================
   PRODUCT GRID (CARD VIEW)
   ===================================================================== */
.product-grid {
    display: none;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-4);
    padding: 2px;
}
.product-grid.active { display: grid; }

.product-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--dur-default) var(--ease-out);
    position: relative;
}
.product-card:hover {
    transform: translateY(-3px);
    border-color: var(--primary-300);
    box-shadow: var(--shadow-lg);
}
.product-card:hover::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    box-shadow: inset 0 0 0 1px var(--primary-400);
    pointer-events: none;
}

.product-card .product-image {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, var(--neutral-50), var(--neutral-100));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    border-bottom: 1px solid var(--border-subtle);
}
.product-card .product-image img {
    max-width: 82%;
    max-height: 82%;
    object-fit: contain;
    transition: transform var(--dur-slow) var(--ease-out);
}
.product-card:hover .product-image img { transform: scale(1.06); }

.product-image-placeholder {
    font-size: 44px;
    opacity: 0.28;
    filter: grayscale(0.4);
}

.product-card .product-code {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-tertiary);
    letter-spacing: var(--tracking-normal);
    padding: var(--space-3) var(--space-4) 0;
    text-transform: uppercase;
}

.product-card .product-name {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    line-height: var(--lh-snug);
    padding: var(--space-1) var(--space-4) var(--space-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
}

.product-card .product-status {
    padding: 0 var(--space-4) var(--space-3);
}

.product-card .add-to-basket-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1-5);
    width: calc(100% - var(--space-7));
    height: 38px;
    margin: 0 var(--space-4) var(--space-4);
    padding: 0 var(--space-3);
    background: linear-gradient(180deg, var(--primary-500), var(--primary-600));
    color: var(--text-inverse);
    border: 1px solid var(--primary-700);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: all var(--dur-default) var(--ease-out);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 1px 3px rgba(79, 70, 229, 0.25);
}
.product-card .add-to-basket-btn:hover {
    background: linear-gradient(180deg, var(--primary-600), var(--primary-700));
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.20) inset,
        0 6px 14px rgba(79, 70, 229, 0.30);
}
.product-card .add-to-basket-btn:disabled {
    background: var(--neutral-100);
    color: var(--text-muted);
    border-color: var(--border-subtle);
    box-shadow: none;
}
.add-icon {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    font-size: 14px;
    line-height: 1;
}

/* Product card header (variant groups) */
.product-card-header {
    padding: var(--space-4) var(--space-4) var(--space-2);
    border-bottom: 1px solid var(--border-subtle);
}

/* Group card variant selector area */
.group-card-axes {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-2);
}
.group-card-axes > div {
    display: flex;
    gap: var(--space-1-5);
    flex-wrap: wrap;
    align-items: center;
}
.group-card-resolved {
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: linear-gradient(180deg, var(--neutral-50), var(--bg-surface));
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    font-size: var(--fs-xs);
}

/* Variant axis chips (inside cards and variant modal) */
.variant-axis-label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-tertiary);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    margin-top: var(--space-2);
    margin-bottom: var(--space-1-5);
}

.variant-axis-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 30px;
    padding: 0 var(--space-2-5);
    background: var(--bg-surface);
    color: var(--text-secondary);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
}
.variant-axis-btn:hover {
    border-color: var(--primary-400);
    color: var(--primary-700);
    background: var(--primary-50);
}
.variant-axis-btn.v-selected {
    background: linear-gradient(180deg, var(--primary-500), var(--primary-600));
    color: var(--text-inverse);
    border-color: var(--primary-700);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        var(--shadow-xs);
}

/* Color swatch */
.color-swatch-btn {
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    border: 2px solid var(--border-subtle);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
    vertical-align: middle;
    margin: 2px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.color-swatch-btn:hover {
    transform: scale(1.15);
    border-color: var(--primary-400);
    box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.color-swatch-btn.v-selected {
    border-color: var(--primary-600);
    box-shadow: var(--shadow-ring), inset 0 0 0 2px var(--bg-surface);
    transform: scale(1.1);
}

/* Variant resolved mini */
.variant-resolved-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-1-5);
}
.variant-resolved-cell {
    text-align: center;
}
.vrc-val {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    font-family: var(--font-mono);
}
.vrc-lbl {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    font-weight: var(--fw-medium);
    margin-top: 2px;
}

/* Variant locked/active/done labels */
.v-locked, .v-done, .v-active { position: relative; }
.v-step-hint {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-1-5);
    background: var(--primary-100);
    color: var(--primary-700);
    border-radius: var(--radius-xs);
    font-size: 9px;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    margin-left: var(--space-1-5);
}
.v-step-active { background: var(--primary-500); color: var(--text-inverse); }
.v-step-done { background: var(--success-500); color: var(--text-inverse); }

/* Locked (unavailable) axis options: visually disabled so users know they can't click */
.variant-axis-btn.v-locked,
.color-swatch-btn.v-locked,
.vm-holder-card.v-locked {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.45;
    filter: grayscale(0.75);
    box-shadow: none !important;
}
.variant-axis-btn.v-locked {
    background: var(--neutral-100);
    color: var(--text-muted);
    border-color: var(--border-muted);
}
.color-swatch-btn.v-locked {
    border-color: var(--border-muted);
    box-shadow: inset 0 0 0 2px var(--bg-surface) !important;
}
.vm-holder-card.v-locked {
    background: var(--neutral-50);
    border-color: var(--border-muted);
}
.vm-holder-card.v-locked .vm-holder-card-img {
    filter: grayscale(1) opacity(0.6);
}
.variant-axis-btn.v-locked:hover,
.color-swatch-btn.v-locked:hover,
.vm-holder-card.v-locked:hover {
    transform: none;
    background: var(--neutral-100);
    border-color: var(--border-muted);
}

/* =====================================================================
   BASKET / CART SIDEBAR
   ===================================================================== */
.basket-area-box {
    position: sticky;
    top: calc(var(--header-height) + var(--space-5));
    width: var(--sidebar-width);
    max-height: calc(100vh - var(--header-height) - var(--space-10));
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: all var(--dur-default) var(--ease-out);
}

.basket-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: linear-gradient(180deg, var(--neutral-50) 0%, var(--bg-surface) 100%);
    border-bottom: 1px solid var(--border-subtle);
}
.basket-header h3 {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    letter-spacing: var(--tracking-tight);
    margin: 0;
    line-height: 1.2;
}
.basket-count-pill {
    display: inline-flex;
    align-items: baseline;
    color: var(--primary-600);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-md);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    line-height: 1.2;
}
.basket-header h3 #basketItemCount {
    display: inline;
    padding: 0;
    background: none;
    color: inherit;
    border-radius: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    box-shadow: none;
    font-variant-numeric: tabular-nums;
    vertical-align: baseline;
}
.basket-header h3 #basketItemCount:empty::before { content: '0'; }

.basket-toggle {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--neutral-100);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
}
.basket-toggle::before {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--dur-default) var(--ease-out);
    margin-top: -3px;
}
.basket-toggle:hover {
    background: var(--bg-surface);
    color: var(--text-primary);
}
.basket-area-box.collapsed .basket-toggle::before {
    transform: rotate(-135deg);
    margin-top: 3px;
}
.basket-area-box.collapsed .basket-content,
.basket-area-box.collapsed .basket-footer {
    display: none;
}

.basket-content {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--space-3) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2-5);
    min-height: 120px;
}

/* Cart empty state */
.cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-8) var(--space-4);
    color: var(--text-tertiary);
    min-height: 220px;
}
.cart-empty-icon {
    font-size: 44px;
    margin-bottom: var(--space-3);
    opacity: 0.55;
    filter: grayscale(0.5);
    animation: pulse 2.4s ease-in-out infinite;
}
.cart-empty-title {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
    margin-bottom: var(--space-1);
}
.cart-empty-subtitle {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    max-width: 240px;
    line-height: var(--lh-normal);
}

/* Cart items */
.cart-item,
.basket-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    transition: all var(--dur-fast) var(--ease-out);
    animation: slideUp var(--dur-default) var(--ease-out);
}
.cart-item:hover,
.basket-item:hover {
    border-color: var(--primary-300);
    background: var(--primary-50);
}

.cart-item-info {
    flex: 1 1 auto;
    min-width: 0;
}
.cart-item-code {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-tertiary);
    margin-bottom: 2px;
    letter-spacing: var(--tracking-normal);
}
.cart-item-desc {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    line-height: var(--lh-snug);
    margin-bottom: var(--space-1-5);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cart-item-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: var(--space-1);
}
.cart-item-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    font-size: 10px;
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    border-radius: var(--radius-xs);
    background: var(--success-50);
    color: var(--success-700);
}
.cart-item-status.status-control,
.cart-item-status.status-passive {
    background: var(--warning-50);
    color: var(--warning-700);
}
.cart-item-status.status-inactive {
    background: var(--danger-50);
    color: var(--danger-700);
}
.cart-item-status.status-special-product {
    background: var(--primary-50);
    color: var(--primary-700);
}

.cart-item-qty {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
    background: var(--neutral-100);
    padding: 2px var(--space-2);
    border-radius: var(--radius-xs);
    font-variant-numeric: tabular-nums;
}

.cart-item-alternatives,
.cart-item-moq,
.basket-alternatives {
    display: flex;
    align-items: flex-start;
    gap: var(--space-1-5);
    margin-top: var(--space-2);
    padding: var(--space-1-5) var(--space-2);
    background: var(--info-50);
    color: var(--info-600);
    border-left: 3px solid var(--info-500);
    border-radius: var(--radius-xs);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    line-height: var(--lh-snug);
}

.cart-item-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-1-5);
    flex-shrink: 0;
}
.cart-item-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: var(--bg-surface);
    color: var(--text-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-size: 0;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
    flex-shrink: 0;
}
.cart-item-remove::before {
    content: '';
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'%3E%3C/polyline%3E%3Cpath d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'%3E%3C/path%3E%3Cpath d='M10 11v6'%3E%3C/path%3E%3Cpath d='M14 11v6'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}
.cart-item-remove:hover {
    background: var(--danger-50);
    border-color: var(--danger-500);
}
.cart-item-remove:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'%3E%3C/polyline%3E%3Cpath d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'%3E%3C/path%3E%3Cpath d='M10 11v6'%3E%3C/path%3E%3Cpath d='M14 11v6'%3E%3C/path%3E%3C/svg%3E");
}

/* Basket footer */
.basket-footer {
    flex-shrink: 0;
    padding: var(--space-4) var(--space-5);
    background: linear-gradient(180deg, var(--bg-surface) 0%, var(--neutral-50) 100%);
    border-top: 1px solid var(--border-subtle);
}
.cart-summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}
.cart-summary-label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--text-tertiary);
}
.cart-summary-value {
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tracking-tight);
}
.cart-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.cart-actions .btn {
    width: 100%;
    height: 44px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
}
.cart-actions .btn-primary { box-shadow: var(--shadow-glow-primary); }

/* =====================================================================
   MODAL FOUNDATION (alternative-modal is the generic overlay)
   ===================================================================== */
.alternative-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    background: var(--bg-overlay);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: fadeIn var(--dur-default) var(--ease-out);
}
.alternative-modal.active { display: flex; }

.alternative-content {
    position: relative;
    max-width: 640px;
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    background: var(--bg-surface);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2xl);
    padding: var(--space-7);
    animation: scaleIn var(--dur-slow) var(--ease-spring);
}

.alternative-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-bottom: var(--space-5);
    margin-bottom: var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
    position: relative;
}
.alternative-header h3 {
    font-size: var(--fs-xl);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    margin: 0;
    flex: 1;
}
.alternative-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--primary-50);
    border-radius: var(--radius-md);
    font-size: 20px;
    flex-shrink: 0;
}

.modal-close-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    background: var(--neutral-100);
    color: var(--text-tertiary);
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
}
.modal-close-btn:hover {
    background: var(--danger-50);
    color: var(--danger-600);
    transform: rotate(90deg);
}

.alternative-product-info {
    padding: var(--space-4);
    background: linear-gradient(135deg, var(--neutral-50), var(--bg-surface));
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-5);
}
.alternative-product-info .product-name {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}
.alternative-product-info .product-status {
    font-size: var(--fs-sm);
    color: var(--text-tertiary);
}

.alternative-options {
    margin-bottom: var(--space-5);
}
.alternative-options h4 {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    margin-bottom: var(--space-2);
}
.selected-count {
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
    margin-bottom: var(--space-4);
}

.option-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-3);
}

.option-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
    background: var(--bg-surface);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--dur-default) var(--ease-out);
}
.option-item:hover {
    border-color: var(--primary-400);
    background: var(--primary-50);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.option-item.selected {
    border-color: var(--primary-600);
    background: var(--primary-50);
    box-shadow: var(--shadow-ring);
}
.option-item.selected::after {
    content: '✓';
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-600);
    color: var(--text-inverse);
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: var(--fw-bold);
}
.option-item.remove-option.selected {
    border-color: var(--danger-500);
    background: var(--danger-50);
}
.option-item.remove-option.selected::after {
    background: var(--danger-500);
}
.option-item .option-icon {
    font-size: 22px;
    margin-bottom: var(--space-1-5);
}
.option-title {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
}
.option-description {
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
    line-height: var(--lh-snug);
}

.alternative-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* MOQ modal 2x2 grid */
.moq-option-grid {
    grid-template-columns: repeat(2, 1fr) !important;
}
@media (max-width: 560px) {
    .moq-option-grid { grid-template-columns: 1fr !important; }
}

/* Alternative variant picker panel */
.moq-alt-variant-panel {
    margin-top: var(--space-3);
    padding: var(--space-3);
    background: var(--neutral-50);
    border: 1.5px solid var(--primary-200);
    border-radius: var(--radius-md);
    animation: fadeSlideDown .2s var(--ease-out);
}
@keyframes fadeSlideDown {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.moq-alt-variant-header {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}
.moq-alt-variant-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    max-height: 200px;
    overflow-y: auto;
}
.moq-alt-variant-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-surface);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--fs-sm);
    transition: all var(--dur-fast) var(--ease-out);
}
.moq-alt-variant-item:hover {
    border-color: var(--primary-400);
    background: var(--primary-50);
}
.moq-alt-variant-item.selected {
    border-color: var(--primary-600);
    background: var(--primary-50);
    font-weight: var(--fw-semibold);
}
.moq-alt-variant-item.selected::before {
    content: '✓';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: var(--primary-600);
    color: white;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: var(--fw-bold);
    flex-shrink: 0;
}
.moq-alt-variant-code {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    flex-shrink: 0;
}
.moq-alt-variant-name { flex: 1; }
.moq-alt-variant-moq {
    font-size: var(--fs-xs);
    color: var(--success-600);
    font-weight: var(--fw-semibold);
    flex-shrink: 0;
}

/* =====================================================================
   PROFILE CONFIGURATOR (metre-sold shelf / ESL profiles)
   ===================================================================== */
.profile-config { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }

/* each numbered step is its own card, clearly separated */
.pc-step {
    display: flex; flex-direction: column; gap: 10px;
    padding: 13px 15px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
}
.pc-step-h {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-secondary);
}
.pc-step-n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; flex-shrink: 0;
    background: var(--primary-600); color: #fff;
    border-radius: 50%; font-size: 11px; font-weight: 800; letter-spacing: 0;
}
.pc-step.pc-step-locked .pc-step-n { background: var(--neutral-300, #cbd5e1); }
.profile-config .pc-colors, .profile-config .pc-lens { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-color, .pc-len, .pc-brand {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; font: inherit; font-size: 12.5px;
    background: var(--bg-surface); border: 1.5px solid var(--border-subtle);
    border-radius: 999px; cursor: pointer; transition: all .12s ease;
}
.pc-color:hover, .pc-len:hover, .pc-brand:hover { border-color: var(--primary-400); }
.pc-color.on, .pc-len.on, .pc-brand.on { border-color: var(--primary-600); background: var(--primary-50); font-weight: 600; }
.pc-brand { font-weight: 600; }
.pc-color[disabled], .pc-len[disabled], .pc-brand[disabled] { opacity: .5; cursor: not-allowed; }
.pc-color .pc-sw { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); flex-shrink: 0; }
.pc-color .pc-sw-multi {
    background: conic-gradient(#ef4444, #f59e0b, #eab308, #22c55e, #3b82f6, #a855f7, #ef4444);
}
.pc-ral { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
.pc-ral input {
    width: 220px; max-width: 100%; padding: 8px 10px;
    border: 1.5px solid var(--border-subtle); border-radius: 8px; font: inherit; font-size: 13px;
}
.pc-ral input:focus { outline: none; border-color: var(--primary-500, #6366f1); box-shadow: 0 0 0 3px var(--primary-50, #eef2ff); }
.pc-custom { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin-top: 4px; }
.pc-custom[hidden] { display: none !important; }
.pc-custom input { width: 92px; padding: 6px 8px; border: 1.5px solid var(--border-subtle); border-radius: 8px; font: inherit; }
.pc-custom-hint { color: var(--text-tertiary); font-size: 11px; }
.pc-custom-hint.req { color: #b45309; font-weight: 600; }

/* step gating — length locked until colour done, qty locked until length done */
.pc-step.pc-step-locked {
    opacity: .6; pointer-events: none;
    background: var(--neutral-50, #f8fafc);
    border-style: dashed;
}
.pc-step-hint {
    font-size: 10.5px; font-weight: 600; letter-spacing: .01em;
    color: var(--text-tertiary); text-transform: none;
}
.pc-moq {
    margin-top: 2px;
    padding: 8px 11px; border-radius: 9px; line-height: 1.5;
    background: linear-gradient(135deg, #eef2ff, #f5f3ff);
    border: 1px solid #ddd6fe; font-size: 12px; color: #3730a3;
}
.pc-note {
    padding: 10px 12px; border-radius: 10px;
    background: #fff7ed; border: 1px solid #fed7aa; border-left: 4px solid #f59e0b;
    font-size: 12px; line-height: 1.5; color: #9a3412;
}
.pc-add { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pc-add #pcQty { width: 100px; padding: 8px 10px; border: 1.5px solid var(--border-subtle); border-radius: 8px; font: inherit; }
.pc-add .pc-meters { font-size: 12px; color: var(--text-tertiary); }

/* "＋ Talep listesine ekle" — secondary, stays on the page */
.pc-stage-btn {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 16px; font: inherit; font-size: 12.5px; font-weight: 600;
    color: var(--primary-700);
    background: var(--primary-50);
    border: 1.5px solid var(--primary-200);
    border-radius: 10px; cursor: pointer;
    transition: all .12s ease;
}
.pc-stage-btn:hover { background: var(--primary-100, #e0e7ff); border-color: var(--primary-400); transform: translateY(-1px); }
.pc-stage-btn span { font-size: 15px; line-height: 1; }

/* "Added lines" — its own card, one sub-card per colour */
.pc-staged {
    border: 1px solid var(--border-subtle); border-radius: 14px;
    padding: 13px 15px;
    display: flex; flex-direction: column; gap: 8px;
}
.pc-staged-h {
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-secondary);
}
.pc-staged-grp {
    border: 1px solid var(--border-subtle); border-radius: 10px;
    background: var(--neutral-50, #f8fafc);
    overflow: hidden;
}
.pc-staged-grp-h {
    padding: 7px 12px; font-size: 12px; font-weight: 700; color: var(--text-primary);
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
}
.pc-staged-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 7px 12px; font-size: 12.5px;
}
.pc-staged-row + .pc-staged-row { border-top: 1px dashed var(--border-subtle); }
.pc-staged-bar { padding: 8px 12px 10px; }
.pc-staged-bar .pc-pool { padding: 0; background: none; border: none; }
.pc-staged-bar .pc-pool-txt { margin-bottom: 4px; font-size: 11px; }
.pc-staged-x {
    width: 22px; height: 22px; flex-shrink: 0; border: none; border-radius: 50%;
    background: var(--neutral-100, #eef2f7); color: var(--text-tertiary);
    font-size: 15px; line-height: 1; cursor: pointer;
}
.pc-staged-x:hover { background: var(--danger-50, #fef2f2); color: var(--danger-600, #dc2626); }

.pc-below { font-size: 12px; color: #92600b; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 8px 10px; }
.pc-below.err {
    color: #b91c1c; background: #fef2f2; border-color: #fecaca;
    font-weight: 600;
    animation: pcShake .32s ease;
}
@keyframes pcShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
.pc-pool-sub { color: var(--text-tertiary); font-weight: 400; }

/* "Devam Et →" — final CTA, in its own zone, separated from "Add to request" */
.pc-actions {
    display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap;
    margin-top: 6px; padding-top: 14px;
    border-top: 1px solid var(--border-subtle);
}
.pc-continue-hint { font-size: 11px; color: var(--text-tertiary); }
.pc-continue {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 24px; font: inherit; font-size: 13.5px; font-weight: 700;
    color: #fff; border: none; border-radius: 12px; cursor: pointer;
    background: linear-gradient(135deg, var(--primary-600), var(--primary-500, #6366f1));
    box-shadow: 0 4px 14px rgba(99,102,241,.35);
    transition: all .14s ease;
}
.pc-continue:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(99,102,241,.45); }
.pc-continue:disabled {
    background: var(--neutral-200, #e5e7eb); color: var(--text-tertiary);
    box-shadow: none; cursor: not-allowed; opacity: .7;
    filter: grayscale(1);
}
.pc-continue:disabled:hover { transform: none; }
.pc-continue span { font-size: 16px; line-height: 1; }
.pc-pool, .cpp {
    padding: 10px 12px; border-radius: 10px;
    background: #f8fafc; border: 1px solid var(--border-subtle);
}
.pc-pool.met, .cpp.met { background: #ecfdf5; border-color: #a7f3d0; }
.pc-pool-txt, .cpp-top { font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
.cpp-top { display: flex; justify-content: space-between; gap: 8px; }
.pc-pool-bar, .cpp-bar { height: 6px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.pc-pool-bar > i, .cpp-bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #6366f1, #8b5cf6); }
.pc-pool.met .pc-pool-bar > i, .cpp.met .cpp-bar > i { background: linear-gradient(90deg, #10b981, #34d399); }
.cart-profile-pools { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }

/* =====================================================================
   MOQ EXCEPTION MODAL — set breakdown + option accents
   ===================================================================== */
/* Exception context: amber-tint the header icon */
#moqModal .alternative-icon { background: #fff2dd; color: #b45309; }
#moqModal .alternative-product-info {
    background: linear-gradient(135deg, #fff, #fbfbfd);
    border-color: #ececf2;
}
#moqModal .alternative-product-info .product-status b { color: var(--text-primary); }

/* Single-product mode notice (was unstyled) */
.moq-notice {
    padding: 12px 14px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #fff6e8, #ffeccf);
    border: 1px solid #ffd9a8;
    border-left: 4px solid #f0a500;
    border-radius: 12px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #7c4a03;
}
.moq-notice b { color: #b45309; }

/* Amber "why you're here" banner (matches the variant-modal note style) */
.moq-set-banner {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #fff6e8, #ffeccf);
    border: 1px solid #ffd9a8;
    border-left: 4px solid #f0a500;
    border-radius: 12px;
    font-size: 12.5px;
    line-height: 1.45;
    color: #7c4a03;
}
.moq-set-banner .msb-ico { font-size: 18px; line-height: 1.2; flex-shrink: 0; }
.moq-set-banner b { color: #b45309; }

/* Constraining sub-item list with fill bars */
.moq-comp-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.moq-comp-row {
    padding: 10px 12px;
    background: #fffdf9;
    border: 1px solid #f0e3cf;
    border-radius: 10px;
}
.moq-comp-row .mcr-top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12.5px;
    color: var(--text-primary);
    margin-bottom: 7px;
}
.moq-comp-row .mcr-name { font-weight: 600; }
.moq-comp-row .mcr-code { color: var(--text-tertiary); font-weight: 500; font-family: var(--font-mono); font-size: 11px; }
.moq-comp-row .mcr-nums { white-space: nowrap; font-weight: 700; color: #b45309; }
.moq-comp-row .mcr-nums small { font-weight: 500; color: var(--text-tertiary); }
.moq-comp-bar { height: 6px; border-radius: 99px; background: #f0e3cf; overflow: hidden; }
.moq-comp-bar > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #f0a500, #f97316); }

/* Amber warning line (below-minimum-lot) */
#moqSetupLotHint {
    display: none;
    margin: 2px 0 14px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff6e8;
    border: 1px solid #ffd9a8;
    border-left: 4px solid #f0a500;
    color: #7c4a03;
    font-size: 12px;
    line-height: 1.45;
}

/* Option-card accents inside the MOQ modal */
#moqOptionSetRaise { border-color: #bfdbfe; }
#moqOptionSetRaise:hover { border-color: var(--primary-400); background: var(--primary-50); }
#moqOptionSetRaise.selected { border-color: var(--primary-600); background: var(--primary-50); }

#moqOptionSetup { border-color: #ddd6fe; background: linear-gradient(180deg, #faf9ff, var(--bg-surface)); }
#moqOptionSetup:hover { border-color: #a78bfa; background: #f5f3ff; }
#moqOptionSetup.selected { border-color: #7c3aed; background: #f5f3ff; box-shadow: 0 0 0 3px #ede9fe; }
#moqOptionSetup.selected::after { background: #7c3aed; }
#moqOptionSetup .msetup-fee {
    display: block;
    width: fit-content;
    margin-top: 8px;
    padding: 3px 10px;
    background: #7c3aed;
    color: #fff;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.moq-option-grid .option-item { min-height: 132px; }
.moq-option-grid .option-description { margin-top: 2px; }

/* =====================================================================
   CUSTOMER FORM (CHECKOUT)
   ===================================================================== */
.checkout-modal .alternative-content,
.checkout-content {
    max-width: 940px !important;
    width: 100% !important;
}
.checkout-header {
    position: relative;
}
.checkout-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-2) var(--space-5);
    margin: 0 0 var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
}
.checkout-step-dot {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 14px 6px 6px;
    background: var(--neutral-100);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    transition: all var(--dur-default) var(--ease-out);
}
.checkout-step-dot span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    background: var(--bg-surface);
    color: var(--text-tertiary);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    line-height: 1;
    border: 1px solid var(--border-subtle);
    flex-shrink: 0;
}
.checkout-step-dot label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-tertiary);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    white-space: nowrap;
    margin: 0;
    pointer-events: none;
}
.checkout-step-dot.active {
    background: var(--primary-50);
    border-color: var(--primary-200);
}
.checkout-step-dot.active span {
    background: var(--primary-600);
    color: var(--text-inverse);
    border-color: var(--primary-700);
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.30);
}
.checkout-step-dot.active label {
    color: var(--primary-700);
}
.checkout-step-dot.completed {
    background: var(--success-50, #ecfdf5);
    border-color: var(--success-200, #a7f3d0);
}
.checkout-step-dot.completed span {
    background: var(--success-600, #16a34a);
    color: var(--text-inverse);
    border-color: var(--success-600, #16a34a);
}
.checkout-step-dot.completed label {
    color: var(--success-600, #16a34a);
}
.checkout-step-line {
    flex: 0 0 28px;
    height: 2px;
    background: var(--border-subtle);
    border-radius: var(--radius-full);
}
.checkout-step-line.completed {
    background: var(--success-400, #4ade80);
}
@media (max-width: 560px) {
    .checkout-progress {
        gap: 4px;
        padding: var(--space-3) 0 var(--space-4);
    }
    .checkout-step-dot label { display: none; }
    .checkout-step-dot { padding: 4px; }
    .checkout-step-line { flex: 1 1 12px; }
}
.btn-modern-ghost {
    background: var(--bg-surface) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-default) !important;
    box-shadow: none !important;
}
.btn-modern-ghost:hover {
    background: var(--neutral-50) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-xs) !important;
}
.form-group-fullwidth { grid-column: 1 / -1; }

.customer-form-modern {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.form-group-modern {
    position: relative;
    display: flex;
    flex-direction: column;
}
.form-group-modern input,
.form-group-modern textarea {
    width: 100%;
    padding: 22px var(--space-4) 10px 38px;
    background: var(--bg-surface);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    min-height: 56px;
    box-sizing: border-box;
    text-overflow: ellipsis;
    transition: all var(--dur-fast) var(--ease-out);
}
.form-group-modern textarea {
    min-height: 100px;
    resize: vertical;
    line-height: var(--lh-normal);
}
.form-group-modern input:hover,
.form-group-modern textarea:hover {
    border-color: var(--border-default);
}
.form-group-modern input:focus,
.form-group-modern textarea:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: var(--shadow-ring);
}

.form-group-modern label {
    position: absolute;
    top: 50%;
    left: 38px;
    transform: translateY(-50%);
    font-size: var(--fs-sm);
    color: var(--text-muted);
    font-weight: var(--fw-medium);
    pointer-events: none;
    transition: all var(--dur-fast) var(--ease-out);
    background: transparent;
    max-width: calc(100% - 50px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.form-group-modern input:focus + .input-icon + label,
.form-group-modern input:not(:placeholder-shown) + .input-icon + label,
.form-group-modern textarea:focus + .input-icon + label,
.form-group-modern textarea:not(:placeholder-shown) + .input-icon + label,
.form-group-modern input:focus ~ label,
.form-group-modern input:not(:placeholder-shown) ~ label,
.form-group-modern textarea:focus ~ label,
.form-group-modern textarea:not(:placeholder-shown) ~ label,
.form-group-modern.has-value label,
.form-group-modern.is-focused label {
    top: 8px;
    transform: translateY(0);
    font-size: 10px;
    font-weight: var(--fw-semibold);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}
.form-group-modern textarea + .input-icon + label {
    top: 18px;
    transform: none;
}
.form-group-modern textarea:focus + .input-icon + label,
.form-group-modern textarea:not(:placeholder-shown) + .input-icon + label {
    top: 8px;
}

.input-icon {
    position: absolute;
    top: 50%;
    left: var(--space-3);
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
    pointer-events: none;
    color: var(--text-tertiary);
    opacity: 0.65;
}
.input-icon svg {
    width: 14px;
    height: 14px;
    display: block;
}
.form-group-modern textarea ~ .input-icon {
    top: 20px;
    transform: none;
}

/* Order summary card */
.order-summary,
.order-summary-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.summary-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--bg-surface);
}
.summary-table th {
    padding: var(--space-3) var(--space-3);
    background: var(--neutral-50);
    color: var(--text-tertiary);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-align: left;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-subtle);
}
.summary-table td {
    padding: var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    vertical-align: top;
}
.summary-table tbody tr:last-child td { border-bottom: none; }
.summary-table tbody tr:hover { background: var(--primary-50); }

/* Order form action buttons */
.order-form-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
    flex-wrap: wrap;
    grid-column: 1 / -1;
}

.btn-modern {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 44px;
    padding: 0 var(--space-5);
    background: linear-gradient(180deg, var(--primary-500), var(--primary-600));
    color: var(--text-inverse);
    border: 1px solid var(--primary-700);
    border-radius: var(--radius-md);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--dur-default) var(--ease-out);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 1px 3px rgba(79, 70, 229, 0.25);
}
.btn-modern:hover {
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.20) inset,
        0 6px 14px rgba(79, 70, 229, 0.30);
}
.btn-modern[style*="dc3545"] {
    background: linear-gradient(180deg, var(--danger-500), var(--danger-600)) !important;
    border-color: var(--danger-700) !important;
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.25) !important;
}
.btn-modern[style*="dc3545"]:hover {
    box-shadow: 0 6px 14px rgba(220, 38, 38, 0.30) !important;
}
.btn-modern:active { transform: translateY(0); }

/* =====================================================================
   IMAGE LIGHTBOX
   ===================================================================== */
.image-lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    background: rgba(9, 14, 26, 0.82);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.image-lightbox-overlay.active {
    display: flex;
    animation: fadeIn var(--dur-default) var(--ease-out);
}
.image-lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    background: var(--bg-surface);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2xl);
    overflow: hidden;
    animation: scaleIn var(--dur-slow) var(--ease-spring);
}
.lightbox-close-btn {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    z-index: 2;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: var(--bg-surface);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: all var(--dur-fast) var(--ease-out);
}
.lightbox-close-btn:hover {
    background: var(--danger-50);
    color: var(--danger-600);
    transform: rotate(90deg);
}
.lightbox-title {
    padding: var(--space-5) var(--space-6) var(--space-3);
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-subtle);
}
.lightbox-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    max-height: calc(90vh - 100px);
    overflow: auto;
}
.lightbox-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--neutral-50);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
}
.lightbox-panel img {
    max-width: 100%;
    max-height: 60vh;
    object-fit: contain;
    border-radius: var(--radius-md);
}
.lightbox-code {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-tertiary);
    padding: var(--space-1-5) var(--space-2-5);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}
.dual-img-label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}
.dual-img-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.dual-img-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--neutral-50);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    cursor: zoom-in;
    transition: all var(--dur-fast) var(--ease-out);
}
.dual-img-panel:hover {
    border-color: var(--primary-400);
    background: var(--bg-surface);
}
.dual-img-panel img {
    max-width: 100%;
    max-height: 140px;
    object-fit: contain;
}

/* Product image preview (hover) */
.product-img-preview-global {
    display: none;
    position: fixed;
    z-index: var(--z-tooltip);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-2);
    box-shadow: var(--shadow-xl);
    pointer-events: none;
}
.product-img-emoji {
    display: inline-block;
    margin-left: var(--space-1-5);
    color: var(--primary-600);
    cursor: pointer;
    font-size: 14px;
    opacity: 0.7;
    transition: opacity var(--dur-fast) var(--ease-out);
}
.product-img-emoji:hover { opacity: 1; }

/* =====================================================================
   VARIANT MODAL
   ===================================================================== */
#variantModal .alternative-content {
    max-width: 860px !important;
    min-width: min(640px, 100%);
}
.variant-modal-header {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    margin: 0 0 var(--space-5);
    background:
        radial-gradient(circle at 0% 0%, rgba(99, 102, 241, 0.10), transparent 45%),
        linear-gradient(135deg, var(--primary-50) 0%, var(--bg-surface) 70%);
    border: 1px solid var(--primary-100);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.variant-modal-header::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--primary-500), var(--primary-700));
}
.vm-short-code {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 4px 10px 4px 8px;
    background: var(--bg-surface);
    color: var(--primary-700);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-wide);
    border: 1px solid var(--primary-200);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-xs);
    line-height: 1;
}
:root[data-lang="tr"] .vm-short-code::before { content: 'KOD'; }
.vm-short-code::before {
    content: 'SKU';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    background: var(--primary-600);
    color: var(--text-inverse);
    font-size: 9px;
    font-weight: var(--fw-extrabold);
    letter-spacing: var(--tracking-wider);
    border-radius: var(--radius-full);
    line-height: 1;
}
.vm-product-name {
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    color: var(--text-primary);
    letter-spacing: var(--tracking-tight);
    line-height: var(--lh-snug);
    margin: 0;
}
.vm-variant-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 3px 10px;
    background: rgba(255, 255, 255, 0.7);
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-wide);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    backdrop-filter: blur(4px);
    line-height: 1.4;
}
.vm-variant-count::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2L2 7l10 5 10-5-10-5z'/><path d='M2 17l10 5 10-5'/><path d='M2 12l10 5 10-5'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.variant-modal-body {
    margin-bottom: var(--space-4);
}

.vm-build-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: linear-gradient(135deg, var(--primary-50), var(--bg-surface));
    border: 1px solid var(--primary-100);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}
.vm-build-header.build-complete {
    background: linear-gradient(135deg, var(--success-50), var(--bg-surface));
    border-color: var(--success-100);
}
.vm-build-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--primary-600);
    color: var(--text-inverse);
    border-radius: var(--radius-full);
    font-weight: var(--fw-bold);
    font-size: var(--fs-md);
    flex-shrink: 0;
}
.vm-build-header.build-complete .vm-build-badge {
    background: var(--success-600);
}
.vm-build-text { flex: 1; }
.vm-build-title {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
}
.vm-build-subtitle {
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
}
.vm-build-dots {
    display: flex;
    gap: var(--space-1);
}
.vm-build-dot {
    width: 8px;
    height: 8px;
    background: var(--neutral-300);
    border-radius: var(--radius-full);
    transition: background var(--dur-default) var(--ease-out);
}
.vm-build-dot.done { background: var(--success-500); }

/* Serie tabs */
.serie-tabs {
    display: inline-flex;
    padding: 3px;
    background: var(--neutral-100);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    gap: 2px;
    margin-bottom: var(--space-4);
}
.serie-tab-btn {
    padding: var(--space-2) var(--space-4);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-tertiary);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
}
.serie-tab-btn:hover { color: var(--text-secondary); }
.serie-tab-btn.active {
    background: var(--bg-surface);
    color: var(--primary-700);
    box-shadow: var(--shadow-xs);
}

/* Variant axes container */
#variantAxisSelectors > div,
#variantAxisSelectors > span,
#variantAxisSelectors .variant-axis-btn,
#variantAxisSelectors .color-swatch-btn {
    display: inline-flex;
    margin: 2px;
}
#variantAxisSelectors > div {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

#variantResolvedDetails {
    margin-top: var(--space-3);
    padding: var(--space-4);
    background: linear-gradient(135deg, var(--neutral-50), var(--bg-surface));
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}
#variantResolvedDetails:empty {
    display: none;
}

/* VM spec chips (inside resolved details) */
.vm-spec-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 3px var(--space-2);
    background: var(--neutral-100);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xs);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    font-family: var(--font-mono);
    margin: 2px;
}
.chip-blue { background: var(--accent-50); color: var(--accent-700); border-color: var(--accent-100); }
.chip-violet { background: var(--primary-50); color: var(--primary-700); border-color: var(--primary-100); }
.chip-teal { background: #ccfbf1; color: #0f766e; border-color: #99f6e4; }

/* VM holder grid (choose holder type) — compact horizontal cards */
.vm-holder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--space-2);
    margin: var(--space-2) 0 var(--space-3);
}
.vm-holder-card {
    display: grid;
    grid-template-columns: 44px 1fr;
    align-items: center;
    gap: var(--space-2-5);
    padding: 8px 10px;
    background: var(--bg-surface);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-md);
    cursor: pointer;
    min-height: 54px;
    transition: all var(--dur-fast) var(--ease-out);
}
.vm-holder-card:hover {
    border-color: var(--primary-400);
    background: var(--primary-50);
    box-shadow: var(--shadow-xs);
}
.vm-holder-card.v-selected {
    border-color: var(--primary-600);
    background: var(--primary-50);
    box-shadow: var(--shadow-ring);
}
.vm-holder-card-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    background: var(--neutral-50);
    mix-blend-mode: multiply;
    transition: transform var(--dur-default) var(--ease-spring);
}
.vm-holder-card:hover .vm-holder-card-img { transform: scale(1.06); }
.vm-holder-card.v-selected .vm-holder-card-img { transform: scale(1.03); }
.vm-holder-card-img-ph {
    width: 40px;
    height: 40px;
    background: var(--neutral-100);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}
.vm-holder-card-label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--text-primary);
    line-height: 1.25;
    letter-spacing: var(--tracking-tight);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.vm-holder-card.v-selected .vm-holder-card-label {
    color: var(--primary-700);
    font-weight: var(--fw-semibold);
}

/* VM resolved panel */
.vm-resolved-panel {
    padding: var(--space-4);
    background: linear-gradient(135deg, var(--success-50), var(--bg-surface));
    border: 1px solid var(--success-100);
    border-radius: var(--radius-md);
}
.vm-resolved-desc-block {
    margin-bottom: var(--space-3);
}
.vm-resolved-name {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    letter-spacing: var(--tracking-tight);
    line-height: var(--lh-snug);
    margin-bottom: 2px;
}
.vm-resolved-subtitle {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-tertiary);
    letter-spacing: var(--tracking-wide);
    margin-top: var(--space-1);
}
.vm-spec-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-3) 0;
}

/* Divider between description block and info stat grid */
.vm-spec-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-subtle), transparent);
    margin: var(--space-4) 0;
}

/* VM info grid — 4 stat tiles (Code / Status / Pack / MOQ) */
.vm-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-2);
}
@media (max-width: 560px) {
    .vm-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.vm-info-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 4px;
    padding: var(--space-3) var(--space-2);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    min-height: 78px;
    transition: all var(--dur-fast) var(--ease-out);
}
.vm-info-cell:hover {
    border-color: var(--primary-200);
    box-shadow: var(--shadow-xs);
    transform: translateY(-1px);
}
.vic-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 14px;
    line-height: 1;
    color: var(--text-tertiary);
    opacity: 0.85;
}
.vic-val {
    display: block;
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    color: var(--text-primary);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tracking-tight);
    word-break: break-word;
}
.vic-val .status-badge {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-wide);
    padding: 3px var(--space-2-5);
}
.vic-lbl {
    display: block;
    font-size: 10px;
    font-weight: var(--fw-semibold);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    line-height: 1;
}

/* Variant resolved — NOTES callout */
.vm-desc-note {
    display: block;
    padding: var(--space-3) var(--space-4);
    margin-top: var(--space-3);
    background: var(--warning-50, #fffbeb);
    border: 1px solid var(--warning-200, #fde68a);
    border-left: 3px solid var(--warning-500, #f59e0b);
    border-radius: var(--radius-md);
    color: var(--neutral-800);
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
}
.vm-desc-note-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.vm-desc-note > span,
.vm-desc-note > ul {
    display: block;
}
.vm-desc-note-svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--warning-600, #d97706);
    display: inline-block;
    vertical-align: middle;
}
.vm-desc-note-title {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: var(--warning-700, #b45309);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    line-height: 1;
}
.vm-desc-bullets {
    margin: 0;
    padding-left: var(--space-5);
}
.vm-desc-bullets li {
    margin: 2px 0;
}
.vm-desc-highlight {
    color: var(--danger-600, #dc2626);
    font-weight: var(--fw-bold);
}
.vm-desc-bold {
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
}

/* Guardrail: any rogue inline SVG inside the variant modal without a sized box
   should never blow up to the default 300×150 fallback */
#variantModal svg:not([width]):not([height]) {
    max-width: 16px;
    max-height: 16px;
}

/* =====================================================================
   INTERACTIVE FIRST-RUN TOUR
   ===================================================================== */
.tour-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147482000;
    pointer-events: none;
    animation: fadeIn var(--dur-default) var(--ease-out);
}
.tour-spotlight {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-radius: 12px;
    box-shadow: 0 0 0 99999px rgba(9, 14, 26, 0.68);
    outline: 3px solid rgba(255, 255, 255, 0.85);
    outline-offset: 4px;
    pointer-events: none;
    transition: all 320ms var(--ease-out);
}
.tour-spotlight::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 14px;
    border: 2px solid var(--primary-500);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35), 0 0 40px rgba(99, 102, 241, 0.55);
    animation: tourPulse 1.8s ease-in-out infinite;
    pointer-events: none;
}
@keyframes tourPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.03); opacity: 0.7; }
}
.tour-tooltip {
    position: absolute;
    width: 320px;
    background: #fff;
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5) var(--space-4);
    box-shadow: 0 24px 60px -12px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.1);
    pointer-events: auto;
    transition: all 320ms var(--ease-out);
}
.tour-tip-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-2);
}
.tour-tip-step {
    display: inline-flex;
    align-items: center;
    padding: 3px var(--space-2);
    background: var(--primary-50);
    color: var(--primary-700);
    border-radius: var(--radius-xs);
    font-size: 10px;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}
.tour-tip-close {
    width: 24px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--radius-full);
    transition: all var(--dur-fast) var(--ease-out);
}
.tour-tip-close:hover {
    background: var(--neutral-100);
    color: var(--text-primary);
}
.tour-tip-title {
    margin: 0 0 var(--space-1);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--text-primary);
    letter-spacing: var(--tracking-tight);
}
.tour-tip-body {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
}
.tour-tip-hint {
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--warning-50);
    border-left: 3px solid var(--warning-500);
    border-radius: var(--radius-xs);
    color: var(--warning-700);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    display: none;
}
.tour-tip-hint.visible { display: block; }
.tour-tip-footer {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-subtle);
}
.tour-tip-spacer { flex: 1; }
.tour-tip-skip {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    cursor: pointer;
    padding: 4px 6px;
}
.tour-tip-skip:hover { color: var(--text-primary); text-decoration: underline; }
.tour-tip-back,
.tour-tip-next {
    padding: 6px 14px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
}
.tour-tip-back {
    background: var(--neutral-100);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
}
.tour-tip-back:hover { background: var(--neutral-200); }
.tour-tip-back:disabled { opacity: 0.4; cursor: not-allowed; }
.tour-tip-next {
    background: var(--primary-600);
    color: var(--text-inverse);
    border: 1px solid var(--primary-700);
    box-shadow: 0 2px 6px rgba(99,102,241,0.35);
}
.tour-tip-next:hover { background: var(--primary-700); }
.tour-tip-next:disabled {
    background: var(--neutral-300);
    border-color: var(--neutral-300);
    color: var(--text-muted);
    box-shadow: none;
    cursor: not-allowed;
}

/* Centered mode (final slide / no target) */
.tour-tooltip.tour-centered {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    width: 380px;
}
.tour-overlay.no-target .tour-spotlight { display: none; }
.tour-overlay.no-target { pointer-events: auto; background: rgba(9,14,26,0.68); }

@media (max-width: 520px) {
    .tour-tooltip { width: calc(100vw - 32px); left: 16px !important; right: 16px; }
}

/* Ambiguous list */
#variantAmbiguousList,
#variantAccessoriesSection {
    margin-top: var(--space-3);
    background: var(--bg-surface) !important;
}
.ambig-list-item {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
    transition: background var(--dur-fast) var(--ease-out);
}
.ambig-list-item:last-child { border-bottom: none; }
.ambig-list-item:hover { background: var(--primary-50); }
.ambig-code {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--primary-700);
}
.ambig-desc {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}
.ambig-qty-input {
    width: 80px;
    height: 36px;
    padding: 0 var(--space-2);
    background: var(--bg-surface);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-weight: var(--fw-semibold);
}
.ambig-qty-input:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: var(--shadow-ring);
}
.ambig-list-item .btn-primary {
    height: 34px;
    padding: 0 var(--space-3);
    font-size: var(--fs-xs);
    border-radius: var(--radius-sm);
}

/* Variant add-to-basket row */
.vm-add-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-4);
}
.vm-qty-label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}
.vm-qty-input {
    width: 90px;
    height: 40px;
    padding: 0 var(--space-3);
    background: var(--bg-surface);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-md);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.vm-qty-input:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: var(--shadow-ring);
}
.vm-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 40px;
    padding: 0 var(--space-5);
    background: linear-gradient(180deg, var(--primary-500), var(--primary-600));
    color: var(--text-inverse);
    border: 1px solid var(--primary-700);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    margin-left: auto;
    transition: all var(--dur-default) var(--ease-out);
    box-shadow: 0 1px 3px rgba(79, 70, 229, 0.25);
}
.vm-add-btn:hover {
    background: linear-gradient(180deg, var(--primary-600), var(--primary-700));
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(79, 70, 229, 0.30);
}

/* =====================================================================
   QUANTITY MODAL
   ===================================================================== */
.quantity-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    background: var(--bg-overlay);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.quantity-modal.active {
    display: flex;
    animation: fadeIn var(--dur-default) var(--ease-out);
}
.quantity-modal-content {
    max-width: 440px;
    width: 100%;
    padding: var(--space-7);
    background: var(--bg-surface);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2xl);
    animation: scaleIn var(--dur-slow) var(--ease-spring);
}
.quantity-modal-content h3 {
    font-size: var(--fs-xl);
    font-weight: var(--fw-semibold);
    margin-bottom: var(--space-2);
}
.quantity-modal-content > p {
    font-size: var(--fs-sm);
    color: var(--text-tertiary);
    margin-bottom: var(--space-4);
    line-height: var(--lh-snug);
}
#quantityModalPackInfo {
    display: flex !important;
    flex-direction: column;
    gap: var(--space-1) !important;
    margin: var(--space-4) 0 !important;
    padding: var(--space-3) var(--space-4) !important;
    background: var(--neutral-50) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-md) !important;
    font-size: var(--fs-sm) !important;
    color: var(--text-secondary) !important;
}
.quantity-input-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}
.quantity-input-group label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}
#quantityInput {
    width: 100%;
    height: 48px;
    padding: 0 var(--space-4);
    background: var(--neutral-50);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-md);
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    text-align: center;
    font-variant-numeric: tabular-nums;
    transition: all var(--dur-fast) var(--ease-out);
}
#quantityInput:focus {
    outline: none;
    border-color: var(--border-focus);
    background: var(--bg-surface);
    box-shadow: var(--shadow-ring);
}
.quantity-modal-buttons {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
}
.quantity-modal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 var(--space-5);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: all var(--dur-default) var(--ease-out);
    border: 1px solid transparent;
}
.quantity-modal-btn.primary {
    background: linear-gradient(180deg, var(--primary-500), var(--primary-600));
    color: var(--text-inverse);
    border-color: var(--primary-700);
    box-shadow: var(--shadow-sm);
}
.quantity-modal-btn.primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-glow-primary);
}
.quantity-modal-btn.secondary {
    background: var(--bg-surface);
    color: var(--text-secondary);
    border-color: var(--border-default);
}
.quantity-modal-btn.secondary:hover {
    background: var(--neutral-50);
    color: var(--text-primary);
    border-color: var(--border-strong);
}

/* =====================================================================
   RECAPTCHA MODAL
   ===================================================================== */
.recaptcha-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-modal) + 5000);
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    background: var(--bg-overlay);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.recaptcha-modal.active {
    display: flex;
    animation: fadeIn var(--dur-default) var(--ease-out);
}
.recaptcha-modal-content {
    max-width: 500px;
    width: 100%;
    padding: var(--space-7);
    background: var(--bg-surface);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2xl);
    text-align: center;
    animation: scaleIn var(--dur-slow) var(--ease-spring);
}
.recaptcha-modal-content h3 {
    font-size: var(--fs-xl);
    margin-bottom: var(--space-2);
}
.recaptcha-modal-content p {
    font-size: var(--fs-sm);
    color: var(--text-tertiary);
    margin-bottom: var(--space-5);
}
.recaptcha-container {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-5);
}
.recaptcha-modal-buttons {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
}
.recaptcha-modal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 var(--space-5);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: all var(--dur-default) var(--ease-out);
    border: 1px solid transparent;
}
.recaptcha-modal-btn.primary {
    background: linear-gradient(180deg, var(--success-500), var(--success-600));
    color: var(--text-inverse);
    border-color: var(--success-700);
}
.recaptcha-modal-btn.primary:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(16, 185, 129, 0.30);
}
.recaptcha-modal-btn.primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.recaptcha-modal-btn.secondary {
    background: var(--bg-surface);
    color: var(--text-secondary);
    border-color: var(--border-default);
}
.recaptcha-modal-btn.secondary:hover {
    background: var(--neutral-50);
    color: var(--text-primary);
}

/* =====================================================================
   ORDER CONFIRMATION SCREEN
   ===================================================================== */
.order-confirmation-screen {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 50%, #f8fafc 100%);
    overflow-y: auto;
    padding: var(--space-8) var(--space-5);
}
.order-confirmation-screen.active {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn var(--dur-slow) var(--ease-out);
}
.order-confirmation-content {
    max-width: 540px;
    width: 100%;
    padding: var(--space-9) var(--space-8);
    background: var(--bg-surface);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2xl);
    text-align: center;
    animation: scaleIn var(--dur-slower) var(--ease-spring);
}
.confirmation-icon {
    font-size: 64px;
    margin-bottom: var(--space-4);
    filter: drop-shadow(0 8px 16px rgba(16, 185, 129, 0.35));
    animation: scaleIn var(--dur-slower) var(--ease-spring);
}
.order-confirmation-content h2 {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-bold);
    margin-bottom: var(--space-2);
    color: var(--text-primary);
}
.order-confirmation-content > p {
    font-size: var(--fs-md);
    color: var(--text-tertiary);
    margin-bottom: var(--space-6);
    line-height: var(--lh-relaxed);
}
.confirmation-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-7);
    padding: var(--space-5);
    background: linear-gradient(135deg, var(--neutral-50), var(--bg-surface));
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    text-align: left;
}
.confirmation-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-subtle);
}
.confirmation-item:last-child { border-bottom: none; }
.confirmation-label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--text-tertiary);
}
.confirmation-value {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    font-family: var(--font-mono);
}
.confirmation-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
}
.confirmation-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 var(--space-6);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: all var(--dur-default) var(--ease-out);
    border: 1px solid transparent;
}
.confirmation-btn.primary {
    background: linear-gradient(180deg, var(--primary-500), var(--primary-600));
    color: var(--text-inverse);
    border-color: var(--primary-700);
    box-shadow: var(--shadow-glow-primary);
}
.confirmation-btn.primary:hover { transform: translateY(-1px); }
.confirmation-btn.secondary {
    background: var(--bg-surface);
    color: var(--text-secondary);
    border-color: var(--border-default);
}
.confirmation-btn.secondary:hover {
    background: var(--neutral-50);
    color: var(--text-primary);
    border-color: var(--border-strong);
}

/* =====================================================================
   TOAST / NOTIFICATIONS
   ===================================================================== */
.notification {
    position: fixed;
    top: calc(var(--header-height) + var(--space-4));
    right: var(--space-5);
    z-index: var(--z-toast);
    min-width: 320px;
    max-width: 400px;
    padding: var(--space-4);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
    opacity: 0;
    transform: translateX(calc(100% + 40px));
    transition: all var(--dur-slow) var(--ease-spring);
    border-left: 4px solid var(--primary-500);
}
.notification.show {
    opacity: 1;
    transform: translateX(0);
}
.notification.success { border-left-color: var(--success-500); }
.notification.error { border-left-color: var(--danger-500); }
.notification.warning { border-left-color: var(--warning-500); }
.notification.info { border-left-color: var(--info-500); }

.notification-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-1);
}
.notification-title {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
}
.notification-close {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    color: var(--text-tertiary);
    background: transparent;
    border: none;
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
}
.notification-close:hover {
    background: var(--neutral-100);
    color: var(--text-primary);
}
.notification-message {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    line-height: var(--lh-normal);
}

/* Inline error/success message */
.error-message,
.success-message {
    display: none;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    margin-bottom: var(--space-3);
    animation: slideUp var(--dur-default) var(--ease-out);
}
.error-message.active,
.error-message:not(:empty) {
    display: block;
    background: var(--danger-50);
    color: var(--danger-700);
    border: 1px solid var(--danger-100);
    border-left: 4px solid var(--danger-500);
}
.success-message.active,
.success-message:not(:empty) {
    display: block;
    background: var(--success-50);
    color: var(--success-700);
    border: 1px solid var(--success-100);
    border-left: 4px solid var(--success-500);
}

/* =====================================================================
   HELP MODAL (created dynamically by JS)
   ===================================================================== */
.help-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    background: var(--bg-overlay);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: fadeIn var(--dur-default) var(--ease-out);
}
.help-modal-content {
    position: relative;
    max-width: 680px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--bg-surface);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2xl);
    animation: scaleIn var(--dur-slow) var(--ease-spring);
}
.help-modal-header {
    position: relative;
    padding: var(--space-6) var(--space-7) var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
}
.help-modal-header h3 {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-tight);
}
.help-close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 1;
    background: var(--neutral-100);
    color: var(--text-tertiary);
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
}
.help-close:hover {
    background: var(--danger-50);
    color: var(--danger-600);
    transform: rotate(90deg);
}
.help-modal-body {
    padding: var(--space-5) var(--space-7);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}
.help-section {
    padding: var(--space-4);
    background: linear-gradient(135deg, var(--neutral-50), var(--bg-surface));
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}
.help-section h4 {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--primary-700);
    margin-bottom: var(--space-2);
}
.help-section p {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    line-height: var(--lh-relaxed);
}
.help-tips {
    padding: var(--space-4);
    background: linear-gradient(135deg, var(--warning-50), var(--bg-surface));
    border: 1px solid var(--warning-100);
    border-radius: var(--radius-md);
}
.help-tips h4 {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--warning-700);
    margin-bottom: var(--space-2);
}
.help-tips ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.help-tips li {
    position: relative;
    padding: var(--space-1) 0 var(--space-1) var(--space-5);
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}
.help-tips li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--warning-600);
    font-weight: var(--fw-bold);
}
.help-modal-footer {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
    padding: var(--space-4) var(--space-7) var(--space-6);
    border-top: 1px solid var(--border-subtle);
    flex-wrap: wrap;
}

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

/* Large desktop (default) */
/* > 1280px handled by defaults */

/* Small desktop / large tablet */
@media (max-width: 1180px) {
    :root { --sidebar-width: 340px; }
    .rfq-header { padding: 0 var(--space-5); }
    .page-container { padding: var(--space-5) var(--space-5) var(--space-7); }
}

/* Tablet */
@media (max-width: 960px) {
    :root {
        --header-height: 64px;
        --sidebar-width: 100%;
    }
    .rfq-header {
        padding: 0 var(--space-4);
        gap: var(--space-3);
    }
    .rfq-header-title { font-size: var(--fs-md); }
    .unified-interface-container {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-4);
    }
    .basket-area-box {
        position: static;
        width: 100%;
        max-height: none;
    }
    .sa-filter-row {
        grid-template-columns: 1fr 1fr;
    }
    .steps-container { grid-template-columns: 1fr; }
    .customer-form-modern { grid-template-columns: 1fr; }
    .page-container { padding: var(--space-4); }
    .alternative-content { padding: var(--space-6) var(--space-5); }
}

/* Mobile */
@media (max-width: 640px) {
    :root {
        --header-height: 60px;
        --fs-4xl: 24px;
        --fs-3xl: 20px;
        --fs-2xl: 18px;
    }
    .rfq-header {
        flex-wrap: wrap;
        padding: var(--space-2) var(--space-3);
        min-height: auto;
        gap: var(--space-2);
    }
    .rfq-header-title {
        font-size: var(--fs-sm);
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .rfq-header-logo { height: 32px; }
    .rfq-lang-topright { flex-wrap: wrap; gap: var(--space-2); width: 100%; }
    .catalog-button-container { width: 100%; }
    .btn-catalog { width: 100%; justify-content: center; }

    .sa-filter-row { grid-template-columns: 1fr; }
    .sa-filter-item-sm { max-width: none; }
    .sa-filter-item-toggle { align-self: stretch; }

    .product-table { font-size: var(--fs-xs); }
    .product-table th,
    .product-table td { padding: var(--space-2) var(--space-2); }
    .product-table td img:not(.product-thumb) {
        width: 36px !important;
        height: 36px !important;
    }

    .quantity-input { max-width: 80px; }

    .steps-container { grid-template-columns: 1fr; }
    .welcome-content {
        padding: var(--space-7) var(--space-5) var(--space-5);
    }

    .notification {
        left: var(--space-3);
        right: var(--space-3);
        min-width: 0;
        max-width: none;
    }

    .cart-item-remove {
        width: 28px;
        height: 28px;
    }

    .option-grid {
        grid-template-columns: 1fr;
    }
}

/* Narrow mobile */
@media (max-width: 400px) {
    .page-container { padding: var(--space-3); }
    .search-area-box,
    .product-results-area { padding: var(--space-3); }
    .pagination-controls { padding: var(--space-1); gap: var(--space-1-5); }
    .pagination-controls .btn { height: 32px; min-width: 32px; padding: 0 var(--space-2); }
    .alternative-content { padding: var(--space-5) var(--space-4); }
}

/* Print */
@media print {
    .rfq-header,
    .basket-area-box,
    .sa-filter-row,
    .pagination-controls,
    .btn,
    .view-toggle-container,
    .notification,
    .loading-overlay {
        display: none !important;
    }
    body { background: white !important; }
    .container,
    .product-results-area {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =====================================================================
   PHASE 3 — Quick-start banner & single-screen checkout
   ===================================================================== */

/* Quick-start banner (replaces the auto-opening welcome wizard) */
.quickstart-banner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    background: var(--primary-50);
    border: 1px solid var(--primary-200);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
}
.quickstart-icon {
    flex-shrink: 0;
    display: inline-flex;
    color: var(--primary-600);
}
.quickstart-text {
    flex: 1;
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.45;
}
.quickstart-guide-btn {
    flex-shrink: 0;
    padding: var(--space-2) var(--space-4);
    background: var(--primary-600);
    color: var(--text-inverse);
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}
.quickstart-guide-btn:hover { background: var(--primary-700); }
.quickstart-close {
    flex-shrink: 0;
    background: none;
    border: none;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
}
.quickstart-close:hover { color: var(--text-primary); background: var(--primary-100); }
@media (max-width: 640px) {
    .quickstart-banner { flex-wrap: wrap; }
    .quickstart-text { flex-basis: 100%; order: 3; }
}

/* Single-screen checkout: summary + form side by side, stacked on mobile */
.checkout-twocol {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
}
.checkout-summary-col {
    max-height: 62vh;
    overflow-y: auto;
}
.checkout-twocol .order-summary-card { margin-bottom: 0; border: none; background: transparent; }
@media (max-width: 860px) {
    .checkout-twocol { grid-template-columns: 1fr; }
    .checkout-summary-col { max-height: 34vh; }
}

/* ---- order summary as a card list (review modal + basket panel) ---- */
.osum { display: flex; flex-direction: column; gap: 12px; }
.osum-empty { text-align: center; color: var(--text-tertiary); font-style: italic; padding: 24px 0; }
.osum-list { display: flex; flex-direction: column; gap: 8px; }
.osum-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 11px 13px;
}
.osum-card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 3px; }
.osum-code {
    font-family: var(--font-mono, monospace);
    font-size: 12.5px; font-weight: 700; color: var(--primary-700);
    word-break: break-all;
}
.osum-qty { font-size: 13px; font-weight: 700; color: var(--text-primary); white-space: nowrap; flex-shrink: 0; }
.osum-name { font-size: 13px; color: var(--text-secondary); line-height: 1.4; }
.osum-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.osum-tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 999px;
    font-size: 10.5px; font-weight: 600; letter-spacing: .01em;
    background: var(--neutral-100, #eef2f7); color: var(--text-secondary);
    white-space: nowrap;
}
.osum-tag.status-active, .osum-tag.active { background: #ecfdf5; color: #047857; }
.osum-tag.status-passive, .osum-tag.passive { background: #fff7ed; color: #b45309; }
.osum-tag.ex-stock { background: #fffbeb; color: #92600b; }
.osum-tag.ex-moq   { background: #eff6ff; color: #1d4ed8; }
.osum-tag.ex-setup { background: #f5f3ff; color: #6d28d9; }
.osum-tag.ex-alt   { background: #ecfdf5; color: #047857; }
.osum-foot {
    display: flex; gap: 18px; flex-wrap: wrap;
    padding: 11px 13px; border-radius: 12px;
    background: var(--neutral-50, #f8fafc); border: 1px solid var(--border-subtle);
    font-size: 12.5px; color: var(--text-secondary);
}
.osum-foot b { color: var(--text-primary); font-size: 13.5px; }

/* =====================================================================
   PHASE 4 — Mobile bottom-sheet basket
   ===================================================================== */
.mobile-basket-bar { display: none; }
.mobile-basket-overlay { display: none; }

@media (max-width: 960px) {
    /* The inline stacked basket is replaced by the bottom bar + sheet */
    .basket-area-box { display: none; }

    .mobile-basket-bar.has-items {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 18000;
        align-items: stretch;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
        padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
        background: var(--bg-surface);
        border-top: 1px solid var(--border-subtle);
        box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.12);
    }
    .mobile-basket-summary {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        background: var(--bg-surface-alt);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        padding: var(--space-2) var(--space-3);
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--text-secondary);
        cursor: pointer;
    }
    .mobile-basket-count {
        min-width: 22px;
        height: 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--primary-600);
        color: var(--text-inverse);
        border-radius: var(--radius-full);
        font-size: 0.8rem;
        font-weight: 700;
        padding: 0 6px;
    }
    .mobile-basket-review {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        background: var(--primary-600);
        color: var(--text-inverse);
        border: none;
        border-radius: var(--radius-md);
        padding: var(--space-2) var(--space-3);
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
    }
    .mobile-basket-review:active { background: var(--primary-700); }

    /* Slide-up sheet: the existing basket box, repositioned */
    .basket-area-box.mobile-open {
        display: flex;
        flex-direction: column;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        z-index: 19000;
        max-height: 72vh;
        margin: 0;
        border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
        box-shadow: var(--shadow-2xl);
        animation: sheetUp 0.22s ease-out;
    }
    .basket-area-box.mobile-open .basket-content {
        overflow-y: auto;
        flex: 1;
    }
    @keyframes sheetUp {
        from { transform: translateY(40%); opacity: 0.5; }
        to   { transform: translateY(0); opacity: 1; }
    }
    .mobile-basket-overlay.active {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 18500;
        background: var(--bg-overlay);
    }
    /* Keep the bar from covering the last rows of content */
    .page-container { padding-bottom: 96px; }
}

/* =====================================================================
   List-view product thumbnails
   ===================================================================== */
.product-table .th-thumb { width: 68px; }
.product-thumb-cell {
    width: 68px;
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3) !important;
    vertical-align: middle;
}
.product-thumb {
    display: block;
    width: 52px;
    height: 52px;
    object-fit: contain;
    background: var(--neutral-0);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 3px;
    cursor: zoom-in;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.product-thumb:hover {
    transform: scale(1.06);
    border-color: var(--primary-300);
    box-shadow: var(--shadow-md);
}
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
@media (max-width: 640px) {
    .product-table .th-thumb, .product-thumb-cell { width: 52px; }
    .product-thumb { width: 40px; height: 40px; }
}

/* =====================================================================
   No-MOQ color nudge (variant modal)
   ===================================================================== */
.nomoq-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 2px;
    padding: 4px 10px;
    background: #ecfeff;
    border: 1px solid #67e8f9;
    border-radius: var(--radius-full);
    color: #0e7490;
    font-size: 0.78rem;
    font-weight: 500;
}
.color-swatch-btn { position: relative; }
.color-swatch-btn.nomoq {
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px #22d3ee;
    animation: nomoqPulse 2.4s ease-in-out infinite;
}
.color-swatch-btn.nomoq::after {
    content: '';
    position: absolute;
    top: -4px;
    right: -4px;
    width: 10px;
    height: 10px;
    background: #06b6d4;
    border-radius: var(--radius-full);
    border: 1.5px solid #fff;
}
/* Selected state is bold and unmistakable — much stronger than the MOQ dot */
.color-swatch-btn.nomoq.v-selected {
    box-shadow: 0 0 0 2.5px #fff, 0 0 0 5px var(--primary-600), var(--shadow-md);
    border-color: var(--primary-600);
    transform: scale(1.18);
    animation: none;
}
@keyframes nomoqPulse {
    0%, 100% { box-shadow: 0 0 0 2px #fff, 0 0 0 3px #22d3ee; }
    50%      { box-shadow: 0 0 0 2px #fff, 0 0 0 3px #22d3ee, 0 0 10px 2px rgba(34, 211, 238, 0.35); }
}
@media (prefers-reduced-motion: reduce) {
    .color-swatch-btn.nomoq { animation: none; }
}

/* =====================================================================
   GUIDE VIDEO POP-UP (onboarding.js openGuideVideo / closeGuideVideo)
   HMK red accents to match the guide video + printed catalog.
   ===================================================================== */
:root {
    --hmk-red: #d8252b;
    --hmk-red-700: #b81d22;
    --hmk-red-50: #fdeeee;
    --hmk-red-100: #fbdcdc;
}

.guide-video-btn-icon {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    background: var(--hmk-red);
    color: var(--text-inverse);
    border-radius: var(--radius-full);
    padding-left: 1px;
    box-shadow: 0 1px 3px rgba(216, 37, 43, 0.35);
    transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.btn-guide-video:hover .guide-video-btn-icon { background: var(--hmk-red-700); transform: scale(1.08); }

.guide-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    background: var(--bg-overlay);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: fadeIn var(--dur-default) var(--ease-out);
}
.guide-modal.active { display: flex; }
body.guide-open { overflow: hidden; }

.guide-card {
    position: relative;
    width: 100%;
    max-width: 760px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: var(--bg-surface);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2xl);
    padding: var(--space-7) var(--space-7) var(--space-6);
    border-top: 5px solid var(--hmk-red);
    animation: scaleIn var(--dur-slow) var(--ease-spring);
}

.guide-close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: var(--radius-full);
    background: var(--neutral-100);
    color: var(--text-tertiary);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.guide-close:hover { background: var(--hmk-red-50); color: var(--hmk-red); }

.guide-head { text-align: center; padding: 0 var(--space-7); margin-bottom: var(--space-5); }
.guide-eyebrow {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    margin-bottom: var(--space-3);
    background: var(--hmk-red-50);
    color: var(--hmk-red);
    border-radius: var(--radius-full);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.guide-title {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-4xl);
    font-weight: var(--fw-extrabold);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}
.guide-title em { font-style: normal; color: var(--hmk-red); }
.guide-sub {
    margin: 0 auto;
    max-width: 520px;
    font-size: var(--fs-md);
    line-height: 1.5;
    color: var(--text-tertiary);
}

.guide-video {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--neutral-900);
    box-shadow: var(--shadow-lg);
}
.guide-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.guide-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    cursor: pointer;
    background: var(--neutral-900);
}
.guide-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--dur-slower) var(--ease-out), filter var(--dur-slower) var(--ease-out);
}
.guide-poster:hover img { transform: scale(1.02); filter: brightness(0.92); }
.guide-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    padding-left: 4px;
    transform: translate(-50%, -50%);
    background: var(--hmk-red);
    color: #fff;
    border-radius: var(--radius-full);
    box-shadow: 0 0 0 8px rgba(216, 37, 43, 0.22), 0 10px 24px rgba(0, 0, 0, 0.3);
    transition: transform var(--dur-default) var(--ease-spring), background var(--dur-fast) var(--ease-out);
}
.guide-poster:hover .guide-play,
.guide-poster:focus-visible .guide-play { transform: translate(-50%, -50%) scale(1.08); background: var(--hmk-red-700); }
.guide-poster:focus-visible { outline: 3px solid var(--hmk-red); outline-offset: -3px; }
.guide-lang-badge {
    position: absolute;
    left: var(--space-3);
    bottom: var(--space-3);
    padding: var(--space-1) var(--space-2-5);
    background: rgba(15, 23, 42, 0.78);
    color: #fff;
    border-radius: var(--radius-full);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.02em;
}

.guide-steps {
    list-style: none;
    margin: var(--space-6) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    counter-reset: guide-step;
}
.guide-steps li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-2);
    text-align: center;
    counter-increment: guide-step;
}
.guide-steps li + li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    height: 36px;
    border-left: 1px solid var(--hmk-red-100);
}
.guide-step-icon {
    position: relative;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    background: var(--hmk-red-50);
    color: var(--neutral-900);
    border-radius: var(--radius-full);
}
.guide-step-icon svg { width: 26px; height: 26px; }
.guide-step-icon::after {
    content: counter(guide-step);
    position: absolute;
    top: -2px;
    right: -2px;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    background: var(--hmk-red);
    color: #fff;
    border: 2px solid var(--bg-surface);
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: var(--fw-bold);
}
.guide-step-text {
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    line-height: 1.3;
    color: var(--text-primary);
}

.guide-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border-subtle);
}
.guide-dontshow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-base);
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}
.guide-dontshow input {
    /* a global mobile input reset sets appearance:none — keep a real checkbox */
    -webkit-appearance: checkbox;
    appearance: auto;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--hmk-red);
    cursor: pointer;
}
.guide-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.guide-cta {
    background: var(--hmk-red);
    color: #fff;
    border: 1px solid var(--hmk-red);
    font-weight: var(--fw-semibold);
    box-shadow: 0 6px 16px rgba(216, 37, 43, 0.28);
}
.guide-cta:hover { background: var(--hmk-red-700); border-color: var(--hmk-red-700); color: #fff; }

@media (max-width: 640px) {
    .guide-modal { padding: var(--space-3); align-items: flex-start; }
    .guide-card { padding: var(--space-6) var(--space-4) var(--space-4); max-height: calc(100vh - 24px); }
    .guide-head { padding: 0 var(--space-6); }
    .guide-title { font-size: var(--fs-2xl); }
    .guide-sub { font-size: var(--fs-base); }
    .guide-play { width: 60px; height: 60px; }
    .guide-steps li { padding: 0 var(--space-1); }
    .guide-step-icon { width: 48px; height: 48px; }
    .guide-step-text { font-size: var(--fs-sm); }
    .guide-foot { flex-direction: column; align-items: stretch; }
    .guide-actions .btn { flex: 1; }
    /* Tour + Video: icon-only so the header actions fit a phone width */
    .rfq-header-actions .btn-help .help-text { display: none; }
    .rfq-header-actions .btn-help { padding-left: var(--space-2-5); padding-right: var(--space-2-5); }
    /* Category chip: the dot already marks the main category — show the sub only */
    .cat-chip-main, .cat-chip-sep { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .guide-modal, .guide-card { animation: none; }
    .guide-poster img, .guide-play { transition: none; }
}