:root {
            --bg: #f4f9fd;
            --surface: #fff;
            --line: #d5e4ef;
            --ink: #17283c;
            --muted: #5a6d80;
            --brand: #0369a1;
            --brand-dark: #0f3f64;
            --soft: #eaf5fb;
        }
        * { box-sizing: border-box; }
        body {
            margin: 0;
            background:
                radial-gradient(circle at 8% -10%, #dcefff 0%, transparent 44%),
                radial-gradient(circle at 95% -15%, #d7f4ff 0%, transparent 36%),
                var(--bg);
            color: var(--ink);
            font-family: "Cairo", "Segoe UI", Tahoma, sans-serif;
            overflow-x: hidden;
        }
        .wrap { max-width: 1140px; margin: 0 auto; padding: 22px 14px 38px; }
        .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
        .top a { color: var(--brand); text-decoration: none; font-weight: 700; }
        .catalog-breadcrumbs {
            margin-top: 10px;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 7px;
            color: #4e677c;
            font-size: 12px;
        }
        .catalog-breadcrumbs a {
            color: #0f5b86;
            text-decoration: none;
            font-weight: 700;
            border-radius: 999px;
            background: #edf7fe;
            border: 1px solid #cee2ef;
            padding: 4px 9px;
        }
        .catalog-breadcrumbs a:hover { background: #e6f3fd; }
        .catalog-breadcrumbs .sep { color: #88a0b2; font-weight: 700; }
        .catalog-breadcrumbs strong { color: #1a4f72; font-weight: 800; }

        .hero {
            margin-top: 8px;
            background: linear-gradient(130deg, #0e496f 0%, #0e6ea2 52%, #14a1cd 100%);
            color: #fff;
            border-radius: 16px;
            padding: 18px;
            box-shadow: 0 14px 28px rgba(10, 63, 95, .22);
        }
        .hero-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.28fr) minmax(280px, .92fr);
            gap: 16px;
            align-items: stretch;
        }
        .hero-copy {
            min-width: 0;
        }
        .hero h1 { margin: 0; font-size: clamp(23px, 4vw, 35px); }
        .hero p { margin: 8px 0 0; opacity: .95; line-height: 1.7; }
        .hero-trust {
            margin-top: 10px;
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }
        .hero-trust-pill {
            border-radius: 999px;
            border: 1px solid rgba(255,255,255,.42);
            background: rgba(255,255,255,.13);
            color: #fff;
            padding: 6px 10px;
            font-size: 12px;
            font-weight: 800;
        }
        .hero-kpis {
            margin-top: 12px;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
            gap: 8px;
        }
        .hero-kpi {
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,.36);
            background: rgba(255,255,255,.14);
            padding: 8px 10px;
            display: grid;
            gap: 3px;
        }
        .hero-kpi-label {
            font-size: 11px;
            font-weight: 700;
            opacity: .86;
        }
        .hero-kpi-value {
            font-size: 14px;
            font-weight: 900;
            line-height: 1.3;
        }
        .hero-actions {
            margin-top: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        .hero-action-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 36px;
            padding: 0 12px;
            border-radius: 999px;
            border: 1px solid rgba(255,255,255,.62);
            background: rgba(255,255,255,.2);
            color: #fff;
            text-decoration: none;
            font-size: 12px;
            font-weight: 900;
            white-space: nowrap;
        }
        .hero-action-btn:hover {
            background: rgba(255,255,255,.28);
        }
        .hero-media,
        .hero-media-static {
            position: relative;
            min-height: 240px;
            border-radius: 16px;
            overflow: hidden;
            border: 1px solid rgba(255,255,255,.3);
            background: rgba(7, 40, 68, .18);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
            display: block;
            text-decoration: none;
            color: #fff;
        }
        .hero-media img,
        .hero-media-static img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            background: linear-gradient(130deg, rgba(255,255,255,.16), rgba(255,255,255,.04));
        }
        .hero-media::after,
        .hero-media-static::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(7, 36, 60, .08), rgba(5, 28, 48, .78));
        }
        .hero-media-overlay {
            position: absolute;
            inset-inline: 14px;
            inset-block-end: 14px;
            z-index: 1;
            display: grid;
            gap: 5px;
        }
        .hero-media-eyebrow {
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .03em;
            opacity: .86;
            text-transform: uppercase;
        }
        .hero-media-title {
            font-size: 17px;
            font-weight: 900;
            line-height: 1.35;
        }
        .hero-media-caption {
            font-size: 12px;
            line-height: 1.65;
            color: rgba(255,255,255,.92);
        }
        .hero-media-badge {
            position: absolute;
            inset-inline-start: 14px;
            inset-block-start: 14px;
            z-index: 1;
            display: inline-flex;
            align-items: center;
            min-height: 30px;
            padding: 0 10px;
            border-radius: 999px;
            border: 1px solid rgba(255,255,255,.28);
            background: rgba(8, 35, 57, .52);
            color: #fff;
            font-size: 11px;
            font-weight: 900;
            backdrop-filter: blur(8px);
        }
        .map-live-summary {
            margin-top: 12px;
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,.34);
            background: rgba(5, 45, 73, .24);
            padding: 10px;
            display: grid;
            gap: 8px;
        }
        .map-live-summary-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            font-size: 12px;
            font-weight: 800;
            color: rgba(255,255,255,.95);
        }
        .map-live-summary-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 7px;
        }
        .map-live-summary-card {
            border-radius: 10px;
            border: 1px solid rgba(255,255,255,.26);
            background: rgba(255,255,255,.12);
            padding: 7px 9px;
            display: grid;
            gap: 2px;
        }
        .map-live-summary-k {
            font-size: 11px;
            opacity: .86;
            font-weight: 700;
        }
        .map-live-summary-v {
            font-size: 13px;
            font-weight: 900;
            line-height: 1.3;
            color: #fff;
        }
        .catalog-phase-disclosure {
            margin-top: 12px;
        }
        .catalog-phase-details {
            border: 1px solid #d3e4ef;
            border-radius: 18px;
            background: linear-gradient(180deg, #ffffff, #f7fbff);
            box-shadow: 0 10px 20px rgba(6, 58, 92, .08);
            overflow: hidden;
        }
        .catalog-phase-summary {
            list-style: none;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 12px 14px;
            cursor: pointer;
        }
        .catalog-phase-summary::-webkit-details-marker { display: none; }
        .catalog-phase-summary-main {
            min-width: 0;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .catalog-phase-summary-icon {
            width: 38px;
            height: 38px;
            flex: 0 0 38px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            background: linear-gradient(145deg, #0f4a71, #138bc0);
            color: #fff;
            font-size: 18px;
            font-weight: 900;
            box-shadow: 0 10px 20px rgba(10, 69, 104, .18);
        }
        .catalog-phase-summary-copy {
            min-width: 0;
            display: grid;
            gap: 3px;
        }
        .catalog-phase-summary-copy strong {
            color: #143d59;
            font-size: 16px;
            line-height: 1.35;
        }
        .catalog-phase-summary-copy span {
            color: #5b7185;
            font-size: 13px;
            line-height: 1.6;
        }
        .catalog-phase-summary-caret {
            width: 12px;
            height: 12px;
            border-inline-end: 2px solid #0e668f;
            border-bottom: 2px solid #0e668f;
            transform: rotate(45deg);
            transition: transform .18s ease;
            margin-inline-start: 8px;
            flex: 0 0 auto;
        }
        .catalog-phase-details[open] .catalog-phase-summary {
            border-bottom: 1px solid #dbe8f2;
        }
        .catalog-phase-details[open] .catalog-phase-summary-caret {
            transform: rotate(225deg);
        }
        .catalog-phase-body {
            padding: 14px;
        }
        .catalog-phase-grid {
            margin-top: 0;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
        }
        .catalog-phase-panel {
            border: 1px solid #d3e4ef;
            border-radius: 16px;
            background: linear-gradient(180deg, #ffffff, #f7fbff);
            box-shadow: 0 10px 20px rgba(6, 58, 92, .08);
            padding: 14px;
            display: grid;
            gap: 12px;
        }
        .catalog-phase-head {
            display: grid;
            gap: 5px;
        }
        .catalog-phase-eyebrow {
            font-size: 11px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: .05em;
            color: #0f6d9f;
        }
        .catalog-phase-head h2,
        .catalog-phase-head h3 {
            margin: 0;
            color: #143d59;
            font-size: 20px;
            line-height: 1.35;
        }
        .catalog-phase-head p {
            margin: 0;
            color: #567084;
            font-size: 14px;
            line-height: 1.7;
        }
        .catalog-phase-links,
        .catalog-phase-trust-grid {
            display: grid;
            gap: 8px;
        }
        .catalog-phase-link,
        .catalog-phase-trust-card {
            border-radius: 14px;
            border: 1px solid #d6e6f1;
            background: #f8fcff;
            padding: 11px 12px;
            text-decoration: none;
            color: inherit;
            display: grid;
            gap: 5px;
            transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
        }
        .catalog-phase-link:hover,
        .catalog-phase-trust-card:hover {
            transform: translateY(-1px);
            border-color: #8fc6e1;
            box-shadow: 0 10px 20px rgba(8, 60, 92, .1);
        }
        .catalog-phase-link small,
        .catalog-phase-trust-card small {
            color: #0f77a8;
            font-size: 11px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: .04em;
        }
        .catalog-phase-link strong,
        .catalog-phase-trust-card strong {
            color: #163e5a;
            font-size: 15px;
            line-height: 1.45;
        }
        .catalog-phase-link p,
        .catalog-phase-trust-card p {
            margin: 0;
            color: #5a7083;
            font-size: 13px;
            line-height: 1.65;
        }
        .catalog-phase-link span,
        .catalog-phase-trust-card span {
            color: #0d648f;
            font-size: 12px;
            font-weight: 900;
        }
        .catalog-promise-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
            gap: 8px;
        }
        .catalog-promise-item {
            border-radius: 12px;
            border: 1px solid #d8e7f1;
            background: #f7fbff;
            padding: 10px 11px;
            display: grid;
            gap: 4px;
        }
        .catalog-promise-item strong {
            color: #154160;
            font-size: 14px;
            line-height: 1.45;
        }
        .catalog-promise-item p {
            margin: 0;
            color: #5c7285;
            font-size: 12px;
            line-height: 1.65;
        }
        .catalog-steps {
            display: grid;
            gap: 8px;
        }
        .catalog-step {
            display: grid;
            grid-template-columns: 34px minmax(0, 1fr);
            gap: 9px;
            align-items: start;
        }
        .catalog-step-index {
            width: 34px;
            height: 34px;
            border-radius: 12px;
            background: linear-gradient(140deg, #0f4a71, #138bc0);
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            font-weight: 900;
        }
        .catalog-step-copy {
            display: grid;
            gap: 3px;
        }
        .catalog-step-copy strong {
            color: #153f5d;
            font-size: 14px;
            line-height: 1.45;
        }
        .catalog-step-copy p {
            margin: 0;
            color: #587084;
            font-size: 13px;
            line-height: 1.65;
        }
        .area-intro {
            margin-top: 12px;
            border: 1px solid #d3e5f1;
            border-radius: 14px;
            background: linear-gradient(180deg, #ffffff, #f6fbff);
            box-shadow: 0 8px 18px rgba(6, 58, 92, .08);
            padding: 12px;
        }
        .area-intro h2 {
            margin: 0 0 6px;
            font-size: 18px;
        .area-intro {
            margin-top: 12px;
            border: 1px solid #d3e5f1;
            border-radius: 14px;
            background: linear-gradient(180deg, #ffffff, #f6fbff);
            box-shadow: 0 8px 18px rgba(6, 58, 92, .08);
            padding: 12px;
        }
        .area-intro h2 {
            margin: 0 0 6px;
            font-size: 18px;
            color: #143f5e;
            line-height: 1.4;
        }
        .area-intro p {
            margin: 0;
            color: #4f6a7f;
            font-size: 14px;
            line-height: 1.75;
        }
        .catalog-brand-hubs {
            margin-top: 12px;
            border: 1px solid #d2e4ef;
            border-radius: 16px;
            background: linear-gradient(180deg, #ffffff, #f7fbff);
            box-shadow: 0 10px 20px rgba(6, 58, 92, .08);
            padding: 14px;
            display: grid;
            gap: 12px;
        }
        .catalog-brand-head {
            display: grid;
            gap: 5px;
        }
        .catalog-brand-eyebrow {
            display: inline-flex;
            width: fit-content;
            padding: 4px 10px;
            border-radius: 999px;
            background: #ecf8ff;
            color: #0d618f;
            font-size: 11px;
            font-weight: 800;
        }
        .catalog-brand-head h3 {
            margin: 0;
            color: #133f5d;
            font-size: 20px;
            line-height: 1.4;
        }
        .catalog-brand-head p {
            margin: 0;
            color: #587489;
            font-size: 14px;
            line-height: 1.75;
        }
        .catalog-brand-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 10px;
        }
        .catalog-growth {
            margin-top: 12px;
            border: 1px solid #d2e4ef;
            border-radius: 16px;
            background: linear-gradient(180deg, #ffffff, #f7fbff);
            box-shadow: 0 10px 20px rgba(6, 58, 92, .08);
            padding: 14px;
            display: grid;
            gap: 12px;
        }
        .catalog-growth-head {
            display: grid;
            gap: 5px;
        }
        .catalog-growth-eyebrow {
            display: inline-flex;
            width: fit-content;
            padding: 4px 10px;
            border-radius: 999px;
            background: #e8f5ff;
            color: #0f5a85;
            font-size: 11px;
            font-weight: 800;
        }
        .catalog-growth-head h3 {
            margin: 0;
            color: #133f5d;
            font-size: 20px;
            line-height: 1.4;
        }
        .catalog-growth-head p {
            margin: 0;
            color: #587489;
            font-size: 14px;
            line-height: 1.75;
        }
        .catalog-growth-subtitle,
        .catalog-growth-guides h4 {
            margin: 0;
            color: #164c70;
            font-size: 14px;
            font-weight: 800;
        }
        .catalog-growth-grid,
        .catalog-growth-guide-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 10px;
        }
        .catalog-growth-card,
        .catalog-growth-guide {
            display: grid;
            gap: 8px;
            text-decoration: none;
            border: 1px solid #d6e7f2;
            border-radius: 14px;
            background: #fff;
            padding: 12px;
            box-shadow: 0 8px 16px rgba(6, 58, 92, .06);
            transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
        }
        .catalog-growth-card:hover,
        .catalog-growth-guide:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 24px rgba(6, 58, 92, .10);
            border-color: #bcd8ea;
        }
        .catalog-growth-card strong,
        .catalog-growth-guide strong {
            color: #123f5d;
            font-size: 15px;
            line-height: 1.55;
        }
        .catalog-growth-card p,
        .catalog-growth-guide p {
            margin: 0;
            color: #5a7488;
            font-size: 13px;
            line-height: 1.7;
        }
        .catalog-growth-card span,
        .catalog-growth-guide span {
            color: #0f5c89;
            font-size: 12px;
            font-weight: 800;
        }
        .catalog-growth-guides {
            display: grid;
            gap: 10px;
        }
        .area-faq {
            margin-top: 12px;
            border: 1px solid #d2e4ef;
            border-radius: 14px;
            background: #fff;
            box-shadow: 0 8px 18px rgba(6, 58, 92, .08);
            padding: 12px;
        }
        .area-faq h3 {
            margin: 0 0 8px;
            color: #134465;
            font-size: 18px;
        }
        .area-faq details {
            border: 1px solid #d8e7f1;
            border-radius: 10px;
            background: #f9fdff;
            padding: 8px 10px;
        }
        .area-faq details + details {
            margin-top: 7px;
        }
        .area-faq summary {
            cursor: pointer;
            font-weight: 800;
            color: #195376;
            line-height: 1.55;
        }
        .area-faq p {
            margin: 6px 0 0;
            color: #547186;
            font-size: 14px;
            line-height: 1.7;
        }
        }
        .area-links {
            margin-top: 12px;
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: 14px;
            padding: 10px;
            box-shadow: 0 8px 18px rgba(6, 58, 92, .08);
            display: grid;
            gap: 8px;
        }
        .area-links-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            flex-wrap: wrap;
        }
        .area-links-title {
            font-size: 13px;
            font-weight: 800;
            color: #164d70;
        }
        .area-links-current {
            border: 1px solid #cfe2ef;
            border-radius: 999px;
            background: #f5fbff;
            color: #1b5a7f;
            padding: 5px 10px;
            font-size: 12px;
            font-weight: 700;
            white-space: nowrap;
        }
        .area-links-list {
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
        }
        .area-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            border: 1px solid #c9ddec;
            border-radius: 999px;
            background: #f6fcff;
            color: #0f4e74;
            text-decoration: none;
            padding: 7px 11px;
            font-size: 12px;
            font-weight: 800;
            transition: all .18s ease;
        }
        .area-link:hover {
            border-color: #9ecde8;
            background: #edf8ff;
            transform: translateY(-1px);
        }
        .area-link.is-active {
            border-color: #0f6596;
            background: linear-gradient(125deg, #0d4f78, #0f73a8);
            color: #fff;
            box-shadow: 0 8px 14px rgba(8, 63, 95, .20);
        }
        .area-link-count {
            border: 1px solid rgba(255,255,255,.36);
            border-radius: 999px;
            padding: 1px 6px;
            font-size: 11px;
            font-weight: 800;
            line-height: 1.2;
            background: rgba(255,255,255,.25);
        }
        .area-link:not(.is-active) .area-link-count {
            border-color: #bfd9ea;
            background: #ffffff;
            color: #2a5c7b;
        }

        .toolbar {
            margin-top: 12px;
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: 14px;
            padding: 12px;
            display: grid;
            gap: 10px;
            position: static;
            box-shadow: 0 8px 18px rgba(6, 58, 92, .08);
        }
        .toolbar-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 10px;
        }
        .toolbar label { display: grid; gap: 6px; }
        .toolbar label span { font-size: 12px; font-weight: 700; color: #4e6276; }
        .toolbar input, .toolbar select {
            width: 100%;
            border: 1px solid #c9dceb;
            border-radius: 9px;
            padding: 9px 10px;
            font: inherit;
            color: #173049;
            background: #fcfeff;
        }
        .toolbar-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
        .toolbar-toggle {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            border: 1px solid #cfe1ed;
            border-radius: 999px;
            background: #f7fcff;
            color: #114766;
            padding: 7px 10px;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
        }
        .toolbar-toggle input {
            width: 15px;
            height: 15px;
            accent-color: #0d6ea1;
        }
        .saved-pill {
            border: 1px solid #cfe2ef;
            background: #f7fcff;
            color: #1a5072;
            border-radius: 999px;
            padding: 7px 10px;
            font-size: 12px;
            font-weight: 800;
        }
        .budget-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
        }
        .budget-chip {
            border: 1px solid #c8dcec;
            background: #f4fbff;
            color: #134a6b;
            border-radius: 999px;
            padding: 7px 11px;
            font: inherit;
            font-size: 12px;
            font-weight: 800;
            cursor: pointer;
            transition: all .2s ease;
        }
        .budget-chip.is-active {
            border-color: #0e618f;
            color: #fff;
            background: linear-gradient(125deg, #0c466c, #0d7eb9);
            box-shadow: 0 8px 16px rgba(9, 67, 101, .22);
        }
        .service-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            padding-top: 2px;
        }
        .service-opt {
            display: inline-flex;
            align-items: center;
            position: relative;
            cursor: pointer;
        }
        .service-opt input {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            margin: 0;
            opacity: 0;
            cursor: pointer;
        }
        .service-opt > span {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            border: 1px solid #d0e2ee;
            border-radius: 999px;
            background: #f7fcff;
            color: #114766;
            padding: 5px 9px;
            font-size: 12px;
            font-weight: 700;
            transition: all .2s ease;
        }
        .service-opt input:checked + span {
            border-color: #0d6ea1;
            background: linear-gradient(130deg, #0d4b73, #0d80b8);
            color: #fff;
            box-shadow: 0 8px 16px rgba(9, 67, 101, .22);
        }
        .service-opt input:focus-visible + span {
            outline: 2px solid rgba(13, 110, 161, .45);
            outline-offset: 2px;
        }
        .service-opt .service-opt-box {
            border-radius: 12px;
            background: linear-gradient(145deg, #fbfdff, #f3f9fd);
            border-color: #cee2ee;
            padding: 7px 9px;
            gap: 7px;
        }
        .service-opt .service-opt-ico {
            width: 22px;
            height: 22px;
            border-radius: 7px;
            border: 1px solid #cde3f1;
            background: linear-gradient(135deg, #ffffff, #edf7fd);
            color: #0f5f88;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
        }
        .service-opt .service-opt-ico svg {
            width: 13px;
            height: 13px;
            display: block;
        }
        .service-opt .service-opt-text {
            line-height: 1.2;
            font-size: 12px;
            font-weight: 800;
        }
        .service-opt .service-opt-count {
            min-width: 18px;
            height: 18px;
            border-radius: 999px;
            border: 1px solid #c3dae8;
            background: #edf6fc;
            color: #0d4f77;
            font-size: 10px;
            font-weight: 900;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding-inline: 4px;
            line-height: 1;
        }
        .service-opt input:checked + .service-opt-box .service-opt-ico {
            border-color: rgba(255, 255, 255, .6);
            background: rgba(255,255,255,.18);
            color: #fff;
        }
        .service-opt input:checked + .service-opt-box .service-opt-count {
            border-color: rgba(255,255,255,.55);
            background: rgba(255,255,255,.18);
            color: #fff;
        }
        .service-opt.conversion {
            background: #f5fbf7;
            border-color: #c9e5d3;
            color: #14532d;
        }
        .service-opt.conversion > span {
            background: #f5fbf7;
            border-color: #c9e5d3;
            color: #14532d;
        }
        .service-opt.conversion input:checked + span {
            border-color: #1f8a4e;
            background: linear-gradient(130deg, #0f6b3c, #1f8a4e);
            color: #fff;
            box-shadow: 0 8px 16px rgba(9, 98, 57, .2);
        }
        .toolbar-btn {
            border: 1px solid #c4deee;
            background: #eef7fc;
            color: #0b4f79;
            border-radius: 8px;
            padding: 8px 11px;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
        }
        .toolbar-stat { color: var(--muted); font-size: 13px; }
        .catalog-layout { margin-top: 12px; }
        .catalog-main { min-width: 0; }
        .grid { margin-top: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 10px; }
        .catalog-map {
            margin-top: 10px;
            border: 1px solid #d2e5f0;
            border-radius: 14px;
            background: #fff;
            box-shadow: 0 9px 20px rgba(12, 59, 89, .08);
            overflow: hidden;
            display: grid;
        }
        .map-head {
            padding: 10px 12px;
            border-bottom: 1px solid #dceaf3;
            background: #f4faff;
            display: grid;
            gap: 7px;
        }
        .map-head-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }
        .map-head strong {
            font-size: 14px;
            color: #11486c;
            display: block;
        }
        .map-head span {
            color: #587189;
            font-size: 12px;
        }
        .map-count {
            border: 1px solid #cfe2ef;
            background: #ffffff;
            color: #16577d;
            border-radius: 999px;
            padding: 5px 10px;
            font-size: 11px;
            font-weight: 800;
            white-space: nowrap;
        }
        .map-head-btn {
            border: 1px solid #c9deec;
            background: #eef7fd;
            color: #0f547a;
            border-radius: 999px;
            padding: 5px 11px;
            font-size: 11px;
            font-weight: 800;
            cursor: pointer;
        }
        .map-head-btn.is-active {
            border-color: #0e608f;
            background: #0f6ea3;
            color: #fff;
        }
        .map-head-btn.secondary {
            background: #f4fbff;
            color: #1f5b7c;
        }
        .map-head-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 6px;
            flex-wrap: wrap;
        }
        .map-canvas {
            position: relative;
            height: 300px;
            background:
                radial-gradient(circle at 10% 20%, rgba(255,255,255,.35), transparent 38%),
                radial-gradient(circle at 85% 12%, rgba(255,255,255,.25), transparent 36%),
                linear-gradient(145deg, #0d5f8f 0%, #1477ab 45%, #24a8c8 100%);
            border-bottom: 1px solid #dceaf3;
            overflow: hidden;
        }
        .map-leaflet {
            position: absolute;
            inset: 0;
            z-index: 1;
            background: linear-gradient(145deg, #0d5f8f 0%, #1477ab 45%, #24a8c8 100%);
        }
        .map-canvas.has-engine [data-map-point] {
            display: none;
        }
        .map-canvas.has-engine::after {
            opacity: .16;
        }
        .map-canvas.has-engine .leaflet-control-zoom a {
            color: #104260;
            font-weight: 800;
        }
        .map-canvas.has-engine .leaflet-control-attribution {
            background: rgba(255,255,255,.76);
            backdrop-filter: blur(2px);
            border-radius: 7px;
            margin: 0 8px 8px 0;
            padding: 1px 6px;
        }
        .map-engine-marker {
            background: transparent !important;
            border: 0 !important;
        }
        .map-engine-pin {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 44px;
            height: 28px;
            border-radius: 999px;
            border: 1px solid #daf0fb;
            background: rgba(255,255,255,.96);
            color: #0d3f5f;
            box-shadow: 0 10px 18px rgba(3, 43, 67, .2);
            font-size: 12px;
            font-weight: 900;
            padding-inline: 10px;
            letter-spacing: .2px;
            white-space: nowrap;
            transform: translateY(-4px);
        }
        .map-engine-marker.is-active .map-engine-pin,
        .map-engine-marker.is-hover .map-engine-pin {
            background: rgba(10, 70, 102, .96);
            color: #fff;
            border-color: #c2ecff;
            transform: translateY(-4px) scale(1.08);
        }
        .map-engine-marker.is-active {
            z-index: 820 !important;
        }
        .map-canvas.has-engine .marker-cluster-small,
        .map-canvas.has-engine .marker-cluster-medium,
        .map-canvas.has-engine .marker-cluster-large {
            background: rgba(17, 93, 132, .22);
        }
        .map-canvas.has-engine .marker-cluster-small div,
        .map-canvas.has-engine .marker-cluster-medium div,
        .map-canvas.has-engine .marker-cluster-large div {
            background: rgba(13, 78, 113, .9);
            color: #fff;
            border: 1px solid rgba(210, 241, 255, .9);
            font-weight: 800;
        }
        .map-canvas::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                linear-gradient(112deg, rgba(239, 250, 255, .22) 0%, rgba(239, 250, 255, 0) 35%),
                radial-gradient(ellipse at 66% 48%, rgba(228, 245, 255, .75) 0%, rgba(228, 245, 255, 0) 58%);
            pointer-events: none;
        }
        .map-canvas::after {
            content: "";
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px);
            background-size: 52px 52px;
            opacity: .33;
            pointer-events: none;
        }
        .map-point {
            position: absolute;
            left: calc(var(--x) * 1%);
            top: calc(var(--y) * 1%);
            transform: translate(-50%, -50%);
            border: 0;
            padding: 0;
            background: transparent;
            color: #fff;
            cursor: pointer;
            z-index: 2;
            transition: transform .18s ease;
        }
        .map-pin {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 44px;
            height: 28px;
            border-radius: 999px;
            border: 1px solid #daf0fb;
            background: rgba(255,255,255,.96);
            color: #0d3f5f;
            box-shadow: 0 10px 18px rgba(3, 43, 67, .2);
            font-size: 12px;
            font-weight: 900;
            padding-inline: 10px;
            letter-spacing: .2px;
        }
        .map-point.is-empty .map-pin {
            opacity: .27;
            transform: scale(.9);
        }
        .map-point:disabled {
            cursor: not-allowed;
        }
        .map-point.is-active .map-pin,
        .map-point.is-hover .map-pin {
            background: rgba(10, 70, 102, .96);
            color: #fff;
            border-color: #c2ecff;
            transform: scale(1.12);
        }
        .map-point.is-active,
        .map-point.is-hover {
            z-index: 8;
        }
        .map-preview {
            position: absolute;
            inset-inline: 12px;
            bottom: 12px;
            z-index: 9;
            display: grid;
            grid-template-columns: 78px minmax(0, 1fr);
            gap: 10px;
            border: 1px solid rgba(215, 239, 249, .95);
            border-radius: 12px;
            background: rgba(7, 37, 58, .9);
            box-shadow: 0 14px 22px rgba(6, 32, 52, .35);
            padding: 8px;
            color: #fff;
            backdrop-filter: blur(2px);
        }
        .map-preview-thumb {
            width: 100%;
            height: 72px;
            object-fit: cover;
            border-radius: 9px;
            border: 1px solid rgba(255,255,255,.25);
            background: #0a3b5b;
        }
        .map-preview-content {
            display: grid;
            gap: 4px;
            min-width: 0;
        }
        .map-preview-content strong {
            font-size: 13px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .map-preview-meta {
            font-size: 11px;
            color: #d5ebf7;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .map-preview-foot {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }
        .map-preview-price {
            font-size: 12px;
            font-weight: 900;
            color: #fff;
            white-space: nowrap;
        }
        .map-preview-link {
            border: 1px solid rgba(201, 234, 250, .95);
            border-radius: 999px;
            background: rgba(255,255,255,.18);
            color: #fff;
            text-decoration: none;
            font-size: 11px;
            font-weight: 800;
            padding: 5px 9px;
            white-space: nowrap;
        }
        .map-preview-link[aria-disabled="true"] {
            pointer-events: none;
            opacity: .5;
        }
        .map-list {
            display: grid;
            gap: 7px;
            padding: 10px;
            max-height: 292px;
            overflow: auto;
            counter-reset: maprank;
        }
        .map-row {
            border: 1px solid #d6e7f1;
            border-radius: 10px;
            background: #fbfeff;
            color: #163f5d;
            text-align: inherit;
            padding: 8px 9px 8px 34px;
            font: inherit;
            cursor: pointer;
            display: grid;
            gap: 4px;
            position: relative;
        }
        .map-row::before {
            counter-increment: maprank;
            content: counter(maprank);
            position: absolute;
            inset-inline-start: 9px;
            top: 9px;
            width: 18px;
            height: 18px;
            border-radius: 999px;
            border: 1px solid #cbe1ef;
            background: #f1f9fe;
            color: #1a587e;
            font-size: 11px;
            font-weight: 800;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
        }
        .map-row strong { font-size: 13px; }
        .map-row-line {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }
        .map-row-meta {
            font-size: 12px;
            color: #5c7388;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .map-row-price {
            font-size: 12px;
            font-weight: 800;
            color: #144f76;
            white-space: nowrap;
        }
        .map-row.is-active {
            border-color: #7cc8ea;
            background: #eef8ff;
            box-shadow: 0 0 0 2px rgba(124, 200, 234, .22);
        }
        .map-row.is-empty {
            opacity: .48;
        }
        .map-row:disabled {
            cursor: not-allowed;
        }
        .map-list-empty {
            border: 1px dashed #cfe3f0;
            border-radius: 10px;
            background: #f7fcff;
            color: #5d7488;
            font-size: 12px;
            padding: 10px;
        }
        @media (min-width: 1120px) {
            .catalog-layout.has-map {
                display: grid;
                grid-template-columns: minmax(0, 1.4fr) minmax(360px, .9fr);
                gap: 12px;
                align-items: start;
            }
            .catalog-map {
                margin-top: 0;
                position: sticky;
                top: 86px;
            }
        }
        @media (max-width: 680px) {
            .hero-grid,
            .catalog-phase-grid {
                grid-template-columns: 1fr;
            }
            .catalog-breadcrumbs {
                gap: 5px;
                font-size: 11px;
            }
            .hero-kpis {
                grid-template-columns: 1fr;
            }
            .area-links-head {
                flex-direction: column;
                align-items: flex-start;
            }
            .area-links-list {
                flex-wrap: nowrap;
                overflow-x: auto;
                padding-bottom: 2px;
                scrollbar-width: thin;
            }
            .area-link {
                white-space: nowrap;
            }
            .map-canvas {
                height: 264px;
            }
            .map-preview {
                grid-template-columns: 64px minmax(0, 1fr);
                padding: 7px;
            }
            .map-preview-thumb {
                height: 60px;
            }
            .map-row {
                padding-inline-start: 32px;
            }
        }
        .wrap.is-map-mode {
            max-width: none;
            padding: 10px 12px 24px;
        }
        .wrap.is-map-mode .top,
        .wrap.is-map-mode .catalog-breadcrumbs,
        .wrap.is-map-mode .hero,
        .wrap.is-map-mode .area-links,
        .wrap.is-map-mode .toolbar,
        .wrap.is-map-mode .compare-bar,
        .wrap.is-map-mode .catalog-layout {
            max-width: 1520px;
            margin-inline: auto;
        }
        .wrap.is-map-mode .hero {
            display: none;
        }
        .wrap.is-map-mode .catalog-phase-grid {
            display: none;
        }
        .wrap.is-map-mode .area-intro,
        .wrap.is-map-mode .area-faq {
            display: none;
        }
        .wrap.is-map-mode .toolbar {
            position: static;
        }
        .wrap.is-map-mode .toolbar.is-map-toolbar .toolbar-row {
            display: flex;
            flex-wrap: nowrap;
            gap: 8px;
            overflow-x: auto;
            padding-bottom: 2px;
            scrollbar-width: thin;
        }
        .wrap.is-map-mode .toolbar.is-map-toolbar .toolbar-row label {
            min-width: 170px;
            flex: 0 0 170px;
        }
        .wrap.is-map-mode .toolbar.is-map-toolbar .toolbar-actions {
            justify-content: flex-start;
        }
        .wrap.is-map-mode .toolbar.is-map-toolbar.is-collapsed .toolbar-advanced {
            display: none;
        }
        .toolbar-toggle-advanced {
            border: 1px solid #c4deee;
            background: #eef7fc;
            color: #0b4f79;
            border-radius: 8px;
            padding: 8px 11px;
            font-size: 13px;
            font-weight: 800;
            cursor: pointer;
        }
        .wrap.is-map-mode .catalog-layout.has-map {
            margin-top: 10px;
            position: relative;
            display: block;
            min-height: calc(100vh - 190px);
            border: 1px solid #cfe2ef;
            border-radius: 16px;
            background: #dceef8;
            overflow: hidden;
            box-shadow: 0 14px 32px rgba(8, 50, 76, .16);
        }
        .wrap.is-map-mode .catalog-layout.has-map .catalog-map {
            margin-top: 0;
            border: 0;
            border-radius: 0;
            box-shadow: none;
            min-height: calc(100vh - 190px);
        }
        .wrap.is-map-mode .catalog-layout.has-map .map-canvas {
            height: calc(100vh - 430px);
            min-height: 430px;
        }
        .wrap.is-map-mode .catalog-layout.has-map .map-list {
            max-height: 240px;
        }
        .wrap.is-map-mode .catalog-layout.has-map .catalog-main {
            position: absolute;
            inset-block-start: 12px;
            inset-inline-start: 12px;
            width: min(430px, 36vw);
            max-height: calc(100% - 24px);
            padding: 8px;
            border: 1px solid #c9deec;
            border-radius: 14px;
            background: rgba(255,255,255,.95);
            backdrop-filter: blur(7px);
            box-shadow: 0 18px 34px rgba(6, 43, 67, .23);
            overflow: auto;
            z-index: 12;
        }
        .wrap.is-map-mode .catalog-layout.has-map .grid {
            grid-template-columns: 1fr;
            gap: 8px;
        }
        .wrap.is-map-mode .catalog-layout.has-map .card {
            padding: 10px;
            border-radius: 12px;
        }
        .wrap.is-map-mode .catalog-layout.has-map .card-media {
            margin: -10px -10px 2px;
        }
        .wrap.is-map-mode .catalog-layout.has-map .card-media img {
            height: 138px;
        }
        .wrap.is-map-mode .catalog-layout.has-map .card p,
        .wrap.is-map-mode .catalog-layout.has-map .card-summary,
        .wrap.is-map-mode .catalog-layout.has-map .card-reasons,
        .wrap.is-map-mode .catalog-layout.has-map .card-thumbs {
            display: none;
        }
        .map-mobile-toggle {
            display: none;
        }
        .map-mobile-toggle .map-mobile-btn {
            border: 1px solid #c9deec;
            background: #f4fbff;
            color: #0f4f75;
            border-radius: 999px;
            padding: 7px 13px;
            font-size: 12px;
            font-weight: 900;
            cursor: pointer;
        }
        .map-mobile-toggle .map-mobile-btn.is-active {
            border-color: #0f6b9c;
            background: #0f6ea3;
            color: #fff;
        }
        @media (max-width: 980px) {
            .wrap.is-map-mode {
                padding: 8px 8px 84px;
            }
            .wrap.is-map-mode .catalog-layout.has-map {
                min-height: calc(100vh - 170px);
            }
            .wrap.is-map-mode .catalog-layout.has-map .catalog-map {
                min-height: calc(100vh - 170px);
            }
            .wrap.is-map-mode .catalog-layout.has-map .map-canvas {
                height: calc(100vh - 350px);
                min-height: 310px;
            }
            .wrap.is-map-mode .catalog-layout.has-map .catalog-main {
                inset-inline: 8px;
                inset-block-start: auto;
                inset-block-end: 8px;
                width: auto;
                max-height: min(58vh, 520px);
                transform: translateY(calc(100% + 16px));
                transition: transform .22s ease;
            }
            .wrap.is-map-mode[data-map-mobile-panel="list"] .catalog-layout.has-map .catalog-main {
                transform: translateY(0);
            }
            .wrap.is-map-mode[data-map-mobile-panel="map"] .catalog-layout.has-map .catalog-main {
                pointer-events: none;
            }
            .wrap.is-map-mode[data-map-mobile-panel="list"] .catalog-layout.has-map .catalog-main {
                pointer-events: auto;
            }
            .wrap.is-map-mode .map-mobile-toggle {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                position: fixed;
                inset-inline-start: 50%;
                transform: translateX(-50%);
                bottom: 12px;
                z-index: 40;
                border: 1px solid #c4dbeb;
                border-radius: 999px;
                background: rgba(255,255,255,.95);
                box-shadow: 0 14px 28px rgba(6, 41, 63, .22);
                padding: 5px;
            }
        }
        .card {
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: 14px;
            padding: 14px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            transition: transform .18s ease, box-shadow .18s ease;
        }
        .card:hover { transform: translateY(-2px); box-shadow: 0 11px 24px rgba(15, 63, 100, .10); }
        .card.is-map-active {
            border-color: #67bfe5;
            box-shadow: 0 0 0 2px rgba(103, 191, 229, .22), 0 15px 28px rgba(16, 75, 109, .16);
            transform: translateY(-2px);
        }
        .card-media {
            display: block;
            margin: -14px -14px 2px;
            border-radius: 13px 13px 0 0;
            overflow: hidden;
            border-bottom: 1px solid #dce9f2;
            background: #e6f2fa;
            position: relative;
        }
        .card-media-link {
            display: block;
        }
        .card-media img {
            width: 100%;
            height: 180px;
            object-fit: cover;
            display: block;
        }
        .card-rating {
            position: absolute;
            top: 8px;
            inset-inline-start: 8px;
            border: 1px solid rgba(255,255,255,.8);
            border-radius: 999px;
            background: rgba(255,255,255,.9);
            color: #173f5f;
            font-size: 11px;
            font-weight: 900;
            padding: 4px 8px;
            z-index: 2;
        }
        .card-best {
            position: absolute;
            top: 34px;
            inset-inline-start: 8px;
            border: 1px solid rgba(239, 208, 134, .96);
            border-radius: 999px;
            background: rgba(255, 243, 207, .97);
            color: #6f4700;
            font-size: 10px;
            font-weight: 900;
            padding: 4px 8px;
            z-index: 2;
        }
        .card-status {
            position: absolute;
            bottom: 8px;
            inset-inline-start: 8px;
            border-radius: 999px;
            border: 1px solid rgba(255,255,255,.65);
            background: rgba(10, 41, 61, .77);
            color: #fff;
            font-size: 11px;
            font-weight: 800;
            padding: 4px 9px;
            z-index: 2;
            letter-spacing: .2px;
        }
        .card-status.ok { background: rgba(7, 115, 74, .88); }
        .card-status.warn { background: rgba(165, 93, 16, .9); }
        .card-status.progress { background: rgba(54, 93, 125, .88); }
        .card-trust {
            position: absolute;
            inset-inline-end: 8px;
            bottom: 8px;
            display: flex;
            flex-direction: column;
            gap: 5px;
            align-items: flex-end;
            z-index: 2;
        }
        .trust-chip {
            border-radius: 999px;
            border: 1px solid rgba(255,255,255,.7);
            background: rgba(4, 74, 52, .88);
            color: #fff;
            font-size: 10px;
            font-weight: 800;
            padding: 3px 8px;
            letter-spacing: .2px;
        }
        .trust-chip.payment { background: rgba(11, 72, 116, .9); }
        .trust-chip.confirm { background: rgba(9, 110, 64, .92); }
        .card-compare {
            position: absolute;
            top: 40px;
            inset-inline-end: 8px;
            border: 1px solid rgba(255,255,255,.8);
            border-radius: 999px;
            background: rgba(10, 34, 52, .62);
            color: #fff;
            font-size: 11px;
            font-weight: 800;
            padding: 4px 8px;
            cursor: pointer;
            z-index: 2;
        }
        .card-compare.is-selected {
            background: rgba(5, 111, 157, .95);
            border-color: #a7e6ff;
        }
        .card-save {
            position: absolute;
            top: 8px;
            inset-inline-start: auto;
            inset-inline-end: 8px;
            border: 1px solid rgba(255,255,255,.82);
            border-radius: 999px;
            background: rgba(10, 34, 52, .62);
            color: #fff;
            font-size: 11px;
            font-weight: 800;
            padding: 4px 8px;
            cursor: pointer;
            z-index: 2;
        }
        .card-save.is-saved {
            background: rgba(4, 107, 74, .94);
            border-color: #b8f0da;
        }
        .card-thumbs {
            margin-top: 5px;
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 5px;
        }
        .card-thumbs img {
            width: 100%;
            aspect-ratio: 4/3;
            object-fit: cover;
            border-radius: 7px;
            border: 1px solid #d6e6f1;
            background: #eef7fd;
            display: block;
        }
        .card h2 { margin: 0; font-size: 19px; line-height: 1.35; }
        .card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
        .card-summary {
            margin: 1px 0 0;
            color: #173c58;
            font-size: 13px;
            font-weight: 800;
            line-height: 1.65;
        }
        .card-reasons {
            display: grid;
            gap: 6px;
        }
        .card-reason-row {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        .card-reason {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            border-radius: 999px;
            border: 1px solid #d6e7f2;
            background: #f7fbff;
            color: #1a4d6c;
            padding: 5px 9px;
            font-size: 12px;
            font-weight: 800;
            line-height: 1.35;
        }
        .card-reason::before {
            content: "*";
            color: #0a6a95;
            font-size: 15px;
            line-height: 1;
        }
        .tags { display: flex; flex-wrap: wrap; gap: 6px; }
        .tag {
            font-size: 12px;
            font-weight: 700;
            color: #0d4f77;
            background: var(--soft);
            border: 1px solid #cde2ef;
            border-radius: 999px;
            padding: 4px 9px;
        }
        .tag.amenity {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding-inline: 7px 9px;
        }
        .tag.amenity .tag-ico {
            width: 14px;
            height: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #0f628e;
            flex: 0 0 auto;
        }
        .tag.amenity .tag-ico svg {
            width: 14px;
            height: 14px;
            display: block;
        }
        .tag.star { background: #fff5dc; border-color: #f0d79a; color: #7b5204; }
        .tag.best { background: #fff5dc; border-color: #f0d79a; color: #7b5204; }
        .meta { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
        .price { color: var(--brand-dark); font-weight: 800; font-size: 16px; }
        .meta-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
        .btn {
            text-decoration: none;
            background: linear-gradient(120deg, var(--brand-dark), var(--brand));
            color: #fff;
            border-radius: 8px;
            padding: 8px 11px;
            font-weight: 700;
            font-size: 13px;
            white-space: nowrap;
        }
        .btn-outline {
            text-decoration: none;
            background: #eef7fd;
            color: #0f4f76;
            border: 1px solid #bfd8e8;
            border-radius: 8px;
            padding: 8px 11px;
            font-weight: 700;
            font-size: 13px;
            white-space: nowrap;
        }
        .compare-bar {
            margin-top: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            flex-wrap: wrap;
            border: 1px solid #b9d9eb;
            border-radius: 12px;
            background: #ffffff;
            box-shadow: 0 9px 20px rgba(8, 44, 69, .12);
            padding: 10px;
        }
        .compare-summary { font-size: 13px; color: #21465f; font-weight: 800; }
        .compare-actions { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
        .compare-btn {
            border: 1px solid #0f6391;
            border-radius: 8px;
            background: linear-gradient(120deg, var(--brand-dark), var(--brand));
            color: #fff;
            min-height: 34px;
            padding: 0 10px;
            font: inherit;
            font-size: 12px;
            font-weight: 800;
            cursor: pointer;
        }
        .compare-btn.light {
            border-color: #c8ddec;
            background: #f2f9ff;
            color: #1c4f72;
        }
        .compare-modal {
            position: fixed;
            inset: 0;
            z-index: 1300;
            display: grid;
            place-items: center;
            background: rgba(4, 18, 31, .72);
            padding: 12px;
        }
        .compare-modal[hidden] { display: none; }
        .compare-modal-card {
            width: min(1080px, 100%);
            max-height: calc(100vh - 24px);
            overflow: auto;
            border: 1px solid #c5dced;
            border-radius: 14px;
            background: #fff;
            box-shadow: 0 20px 44px rgba(8, 44, 69, .28);
        }
        .compare-modal-head {
            position: sticky;
            top: 0;
            z-index: 3;
            background: #f6fbff;
            border-bottom: 1px solid #d9e8f2;
            padding: 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }
        .compare-modal-head h3 { margin: 0; color: #123a57; font-size: 20px; }
        .compare-grid {
            padding: 12px;
            display: grid;
            gap: 10px;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        }
        .compare-item {
            border: 1px solid #d4e5f0;
            border-radius: 12px;
            overflow: hidden;
            background: #fbfeff;
        }
        .compare-item img {
            width: 100%;
            height: 150px;
            object-fit: cover;
            display: block;
            border-bottom: 1px solid #dbe8f2;
            background: #edf6fc;
        }
        .compare-item-body { padding: 10px; display: grid; gap: 6px; }
        .compare-item h4 { margin: 0; color: #163d5a; font-size: 16px; line-height: 1.35; }
        .compare-metric { font-size: 13px; color: #456278; line-height: 1.55; }
        .empty { margin-top: 12px; background: #ebf5fb; border: 1px dashed #bfd8e8; border-radius: 12px; padding: 12px; color: var(--muted); }
        .empty[data-js-empty="hidden"] { display: none; }
        .sb-media-shell {
            position: relative;
            overflow: hidden;
        }
        .sb-media-shell::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.58) 48%, rgba(255,255,255,0) 100%);
            transform: translateX(-120%);
            opacity: 0;
            pointer-events: none;
            z-index: 1;
        }
        .sb-media-shell.is-media-loading::before {
            opacity: 1;
            animation: sbCatalogMediaShimmer 1.05s linear infinite;
        }
        .sb-media-shell.is-media-loading > img,
        img.sb-media-inline.is-media-loading {
            opacity: .08;
        }
        .sb-media-shell > img,
        img.sb-media-inline {
            transition: opacity .22s ease;
        }
        img.sb-media-inline {
            background: linear-gradient(180deg, #eef6fb, #e3eef7);
            background-size: 220% 100%;
        }
        @keyframes sbCatalogMediaShimmer {
            to { transform: translateX(120%); }
        }