/* =====================================================================
   SupplySphere legacy → v2 theme bridge
   Loaded by _LayoutProfessional AFTER the legacy stylesheets so every
   existing page (About, Pricing, FAQ, Blog, Identity, Payments, AI pages,
   classic catalog pages …) inherits the new palette, type and components
   without rewriting each view.
   ===================================================================== */

:root,
:root[data-theme] {
    /* Brand */
    --brand-primary: #1d4ed8;
    --brand-primary-dark: #1e40af;
    --brand-primary-light: #3b82f6;
    --brand-primary-pale: #eef2ff;
    --brand-indigo: #1d4ed8;
    --brand-indigo-pale: #eef2ff;
    --brand-violet: #1e40af;
    --brand-violet-pale: #eef2ff;
    --brand-cyan: #3b82f6;
    --brand-cyan-pale: #eff6ff;
    --brand-accent: #f59e0b;
    --brand-accent-light: #fff7e6;
    --brand-success: #067647;
    --brand-success-light: #ecfdf3;
    --brand-warning: #b54708;
    --brand-warning-light: #fffaeb;
    --brand-error: #b42318;
    --brand-error-light: #fef3f2;
    --color-info: #175cd3;
    --color-info-light: #eff8ff;
    --success: #067647;
    --warning: #b54708;
    --error: #b42318;
    --info: #175cd3;

    /* premium-design-system.css names */
    --primary-navy: #0b1324;
    --primary-blue: #1d4ed8;
    --accent-cyan: #3b82f6;
    --accent-emerald: #067647;
    --accent-amber: #f59e0b;

    /* Neutrals (slate) */
    --neutral-0: #ffffff;
    --neutral-50: #f9fafb;
    --neutral-100: #f2f4f7;
    --neutral-200: #e4e7ec;
    --neutral-300: #d0d5dd;
    --neutral-400: #98a2b3;
    --neutral-500: #667085;
    --neutral-600: #475467;
    --neutral-700: #344054;
    --neutral-800: #1d2939;
    --neutral-900: #101828;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
    --gradient-brand: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
    --gradient-accent: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    --gradient-success: linear-gradient(135deg, #067647 0%, #12b76a 100%);
    --gradient-premium: linear-gradient(135deg, #0b1324 0%, #1d4ed8 100%);
    --gradient-hero:
        radial-gradient(800px 400px at 85% 10%, rgba(245, 158, 11, .18), transparent 60%),
        radial-gradient(700px 500px at 10% 100%, rgba(37, 99, 235, .32), transparent 60%),
        linear-gradient(160deg, #070c18 0%, #0b1730 45%, #12245a 100%);
    --gradient-mesh: radial-gradient(600px 300px at 80% 0%, rgba(245, 158, 11, .14), transparent 60%), radial-gradient(600px 400px at 0% 100%, rgba(29, 78, 216, .18), transparent 60%);

    /* Type */
    --font-primary: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-body: var(--font-primary);
    --font-heading: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
    --font-display: var(--font-heading);
    --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

    /* Elevation */
    --shadow-1: 0 1px 2px rgba(16, 24, 40, .06);
    --shadow-2: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
    --shadow-3: 0 4px 8px -2px rgba(16, 24, 40, .08), 0 2px 4px -2px rgba(16, 24, 40, .04);
    --shadow-4: 0 12px 16px -4px rgba(16, 24, 40, .08), 0 4px 6px -2px rgba(16, 24, 40, .03);
    --shadow-5: 0 20px 24px -4px rgba(16, 24, 40, .08), 0 8px 8px -4px rgba(16, 24, 40, .03);
    --shadow-6: 0 24px 48px -12px rgba(16, 24, 40, .18);
    --shadow-xs: var(--shadow-1);
    --shadow-sm: var(--shadow-2);
    --shadow-md: var(--shadow-3);
    --shadow-lg: var(--shadow-4);
    --shadow-xl: var(--shadow-5);
    --shadow-2xl: var(--shadow-6);
    --shadow-brand: 0 6px 16px -4px rgba(29, 78, 216, .35);
    --shadow-brand-lg: 0 12px 28px -6px rgba(29, 78, 216, .35);
    --shadow-glow: 0 0 0 4px rgba(29, 78, 216, .12);
    --shadow-indigo: var(--shadow-brand);

    /* Shape */
    --radius-sm: 6px;
    --radius-md: 9px;
    --radius-lg: 12px;
    --radius-xl: 14px;
    --radius-2xl: 18px;
    --radius-3xl: 22px;
}

/* Legacy pages are designed for a light surface: keep them light. */
body.ss-legacy { background: #ffffff; color: #101828; font-family: var(--font-primary); -webkit-font-smoothing: antialiased; }
body.ss-legacy h1, body.ss-legacy h2, body.ss-legacy h3, body.ss-legacy h4, body.ss-legacy h5 { font-family: var(--font-heading); letter-spacing: -.02em; }
body.ss-legacy .ss-site-actions [data-action="toggle-theme"] { display: none; }
body.ss-legacy .ss-site-nav { z-index: 1100; }
body.ss-legacy .ss-site-footer h4 { font-family: var(--ss-font); letter-spacing: .07em; }
body.ss-legacy #main-content { min-height: 50vh; }

/* Legacy components → v2 look */
.btn-enterprise { border-radius: 9px !important; font-weight: 600 !important; letter-spacing: 0 !important; box-shadow: var(--shadow-1); }
.btn-enterprise.btn-primary, .btn-primary-enterprise { background: #1d4ed8 !important; border-color: #1d4ed8 !important; color: #fff !important; }
.btn-enterprise.btn-primary:hover, .btn-primary-enterprise:hover { background: #1e40af !important; border-color: #1e40af !important; }
.btn-enterprise.btn-secondary { background: #fff !important; color: #101828 !important; border: 1px solid #d0d5dd !important; }
.btn-enterprise.btn-secondary:hover { background: #f2f4f7 !important; }

.card-enterprise, .card-premium, .glass-card, .feature-card, .pricing-card, .stat-card {
    border-radius: 14px !important;
    border-color: #e4e7ec !important;
}

.form-control, .form-select, input.form-input, select.form-input, textarea.form-input {
    border-radius: 9px;
    border-color: #d0d5dd;
}
.form-control:focus, .form-select:focus, .form-input:focus {
    border-color: #1d4ed8 !important;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, .2) !important;
}

/* Retire legacy chrome that the new header/footer replaces. */
.announcement-bar, .nav-enterprise, .mobile-menu-overlay, .mobile-menu-panel, .footer-professional { display: none !important; }

#scroll-progress { background: linear-gradient(90deg, #1d4ed8, #f59e0b) !important; z-index: 1200 !important; }
#scroll-to-top { background: #1d4ed8 !important; border-radius: 12px !important; }

/* Identity: auth split layout under the new sticky header */
body.ss-legacy .auth-split-layout { min-height: calc(100vh - 68px); }

/* ── Bootstrap-compatible layer (many legacy views use Bootstrap markup, which the layout never loaded) ── */
.ss-legacy .container, .ss-legacy .container-fluid { width: 100%; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; }
.ss-legacy .container { max-width: 1200px; }
.ss-legacy .row { display: flex; flex-wrap: wrap; margin-left: -12px; margin-right: -12px; row-gap: 0; }
.ss-legacy .row > * { flex-shrink: 0; width: 100%; max-width: 100%; padding-left: 12px; padding-right: 12px; }
.ss-legacy .col { flex: 1 0 0%; }
.ss-legacy .col-1 { flex: 0 0 auto; width: 8.3333%; }
.ss-legacy .col-2 { flex: 0 0 auto; width: 16.6667%; }
.ss-legacy .col-3 { flex: 0 0 auto; width: 25.0000%; }
.ss-legacy .col-4 { flex: 0 0 auto; width: 33.3333%; }
.ss-legacy .col-5 { flex: 0 0 auto; width: 41.6667%; }
.ss-legacy .col-6 { flex: 0 0 auto; width: 50.0000%; }
.ss-legacy .col-7 { flex: 0 0 auto; width: 58.3333%; }
.ss-legacy .col-8 { flex: 0 0 auto; width: 66.6667%; }
.ss-legacy .col-9 { flex: 0 0 auto; width: 75.0000%; }
.ss-legacy .col-10 { flex: 0 0 auto; width: 83.3333%; }
.ss-legacy .col-11 { flex: 0 0 auto; width: 91.6667%; }
.ss-legacy .col-12 { flex: 0 0 auto; width: 100.0000%; }
@media (min-width: 576px) { .ss-legacy .col-sm { flex: 1 0 0%; } .ss-legacy .col-sm-1 { flex: 0 0 auto; width: 8.3333%; } .ss-legacy .col-sm-2 { flex: 0 0 auto; width: 16.6667%; } .ss-legacy .col-sm-3 { flex: 0 0 auto; width: 25.0000%; } .ss-legacy .col-sm-4 { flex: 0 0 auto; width: 33.3333%; } .ss-legacy .col-sm-5 { flex: 0 0 auto; width: 41.6667%; } .ss-legacy .col-sm-6 { flex: 0 0 auto; width: 50.0000%; } .ss-legacy .col-sm-7 { flex: 0 0 auto; width: 58.3333%; } .ss-legacy .col-sm-8 { flex: 0 0 auto; width: 66.6667%; } .ss-legacy .col-sm-9 { flex: 0 0 auto; width: 75.0000%; } .ss-legacy .col-sm-10 { flex: 0 0 auto; width: 83.3333%; } .ss-legacy .col-sm-11 { flex: 0 0 auto; width: 91.6667%; } .ss-legacy .col-sm-12 { flex: 0 0 auto; width: 100.0000%; } .ss-legacy .text-sm-start { text-align: left; } .ss-legacy .text-sm-end { text-align: right; } }
@media (min-width: 768px) { .ss-legacy .col-md { flex: 1 0 0%; } .ss-legacy .col-md-1 { flex: 0 0 auto; width: 8.3333%; } .ss-legacy .col-md-2 { flex: 0 0 auto; width: 16.6667%; } .ss-legacy .col-md-3 { flex: 0 0 auto; width: 25.0000%; } .ss-legacy .col-md-4 { flex: 0 0 auto; width: 33.3333%; } .ss-legacy .col-md-5 { flex: 0 0 auto; width: 41.6667%; } .ss-legacy .col-md-6 { flex: 0 0 auto; width: 50.0000%; } .ss-legacy .col-md-7 { flex: 0 0 auto; width: 58.3333%; } .ss-legacy .col-md-8 { flex: 0 0 auto; width: 66.6667%; } .ss-legacy .col-md-9 { flex: 0 0 auto; width: 75.0000%; } .ss-legacy .col-md-10 { flex: 0 0 auto; width: 83.3333%; } .ss-legacy .col-md-11 { flex: 0 0 auto; width: 91.6667%; } .ss-legacy .col-md-12 { flex: 0 0 auto; width: 100.0000%; } .ss-legacy .text-md-start { text-align: left; } .ss-legacy .text-md-end { text-align: right; } }
@media (min-width: 992px) { .ss-legacy .col-lg { flex: 1 0 0%; } .ss-legacy .col-lg-1 { flex: 0 0 auto; width: 8.3333%; } .ss-legacy .col-lg-2 { flex: 0 0 auto; width: 16.6667%; } .ss-legacy .col-lg-3 { flex: 0 0 auto; width: 25.0000%; } .ss-legacy .col-lg-4 { flex: 0 0 auto; width: 33.3333%; } .ss-legacy .col-lg-5 { flex: 0 0 auto; width: 41.6667%; } .ss-legacy .col-lg-6 { flex: 0 0 auto; width: 50.0000%; } .ss-legacy .col-lg-7 { flex: 0 0 auto; width: 58.3333%; } .ss-legacy .col-lg-8 { flex: 0 0 auto; width: 66.6667%; } .ss-legacy .col-lg-9 { flex: 0 0 auto; width: 75.0000%; } .ss-legacy .col-lg-10 { flex: 0 0 auto; width: 83.3333%; } .ss-legacy .col-lg-11 { flex: 0 0 auto; width: 91.6667%; } .ss-legacy .col-lg-12 { flex: 0 0 auto; width: 100.0000%; } .ss-legacy .text-lg-start { text-align: left; } .ss-legacy .text-lg-end { text-align: right; } }
@media (min-width: 1200px) { .ss-legacy .col-xl { flex: 1 0 0%; } .ss-legacy .col-xl-1 { flex: 0 0 auto; width: 8.3333%; } .ss-legacy .col-xl-2 { flex: 0 0 auto; width: 16.6667%; } .ss-legacy .col-xl-3 { flex: 0 0 auto; width: 25.0000%; } .ss-legacy .col-xl-4 { flex: 0 0 auto; width: 33.3333%; } .ss-legacy .col-xl-5 { flex: 0 0 auto; width: 41.6667%; } .ss-legacy .col-xl-6 { flex: 0 0 auto; width: 50.0000%; } .ss-legacy .col-xl-7 { flex: 0 0 auto; width: 58.3333%; } .ss-legacy .col-xl-8 { flex: 0 0 auto; width: 66.6667%; } .ss-legacy .col-xl-9 { flex: 0 0 auto; width: 75.0000%; } .ss-legacy .col-xl-10 { flex: 0 0 auto; width: 83.3333%; } .ss-legacy .col-xl-11 { flex: 0 0 auto; width: 91.6667%; } .ss-legacy .col-xl-12 { flex: 0 0 auto; width: 100.0000%; } .ss-legacy .text-xl-start { text-align: left; } .ss-legacy .text-xl-end { text-align: right; } }
.ss-legacy .m-0{margin:0!important} .ss-legacy .mt-0{margin-top:0!important} .ss-legacy .mb-0{margin-bottom:0!important} .ss-legacy .ms-0{margin-left:0!important} .ss-legacy .me-0{margin-right:0!important} .ss-legacy .my-0{margin-top:0!important;margin-bottom:0!important} .ss-legacy .mx-0{margin-left:0!important;margin-right:0!important}
.ss-legacy .p-0{padding:0!important} .ss-legacy .pt-0{padding-top:0!important} .ss-legacy .pb-0{padding-bottom:0!important} .ss-legacy .py-0{padding-top:0!important;padding-bottom:0!important} .ss-legacy .px-0{padding-left:0!important;padding-right:0!important} .ss-legacy .g-0{row-gap:0}
.ss-legacy .m-1{margin:4px!important} .ss-legacy .mt-1{margin-top:4px!important} .ss-legacy .mb-1{margin-bottom:4px!important} .ss-legacy .ms-1{margin-left:4px!important} .ss-legacy .me-1{margin-right:4px!important} .ss-legacy .my-1{margin-top:4px!important;margin-bottom:4px!important} .ss-legacy .mx-1{margin-left:4px!important;margin-right:4px!important}
.ss-legacy .p-1{padding:4px!important} .ss-legacy .pt-1{padding-top:4px!important} .ss-legacy .pb-1{padding-bottom:4px!important} .ss-legacy .py-1{padding-top:4px!important;padding-bottom:4px!important} .ss-legacy .px-1{padding-left:4px!important;padding-right:4px!important} .ss-legacy .g-1{row-gap:4px}
.ss-legacy .m-2{margin:8px!important} .ss-legacy .mt-2{margin-top:8px!important} .ss-legacy .mb-2{margin-bottom:8px!important} .ss-legacy .ms-2{margin-left:8px!important} .ss-legacy .me-2{margin-right:8px!important} .ss-legacy .my-2{margin-top:8px!important;margin-bottom:8px!important} .ss-legacy .mx-2{margin-left:8px!important;margin-right:8px!important}
.ss-legacy .p-2{padding:8px!important} .ss-legacy .pt-2{padding-top:8px!important} .ss-legacy .pb-2{padding-bottom:8px!important} .ss-legacy .py-2{padding-top:8px!important;padding-bottom:8px!important} .ss-legacy .px-2{padding-left:8px!important;padding-right:8px!important} .ss-legacy .g-2{row-gap:8px}
.ss-legacy .m-3{margin:16px!important} .ss-legacy .mt-3{margin-top:16px!important} .ss-legacy .mb-3{margin-bottom:16px!important} .ss-legacy .ms-3{margin-left:16px!important} .ss-legacy .me-3{margin-right:16px!important} .ss-legacy .my-3{margin-top:16px!important;margin-bottom:16px!important} .ss-legacy .mx-3{margin-left:16px!important;margin-right:16px!important}
.ss-legacy .p-3{padding:16px!important} .ss-legacy .pt-3{padding-top:16px!important} .ss-legacy .pb-3{padding-bottom:16px!important} .ss-legacy .py-3{padding-top:16px!important;padding-bottom:16px!important} .ss-legacy .px-3{padding-left:16px!important;padding-right:16px!important} .ss-legacy .g-3{row-gap:16px}
.ss-legacy .m-4{margin:24px!important} .ss-legacy .mt-4{margin-top:24px!important} .ss-legacy .mb-4{margin-bottom:24px!important} .ss-legacy .ms-4{margin-left:24px!important} .ss-legacy .me-4{margin-right:24px!important} .ss-legacy .my-4{margin-top:24px!important;margin-bottom:24px!important} .ss-legacy .mx-4{margin-left:24px!important;margin-right:24px!important}
.ss-legacy .p-4{padding:24px!important} .ss-legacy .pt-4{padding-top:24px!important} .ss-legacy .pb-4{padding-bottom:24px!important} .ss-legacy .py-4{padding-top:24px!important;padding-bottom:24px!important} .ss-legacy .px-4{padding-left:24px!important;padding-right:24px!important} .ss-legacy .g-4{row-gap:24px}
.ss-legacy .m-5{margin:48px!important} .ss-legacy .mt-5{margin-top:48px!important} .ss-legacy .mb-5{margin-bottom:48px!important} .ss-legacy .ms-5{margin-left:48px!important} .ss-legacy .me-5{margin-right:48px!important} .ss-legacy .my-5{margin-top:48px!important;margin-bottom:48px!important} .ss-legacy .mx-5{margin-left:48px!important;margin-right:48px!important}
.ss-legacy .p-5{padding:48px!important} .ss-legacy .pt-5{padding-top:48px!important} .ss-legacy .pb-5{padding-bottom:48px!important} .ss-legacy .py-5{padding-top:48px!important;padding-bottom:48px!important} .ss-legacy .px-5{padding-left:48px!important;padding-right:48px!important} .ss-legacy .g-5{row-gap:48px}
.ss-legacy .mx-auto { margin-left: auto !important; margin-right: auto !important; }
.ss-legacy .d-flex { display: flex !important; } .ss-legacy .d-block { display: block !important; } .ss-legacy .d-none { display: none !important; } .ss-legacy .d-inline-block { display: inline-block !important; }
.ss-legacy .flex-column { flex-direction: column !important; } .ss-legacy .flex-wrap { flex-wrap: wrap !important; }
.ss-legacy .align-items-center { align-items: center !important; } .ss-legacy .justify-content-center { justify-content: center !important; } .ss-legacy .justify-content-between { justify-content: space-between !important; } .ss-legacy .justify-content-end { justify-content: flex-end !important; }
.ss-legacy .gap-2 { gap: 8px !important; } .ss-legacy .gap-3 { gap: 16px !important; }
.ss-legacy .text-center { text-align: center !important; } .ss-legacy .text-end { text-align: right !important; } .ss-legacy .text-start { text-align: left !important; }
.ss-legacy .text-muted { color: #667085 !important; } .ss-legacy .text-danger { color: #b42318 !important; } .ss-legacy .text-success { color: #067647 !important; } .ss-legacy .text-primary { color: #1d4ed8 !important; } .ss-legacy .text-white { color: #fff !important; }
.ss-legacy .fw-bold { font-weight: 700 !important; } .ss-legacy .small, .ss-legacy small { font-size: .875em; }
.ss-legacy .w-100 { width: 100% !important; } .ss-legacy .h-100 { height: 100% !important; }
.ss-legacy .img-fluid { max-width: 100%; height: auto; } .ss-legacy .rounded { border-radius: 12px !important; } .ss-legacy .shadow, .ss-legacy .shadow-sm { box-shadow: var(--shadow-3) !important; }
.ss-legacy .bg-light { background: #f9fafb !important; } .ss-legacy .bg-white { background: #fff !important; } .ss-legacy .bg-primary { background: #1d4ed8 !important; color: #fff; }

.ss-legacy .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 16px; border-radius: 9px; border: 1px solid transparent; font: 600 14px/1 var(--font-primary); cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s; }
.ss-legacy .btn-primary { background: #1d4ed8; color: #fff; } .ss-legacy .btn-primary:hover { background: #1e40af; color: #fff; }
.ss-legacy .btn-secondary, .ss-legacy .btn-light, .ss-legacy .btn-outline-primary, .ss-legacy .btn-outline-secondary { background: #fff; color: #101828; border-color: #d0d5dd; } .ss-legacy .btn-secondary:hover, .ss-legacy .btn-light:hover, .ss-legacy .btn-outline-primary:hover, .ss-legacy .btn-outline-secondary:hover { background: #f2f4f7; }
.ss-legacy .btn-danger, .ss-legacy .btn-outline-danger { background: #fff; color: #b42318; border-color: #d0d5dd; } .ss-legacy .btn-danger:hover, .ss-legacy .btn-outline-danger:hover { background: #fef3f2; border-color: #b42318; }
.ss-legacy .btn-success { background: #067647; color: #fff; } .ss-legacy .btn-lg { min-height: 46px; padding: 0 22px; font-size: 15px; } .ss-legacy .btn-sm { min-height: 30px; padding: 0 10px; font-size: 12.5px; }
.ss-legacy .form-control, .ss-legacy .form-select { display: block; width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid #d0d5dd; border-radius: 9px; background: #fff; color: #101828; font: inherit; }
.ss-legacy .form-label, .ss-legacy label.control-label { display: inline-block; margin-bottom: 6px; font-weight: 600; font-size: 13.5px; color: #101828; }
.ss-legacy .form-group, .ss-legacy .form-floating, .ss-legacy .mb-3 { margin-bottom: 16px; }
.ss-legacy .form-check { display: flex; gap: 8px; align-items: center; } .ss-legacy .form-check-input { accent-color: #1d4ed8; }
.ss-legacy .card { background: #fff; border: 1px solid #e4e7ec; border-radius: 14px; box-shadow: var(--shadow-1); overflow: hidden; }
.ss-legacy .card-header { padding: 14px 20px; border-bottom: 1px solid #e4e7ec; background: #f9fafb; font-weight: 600; } .ss-legacy .card-body { padding: 20px; } .ss-legacy .card-footer { padding: 12px 20px; border-top: 1px solid #e4e7ec; background: #f9fafb; }
.ss-legacy .table { width: 100%; border-collapse: collapse; } .ss-legacy .table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #667085; background: #f9fafb; padding: 10px 14px; border-bottom: 1px solid #e4e7ec; } .ss-legacy .table td { padding: 12px 14px; border-bottom: 1px solid #e4e7ec; }
.ss-legacy .alert { padding: 14px 16px; border-radius: 10px; border: 1px solid #e4e7ec; margin-bottom: 16px; } .ss-legacy .alert-success { background: #ecfdf3; color: #067647; border-color: #abefc6; } .ss-legacy .alert-danger { background: #fef3f2; color: #b42318; border-color: #fecdca; } .ss-legacy .alert-warning { background: #fffaeb; color: #b54708; border-color: #fedf89; } .ss-legacy .alert-info { background: #eff8ff; color: #175cd3; border-color: #b2ddff; }
.ss-legacy .badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: #f2f4f7; color: #344054; }
.ss-legacy .list-unstyled { list-style: none; padding-left: 0; }
.ss-legacy .breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; font-size: 13px; } .ss-legacy .breadcrumb-item + .breadcrumb-item::before { content: "/"; margin-right: 6px; opacity: .6; }
.ss-legacy .nav-pills { list-style: none; padding: 0; display: grid; gap: 2px; } .ss-legacy .nav-pills .nav-link { display: block; padding: 8px 12px; border-radius: 8px; color: #344054; } .ss-legacy .nav-pills .nav-link.active { background: #eef2ff; color: #1d4ed8; font-weight: 600; }
.ss-legacy .text-danger.field-validation-error, .ss-legacy .field-validation-error { color: #b42318; font-size: 12.5px; }

/* Template-era page banners (pq-*) → v2 hero band */
.ss-legacy .pq-breadcrumb { background: var(--gradient-hero) !important; color: #fff; padding: 56px 0 44px; }
.ss-legacy .pq-breadcrumb h1, .ss-legacy .pq-breadcrumb a, .ss-legacy .pq-breadcrumb li { color: #fff !important; }
.ss-legacy .pq-breadcrumb h1 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 800; letter-spacing: -.03em; }
.ss-legacy section { scroll-margin-top: 80px; }


/* Brand selection colour */
::selection { background: rgba(29, 78, 216, .18); color: inherit; }