@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');
@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';

@layer components {
    body.rn-admin-classic {
        font-family: Cairo, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        background: #f5f6f8;
        color: #172033;
    }

    .ac-shell {
        min-height: 100vh;
        display: grid;
        grid-template-columns: 292px minmax(0, 1fr);
        direction: ltr;
    }

    .ac-shell * {
        box-sizing: border-box;
    }

    .ac-workspace,
    .ac-sidebar,
    .ac-topbar,
    .ac-main {
        direction: rtl;
    }

    .ac-sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
        background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
        color: #334155;
        border-inline-start: 1px solid #e2e8f0;
        padding: 18px 16px;
        z-index: 40;
        box-shadow: 12px 0 30px rgba(15, 23, 42, .06);
    }

    .ac-brand {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        border-radius: 18px;
        color: #111827;
        text-decoration: none;
        background: linear-gradient(135deg, #f8fafc, #eef2ff);
        border: 1px solid #e2e8f0;
    }

    .ac-brand-logo {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        display: grid;
        place-items: center;
        background: #fff;
        overflow: hidden;
    }

    .ac-brand-logo img {
        max-width: 88%;
        max-height: 88%;
        object-fit: contain;
    }

    .ac-brand strong {
        display: block;
        font-weight: 900;
        letter-spacing: -.02em;
    }

    .ac-brand small,
    .ac-nav-group p {
        color: #94a3b8;
        font-size: 11px;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .ac-nav {
        margin-top: 22px;
        display: grid;
        gap: 20px;
    }

    .ac-nav-group p {
        margin: 0 8px 8px;
    }

    .ac-nav a {
        display: flex;
        align-items: center;
        gap: 11px;
        min-height: 42px;
        padding: 10px 12px;
        border-radius: 12px;
        color: #475569;
        text-decoration: none;
        font-weight: 800;
        transition: .18s ease;
    }

    .ac-nav a svg {
        width: 21px;
        height: 21px;
        flex: 0 0 auto;
        color: #94a3b8;
    }

    .ac-nav a:hover,
    .ac-nav a.active {
        background: #eef2ff;
        color: #1d4ed8;
        box-shadow: inset 3px 0 0 #2563eb, 0 8px 18px rgba(37,99,235,.08);
    }

    .ac-nav a:hover svg,
    .ac-nav a.active svg {
        color: #2563eb;
    }

    .ac-workspace {
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    .ac-overlay {
        display: none;
    }

    .ac-topbar {
        position: sticky;
        top: 0;
        z-index: 25;
        min-height: 82px;
        display: grid;
        grid-template-columns: minmax(180px, 280px) minmax(240px, 1fr) auto;
        align-items: center;
        gap: 18px;
        padding: 14px 24px;
        background: rgba(255,255,255,.96);
        border-bottom: 1px solid #e5e7eb;
        box-shadow: 0 10px 30px rgba(15, 23, 42, .045);
        backdrop-filter: blur(18px);
    }

    .ac-title span {
        color: #64748b;
        font-size: 12px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: .08em;
    }

    .ac-title h1 {
        margin: 4px 0 0;
        color: #111827;
        font-size: 24px;
        font-weight: 950;
        letter-spacing: -.03em;
    }

    .ac-search {
        height: 46px;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 16px;
        border: 1px solid #d9e1ea;
        border-radius: 14px;
        background: #f7f8fa;
    }

    .ac-search svg {
        width: 20px;
        height: 20px;
        color: #64748b;
    }

    .ac-search input {
        width: 100%;
        border: 0;
        outline: 0;
        background: transparent;
        color: #111827;
        font-weight: 800;
    }

    .ac-actions {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .ac-iconbtn {
        position: relative;
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        border-radius: 13px;
        background: #fff;
        border: 1px solid #dbe3ed;
        color: #1f2937;
        box-shadow: 0 8px 18px rgba(15,23,42,.06);
    }

    .ac-iconbtn svg {
        width: 21px;
        height: 21px;
    }

    .ac-iconbtn span {
        position: absolute;
        top: -7px;
        inset-inline-start: -7px;
        min-width: 20px;
        height: 20px;
        padding: 0 5px;
        display: grid;
        place-items: center;
        border-radius: 999px;
        background: #dc2626;
        color: #fff;
        font-size: 11px;
        font-weight: 900;
        border: 2px solid #fff;
    }

    .ac-store,
    .ac-btn {
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 0 16px;
        border-radius: 13px;
        background: #2563eb;
        color: #fff;
        font-weight: 900;
        text-decoration: none;
        border: 1px solid #1d4ed8;
        box-shadow: 0 8px 18px rgba(37,99,235,.18);
    }

    .ac-btn.secondary {
        background: #fff;
        color: #334155;
        border-color: #dbe3ed;
        box-shadow: none;
    }

    .ac-user {
        position: relative;
    }

    .ac-user summary {
        list-style: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 44px;
        padding: 5px 12px 5px 16px;
        border-radius: 16px;
        border: 1px solid #dbe3ed;
        background: #fff;
        box-shadow: 0 8px 18px rgba(15,23,42,.06);
    }

    .ac-user summary::-webkit-details-marker {
        display: none;
    }

    .ac-user summary span {
        width: 32px;
        height: 32px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: #eef2ff;
        color: #2563eb;
        font-weight: 950;
    }

    .ac-user summary b {
        color: #111827;
        font-size: 13px;
        font-weight: 900;
    }

    .ac-user div {
        position: absolute;
        top: calc(100% + 10px);
        inset-inline-end: 0;
        width: 220px;
        padding: 8px;
        border-radius: 16px;
        background: #fff;
        border: 1px solid #dbe3ed;
        box-shadow: 0 18px 40px rgba(15,23,42,.14);
        z-index: 60;
    }

    .ac-user a,
    .ac-user button {
        width: 100%;
        display: block;
        padding: 10px 12px;
        border-radius: 11px;
        color: #334155;
        background: transparent;
        border: 0;
        text-align: start;
        font-weight: 800;
        text-decoration: none;
    }

    .ac-user a:hover,
    .ac-user button:hover {
        background: #f1f5f9;
        color: #1d4ed8;
    }

    .ac-main {
        padding: 24px;
    }

    .ac-section {
        display: grid;
        gap: 18px;
    }

    .ac-panel,
    .rn-admin-classic .surface {
        background: #fff !important;
        color: #172033 !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 18px !important;
        box-shadow: 0 10px 24px rgba(15,23,42,.05) !important;
    }

    .rn-admin-classic .lc-page-shell {
        max-width: none !important;
        padding: 0 !important;
    }

    .rn-admin-classic .section-heading {
        display: flex !important;
        justify-content: space-between !important;
        gap: 16px !important;
        align-items: flex-start !important;
        padding: 20px !important;
        margin: 0 0 18px !important;
        border-radius: 18px !important;
        background: #fff !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: 0 10px 24px rgba(15,23,42,.05) !important;
    }

    .rn-admin-classic .section-heading .flex {
        flex-wrap: wrap;
    }

    .rn-admin-classic .primary-button,
    .rn-admin-classic .secondary-button,
    .rn-admin-classic .danger-button {
        min-height: 40px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 14px !important;
        border-radius: 12px !important;
        font-weight: 900 !important;
        text-decoration: none !important;
        box-shadow: none !important;
    }

    .rn-admin-classic .primary-button {
        background: #2563eb !important;
        color: #fff !important;
        border: 1px solid #1d4ed8 !important;
    }

    .rn-admin-classic .secondary-button {
        background: #fff !important;
        color: #334155 !important;
        border: 1px solid #dbe3ed !important;
    }

    .rn-admin-classic .danger-button {
        background: #fee2e2 !important;
        color: #991b1b !important;
        border: 1px solid #fecaca !important;
    }

    .rn-admin-classic input,
    .rn-admin-classic select,
    .rn-admin-classic textarea {
        border-color: #dbe3ed !important;
        background-color: #fff !important;
        color: #111827 !important;
        box-shadow: none !important;
    }

    .rn-admin-classic label,
    .rn-admin-classic th {
        color: #334155 !important;
    }

    .ac-panel {
        padding: 20px;
    }

    .ac-panel-head {
        display: flex;
        justify-content: space-between;
        gap: 14px;
        align-items: flex-start;
        margin-bottom: 16px;
    }

    .ac-panel-head h2,
    .rn-admin-classic .section-heading h1,
    .rn-admin-classic .surface h1,
    .rn-admin-classic .surface h2,
    .rn-admin-classic .surface h3 {
        color: #111827 !important;
        text-shadow: none !important;
        font-weight: 950;
    }

    .ac-panel-head p,
    .ac-muted,
    .rn-admin-classic .surface p,
    .rn-admin-classic .surface em,
    .rn-admin-classic .section-heading span {
        color: #64748b !important;
    }

    .ac-filter {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
    }

    .ac-filter a,
    .ac-filter button,
    .ac-filter input,
    .ac-filter select {
        min-height: 38px;
        border-radius: 12px;
        border: 1px solid #dbe3ed;
        background: #fff;
        color: #334155;
        padding: 0 12px;
        font-weight: 850;
        text-decoration: none;
    }

    .ac-filter a.active {
        background: #2563eb;
        border-color: #2563eb;
        color: #fff;
    }

    .ac-kpi-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
    }

    .ac-kpi {
        position: relative;
        overflow: hidden;
        padding: 18px;
        border-radius: 18px;
        background: #fff;
        border: 1px solid #e2e8f0;
        box-shadow: 0 10px 24px rgba(15,23,42,.05);
    }

    .ac-kpi.gradient {
        min-height: 148px;
        color: #fff;
        border: 0;
        overflow: hidden;
        box-shadow: 0 18px 32px rgba(15,23,42,.12);
        background:
            radial-gradient(circle at 15% 20%, rgba(255,255,255,.22), transparent 28%),
            repeating-radial-gradient(circle at 30% 35%, rgba(255,255,255,.08) 0 1px, transparent 1px 14px),
            linear-gradient(135deg, var(--g1), var(--g2));
    }

    .ac-kpi.gradient:after {
        display: none;
    }

    .ac-kpi.gradient span,
    .ac-kpi.gradient strong,
    .ac-kpi.gradient small {
        position: relative;
        z-index: 1;
        color: #fff;
    }

    .ac-kpi.gradient span {
        opacity: .94;
        font-size: 15px;
    }

    .ac-kpi.gradient strong {
        font-size: 34px;
        margin-top: 18px;
    }

    .ac-kpi.gradient small {
        display: block;
        margin-top: 12px;
        font-weight: 850;
        opacity: .9;
    }

    .ac-kpi.gradient.teal { --g1: #10b7b0; --g2: #20c7bc; }
    .ac-kpi.gradient.orange { --g1: #ff6b43; --g2: #ff8a3d; }
    .ac-kpi.gradient.blue { --g1: #118bf2; --g2: #21a6ff; }
    .ac-kpi.gradient.pink { --g1: #ef477d; --g2: #fb6b9a; }
    .ac-kpi.gradient.green { --g1: #17b26a; --g2: #2acb7f; }

    .ac-gradient-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .ac-kpi:after {
        content: "";
        position: absolute;
        inset-inline-start: 0;
        top: 0;
        bottom: 0;
        width: 5px;
        background: var(--accent, #2563eb);
    }

    .ac-kpi span {
        display: block;
        color: #64748b;
        font-size: 12px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .ac-kpi strong {
        display: block;
        margin-top: 10px;
        color: #111827;
        font-size: 28px;
        font-weight: 950;
        letter-spacing: -.04em;
        direction: ltr;
        unicode-bidi: isolate;
    }

    .ac-grid-2 {
        display: grid;
        grid-template-columns: minmax(0, 1.45fr) minmax(320px, .8fr);
        gap: 18px;
    }

    .ac-grid-3 {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }

    .ac-chart {
        min-height: 320px;
    }

    .ac-table-wrap {
        overflow: auto;
        border: 1px solid #e2e8f0;
        border-radius: 16px;
    }

    .ac-table {
        width: 100%;
        min-width: 760px;
        border-collapse: collapse;
    }

    .ac-table th {
        background: #f8fafc;
        color: #64748b;
        text-align: start;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .ac-table th,
    .ac-table td {
        padding: 13px 14px;
        border-bottom: 1px solid #eef2f7;
        font-weight: 800;
    }

    .ac-table td {
        color: #334155;
    }

    .ac-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 26px;
        padding: 0 10px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 950;
        background: #f1f5f9;
        color: #475569;
    }

    .ac-badge.green { background: #dcfce7; color: #166534; }
    .ac-badge.orange { background: #ffedd5; color: #9a3412; }
    .ac-badge.red { background: #fee2e2; color: #991b1b; }
    .ac-badge.blue { background: #dbeafe; color: #1d4ed8; }

    .ac-list {
        display: grid;
        gap: 10px;
    }

    .ac-list-row,
    .rn-admin-classic .admin-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
        background: #f8fafc !important;
        color: #172033 !important;
        border: 1px solid #edf2f7 !important;
        border-radius: 13px !important;
        text-decoration: none;
    }

    .ac-funnel {
        display: grid;
        gap: 12px;
    }

    .ac-funnel-row {
        display: grid;
        gap: 7px;
    }

    .ac-funnel-row header {
        display: flex;
        justify-content: space-between;
        color: #334155;
        font-weight: 900;
    }

    .ac-funnel-row div {
        height: 10px;
        border-radius: 999px;
        background: #e2e8f0;
        overflow: hidden;
    }

    .ac-funnel-row b {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, #2563eb, #16a34a);
    }

    .ac-customer-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
        gap: 16px;
    }

    .ac-customer-card {
        padding: 18px;
        border-radius: 20px;
        border: 1px solid #e2e8f0;
        background: linear-gradient(135deg, #ffffff, #f8fafc);
        box-shadow: 0 12px 26px rgba(15,23,42,.06);
    }

    .ac-customer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .ac-avatar {
        width: 48px;
        height: 48px;
        border-radius: 16px;
        display: grid;
        place-items: center;
        background: #dbeafe;
        color: #1d4ed8;
        font-weight: 950;
        font-size: 20px;
    }

    .ac-customer-card h3 {
        margin: 0;
        color: #111827;
        font-weight: 950;
    }

    .ac-customer-card small {
        color: #64748b;
        font-weight: 800;
        overflow-wrap: anywhere;
    }

    .ac-mini-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin: 16px 0;
    }

    .ac-mini-stats div {
        padding: 10px;
        border-radius: 13px;
        background: #fff;
        border: 1px solid #e5e7eb;
    }

    .ac-mini-stats span {
        display: block;
        color: #64748b;
        font-size: 11px;
        font-weight: 900;
    }

    .ac-mini-stats b {
        color: #111827;
        font-weight: 950;
    }

    .ac-form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .ac-form-grid label {
        display: grid;
        gap: 6px;
        color: #64748b;
        font-size: 12px;
        font-weight: 900;
    }

    .ac-form-grid input,
    .ac-form-grid select,
    .ac-form-grid textarea {
        min-height: 38px;
        border-radius: 12px;
        border: 1px solid #dbe3ed;
        padding: 0 10px;
        color: #111827;
        background: #fff;
        font-weight: 800;
    }

    .ac-check {
        display: flex !important;
        align-items: center;
        gap: 8px;
        min-height: 38px;
        padding: 0 10px;
        border-radius: 12px;
        border: 1px solid #dbe3ed;
        background: #fff;
    }

    .ac-bulkbar {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
        margin-bottom: 12px;
        padding: 12px;
        border-radius: 16px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
    }

    .ac-bulkbar select {
        min-height: 40px;
        min-width: 210px;
        border-radius: 12px;
        border: 1px solid #dbe3ed;
        padding: 0 12px;
        background: #fff;
        color: #111827;
        font-weight: 850;
    }

    .ac-form-grid textarea {
        padding: 10px;
        resize: vertical;
        line-height: 1.7;
    }

    .ac-profile-hero {
        background:
            linear-gradient(135deg, rgba(37,99,235,.08), transparent 34%),
            linear-gradient(180deg, #fff, #f8fafc) !important;
    }

    .ac-alert {
        margin-bottom: 16px;
        padding: 12px 14px;
        border-radius: 14px;
        background: #ecfdf5;
        color: #166534;
        border: 1px solid #bbf7d0;
        font-weight: 900;
    }

    .ac-empty {
        min-height: 120px;
        display: grid;
        place-items: center;
        color: #64748b;
        background: #f8fafc;
        border: 1px dashed #cbd5e1;
        border-radius: 16px;
        font-weight: 900;
        text-align: center;
    }

    .ac-shortcut-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .ac-shortcut-grid a {
        display: grid;
        gap: 6px;
        min-height: 92px;
        padding: 16px;
        border-radius: 16px;
        border: 1px solid #dbeafe;
        background: linear-gradient(135deg, #ffffff, #eff6ff);
        text-decoration: none;
        transition: .16s ease;
    }

    .ac-shortcut-grid a:hover {
        transform: translateY(-2px);
        border-color: #93c5fd;
        box-shadow: 0 14px 28px rgba(37,99,235,.10);
    }

    .ac-shortcut-grid strong {
        color: #1e3a8a;
        font-weight: 950;
    }

    .ac-shortcut-grid span {
        color: #64748b;
        font-weight: 800;
        font-size: 13px;
    }

    .ac-mobilebar {
        display: none;
    }

    @media (max-width: 1180px) {
        .ac-shell {
            grid-template-columns: 1fr;
        }

        .ac-sidebar {
            position: fixed;
            inset-block: 0;
            right: 0;
            left: auto;
            width: min(86vw, 320px);
            transform: translateX(110%);
            transition: transform .2s ease;
        }

        .ac-sidebar.open {
            transform: translateX(0);
        }

        .ac-overlay {
            position: fixed;
            inset: 0;
            display: block;
            background: rgba(15,23,42,.42);
            opacity: 0;
            pointer-events: none;
            z-index: 35;
            transition: .2s ease;
        }

        .ac-overlay.open {
            opacity: 1;
            pointer-events: auto;
        }

        .ac-mobilebar {
            position: sticky;
            top: 0;
            z-index: 30;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 14px;
            background: #fff;
            border-bottom: 1px solid #e5e7eb;
        }

        .ac-mobilebar button {
            width: 42px;
            height: 42px;
            border-radius: 13px;
            border: 1px solid #dbe3ed;
            background: #fff;
            color: #111827;
        }

        .ac-mobilebar svg {
            width: 22px;
            height: 22px;
            margin: auto;
        }

        .ac-mobilebrand {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #111827;
            font-weight: 950;
            text-decoration: none;
        }

        .ac-mobilebrand img {
            width: 34px;
            height: 34px;
            object-fit: contain;
        }

        .ac-topbar {
            position: static;
            grid-template-columns: 1fr;
        }

        .ac-actions,
        .ac-filter {
            width: 100%;
            overflow-x: auto;
            justify-content: flex-start;
            padding-bottom: 4px;
        }

        .ac-store,
        .ac-user summary b {
            display: none;
        }
    }

    @media (max-width: 900px) {
        .ac-main {
            padding: 14px;
        }

        .ac-kpi-grid,
        .ac-grid-2,
        .ac-grid-3,
        .ac-shortcut-grid {
            grid-template-columns: 1fr;
        }

        .ac-panel-head {
            display: grid;
        }
    }
}
@source '../../storage/framework/views/*.php';

@theme {
    --font-sans: 'Cairo', ui-sans-serif, system-ui, sans-serif;
}

/* Admin V3: CodeCanyon fitness-dashboard inspired shell. */
@layer components {
    body.rn-admin-classic {
        --ac-teal: #18b8b4;
        --ac-teal-dark: #129b98;
        --ac-orange: #ff7044;
        --ac-blue: #1598f7;
        --ac-pink: #f0527d;
        --ac-ink: #111827;
        --ac-muted: #8a94a6;
        --ac-line: #e6eaf0;
        --ac-bg: #f5f6f8;
        background:
            radial-gradient(circle at 38px 34px, rgba(24, 184, 180, .08), transparent 26px),
            linear-gradient(180deg, #fbfbfc 0, var(--ac-bg) 160px, #f3f4f6 100%) !important;
        color: var(--ac-ink);
    }

    body.rn-admin-classic .ac-shell {
        grid-template-columns: 72px minmax(0, 1fr) !important;
        background: transparent !important;
        transition: grid-template-columns .22s ease !important;
    }

    body.rn-admin-classic.ac-sidebar-expanded .ac-shell {
        grid-template-columns: 248px minmax(0, 1fr) !important;
    }

    body.rn-admin-classic .ac-sidebar {
        left: 0;
        right: auto;
        width: 72px !important;
        padding: 14px 10px !important;
        background: #fff !important;
        border: 0 !important;
        border-inline-end: 1px solid #edf0f4 !important;
        box-shadow: 14px 0 30px rgba(16, 24, 40, .045) !important;
        overflow: visible !important;
        transition: width .22s ease, padding .22s ease !important;
    }

    body.rn-admin-classic.ac-sidebar-expanded .ac-sidebar {
        width: 248px !important;
        padding: 16px 14px !important;
        overflow-y: auto !important;
    }

    body.rn-admin-classic .ac-brand {
        width: 48px !important;
        height: 48px !important;
        padding: 0 !important;
        margin: 0 auto 18px !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        justify-content: center !important;
        overflow: visible !important;
    }

    body.rn-admin-classic.ac-sidebar-expanded .ac-brand {
        width: 100% !important;
        height: 56px !important;
        padding: 8px 10px !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        background: #f8fafc !important;
        border: 1px solid #edf0f4 !important;
        border-radius: 16px !important;
    }

    body.rn-admin-classic .ac-brand > span:not(.ac-brand-logo) {
        display: none !important;
    }

    body.rn-admin-classic.ac-sidebar-expanded .ac-brand > span:not(.ac-brand-logo) {
        display: block !important;
        min-width: 0 !important;
    }

    body.rn-admin-classic.ac-sidebar-expanded .ac-brand strong {
        font-size: 13px !important;
        line-height: 1.2 !important;
    }

    body.rn-admin-classic.ac-sidebar-expanded .ac-brand small {
        display: block !important;
        font-size: 10px !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
    }

    body.rn-admin-classic .ac-brand-logo {
        width: 44px !important;
        height: 44px !important;
        border-radius: 18px !important;
        background: linear-gradient(135deg, rgba(24,184,180,.14), #fff) !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    body.rn-admin-classic .ac-brand-logo img {
        width: 38px !important;
        height: 38px !important;
        object-fit: contain !important;
    }

    body.rn-admin-classic .ac-collapse-pill {
        position: absolute;
        top: 62px;
        right: -12px;
        width: 30px;
        height: 30px;
        border: 0;
        border-radius: 10px;
        display: grid;
        place-items: center;
        background: var(--ac-teal);
        color: #fff;
        box-shadow: 0 10px 24px rgba(24,184,180,.28);
        cursor: pointer;
        transition: transform .2s ease, background .2s ease !important;
    }

    body.rn-admin-classic.ac-sidebar-expanded .ac-collapse-pill {
        transform: rotate(180deg) !important;
    }

    body.rn-admin-classic .ac-collapse-pill svg {
        width: 16px;
        height: 16px;
    }

    body.rn-admin-classic .ac-nav {
        margin-top: 22px !important;
        gap: 8px !important;
        align-items: center !important;
    }

    body.rn-admin-classic .ac-nav-group {
        display: grid !important;
        gap: 8px !important;
        justify-items: center !important;
    }

    body.rn-admin-classic.ac-sidebar-expanded .ac-nav-group {
        justify-items: stretch !important;
    }

    body.rn-admin-classic .ac-nav-group p {
        display: none !important;
    }

    body.rn-admin-classic.ac-sidebar-expanded .ac-nav-group p {
        display: block !important;
        margin: 10px 10px 6px !important;
        color: #98a2b3 !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
    }

    body.rn-admin-classic .ac-nav a {
        position: relative;
        width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        display: grid !important;
        place-items: center !important;
        border-radius: 7px !important;
        color: #27323f !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body.rn-admin-classic.ac-sidebar-expanded .ac-nav a {
        width: 100% !important;
        height: 42px !important;
        display: flex !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        padding: 0 12px !important;
        border-radius: 10px !important;
    }

    body.rn-admin-classic .ac-nav a span {
        display: none !important;
    }

    body.rn-admin-classic.ac-sidebar-expanded .ac-nav a span {
        display: inline !important;
        color: inherit !important;
        font-size: 13px !important;
        font-weight: 800 !important;
    }

    body.rn-admin-classic .ac-nav a svg {
        width: 21px !important;
        height: 21px !important;
        color: currentColor !important;
        stroke-width: 2 !important;
    }

    body.rn-admin-classic .ac-nav a.active,
    body.rn-admin-classic .ac-nav a:hover {
        background: var(--ac-teal) !important;
        color: #fff !important;
        box-shadow: 0 12px 22px rgba(24,184,180,.22) !important;
        transform: translateY(-1px);
    }

    body.rn-admin-classic .ac-nav a::after {
        content: attr(data-title);
        position: absolute;
        left: calc(100% + 12px);
        top: 50%;
        transform: translateY(-50%) translateX(-8px);
        min-width: max-content;
        padding: 7px 10px;
        border-radius: 10px;
        background: #111827;
        color: #fff;
        font-size: 12px;
        font-weight: 800;
        opacity: 0;
        pointer-events: none;
        transition: .16s ease;
        z-index: 80;
        box-shadow: 0 12px 30px rgba(17,24,39,.18);
    }

    body.rn-admin-classic .ac-nav a:hover::after {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }

    body.rn-admin-classic.ac-sidebar-expanded .ac-nav a::after {
        display: none !important;
    }

    body.rn-admin-classic .ac-workspace {
        background: transparent !important;
        min-height: 100vh;
    }

    body.rn-admin-classic .ac-topbar {
        position: sticky !important;
        top: 0 !important;
        min-height: 72px !important;
        display: grid !important;
        grid-template-columns: minmax(270px, 450px) minmax(220px, 1fr) !important;
        align-items: center !important;
        padding: 14px 24px !important;
        background: rgba(255,255,255,.96) !important;
        border-bottom: 1px solid #e9edf3 !important;
        box-shadow: 0 12px 32px rgba(15,23,42,.045) !important;
        direction: ltr !important;
    }

    body.rn-admin-classic .ac-topbar > * {
        direction: rtl;
    }

    body.rn-admin-classic .ac-search {
        width: 100% !important;
        max-width: 450px !important;
        height: 40px !important;
        border-radius: 8px !important;
        border: 1px solid #dfe4ea !important;
        background: #f8f9fb !important;
        box-shadow: inset 0 1px 2px rgba(16,24,40,.04) !important;
        grid-column: 1 !important;
        justify-self: start !important;
    }

    body.rn-admin-classic .ac-search input {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #6b7280 !important;
    }

    body.rn-admin-classic .ac-actions {
        grid-column: 2 !important;
        justify-self: end !important;
        width: auto !important;
        gap: 14px !important;
        padding: 0 !important;
        overflow: visible !important;
        direction: ltr !important;
    }

    body.rn-admin-classic .ac-iconbtn {
        width: 39px !important;
        height: 39px !important;
        border-radius: 10px !important;
        background: #fafafa !important;
        border: 0 !important;
        color: #111827 !important;
        box-shadow: 0 8px 18px rgba(16,24,40,.06) !important;
    }

    body.rn-admin-classic .ac-iconbtn:hover {
        background: #eefdfa !important;
        color: var(--ac-teal-dark) !important;
    }

    body.rn-admin-classic .ac-iconbtn span {
        top: -4px !important;
        right: -4px !important;
        left: auto !important;
        background: var(--ac-teal) !important;
        width: 13px !important;
        min-width: 13px !important;
        height: 13px !important;
        padding: 0 !important;
        font-size: 0 !important;
        border: 2px solid #fff !important;
    }

    body.rn-admin-classic .ac-store {
        display: none !important;
    }

    body.rn-admin-classic .ac-user summary {
        width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 12px !important;
        background: linear-gradient(135deg, #ff7b31, #f04438) !important;
        box-shadow: 0 12px 24px rgba(240,68,56,.18) !important;
        overflow: hidden;
    }

    body.rn-admin-classic .ac-user summary span {
        width: 42px !important;
        height: 42px !important;
        border-radius: 12px !important;
        background: transparent !important;
        color: #fff !important;
        font-weight: 950 !important;
    }

    body.rn-admin-classic .ac-user summary b {
        display: none !important;
    }

    body.rn-admin-classic .ac-user div {
        left: auto !important;
        right: 0 !important;
        border-radius: 18px !important;
        border: 0 !important;
        box-shadow: 0 22px 50px rgba(16,24,40,.18) !important;
    }

    body.rn-admin-classic .ac-main {
        padding: 26px 24px 42px !important;
    }

    body.rn-admin-classic .ac-section {
        gap: 22px !important;
    }

    body.rn-admin-classic .ac-panel,
    body.rn-admin-classic .surface {
        border: 0 !important;
        border-radius: 18px !important;
        background: #fff !important;
        box-shadow: 0 16px 36px rgba(16,24,40,.07) !important;
    }

    body.rn-admin-classic .ac-panel {
        padding: 24px !important;
    }

    body.rn-admin-classic .ac-command-panel {
        display: flex !important;
        flex-direction: column !important;
        background: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
        padding: 0 !important;
    }

    body.rn-admin-classic .ac-command-panel > .ac-panel-head {
        order: 2 !important;
        margin-bottom: 18px !important;
        margin-top: 18px !important;
        padding: 20px 24px !important;
        border-radius: 18px !important;
        background: #fff !important;
        box-shadow: 0 14px 32px rgba(16,24,40,.06) !important;
    }

    body.rn-admin-classic .ac-command-panel > .ac-kpi-grid:not(.ac-hero-metrics) {
        order: 3 !important;
    }

    body.rn-admin-classic .ac-panel-head {
        margin-bottom: 18px !important;
    }

    body.rn-admin-classic .ac-panel-head h2 {
        margin: 0 !important;
        font-size: 24px !important;
        line-height: 1.25 !important;
        font-weight: 800 !important;
        letter-spacing: -.02em !important;
        color: #101828 !important;
    }

    body.rn-admin-classic .ac-panel-head p {
        margin-top: 5px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: var(--ac-muted) !important;
    }

    body.rn-admin-classic .ac-filter a,
    body.rn-admin-classic .ac-filter button,
    body.rn-admin-classic .ac-btn.secondary {
        border: 0 !important;
        border-radius: 10px !important;
        background: #f8f9fb !important;
        color: #111827 !important;
        box-shadow: 0 8px 16px rgba(16,24,40,.04) !important;
    }

    body.rn-admin-classic .ac-filter a.active,
    body.rn-admin-classic .ac-filter button:hover,
    body.rn-admin-classic .ac-btn:not(.secondary) {
        background: var(--ac-teal) !important;
        border-color: var(--ac-teal) !important;
        color: #fff !important;
        box-shadow: 0 12px 24px rgba(24,184,180,.22) !important;
    }

    body.rn-admin-classic .ac-hero-metrics {
        order: 1 !important;
        direction: ltr !important;
        gap: 16px !important;
    }

    body.rn-admin-classic .ac-hero-metrics > * {
        direction: rtl !important;
    }

    body.rn-admin-classic .ac-kpi.gradient {
        min-height: 126px !important;
        padding: 18px 18px 16px !important;
        border-radius: 16px !important;
        border: 1px solid #edf0f4 !important;
        box-shadow: 0 12px 26px rgba(16,24,40,.055) !important;
        background: #fff !important;
        color: #101828 !important;
    }

    body.rn-admin-classic .ac-kpi.gradient.teal { --g1: #15b8b4; --g2: #21bbb5; }
    body.rn-admin-classic .ac-kpi.gradient.orange { --g1: #ff6a3d; --g2: #ff8549; }
    body.rn-admin-classic .ac-kpi.gradient.blue { --g1: #158df0; --g2: #18a7ff; }
    body.rn-admin-classic .ac-kpi.gradient.pink { --g1: #ef4c78; --g2: #f65c8d; }

    body.rn-admin-classic .ac-kpi.gradient span {
        color: #8a94a6 !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
    }

    body.rn-admin-classic .ac-kpi.gradient strong {
        margin-top: 13px !important;
        color: #101828 !important;
        font-size: 26px !important;
        font-weight: 800 !important;
        letter-spacing: -.03em !important;
    }

    body.rn-admin-classic .ac-kpi.gradient small {
        position: static !important;
        display: block !important;
        margin-top: 12px !important;
        color: #98a2b3 !important;
        font-size: 13px !important;
        font-weight: 700 !important;
    }

    body.rn-admin-classic .ac-kpi.gradient small i {
        display: block;
        height: 7px;
        width: 100% !important;
        margin-bottom: 10px;
        border-radius: 999px;
        background: linear-gradient(90deg, var(--g1), var(--g2));
        box-shadow: none !important;
    }

    body.rn-admin-classic .ac-ring-card::before {
        content: none !important;
    }

    body.rn-admin-classic .ac-gauge-card::before {
        content: none !important;
    }

    body.rn-admin-classic .ac-wave-card::before {
        content: none !important;
    }

    body.rn-admin-classic .ac-kpi.gradient::before {
        content: "";
        position: absolute;
        inset-inline-start: 0;
        top: 0;
        width: 5px;
        height: 100%;
        background: linear-gradient(180deg, var(--g1), var(--g2));
    }

    body.rn-admin-classic .ac-kpi:not(.gradient) {
        border: 0 !important;
        border-radius: 16px !important;
        padding: 18px 20px !important;
        box-shadow: 0 14px 30px rgba(16,24,40,.065) !important;
    }

    body.rn-admin-classic .ac-kpi:not(.gradient)::after {
        display: none !important;
    }

    body.rn-admin-classic .ac-kpi:not(.gradient) span {
        color: var(--ac-muted) !important;
        font-weight: 700 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        font-size: 13px !important;
    }

    body.rn-admin-classic .ac-kpi:not(.gradient) strong {
        color: #101828 !important;
        font-size: 24px !important;
        font-weight: 800 !important;
    }

    body.rn-admin-classic .ac-grid-2 {
        grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr) !important;
        gap: 24px !important;
    }

    body.rn-admin-classic .ac-grid-3 {
        gap: 24px !important;
    }

    body.rn-admin-classic .ac-chart {
        min-height: 285px !important;
    }

    body.rn-admin-classic .ac-table-wrap {
        border-color: #edf0f4 !important;
        border-radius: 14px !important;
    }

    body.rn-admin-classic .ac-table th {
        background: #fafafa !important;
        color: #8a94a6 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        font-size: 13px !important;
    }

    body.rn-admin-classic .ac-table th,
    body.rn-admin-classic .ac-table td {
        padding: 14px 16px !important;
        border-bottom-color: #edf0f4 !important;
        font-weight: 700 !important;
    }

    body.rn-admin-classic .ac-list-row,
    body.rn-admin-classic .admin-row {
        background: #fff !important;
        border: 1px solid #edf0f4 !important;
        border-radius: 13px !important;
        box-shadow: 0 8px 18px rgba(16,24,40,.035) !important;
    }

    body.rn-admin-classic .ac-badge {
        min-height: 24px !important;
        border-radius: 999px !important;
        font-size: 11px !important;
    }

    body.rn-admin-classic .ac-empty {
        border: 0 !important;
        border-radius: 16px !important;
        background: #fafafa !important;
        color: #8a94a6 !important;
        min-height: 110px !important;
    }

    @media (max-width: 1180px) {
        html:has(body.rn-admin-classic),
        body.rn-admin-classic {
            overflow-x: hidden !important;
            max-width: 100vw !important;
        }

        body.rn-admin-classic .ac-shell {
            grid-template-columns: 1fr !important;
            width: 100% !important;
            overflow-x: hidden !important;
        }

        body.rn-admin-classic .ac-sidebar {
            width: min(84vw, 300px) !important;
            padding: 20px !important;
            right: 0 !important;
            left: auto !important;
            overflow-y: auto !important;
            transform: translateX(112%) !important;
            transition: transform .22s ease !important;
            z-index: 60 !important;
        }

        body.rn-admin-classic .ac-sidebar.open {
            transform: translateX(0) !important;
        }

        body.rn-admin-classic .ac-brand {
            width: auto !important;
            height: auto !important;
            justify-content: flex-start !important;
            margin: 0 0 18px !important;
            padding: 10px !important;
        }

        body.rn-admin-classic .ac-brand > span:not(.ac-brand-logo),
        body.rn-admin-classic .ac-nav a span,
        body.rn-admin-classic .ac-nav-group p {
            display: block !important;
        }

        body.rn-admin-classic .ac-nav a {
            width: 100% !important;
            display: flex !important;
            justify-content: flex-start !important;
            padding: 0 14px !important;
            gap: 12px !important;
        }

        body.rn-admin-classic .ac-nav a::after,
        body.rn-admin-classic .ac-collapse-pill {
            display: none !important;
        }

        body.rn-admin-classic .ac-topbar {
            position: static !important;
            grid-template-columns: 1fr !important;
            width: 100% !important;
            overflow: hidden !important;
        }

        body.rn-admin-classic .ac-actions {
            grid-column: 1 !important;
            justify-self: start !important;
            flex-wrap: wrap !important;
            max-width: 100% !important;
        }

        body.rn-admin-classic .ac-workspace,
        body.rn-admin-classic .ac-main,
        body.rn-admin-classic .ac-section,
        body.rn-admin-classic .ac-panel {
            min-width: 0 !important;
            max-width: 100% !important;
        }
    }

    @media (max-width: 900px) {
        body.rn-admin-classic .ac-main {
            padding: 16px !important;
        }

        body.rn-admin-classic .ac-command-panel > .ac-panel-head {
            padding: 16px !important;
        }

        body.rn-admin-classic .ac-command-panel > .ac-panel-head .ac-actions,
        body.rn-admin-classic .ac-command-panel > .ac-panel-head .ac-filter {
            display: grid !important;
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            width: 100% !important;
        }

        body.rn-admin-classic .ac-command-panel > .ac-panel-head .ac-filter form {
            grid-column: 1 / -1 !important;
            display: grid !important;
            grid-template-columns: 1fr 1fr !important;
        }

        body.rn-admin-classic .ac-hero-metrics,
        body.rn-admin-classic .ac-kpi-grid,
        body.rn-admin-classic .ac-grid-2,
        body.rn-admin-classic .ac-grid-3 {
            grid-template-columns: 1fr !important;
            gap: 16px !important;
        }

        body.rn-admin-classic .ac-kpi.gradient {
            min-height: 160px !important;
        }
    }
}

/* Live UX final guard: these rules intentionally sit last so old visual passes cannot override them. */
@layer components {
    .ks-profile-menu summary b,
    .kd-user-menu summary b {
        display: inline-grid !important;
        place-items: center !important;
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        border-radius: 999px !important;
        background: #0b65c8 !important;
        color: #ffffff !important;
        border: 1px solid rgba(255, 255, 255, .55) !important;
        box-shadow: 0 8px 18px rgba(8, 55, 116, .16) !important;
        font-size: 0 !important;
        line-height: 1 !important;
    }

    .ks-profile-menu summary b svg,
    .kd-user-menu summary b svg {
        width: 20px !important;
        height: 20px !important;
        display: block !important;
    }

    .ks-profile-menu > div,
    .kd-user-menu > div {
        width: 252px !important;
        padding: 10px !important;
        border-radius: 20px !important;
        border: 1px solid rgba(12, 54, 65, .10) !important;
        background: rgba(255, 255, 255, .98) !important;
        box-shadow: 0 24px 55px rgba(11, 38, 51, .16) !important;
    }

    .ks-profile-menu > div a,
    .ks-profile-menu > div button,
    .kd-user-menu > div a,
    .kd-user-menu > div button {
        min-height: 42px !important;
        padding: 10px 12px !important;
        border-radius: 14px !important;
        color: #123743 !important;
        font-weight: 900 !important;
    }

    .ks-cart-link span[data-rn-cart-count],
    .kd-header-icon[href*="cart"] span[data-rn-cart-count] {
        position: absolute !important;
        top: -7px !important;
        inset-inline-end: -7px !important;
        min-width: 19px !important;
        height: 19px !important;
        padding: 0 5px !important;
        border-radius: 999px !important;
        display: inline-grid !important;
        place-items: center !important;
        background: #0b65c8 !important;
        color: #ffffff !important;
        border: 2px solid #ffffff !important;
        box-shadow: 0 9px 18px rgba(11, 101, 200, .20) !important;
        font-size: 11px !important;
        font-weight: 1000 !important;
        line-height: 1 !important;
    }

    .ks-cart-link span[data-rn-cart-count][hidden],
    .kd-header-icon[href*="cart"] span[data-rn-cart-count][hidden] {
        display: none !important;
    }

    .ks-cart-link.is-cart-added,
    .kd-header-icon[href*="cart"].is-cart-added {
        animation: rnCartBump .52s cubic-bezier(.2, .9, .25, 1.25) !important;
    }

    [data-rn-cart-count].is-bumping {
        animation: rnCartBadgePop .58s cubic-bezier(.2, .9, .25, 1.25) !important;
    }

    .rn-live-toast {
        position: fixed !important;
        z-index: 9999 !important;
        left: 24px !important;
        bottom: 28px !important;
        max-width: min(320px, calc(100vw - 32px)) !important;
        padding: 12px 16px !important;
        border-radius: 16px !important;
        background: #123743 !important;
        color: #ffffff !important;
        box-shadow: 0 18px 42px rgba(13, 44, 53, .22) !important;
        font-size: 14px !important;
        font-weight: 900 !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateY(12px) scale(.98) !important;
        transition: opacity .2s ease, transform .2s ease !important;
    }

    .rn-live-toast.is-visible {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }

    .kr-preference-menu button {
        background: transparent !important;
        color: #123743 !important;
        border: 1px solid transparent !important;
        box-shadow: none !important;
    }

    .kr-preference-menu button:hover {
        background: #f3f7f8 !important;
        color: #0754b8 !important;
        border-color: rgba(7, 84, 184, .08) !important;
    }

    .kr-preference-menu button.is-active {
        background: #eaf3ff !important;
        color: #0754b8 !important;
        border-color: rgba(7, 84, 184, .16) !important;
        box-shadow: inset 3px 0 0 #0754b8 !important;
    }

    .ks-cart-link {
        position: relative !important;
        overflow: visible !important;
        isolation: isolate !important;
    }

    .ks-cart-link > span[data-rn-cart-count] {
        top: -6px !important;
        inset-inline-start: auto !important;
        inset-inline-end: -6px !important;
        left: auto !important;
        right: -6px !important;
        z-index: 3 !important;
        transform-origin: center !important;
    }

    [dir="rtl"] .ks-cart-link > span[data-rn-cart-count] {
        right: auto !important;
        left: -6px !important;
        inset-inline-start: -6px !important;
        inset-inline-end: auto !important;
    }

    [data-rn-price].is-price-updated {
        animation: rnPriceFlash .5s ease;
    }

    @keyframes rnPriceFlash {
        0% { background: rgba(7, 84, 184, .10); border-radius: 8px; }
        100% { background: transparent; }
    }
}

/* Final account pixel pass: keep the inner customer area closer to the compact KROTY rhythm. */
@layer components {
    .rn-account-body .ks-topbar {
        display: grid !important;
        direction: ltr !important;
        grid-template-columns: minmax(330px, .92fr) 194px minmax(360px, 430px) 260px 120px !important;
        align-items: center !important;
        gap: 18px !important;
        width: min(calc(100% - 88px), 1480px) !important;
        height: 64px !important;
        min-height: 64px !important;
        margin-inline: auto !important;
        padding: 0 !important;
    }

    .rn-account-body .ks-account-nav {
        grid-column: 1 !important;
        justify-self: start !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        min-width: 0 !important;
    }

    .rn-account-body .ks-header-tools {
        grid-column: 2 !important;
        justify-self: start !important;
        display: flex !important;
        gap: 12px !important;
    }

    .rn-account-body .ks-search {
        grid-column: 3 !important;
        justify-self: center !important;
        width: 100% !important;
        max-width: 430px !important;
        margin: 0 !important;
    }

    .rn-account-body .ks-menu {
        grid-column: 4 !important;
        justify-self: end !important;
        margin: 0 !important;
    }

    .rn-account-body .ks-brand {
        grid-column: 5 !important;
        justify-self: end !important;
        margin: 0 !important;
        max-width: none !important;
    }

    .rn-account-body .ks-brand-logo {
        width: 104px !important;
        height: 42px !important;
        object-fit: contain !important;
    }

    .rn-account-body .kd-header-icon {
        width: 38px !important;
        height: 38px !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #1d2f3c !important;
    }

    .rn-account-body .kd-header-icon span {
        top: -5px !important;
        inset-inline-end: -5px !important;
    }

    .rn-account-body .kd-user-menu summary {
        min-height: 38px !important;
        padding-inline: 4px 8px !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        gap: 7px !important;
    }

    .rn-account-body .kd-user-menu summary b {
        width: 30px !important;
        height: 30px !important;
        font-size: 14px !important;
    }

    .rn-account-body .kd-header-balance {
        min-height: 34px !important;
        padding-inline: 8px !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .rn-account-body .kd-header-balance b {
        font-size: 16px !important;
    }

    .rn-account-body .kd-shell {
        width: min(calc(100% - 88px), 1480px) !important;
        padding: 40px 72px 94px 0 !important;
    }

    .rn-account-body .kd-content {
        gap: 28px !important;
    }

    .rn-account-body .kd-promo {
        width: min(100%, 1420px) !important;
        margin-inline: auto !important;
        border-radius: 0 !important;
    }
}

@layer components {
    .ks-profile-menu summary b svg,
    .kd-user-menu summary b svg {
        width: 21px !important;
        height: 21px !important;
        display: block !important;
        stroke-width: 2 !important;
    }

    .ks-profile-menu summary b,
    .kd-user-menu summary b {
        display: inline-grid !important;
        place-items: center !important;
        color: #ffffff !important;
        background: #0b65c8 !important;
        border: 1px solid rgba(255, 255, 255, .55) !important;
        box-shadow: 0 8px 18px rgba(8, 55, 116, .16) !important;
        font-size: 0 !important;
        line-height: 1 !important;
    }

    .ks-profile-menu summary,
    .kd-user-menu summary {
        border-radius: 999px !important;
        transition: background .2s ease, border-color .2s ease, transform .2s ease !important;
    }

    .ks-profile-menu[open] summary,
    .kd-user-menu[open] summary {
        background: #f1f6f8 !important;
        border-color: rgba(9, 64, 75, .13) !important;
    }

    .ks-profile-menu > div,
    .kd-user-menu > div {
        width: 252px !important;
        padding: 10px !important;
        border-radius: 20px !important;
        border: 1px solid rgba(12, 54, 65, .10) !important;
        background: rgba(255, 255, 255, .98) !important;
        box-shadow: 0 24px 55px rgba(11, 38, 51, .16) !important;
        backdrop-filter: blur(14px) !important;
        overflow: hidden !important;
    }

    .ks-profile-menu > div a,
    .ks-profile-menu > div button,
    .kd-user-menu > div a,
    .kd-user-menu > div button {
        min-height: 42px !important;
        padding: 10px 12px !important;
        border-radius: 14px !important;
        color: #123743 !important;
        font-weight: 900 !important;
        letter-spacing: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        transition: background .18s ease, color .18s ease, transform .18s ease !important;
    }

    .ks-profile-menu > div a:hover,
    .ks-profile-menu > div button:hover,
    .kd-user-menu > div a:hover,
    .kd-user-menu > div button:hover {
        background: #eef5f7 !important;
        color: #075fbd !important;
        transform: translateX(-2px) !important;
    }

    .kr-preference.is-updating summary,
    form.is-rn-loading button[type="submit"] {
        opacity: .7 !important;
        pointer-events: none !important;
    }

    .kr-preference-menu button.is-active {
        background: #eef6f8 !important;
        color: #075fbd !important;
        border-color: rgba(7, 95, 189, .18) !important;
    }

    .ks-cart-link,
    .kd-header-icon[href*="cart"] {
        position: relative !important;
    }

    .ks-cart-link span[data-rn-cart-count],
    .kd-header-icon[href*="cart"] span[data-rn-cart-count] {
        position: absolute !important;
        top: -7px !important;
        inset-inline-end: -7px !important;
        min-width: 19px !important;
        height: 19px !important;
        padding: 0 5px !important;
        border-radius: 999px !important;
        display: inline-grid !important;
        place-items: center !important;
        background: #0b65c8 !important;
        color: #ffffff !important;
        border: 2px solid #ffffff !important;
        box-shadow: 0 9px 18px rgba(11, 101, 200, .20) !important;
        font-size: 11px !important;
        font-weight: 1000 !important;
        line-height: 1 !important;
    }

    .ks-cart-link span[data-rn-cart-count][hidden],
    .kd-header-icon[href*="cart"] span[data-rn-cart-count][hidden] {
        display: none !important;
    }

    .ks-cart-link.is-cart-added,
    .kd-header-icon[href*="cart"].is-cart-added {
        animation: rnCartBump .52s cubic-bezier(.2, .9, .25, 1.25);
    }

    [data-rn-cart-count].is-bumping {
        animation: rnCartBadgePop .58s cubic-bezier(.2, .9, .25, 1.25);
    }

    .rn-live-toast {
        position: fixed;
        z-index: 9999;
        left: 24px;
        bottom: 28px;
        max-width: min(320px, calc(100vw - 32px));
        padding: 12px 16px;
        border-radius: 16px;
        background: #123743;
        color: #ffffff;
        box-shadow: 0 18px 42px rgba(13, 44, 53, .22);
        font-size: 14px;
        font-weight: 900;
        opacity: 0;
        pointer-events: none;
        transform: translateY(12px) scale(.98);
        transition: opacity .2s ease, transform .2s ease;
    }

    .rn-live-toast.is-visible {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    @keyframes rnCartBump {
        0% { transform: scale(1); }
        35% { transform: scale(1.14) translateY(-1px); }
        70% { transform: scale(.97); }
        100% { transform: scale(1); }
    }

    @keyframes rnCartBadgePop {
        0% { transform: scale(.55); opacity: .4; }
        45% { transform: scale(1.28); opacity: 1; }
        100% { transform: scale(1); opacity: 1; }
    }

    html[data-theme="dark"] .ks-profile-menu[open] summary,
    html[data-theme="dark"] .kd-user-menu[open] summary {
        background: rgba(255, 255, 255, .08) !important;
    }

    html[data-theme="dark"] .ks-profile-menu > div,
    html[data-theme="dark"] .kd-user-menu > div {
        background: rgba(15, 27, 36, .98) !important;
        border-color: rgba(255, 255, 255, .10) !important;
        box-shadow: 0 24px 55px rgba(0, 0, 0, .28) !important;
    }

    html[data-theme="dark"] .ks-profile-menu > div a,
    html[data-theme="dark"] .ks-profile-menu > div button,
    html[data-theme="dark"] .kd-user-menu > div a,
    html[data-theme="dark"] .kd-user-menu > div button {
        color: #eef7f9 !important;
    }

    html[data-theme="dark"] .ks-profile-menu > div a:hover,
    html[data-theme="dark"] .ks-profile-menu > div button:hover,
    html[data-theme="dark"] .kd-user-menu > div a:hover,
    html[data-theme="dark"] .kd-user-menu > div button:hover,
    html[data-theme="dark"] .kr-preference-menu button.is-active {
        background: rgba(255, 255, 255, .08) !important;
        color: #8ec9ff !important;
    }

    html[data-theme="dark"] .rn-live-toast {
        background: #f7fbfc;
        color: #102c35;
    }

    @media (max-width: 700px) {
        .rn-live-toast {
            left: 16px;
            right: 16px;
            bottom: 18px;
            text-align: center;
        }
    }
}

@media (max-width: 900px) {
    @layer components {
        .rn-account-body .ks-header {
            height: 76px !important;
            overflow: hidden !important;
        }

        .rn-account-body .ks-topbar {
            grid-template-columns: 42px 42px minmax(0, 1fr) 76px !important;
            width: min(calc(100% - 28px), 430px) !important;
            height: 58px !important;
            min-height: 58px !important;
            gap: 6px !important;
        }

        .rn-account-body .ks-menu-trigger {
            grid-column: 1 !important;
            justify-self: start !important;
            width: 34px !important;
            height: 34px !important;
        }

        .rn-account-body .ks-account-nav {
            grid-column: 2 / 4 !important;
            display: flex !important;
            flex-direction: row !important;
            justify-content: flex-start !important;
            gap: 5px !important;
        }

        .rn-account-body .kd-header-icon {
            display: inline-grid !important;
            width: 34px !important;
            height: 34px !important;
        }

        .rn-account-body .kd-header-icon svg {
            width: 19px !important;
            height: 19px !important;
        }

        .rn-account-body .kd-header-icon span {
            min-width: 14px !important;
            height: 14px !important;
            font-size: 8px !important;
        }

        .rn-account-body .kd-user-menu,
        .rn-account-body .ks-header-tools,
        .rn-account-body .ks-search,
        .rn-account-body .ks-menu {
            display: none !important;
        }

        .rn-account-body .kd-header-balance {
            min-height: 32px !important;
            padding-inline: 4px !important;
            gap: 4px !important;
            font-size: 11px !important;
            max-width: 124px !important;
            overflow: hidden !important;
            white-space: nowrap !important;
        }

        .rn-account-body .kd-header-balance b {
            font-size: 12px !important;
        }

        .rn-account-body .ks-brand {
            grid-column: 4 !important;
            justify-self: end !important;
        }

        .rn-account-body .ks-brand-logo {
            width: 68px !important;
            height: 32px !important;
        }

        .rn-account-body .kd-mobile-head {
            display: none !important;
        }

        .rn-account-body .kd-shell {
            width: min(calc(100% - 28px), 430px) !important;
            padding: 34px 0 92px !important;
        }

        .rn-account-body .kd-page-head {
            margin-bottom: 24px !important;
            text-align: right !important;
            align-items: flex-end !important;
        }

        .rn-account-body .kd-page-head h1 {
            font-size: 32px !important;
        }

        .rn-account-body .kd-stats-grid {
            gap: 16px !important;
        }

        .rn-account-body .kd-stat-card {
            min-height: 104px !important;
            justify-content: flex-start !important;
            padding-inline: 24px !important;
            text-align: right !important;
        }

        .rn-account-body .kd-promo {
            margin-inline: 0 !important;
            border-radius: 0 !important;
        }

        .rn-account-body .kd-bottom-nav {
            display: grid !important;
            grid-template-columns: repeat(5, 1fr) !important;
            padding-bottom: max(4px, env(safe-area-inset-bottom)) !important;
        }

        .rn-account-body .kd-bottom-nav a:nth-child(4) {
            display: none !important;
        }
    }
}

/* Non-layer hard stop for older mobile card rules that were authored outside CSS layers. */
@media (max-width: 900px) {
    article.kr-service-card {
        align-items: center !important;
    }

    article.kr-service-card > .kr-service-card__body {
        width: 100% !important;
        max-width: 100% !important;
        align-self: stretch !important;
        margin-top: 6px !important;
        padding: 0 !important;
        display: block !important;
    }

    article.kr-service-card > .kr-service-card__body > h3 {
        width: 100% !important;
        max-width: 100% !important;
        padding-inline: 2px !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

/* Live UX final guard: keep the new account icon, cart counter, and live toast above older visual passes. */
@layer components {
    .ks-profile-menu summary b,
    .kd-user-menu summary b {
        display: inline-grid !important;
        place-items: center !important;
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        border-radius: 999px !important;
        background: #0b65c8 !important;
        color: #ffffff !important;
        border: 1px solid rgba(255, 255, 255, .55) !important;
        box-shadow: 0 8px 18px rgba(8, 55, 116, .16) !important;
        font-size: 0 !important;
        line-height: 1 !important;
    }

    .ks-profile-menu summary b svg,
    .kd-user-menu summary b svg {
        width: 20px !important;
        height: 20px !important;
        display: block !important;
    }

    .ks-profile-menu > div,
    .kd-user-menu > div {
        width: 252px !important;
        padding: 10px !important;
        border-radius: 20px !important;
        border: 1px solid rgba(12, 54, 65, .10) !important;
        background: rgba(255, 255, 255, .98) !important;
        box-shadow: 0 24px 55px rgba(11, 38, 51, .16) !important;
    }

    .ks-profile-menu > div a,
    .ks-profile-menu > div button,
    .kd-user-menu > div a,
    .kd-user-menu > div button {
        min-height: 42px !important;
        padding: 10px 12px !important;
        border-radius: 14px !important;
        color: #123743 !important;
        font-weight: 900 !important;
    }

    .ks-cart-link span[data-rn-cart-count],
    .kd-header-icon[href*="cart"] span[data-rn-cart-count] {
        position: absolute !important;
        top: -7px !important;
        inset-inline-end: -7px !important;
        min-width: 19px !important;
        height: 19px !important;
        padding: 0 5px !important;
        border-radius: 999px !important;
        display: inline-grid !important;
        place-items: center !important;
        background: #0b65c8 !important;
        color: #ffffff !important;
        border: 2px solid #ffffff !important;
        box-shadow: 0 9px 18px rgba(11, 101, 200, .20) !important;
        font-size: 11px !important;
        font-weight: 1000 !important;
        line-height: 1 !important;
    }

    .ks-cart-link span[data-rn-cart-count][hidden],
    .kd-header-icon[href*="cart"] span[data-rn-cart-count][hidden] {
        display: none !important;
    }

    .ks-cart-link.is-cart-added,
    .kd-header-icon[href*="cart"].is-cart-added {
        animation: rnCartBump .52s cubic-bezier(.2, .9, .25, 1.25) !important;
    }

    [data-rn-cart-count].is-bumping {
        animation: rnCartBadgePop .58s cubic-bezier(.2, .9, .25, 1.25) !important;
    }

    .rn-live-toast {
        position: fixed !important;
        z-index: 9999 !important;
        left: 24px !important;
        bottom: 28px !important;
        max-width: min(320px, calc(100vw - 32px)) !important;
        padding: 12px 16px !important;
        border-radius: 16px !important;
        background: #123743 !important;
        color: #ffffff !important;
        box-shadow: 0 18px 42px rgba(13, 44, 53, .22) !important;
        font-size: 14px !important;
        font-weight: 900 !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateY(12px) scale(.98) !important;
        transition: opacity .2s ease, transform .2s ease !important;
    }

    .rn-live-toast.is-visible {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

/* Header live polish guard: exact cart badge anchoring, clean selectors, English spacing, and soft hero corners. */
@layer components {
    header.ks-header .ks-cart-link {
        position: relative !important;
        display: inline-grid !important;
        place-items: center !important;
        overflow: visible !important;
        isolation: isolate !important;
    }

    header.ks-header .ks-cart-link > span[data-rn-cart-count] {
        position: absolute !important;
        top: -8px !important;
        right: -8px !important;
        left: auto !important;
        inset-inline-start: auto !important;
        inset-inline-end: -8px !important;
        z-index: 12 !important;
        min-width: 20px !important;
        width: auto !important;
        height: 20px !important;
        padding: 0 6px !important;
        border-radius: 999px !important;
        display: inline-grid !important;
        place-items: center !important;
        background: #0754b8 !important;
        color: #fff !important;
        border: 2px solid #fff !important;
        box-shadow: 0 8px 18px rgba(7, 84, 184, .22) !important;
        font-size: 11px !important;
        font-weight: 1000 !important;
        line-height: 1 !important;
        transform: none !important;
    }

    header.ks-header .ks-cart-link > span[data-rn-cart-count][hidden] {
        display: none !important;
    }

    header.ks-header .ks-profile-menu [data-rn-cart-count],
    header.ks-header .kd-user-menu [data-rn-cart-count],
    header.ks-header .ks-profile-menu summary > span {
        position: static !important;
        inset: auto !important;
        transform: none !important;
    }

    header.ks-header .kr-preference-menu button {
        background: transparent !important;
        background-image: none !important;
        color: #173642 !important;
        border: 1px solid transparent !important;
        box-shadow: none !important;
    }

    header.ks-header .kr-preference-menu button:hover {
        background: #f4f7f8 !important;
        color: #0754b8 !important;
        border-color: rgba(7, 84, 184, .08) !important;
    }

    header.ks-header .kr-preference-menu button.is-active {
        background: #eaf3ff !important;
        color: #0754b8 !important;
        border-color: rgba(7, 84, 184, .16) !important;
        box-shadow: inset 3px 0 0 #0754b8 !important;
    }

    .kr-hero-carousel,
    .kr-hero-slide,
    .kr-hero-slide img {
        border-radius: 18px !important;
    }

    .kr-hero-carousel {
        overflow: hidden !important;
    }

    html[dir="ltr"] header.ks-header .ks-menu {
        min-width: 230px !important;
        gap: 16px !important;
        justify-content: center !important;
    }

    html[dir="ltr"] header.ks-header .ks-menu a {
        padding-inline: 12px !important;
        white-space: nowrap !important;
    }

    html[dir="ltr"] header.ks-header .ks-brand {
        min-width: 116px !important;
        margin-inline-start: 18px !important;
    }

    html[dir="ltr"] header.ks-header .ks-brand-logo {
        width: 112px !important;
        max-width: 112px !important;
    }
}

/* Final micro-fixes for the internal header notification badge and user chip. */
@layer components {
    .rn-account-body .kd-header-icon span[hidden] {
        display: none !important;
    }

    .rn-account-body .kd-header-icon span:not([hidden]) {
        display: inline-grid !important;
        width: auto !important;
        min-width: 16px !important;
        max-width: 24px !important;
        height: 16px !important;
        padding-inline: 4px !important;
        border-radius: 999px !important;
        place-items: center !important;
        line-height: 1 !important;
    }

    .rn-account-body .kd-user-menu summary span {
        display: inline-block !important;
        max-width: 92px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .rn-account-body .kd-user-menu summary b {
        flex: 0 0 30px !important;
    }
}

@media (max-width: 900px) {
    @layer components {
        .rn-account-body .ks-topbar {
            padding-top: 5px !important;
            align-items: center !important;
        }

        .rn-account-body .kd-header-balance {
            max-width: 140px !important;
        }

        .rn-account-body .ks-brand-logo {
            width: 74px !important;
        }
    }
}

@media (max-width: 900px) {
    @layer components {
        .rn-account-body .ks-account-nav {
            grid-column: 2 / 4 !important;
            justify-content: center !important;
        }

        .rn-account-body .kd-header-icon {
            display: none !important;
        }

        .rn-account-body .kd-header-balance {
            max-width: 156px !important;
        }
    }
}

/* Header collision fix: profile-only account menu, clean cart badge, and centered empty states. */
@layer components {
    body:not(.rn-account-body) .ks-topbar {
        display: grid !important;
        direction: ltr !important;
        grid-template-columns: minmax(210px, 320px) minmax(180px, 230px) minmax(420px, 560px) minmax(210px, 270px) minmax(120px, 160px) !important;
        align-items: center !important;
        gap: 18px !important;
        width: min(calc(100% - 96px), 1720px) !important;
        height: 78px !important;
        min-height: 78px !important;
        margin-inline: auto !important;
        padding: 0 !important;
    }

    body:not(.rn-account-body) .ks-account-nav {
        grid-column: 1 !important;
        justify-self: start !important;
        display: flex !important;
        flex-direction: row-reverse !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        direction: ltr !important;
    }

    body:not(.rn-account-body) .ks-header-tools {
        grid-column: 2 !important;
        justify-self: start !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 18px !important;
        min-width: 0 !important;
        width: auto !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    body:not(.rn-account-body) .ks-search {
        grid-column: 3 !important;
        justify-self: stretch !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    body:not(.rn-account-body) .ks-menu {
        grid-column: 4 !important;
        justify-self: end !important;
        width: auto !important;
        min-width: 0 !important;
    }

    body:not(.rn-account-body) .ks-brand {
        grid-column: 5 !important;
        justify-self: end !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .ks-profile-menu {
        position: relative !important;
        flex: 0 0 auto !important;
        direction: rtl !important;
    }

    .ks-profile-menu summary {
        display: grid !important;
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
        place-items: center !important;
        cursor: pointer !important;
        border: 1px solid #dfe8e5 !important;
        border-radius: 999px !important;
        background: #fff !important;
        padding: 0 !important;
        box-shadow: 0 12px 26px rgb(15 32 38 / 8%) !important;
        list-style: none !important;
    }

    .ks-profile-menu summary::-webkit-details-marker {
        display: none !important;
    }

    .ks-profile-menu summary::before,
    .ks-profile-menu summary span {
        display: none !important;
    }

    .ks-profile-menu summary b {
        display: grid !important;
        width: 34px !important;
        height: 34px !important;
        place-items: center !important;
        border-radius: 999px !important;
        background: #0759bf !important;
        color: #fff !important;
        font-size: 15px !important;
        font-weight: 950 !important;
        line-height: 1 !important;
    }

    .ks-profile-menu > div {
        position: absolute !important;
        top: calc(100% + 12px) !important;
        left: 0 !important;
        z-index: 999 !important;
        display: grid !important;
        width: 230px !important;
        gap: 4px !important;
        border: 1px solid #dfe8e5 !important;
        border-radius: 20px !important;
        background: rgb(255 255 255 / 98%) !important;
        padding: 10px !important;
        box-shadow: 0 22px 54px rgb(15 32 38 / 16%) !important;
        text-align: right !important;
        backdrop-filter: blur(16px) !important;
    }

    .ks-profile-menu a,
    .ks-profile-menu button {
        display: flex !important;
        width: 100% !important;
        min-height: 42px !important;
        align-items: center !important;
        justify-content: flex-start !important;
        border: 0 !important;
        border-radius: 13px !important;
        background: transparent !important;
        padding: 0 13px !important;
        color: #073d36 !important;
        font-size: 14px !important;
        font-weight: 900 !important;
        text-align: right !important;
        box-shadow: none !important;
    }

    .ks-profile-menu a:hover,
    .ks-profile-menu button:hover {
        background: #f0f6f4 !important;
    }

    .ks-profile-menu form {
        margin: 0 !important;
    }

    .ks-cart-link {
        flex: 0 0 42px !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        border: 0 !important;
        background: transparent !important;
        color: #162832 !important;
        box-shadow: none !important;
    }

    .ks-cart-link span[hidden],
    [data-rn-cart-count][hidden] {
        display: none !important;
    }

    .ks-cart-link span:not([hidden]) {
        top: -6px !important;
        left: -7px !important;
        display: grid !important;
        width: 20px !important;
        min-width: 20px !important;
        height: 20px !important;
        place-items: center !important;
        border-radius: 999px !important;
        background: #0759bf !important;
        color: #fff !important;
        font-size: 11px !important;
        font-weight: 950 !important;
    }

    .kd-favorites-grid:has(.kd-empty) {
        display: grid !important;
        min-height: 360px !important;
        place-items: center !important;
    }

    .kd-favorites-grid .kd-empty {
        width: min(100%, 520px) !important;
        min-height: 260px !important;
        align-content: center !important;
        justify-items: center !important;
        text-align: center !important;
        border: 1px dashed #cbd9d6 !important;
        border-radius: 26px !important;
        background: linear-gradient(180deg, #fff, #f7fbfa) !important;
        padding: 34px !important;
    }

    .kd-empty-favorites {
        display: grid !important;
        width: min(100% - 48px, 560px) !important;
        min-height: 300px !important;
        place-items: center !important;
        align-content: center !important;
        justify-items: center !important;
        gap: 12px !important;
        margin: 54px auto !important;
        border: 1px dashed #c7d8d4 !important;
        border-radius: 28px !important;
        background:
            radial-gradient(circle at 50% 0%, rgb(7 89 191 / 7%), transparent 44%),
            linear-gradient(180deg, #fff, #f7fbfa) !important;
        padding: 38px !important;
        text-align: center !important;
    }

    .kd-empty-favorites h3,
    .kd-empty-favorites p {
        margin: 0 !important;
        text-align: center !important;
    }

    .kd-empty-favorites a {
        margin-top: 6px !important;
    }
}

@media (max-width: 1100px) {
    @layer components {
        body:not(.rn-account-body) .ks-topbar {
            grid-template-columns: 44px minmax(0, 1fr) 92px !important;
            width: min(calc(100% - 28px), 620px) !important;
            height: 64px !important;
            min-height: 64px !important;
            gap: 8px !important;
        }

        body:not(.rn-account-body) .ks-menu-trigger {
            grid-column: 1 !important;
            justify-self: start !important;
        }

        body:not(.rn-account-body) .ks-account-nav {
            grid-column: 2 !important;
            justify-self: center !important;
            flex-direction: row-reverse !important;
            gap: 8px !important;
        }

        body:not(.rn-account-body) .ks-brand {
            grid-column: 3 !important;
            justify-self: end !important;
        }

        body:not(.rn-account-body) .ks-search,
        body:not(.rn-account-body) .ks-menu,
        body:not(.rn-account-body) .ks-header-tools {
            display: none !important;
        }

        .ks-profile-menu summary {
            width: 40px !important;
            height: 40px !important;
            min-width: 40px !important;
            min-height: 40px !important;
        }

        .ks-profile-menu summary b {
            width: 30px !important;
            height: 30px !important;
            font-size: 13px !important;
        }

        .ks-profile-menu > div {
            left: auto !important;
            right: -8px !important;
        }
    }
}

@layer components {
    .rn-account-body .ks-account-nav {
        direction: ltr !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
    }
}

/* Visual polish pass: flat professional header and tighter product-card rhythm. */
@layer components {
    .ks-header {
        position: static !important;
        border-bottom: 1px solid #e7ecea !important;
        background: #fff !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }

    body:not(.rn-account-body) .ks-topbar {
        display: grid !important;
        direction: ltr !important;
        grid-template-columns: minmax(190px, 260px) minmax(170px, 210px) minmax(460px, 590px) minmax(210px, 260px) minmax(120px, 150px) !important;
        width: min(calc(100% - 112px), 1700px) !important;
        height: 76px !important;
        min-height: 76px !important;
        align-items: center !important;
        gap: 24px !important;
        padding: 0 !important;
        margin-inline: auto !important;
    }

    .rn-account-body .ks-topbar {
        grid-template-columns: minmax(260px, 330px) minmax(176px, 210px) minmax(420px, 540px) minmax(220px, 270px) minmax(120px, 150px) !important;
        width: min(calc(100% - 112px), 1700px) !important;
        height: 70px !important;
        min-height: 70px !important;
        gap: 22px !important;
    }

    .ks-login-button {
        min-width: 154px !important;
        min-height: 48px !important;
        border-radius: 10px !important;
        background: #0759bf !important;
        box-shadow: none !important;
        color: #fff !important;
        font-size: 20px !important;
        font-weight: 950 !important;
        line-height: 1 !important;
        transition: background .18s ease, transform .18s ease !important;
    }

    .ks-login-button:hover {
        background: #064fa8 !important;
        box-shadow: none !important;
        transform: translateY(-1px) !important;
    }

    .ks-cart-link,
    .kd-header-icon,
    .ks-profile-menu summary {
        border: 1px solid #e0e8e5 !important;
        background: #fff !important;
        box-shadow: none !important;
        color: #142833 !important;
    }

    .ks-cart-link:hover,
    .kd-header-icon:hover,
    .ks-profile-menu summary:hover {
        background: #f6faf9 !important;
    }

    .ks-profile-menu summary b {
        background: #0759bf !important;
        box-shadow: none !important;
    }

    .kr-preference summary {
        min-height: 38px !important;
        gap: 7px !important;
        border-radius: 999px !important;
        background: transparent !important;
        box-shadow: none !important;
        padding-inline: 4px !important;
    }

    .ks-search {
        height: 46px !important;
        border: 0 !important;
        border-radius: 14px !important;
        background: #e8eeec !important;
        box-shadow: none !important;
    }

    .ks-menu {
        min-width: 0 !important;
        min-height: 44px !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        gap: 18px !important;
        padding: 0 !important;
    }

    .ks-menu a {
        min-height: 38px !important;
        border-radius: 999px !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 14px !important;
    }

    .ks-menu a:first-child,
    .ks-menu a:hover {
        background: #f4f8f7 !important;
        color: #0759bf !important;
    }

    .ks-brand-logo {
        width: 130px !important;
        max-height: 44px !important;
        object-fit: contain !important;
    }

    .kr-section {
        margin-top: 46px !important;
    }

    .kr-section-head {
        margin-bottom: 26px !important;
        align-items: center !important;
    }

    .kr-service-grid {
        align-items: start !important;
        gap: 34px 58px !important;
    }

    .kr-service-card {
        display: grid !important;
        width: 240px !important;
        min-height: 0 !important;
        grid-template-rows: auto auto !important;
        align-content: start !important;
        justify-items: center !important;
        gap: 14px !important;
        padding: 0 !important;
        margin: 0 auto !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        text-align: center !important;
    }

    .kr-service-card__image {
        display: grid !important;
        width: 184px !important;
        height: 184px !important;
        place-items: center !important;
        margin: 0 auto !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    .kr-service-card__image img {
        display: block !important;
        width: 184px !important;
        height: 184px !important;
        object-fit: contain !important;
        margin: 0 auto !important;
        filter: none !important;
    }

    .kr-service-card__body {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }

    .kr-service-card__body h3 {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #073d36 !important;
        font-size: 25px !important;
        font-weight: 950 !important;
        line-height: 1.12 !important;
        letter-spacing: -.02em !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .kr-card-hidden-action {
        display: none !important;
    }
}

@media (max-width: 1100px) {
    @layer components {
        body:not(.rn-account-body) .ks-topbar,
        .rn-account-body .ks-topbar {
            grid-template-columns: 42px minmax(0, 1fr) 82px !important;
            width: min(calc(100% - 28px), 620px) !important;
            height: 64px !important;
            min-height: 64px !important;
            gap: 8px !important;
        }

        .ks-login-button {
            min-width: 122px !important;
            min-height: 42px !important;
            font-size: 16px !important;
            border-radius: 12px !important;
        }

        .kr-section {
            margin-top: 34px !important;
        }

        .kr-service-grid.rn-mobile-carousel {
            gap: 18px !important;
            align-items: start !important;
        }

        .kr-service-card {
            width: 142px !important;
            gap: 8px !important;
        }

        .kr-service-card__image,
        .kr-service-card__image img {
            width: 118px !important;
            height: 118px !important;
        }

        .kr-service-card__body h3 {
            font-size: 15px !important;
            line-height: 1.16 !important;
        }
    }
}

/* LikeCard-authorized visual skin pass */
@layer components {
    :root {
        --lc-navy: #17264d;
        --lc-orange: #ff8417;
        --lc-soft: #f7f7f9;
        --lc-muted: #8a90a3;
        --lc-line: #eceef5;
        --lc-shadow: 0 10px 28px rgba(23, 38, 77, .09);
    }

    body {
        background: var(--lc-soft);
        color: var(--lc-navy);
    }

    body.lc-dimmed {
        background: #eef0f7;
    }

    body.lc-dimmed .surface,
    body.lc-dimmed .lc-quick-card,
    body.lc-dimmed .rn-footer {
        filter: saturate(.92);
    }

    .rn-header {
        background: var(--lc-navy);
        color: #fff;
        box-shadow: none;
    }

    .rn-header-row {
        max-width: 1232px;
    }

    .rn-header-top {
        min-height: 73px;
        grid-template-columns: 220px minmax(360px, 464px) 1fr auto;
        gap: 30px;
    }

    .rn-brand {
        direction: ltr;
        gap: 9px;
    }

    .rn-brand-mark,
    .rn-brand-mark svg {
        width: 48px;
        height: 48px;
    }

    .rn-brand-name {
        font-size: 22px;
        letter-spacing: -.03em;
    }

    .rn-brand-tagline {
        margin-top: 1px;
        color: #ffb246;
        font-size: 10px;
    }

    .rn-search {
        height: 48px;
    }

    .rn-search input,
    .rn-mobile-search input {
        border-radius: 5px;
        color: #7c8294;
        font-size: 14px;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
    }

    .rn-account-nav,
    .rn-header-tools {
        gap: 11px;
        font-size: 14px;
        font-weight: 950;
    }

    .rn-user-circle {
        width: 29px;
        height: 29px;
        color: var(--lc-navy);
    }

    .rn-mode {
        width: 50px;
        height: 31px;
        background: rgba(255, 255, 255, .1);
    }

    .rn-cart-count {
        display: inline-grid;
        min-width: 18px;
        height: 18px;
        place-items: center;
        border-radius: 999px;
        background: var(--lc-orange);
        color: #fff;
        font-size: 11px;
    }

    .rn-header-menu {
        min-height: 77px;
        gap: clamp(28px, 4vw, 54px);
        border-top: 0;
        font-size: 14px;
        font-weight: 950;
    }

    .rn-all-cats {
        margin-inline-start: auto;
    }

    .rn-main {
        min-height: 58vh;
    }

    .lc-hero {
        height: 400px;
        background:
            linear-gradient(90deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .02)),
            linear-gradient(90deg, #02040b 0%, #07111f 44%, #30170f 100%);
    }

    .lc-hero::before {
        display: none;
    }

    .lc-hero-copy h1 {
        top: 92px;
        right: 62%;
        width: 430px;
        color: rgba(255, 255, 255, .74);
        font-size: 72px;
        text-align: right;
        opacity: 0;
    }

    .lc-hero-copy h2 {
        top: 196px;
        right: 62%;
        width: 430px;
        color: #9c640e;
        font-size: 64px;
        text-align: right;
        opacity: 0;
    }

    .lc-hero-copy a {
        top: 328px;
        right: calc(62% + 290px);
        min-height: 39px;
        border-radius: 4px;
        padding-inline: 18px;
        background: #fff;
        color: var(--lc-navy);
        opacity: 0;
    }

    .lc-hero-art {
        display: none;
        left: 10%;
        width: 520px;
    }

    .lc-gift-card {
        width: 220px;
        height: 286px;
        background:
            linear-gradient(150deg, rgba(30, 119, 149, .98), rgba(6, 67, 93, .98)),
            #0c6f91;
        border-radius: 15px;
    }

    .lc-slider-arrow {
        width: 47px;
        height: 47px;
        box-shadow: 0 10px 20px rgba(0, 0, 0, .2);
        opacity: 0;
    }

    .lc-arrow-right {
        right: 84px;
    }

    .lc-arrow-left {
        left: 84px;
    }

    .lc-quick-card {
        max-width: 1232px;
        min-height: 177px;
        margin-top: -1px;
        border-radius: 3px;
        padding: 25px 31px 24px;
        box-shadow: 0 13px 30px rgba(23, 38, 77, .12);
    }

    .lc-dots {
        opacity: 0;
    }

    .lc-quick-title {
        justify-content: flex-start;
        color: var(--lc-orange);
        font-size: 26px;
    }

    .lc-quick-strip {
        gap: 31px;
        margin-top: 32px;
        border-bottom: 4px solid #989dad;
        scrollbar-width: none;
    }

    .lc-quick-strip::-webkit-scrollbar {
        display: none;
    }

    .lc-quick-pill {
        min-width: 143px;
        border-radius: 999px;
        background: #fbfbfc;
        color: #666d82;
        font-size: 14px;
        box-shadow: none;
    }

    .lc-page-shell {
        max-width: 1232px;
        margin-top: 46px;
    }

    .lc-section-head {
        margin-bottom: 28px;
    }

    .lc-section-head h2 {
        font-size: 25px;
        font-weight: 500;
    }

    .lc-category-card,
    .lc-product-card,
    .surface {
        border: 1px solid var(--lc-line);
        border-radius: 5px;
        background: #fff;
        box-shadow: 0 8px 22px rgba(23, 38, 77, .055);
    }

    .lc-category-card {
        min-height: 151px;
        padding: 17px 14px;
    }

    .lc-category-grid {
        gap: 16px;
    }

    .lc-product-grid {
        gap: 18px;
    }

    .primary-button,
    .secondary-button,
    .nav-pill,
    .ghost-button {
        min-height: 42px;
        border-radius: 4px;
        font-weight: 950;
    }

    .primary-button {
        background: var(--lc-orange);
        color: #fff;
        box-shadow: 0 12px 23px rgba(255, 132, 23, .22);
    }

    .secondary-button,
    .nav-pill {
        border-color: #dfe2ea;
        background: #fff;
        color: var(--lc-navy);
    }

    .eyebrow.dark {
        border-color: #ffe1c5;
        color: var(--lc-orange);
    }

    .form-field,
    .info-box,
    .metric-card,
    .summary-row {
        border-radius: 5px;
        background: #f8f9fc;
    }

    .form-field input,
    .form-field select,
    .form-field textarea {
        min-height: 47px;
        border-color: #e1e4ed;
        border-radius: 4px;
        background: #fff;
        color: var(--lc-navy);
    }

    .summary-row.total {
        background: var(--lc-navy);
    }

    .lc-auth-shell {
        min-height: calc(100vh - 150px);
        display: grid;
        place-items: start center;
        padding: 70px 16px 90px;
        background:
            radial-gradient(circle at 18% 18%, rgba(255, 132, 23, .08), transparent 28%),
            radial-gradient(circle at 82% 2%, rgba(23, 38, 77, .08), transparent 24%);
    }

    .lc-auth-card {
        width: min(100%, 456px);
        border: 1px solid var(--lc-line);
        border-radius: 5px;
        background: #fff;
        padding: 34px;
        box-shadow: var(--lc-shadow);
        text-align: center;
    }

    .lc-auth-card.wide {
        width: min(100%, 680px);
    }

    .lc-auth-icon {
        display: grid;
        width: 62px;
        height: 62px;
        place-items: center;
        margin-inline: auto;
        border-radius: 999px;
        background: #fff3e8;
        color: var(--lc-orange);
    }

    .lc-auth-icon svg {
        width: 32px;
        height: 32px;
    }

    .lc-auth-card h1 {
        margin-top: 18px;
        color: var(--lc-navy);
        font-size: 28px;
        font-weight: 950;
    }

    .lc-auth-card p {
        margin-top: 8px;
        color: var(--lc-muted);
        font-size: 14px;
        line-height: 1.8;
    }

    .lc-auth-form {
        display: grid;
        gap: 14px;
        margin-top: 24px;
        text-align: right;
    }

    .lc-auth-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lc-check-row {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--lc-navy);
        font-size: 13px;
        font-weight: 900;
    }

    .lc-auth-link {
        display: block;
        margin-top: 18px;
        color: var(--lc-orange);
        font-size: 14px;
        font-weight: 950;
    }

    .lc-alert {
        margin-top: 18px;
        border-radius: 5px;
        padding: 12px 14px;
        text-align: right;
        font-size: 13px;
        font-weight: 800;
    }

    .lc-alert.danger {
        border: 1px solid #fecaca;
        background: #fff1f2;
        color: #b91c1c;
    }

    .lc-product-layout,
    .lc-checkout-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 420px;
        gap: 22px;
        align-items: start;
    }

    .lc-product-detail,
    .lc-form-card,
    .lc-buy-box,
    .lc-cart-list {
        padding: 24px;
    }

    .lc-back-link {
        display: inline-flex;
        margin-bottom: 18px;
        color: var(--lc-orange);
        font-size: 14px;
        font-weight: 950;
    }

    .lc-product-detail-grid {
        display: grid;
        grid-template-columns: 260px 1fr;
        gap: 28px;
        align-items: start;
    }

    .lc-product-detail h1,
    .lc-form-card h1 {
        margin-top: 12px;
        color: var(--lc-navy);
        font-size: 32px;
        font-weight: 950;
        line-height: 1.25;
    }

    .lc-product-detail p {
        margin-top: 12px;
        color: #657087;
        line-height: 1.9;
    }

    .lc-product-visual {
        min-height: 260px;
        border-radius: 5px;
    }

    .lc-buy-box h2 {
        color: var(--lc-navy);
        font-size: 22px;
        font-weight: 950;
    }

    .lc-buy-box p {
        margin-top: 16px;
        color: #6e7488;
        font-size: 13px;
        line-height: 1.8;
    }

    .lc-cart-list {
        overflow: hidden;
    }

    .lc-cart-row {
        display: grid;
        grid-template-columns: 76px minmax(0, 1fr) 180px 130px auto;
        gap: 16px;
        align-items: center;
        border-bottom: 1px solid var(--lc-line);
        padding: 16px 0;
    }

    .lc-cart-row:last-child {
        border-bottom: 0;
    }

    .lc-cart-thumb {
        display: grid;
        width: 70px;
        height: 70px;
        place-items: center;
        border-radius: 5px;
        background: var(--tone);
        color: #fff;
    }

    .lc-cart-thumb svg {
        width: 32px;
        height: 32px;
    }

    .rn-footer {
        margin-top: 80px;
        background: #fff;
        border-top: 1px solid var(--lc-line);
    }

    .rn-footer-inner {
        max-width: 1232px;
        margin-inline: auto;
        padding: 42px 16px 24px;
    }

    .rn-app-card {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 24px;
        align-items: center;
        border-bottom: 1px solid var(--lc-line);
        padding-bottom: 32px;
    }

    .rn-app-card h2,
    .rn-footer-grid h3 {
        color: var(--lc-navy);
        font-size: 20px;
        font-weight: 950;
    }

    .rn-app-card p {
        margin-top: 8px;
        color: #777e91;
        line-height: 1.8;
    }

    .rn-store-badges,
    .rn-social,
    .rn-payments {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .rn-store-badges a,
    .rn-payments span,
    .rn-social a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 42px;
        border: 1px solid #e3e6ef;
        border-radius: 5px;
        background: #fff;
        padding: 0 13px;
        color: var(--lc-navy);
        font-size: 12px;
        font-weight: 950;
    }

    .rn-store-badges svg {
        margin-inline-end: 7px;
        width: 19px;
        height: 19px;
        color: var(--lc-orange);
    }

    .rn-footer-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 34px;
        padding: 34px 0;
    }

    .rn-footer-grid a {
        display: block;
        margin-top: 13px;
        color: #6f7588;
        font-size: 14px;
        font-weight: 800;
    }

    .rn-social a {
        width: 38px;
        padding: 0;
        color: var(--lc-orange);
    }

    .rn-footer-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        border-top: 1px solid var(--lc-line);
        padding-top: 20px;
        color: #7a8092;
        font-size: 13px;
    }

    .rn-footer-logo {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--lc-navy);
        font-size: 19px;
        font-weight: 950;
    }
}

/* Mobile pro sidebar + flawless dark/night mode + selected nav containment fix */
@layer components {
    .ks-menu {
        min-width: 236px !important;
        min-height: 48px !important;
        overflow: hidden !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 6px !important;
        gap: 4px !important;
    }

    .ks-menu a {
        min-height: 36px !important;
        padding: 0 14px !important;
        border-radius: 999px !important;
        line-height: 1 !important;
    }

    .rn-mobile-menu-trigger,
    .rn-theme-toggle {
        display: inline-grid;
        place-items: center;
        border: 0;
        color: #07362f;
    }

    .rn-mobile-menu-trigger {
        display: none;
        grid-area: mobile-menu;
        width: 44px;
        height: 44px;
        border-radius: 14px;
        background: #f1f7f5;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 10px 20px rgba(0,54,47,.08);
    }

    .rn-mobile-menu-trigger svg,
    .rn-theme-toggle svg {
        width: 22px;
        height: 22px;
    }

    .rn-theme-toggle-desktop {
        grid-column: 1;
        justify-self: end;
        width: 42px;
        height: 42px;
        border-radius: 14px;
        background: linear-gradient(145deg, #f8fcfb, #eaf3f1);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 20px rgba(0,54,47,.08);
    }

    .rn-theme-moon {
        display: none;
    }

    [data-theme="dark"] .rn-theme-sun {
        display: none;
    }

    [data-theme="dark"] .rn-theme-moon {
        display: block;
    }

    .rn-sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 990;
        background: rgba(0, 22, 28, .54);
        opacity: 0;
        pointer-events: none;
        backdrop-filter: blur(8px);
        transition: opacity .24s ease;
    }

    .rn-mobile-sidebar {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 1000;
        display: flex;
        width: min(88vw, 390px);
        height: 100dvh;
        flex-direction: column;
        gap: 18px;
        transform: translateX(105%);
        pointer-events: none;
        border-left: 1px solid rgba(0, 54, 47, .08);
        background:
            radial-gradient(circle at 15% 0%, rgba(11, 109, 224, .16), transparent 35%),
            linear-gradient(180deg, rgba(255,255,255,.98), rgba(241,248,246,.98));
        padding: 18px;
        box-shadow: -26px 0 60px rgba(0, 31, 39, .22);
        transition: transform .28s cubic-bezier(.2,.8,.2,1);
        overflow-y: auto;
    }

    .rn-sidebar-open .rn-sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .rn-sidebar-open .rn-mobile-sidebar {
        transform: translateX(0);
        pointer-events: auto;
    }

    .rn-sidebar-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
    }

    .rn-sidebar-head .ks-brand {
        position: relative;
        transform: none;
    }

    .rn-sidebar-head .ks-brand::after {
        display: none;
    }

    .rn-sidebar-head button {
        display: grid;
        width: 42px;
        height: 42px;
        place-items: center;
        border-radius: 14px;
        background: #fff;
        color: #07362f;
        box-shadow: 0 10px 20px rgba(0,54,47,.08);
    }

    .rn-sidebar-head button svg {
        width: 21px;
        height: 21px;
    }

    .rn-sidebar-search {
        display: flex;
        min-height: 52px;
        align-items: center;
        overflow: hidden;
        border: 1px solid rgba(0,54,47,.07);
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 12px 24px rgba(0,54,47,.07);
    }

    .rn-sidebar-search input {
        width: 100%;
        border: 0;
        background: transparent;
        padding: 0 16px;
        color: #07362f;
        font-weight: 800;
        outline: none;
    }

    .rn-sidebar-search button {
        display: grid;
        width: 52px;
        height: 52px;
        place-items: center;
        color: #07362f;
    }

    .rn-sidebar-search svg {
        width: 21px;
        height: 21px;
    }

    .rn-sidebar-links {
        display: grid;
        gap: 10px;
    }

    .rn-sidebar-links a {
        display: flex;
        min-height: 56px;
        align-items: center;
        gap: 12px;
        border: 1px solid rgba(0,54,47,.06);
        border-radius: 18px;
        background: rgba(255,255,255,.76);
        color: #07362f;
        padding: 0 14px;
        font-size: 16px;
        font-weight: 950;
        box-shadow: 0 10px 20px rgba(0,54,47,.045);
    }

    .rn-sidebar-links a svg {
        width: 23px;
        height: 23px;
        color: #0750ac;
    }

    .rn-sidebar-panel {
        margin-top: auto;
        border: 1px solid rgba(0,54,47,.07);
        border-radius: 22px;
        background: rgba(255,255,255,.72);
        padding: 14px;
        box-shadow: 0 16px 32px rgba(0,54,47,.075);
    }

    .rn-sidebar-panel > span {
        display: block;
        margin-bottom: 10px;
        color: #60747a;
        font-size: 12px;
        font-weight: 950;
    }

    .rn-theme-toggle-sidebar {
        display: flex;
        width: 100%;
        min-height: 52px;
        align-items: center;
        justify-content: space-between;
        border-radius: 17px;
        background: linear-gradient(145deg, #f8fcfb, #eaf3f1);
        padding: 0 13px;
        color: #07362f;
        font-weight: 950;
    }

    html[data-theme="dark"],
    html[data-theme="dark"] body {
        background: #071216 !important;
        color: #e8f4f2 !important;
    }

    html[data-theme="dark"] .ks-header {
        background: rgba(7, 18, 22, .94) !important;
        border-bottom-color: rgba(255,255,255,.08) !important;
        box-shadow: 0 14px 34px rgba(0,0,0,.22) !important;
    }

    html[data-theme="dark"] .rn-main,
    html[data-theme="dark"] body,
    html[data-theme="dark"] .kr-page {
        background: #071216 !important;
    }

    html[data-theme="dark"] .ks-search,
    html[data-theme="dark"] .rn-sidebar-search {
        border-color: rgba(255,255,255,.08) !important;
        background: #111f25 !important;
    }

    html[data-theme="dark"] .ks-search input,
    html[data-theme="dark"] .rn-sidebar-search input {
        color: #d8e7e4 !important;
    }

    html[data-theme="dark"] .ks-menu,
    html[data-theme="dark"] .rn-theme-toggle-desktop,
    html[data-theme="dark"] .rn-mobile-menu-trigger,
    html[data-theme="dark"] .rn-sidebar-head button,
    html[data-theme="dark"] .rn-sidebar-panel,
    html[data-theme="dark"] .rn-sidebar-links a,
    html[data-theme="dark"] .rn-theme-toggle-sidebar {
        border-color: rgba(255,255,255,.08) !important;
        background: #102026 !important;
        color: #e8f4f2 !important;
        box-shadow: 0 14px 26px rgba(0,0,0,.22) !important;
    }

    html[data-theme="dark"] .ks-menu a,
    html[data-theme="dark"] .kr-section-head h2,
    html[data-theme="dark"] .kr-service-card h3,
    html[data-theme="dark"] .kr-category-tile,
    html[data-theme="dark"] .kr-hero-side a,
    html[data-theme="dark"] .ks-footer h3,
    html[data-theme="dark"] .ks-footer a,
    html[data-theme="dark"] .ks-footer-about p,
    html[data-theme="dark"] .ks-copyright {
        color: #e8f4f2 !important;
    }

    html[data-theme="dark"] .ks-menu a:first-child,
    html[data-theme="dark"] .ks-menu a:hover {
        background: #172b33 !important;
        color: #70b7ff !important;
    }

    html[data-theme="dark"] .ks-brand {
        color: #70b7ff !important;
    }

    html[data-theme="dark"] .ks-brand-mark,
    html[data-theme="dark"] .rn-theme-toggle-desktop {
        background: linear-gradient(145deg, #1677ff, #0b376f) !important;
    }

    html[data-theme="dark"] .kr-hero-carousel,
    html[data-theme="dark"] .kr-service-card__image,
    html[data-theme="dark"] .kr-service-card,
    html[data-theme="dark"] .kr-category-strip,
    html[data-theme="dark"] .kr-section {
        background: transparent !important;
    }

    html[data-theme="dark"] .ks-footer {
        background: #0d1b20 !important;
        border-top-color: rgba(255,255,255,.08) !important;
    }

    html[data-theme="dark"] .rn-mobile-sidebar {
        border-left-color: rgba(255,255,255,.08);
        background:
            radial-gradient(circle at 15% 0%, rgba(22, 119, 255, .22), transparent 36%),
            linear-gradient(180deg, rgba(9,22,27,.98), rgba(13,29,35,.98));
    }

    html[data-theme="dark"] .rn-sidebar-backdrop {
        background: rgba(0, 0, 0, .68);
    }
}

@media (max-width: 1200px) {
    @layer components {
        .rn-mobile-menu-trigger {
            display: grid !important;
        }

        .rn-theme-toggle-desktop {
            display: none !important;
        }

        .ks-topbar {
            grid-template-columns: 52px 1fr auto !important;
            grid-template-areas: "mobile-menu account brand" "search search search" !important;
        }

        .ks-account-nav {
            justify-self: center !important;
        }
    }
}

@media (min-width: 1201px) {
    @layer components {
        .rn-mobile-sidebar,
        .rn-sidebar-backdrop {
            display: none !important;
        }
    }
}

/* Absolute final override for selected currency/language switcher */
@layer components {
    header.ks-header .ks-header-tools {
        min-width: auto !important;
        min-height: 0 !important;
        gap: 22px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    header.ks-header .kr-preference summary {
        min-width: auto !important;
        min-height: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        padding: 0 !important;
        box-shadow: none !important;
        transform: none !important;
    }

    header.ks-header .kr-preference summary:hover,
    header.ks-header .kr-preference[open] summary {
        background: transparent !important;
        box-shadow: none !important;
        transform: none !important;
    }
}

/* Inspector-selected fix: premium language/currency switcher without weird arrows */
@layer components {
    .ks-topbar {
        grid-template-columns: 205px 350px minmax(500px, 610px) 285px 230px !important;
    }

    .ks-header-tools {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        min-width: 300px !important;
        min-height: 54px !important;
        padding: 6px 8px !important;
        border: 1px solid rgba(0, 54, 47, .08) !important;
        border-radius: 18px !important;
        background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(240, 248, 246, .96)) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .95),
            0 16px 30px rgba(0, 54, 47, .08) !important;
        direction: rtl !important;
        overflow: visible !important;
    }

    .kr-preference {
        position: relative !important;
        z-index: 300 !important;
    }

    .kr-preference[open] {
        z-index: 700 !important;
    }

    .kr-preference summary {
        appearance: none !important;
        -webkit-appearance: none !important;
        display: inline-flex !important;
        min-width: 132px !important;
        min-height: 42px !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 9px !important;
        border: 1px solid rgba(0, 54, 47, .055) !important;
        border-radius: 14px !important;
        background: linear-gradient(180deg, #fff, #f8fbfa) !important;
        padding: 0 12px !important;
        color: #07362f !important;
        font-size: 15px !important;
        font-weight: 950 !important;
        line-height: 1 !important;
        list-style: none !important;
        cursor: pointer !important;
        box-shadow: 0 8px 16px rgba(0, 54, 47, .06) !important;
    }

    .kr-preference summary::-webkit-details-marker {
        display: none !important;
    }

    .kr-preference summary::marker {
        content: "" !important;
        display: none !important;
    }

    .kr-preference summary::after {
        content: "" !important;
        display: block !important;
        width: 0 !important;
        height: 0 !important;
        margin-inline-start: 1px !important;
        border-inline-start: 4px solid transparent !important;
        border-inline-end: 4px solid transparent !important;
        border-top: 5px solid currentColor !important;
        border-bottom: 0 !important;
        opacity: .62 !important;
        transform: none !important;
    }

    .kr-preference[open] summary {
        color: #0750ac !important;
        box-shadow: 0 12px 22px rgba(7, 80, 172, .12) !important;
    }

    .kr-preference[open] summary::after {
        transform: rotate(180deg) !important;
    }

    .kr-preference-menu {
        position: absolute !important;
        top: calc(100% + 12px) !important;
        inset-inline-end: 0 !important;
        left: auto !important;
        z-index: 9999 !important;
        display: grid !important;
        min-width: 185px !important;
        padding: 7px !important;
        border: 1px solid rgba(0, 54, 47, .08) !important;
        border-radius: 18px !important;
        background: rgba(255, 255, 255, .98) !important;
        box-shadow:
            0 22px 42px rgba(0, 54, 47, .16),
            inset 0 1px 0 rgba(255, 255, 255, .9) !important;
        backdrop-filter: blur(18px);
    }

    .kr-preference:not([open]) .kr-preference-menu {
        display: none !important;
    }

    .kr-preference-menu button {
        display: flex !important;
        width: 100% !important;
        align-items: center !important;
        gap: 10px !important;
        border: 0 !important;
        border-radius: 13px !important;
        background: transparent !important;
        padding: 12px 13px !important;
        color: #10333d !important;
        font-size: 15px !important;
        font-weight: 950 !important;
        text-align: right !important;
    }

    .kr-preference-menu button:hover,
    .kr-preference-menu button.is-active {
        background: linear-gradient(135deg, #eef7ff, #eef8f5) !important;
        color: #0750ac !important;
    }

    .kr-flag {
        width: 26px !important;
        height: 26px !important;
        box-shadow:
            0 0 0 2px #fff,
            0 0 0 3px rgba(0, 54, 47, .1),
            0 8px 14px rgba(0, 54, 47, .12) !important;
    }
}

/* Real flag images + clean Kroty-like switcher */
@layer components {
    .ks-header-tools {
        min-width: auto !important;
        min-height: 42px !important;
        gap: 18px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .kr-preference summary {
        min-width: auto !important;
        min-height: 36px !important;
        gap: 7px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        padding: 0 !important;
        box-shadow: none !important;
        color: #0b2730 !important;
        font-size: 18px !important;
        font-weight: 900 !important;
    }

    .kr-preference summary:hover,
    .kr-preference[open] summary {
        transform: none !important;
        box-shadow: none !important;
        color: #0b2730 !important;
    }

    .kr-preference summary::after {
        order: -1;
        margin-inline: 0 6px !important;
        border-inline-start-width: 4px !important;
        border-inline-end-width: 4px !important;
        border-top-width: 5px !important;
        color: #31444d;
    }

    .kr-flag-img {
        display: inline-block;
        width: 28px;
        height: 28px;
        flex: 0 0 28px;
        border-radius: 50%;
        object-fit: cover;
        box-shadow: none !important;
        background: transparent !important;
    }

    .kr-preference-menu {
        min-width: 160px !important;
        padding: 7px !important;
        border-radius: 14px !important;
    }

    .kr-preference-menu button {
        justify-content: flex-end !important;
        gap: 9px !important;
    }

    .kr-preference-menu .kr-flag-img {
        width: 26px;
        height: 26px;
        flex-basis: 26px;
    }
}

@layer components {
    .rn-inspector-toggle {
        position: fixed;
        z-index: 99999;
        right: 18px;
        bottom: 18px;
        min-height: 46px;
        border-radius: 999px;
        background: linear-gradient(145deg, #0b6de0, #074aa8);
        color: #fff;
        padding: 0 18px;
        font-weight: 950;
        box-shadow: 0 18px 34px rgba(7, 80, 172, .28);
    }

    .rn-inspector-toggle.is-active {
        background: linear-gradient(145deg, #00362f, #006c5e);
    }

    .rn-inspector-toast {
        position: fixed;
        right: 18px;
        bottom: 74px;
        z-index: 99999;
        transform: translateY(10px);
        border: 1px solid rgba(0, 54, 47, .1);
        border-radius: 16px;
        background: rgba(255, 255, 255, .96);
        color: #00362f;
        padding: 12px 15px;
        font-weight: 900;
        opacity: 0;
        box-shadow: 0 18px 34px rgba(0, 54, 47, .14);
        pointer-events: none;
        transition: opacity .18s ease, transform .18s ease;
    }

    .rn-inspector-toast.is-visible {
        transform: translateY(0);
        opacity: 1;
    }

    .rn-inspector-active {
        cursor: crosshair !important;
    }

    .rn-inspector-highlight {
        outline: 3px solid #0b6de0 !important;
        outline-offset: 4px !important;
        box-shadow: 0 0 0 9999px rgba(0, 54, 47, .08) !important;
    }
}

/* Final header + large-card correction pass */
@layer components {
    .ks-header {
        height: 68px !important;
        overflow: visible !important;
        background: #fff !important;
        border-bottom: 1px solid #eef2f1 !important;
        box-shadow: none !important;
    }

    .ks-topbar {
        direction: ltr;
        display: grid !important;
        width: min(calc(100% - 140px), 1720px) !important;
        grid-template-columns: 190px 275px minmax(470px, 560px) 230px 190px !important;
        grid-template-areas: "account tools search nav brand";
        min-height: 58px !important;
        align-items: center !important;
        gap: 24px !important;
        padding: 0 !important;
    }

    .ks-brand {
        grid-area: brand !important;
        direction: ltr;
        justify-self: end !important;
        display: inline-flex !important;
        align-items: center !important;
        color: #0b3474 !important;
        font-size: 30px !important;
        font-weight: 950 !important;
        line-height: 1 !important;
        white-space: nowrap;
    }

    .ks-brand::after {
        content: "STORE";
        position: absolute;
        margin-top: 32px;
        margin-inline-start: 46px;
        color: #6b7b8c;
        font-family: "Cairo", ui-sans-serif, system-ui, sans-serif;
        font-size: 7px;
        font-weight: 700;
        letter-spacing: .56em;
    }

    .ks-brand-mark {
        width: 30px !important;
        height: 32px !important;
        border-radius: 0 !important;
        background: #0b3474 !important;
        color: #fff !important;
        box-shadow: none !important;
    }

    .ks-menu {
        grid-area: nav !important;
        position: static !important;
        display: flex !important;
        width: auto !important;
        min-height: auto !important;
        margin: 0 !important;
        border: 0 !important;
        align-items: center !important;
        justify-content: end !important;
        gap: 46px !important;
        color: #082f2a !important;
        font-size: 22px !important;
        font-weight: 950 !important;
    }

    .ks-menu a {
        display: inline-flex !important;
        align-items: center;
        gap: 10px;
        color: #082f2a !important;
        white-space: nowrap;
    }

    .ks-menu a:first-child {
        color: #082f2a !important;
    }

    .kr-all-cats-link svg {
        width: 21px !important;
        height: 21px !important;
    }

    .ks-search {
        grid-area: search !important;
        width: 100% !important;
        height: 48px !important;
        border: 0 !important;
        border-radius: 14px !important;
        background: #e6ebe9 !important;
        box-shadow: none !important;
    }

    .ks-search input {
        height: 100%;
        color: #6d7b84 !important;
        font-size: 19px !important;
        font-weight: 650 !important;
    }

    .ks-search button {
        width: 52px !important;
    }

    .ks-search svg {
        width: 24px !important;
        height: 24px !important;
        color: #203a43;
    }

    .ks-header-tools {
        grid-area: tools !important;
        position: relative;
        z-index: 200;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 18px !important;
        direction: rtl;
    }

    .ks-account-nav {
        grid-area: account !important;
        justify-self: start !important;
        display: flex !important;
        align-items: center !important;
        direction: rtl;
    }

    .ks-login-button,
    .ks-account-nav > a {
        min-height: 48px !important;
        border-radius: 8px !important;
        background: #0059bd !important;
        padding: 0 28px !important;
        color: #fff !important;
        font-size: 21px !important;
        font-weight: 950 !important;
        box-shadow: 0 7px 14px rgba(0, 89, 189, .22) !important;
        white-space: nowrap;
    }

    .kr-preference {
        position: relative !important;
        z-index: 250;
    }

    .kr-preference[open] {
        z-index: 500;
    }

    .kr-preference summary {
        display: inline-flex !important;
        min-height: 42px !important;
        align-items: center !important;
        gap: 8px !important;
        cursor: pointer !important;
        list-style: none !important;
        color: #132f38 !important;
        font-size: 18px !important;
        font-weight: 900 !important;
        user-select: none;
    }

    .kr-preference summary::-webkit-details-marker {
        display: none !important;
    }

    .kr-preference summary::after {
        content: "⌄";
        margin-inline-start: 2px;
        color: #475569;
        font-size: 18px;
        line-height: 1;
    }

    .kr-preference-menu {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        inset-inline-end: 0 !important;
        left: auto !important;
        z-index: 999 !important;
        display: grid !important;
        min-width: 165px !important;
        overflow: hidden !important;
        border: 1px solid #d8e2df !important;
        border-radius: 12px !important;
        background: #fff !important;
        box-shadow: 0 18px 36px rgba(0, 54, 47, .16) !important;
    }

    .kr-preference:not([open]) .kr-preference-menu {
        display: none !important;
    }

    .kr-preference-menu button {
        display: flex !important;
        width: 100% !important;
        align-items: center !important;
        gap: 10px !important;
        border: 0 !important;
        background: #fff !important;
        padding: 12px 14px !important;
        color: #10333d !important;
        font-size: 15px !important;
        font-weight: 900 !important;
        text-align: right !important;
    }

    .kr-preference-menu button:hover,
    .kr-preference-menu button.is-active {
        background: #eef5f4 !important;
        color: #0059bd !important;
    }

    .kr-flag {
        flex: 0 0 auto;
        display: inline-block !important;
        width: 24px !important;
        height: 24px !important;
        border-radius: 50% !important;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, .12) !important;
    }

    .kr-flag-eg {
        background: linear-gradient(#ce2029 0 33.33%, #fff 33.33% 66.66%, #111 66.66% 100%) !important;
    }

    .kr-flag-us {
        background: linear-gradient(#b22234 0 14%, #fff 14% 28%, #b22234 28% 42%, #fff 42% 56%, #b22234 56% 70%, #fff 70% 84%, #b22234 84% 100%) !important;
        position: relative;
    }

    .kr-flag-us::before {
        content: "";
        position: absolute;
        top: 0;
        inset-inline-start: 0;
        width: 48%;
        height: 54%;
        border-start-start-radius: 50%;
        background: #21468b;
    }

    .kr-flag-eu {
        background: radial-gradient(circle at 50% 23%, #ffd700 0 6%, transparent 7%),
            radial-gradient(circle at 72% 32%, #ffd700 0 6%, transparent 7%),
            radial-gradient(circle at 77% 55%, #ffd700 0 6%, transparent 7%),
            radial-gradient(circle at 50% 78%, #ffd700 0 6%, transparent 7%),
            #244aa5 !important;
    }

    .kr-flag-sa {
        background: #006c35 !important;
    }

    .kr-flag-sa::before {
        content: "";
        display: block;
        width: 12px;
        height: 2px;
        margin: 11px auto 0;
        background: #fff;
        box-shadow: 0 4px 0 #fff;
    }

    .kr-flag-ae {
        background: linear-gradient(90deg, #ef3340 0 28%, transparent 28%),
            linear-gradient(#009739 0 33%, #fff 33% 66%, #000 66% 100%) !important;
    }

    .kr-flag-world {
        background: radial-gradient(circle at 34% 36%, #fff 0 18%, transparent 19%), linear-gradient(135deg, #0b5fb3, #0e9f6e) !important;
    }

    .kr-hero-stage {
        margin-top: 34px !important;
    }

    .kr-service-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 58px 70px !important;
    }

    .kr-service-card__image img {
        width: 230px !important;
        height: 230px !important;
        object-fit: contain !important;
    }

    .kr-service-card h3 {
        margin-top: 19px !important;
        color: #00362f !important;
        font-size: 29px !important;
        font-weight: 950 !important;
        line-height: 1.12 !important;
        letter-spacing: -.035em;
    }

    .kr-hero-side img {
        width: 170px !important;
        height: 170px !important;
    }

    .kr-hero-side a {
        font-size: 27px !important;
        font-weight: 950 !important;
    }

    .kr-section-head h2 {
        font-size: 48px !important;
        font-weight: 950 !important;
        letter-spacing: -.045em;
    }
}

@media (max-width: 1200px) {
    @layer components {
        .ks-topbar {
            width: min(calc(100% - 32px), 1000px) !important;
            grid-template-columns: 1fr auto !important;
            grid-template-areas:
                "account brand"
                "search search" !important;
            min-height: 118px !important;
            gap: 10px !important;
            padding: 10px 0 !important;
        }

        .ks-header {
            height: auto !important;
        }

        .ks-menu,
        .ks-header-tools {
            display: none !important;
        }

        .ks-search {
            display: flex !important;
        }

        .kr-service-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        }

        .kr-service-card__image img {
            width: 180px !important;
            height: 180px !important;
        }
    }
}

/* Clean native details markers in header preferences. */
@layer components {
    header.ks-header .kr-preference summary {
        list-style: none !important;
    }

    header.ks-header .kr-preference summary::-webkit-details-marker {
        display: none !important;
    }

    header.ks-header .kr-preference summary::after {
        content: "" !important;
        display: inline-block !important;
        width: 7px !important;
        height: 7px !important;
        border: solid #6b777b !important;
        border-width: 0 1.8px 1.8px 0 !important;
        background: transparent !important;
        transform: rotate(45deg) translateY(-1px) !important;
        margin-inline-start: 5px !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    header.ks-header .kr-preference[open] summary::after {
        transform: rotate(225deg) translate(-2px, -1px) !important;
    }

    html[data-theme="dark"] header.ks-header .kr-preference summary::after {
        border-color: #b9c8cc !important;
    }
}

/* Edge theme switch: separated from login, clipped from the left side like a premium handle. */
@layer components {
    .rn-theme-toggle-desktop {
        position: fixed !important;
        top: 18px !important;
        left: -15px !important;
        right: auto !important;
        z-index: 1200 !important;
        display: inline-grid !important;
        width: 58px !important;
        height: 58px !important;
        min-width: 58px !important;
        place-items: center !important;
        border: 1px solid rgba(255, 255, 255, .22) !important;
        border-radius: 999px !important;
        background:
            radial-gradient(circle at 68% 26%, rgba(255,255,255,.42), transparent 34%),
            linear-gradient(145deg, #1677ff, #0554bc) !important;
        color: #fff !important;
        box-shadow:
            0 16px 34px rgba(5, 84, 188, .28),
            inset 0 1px 0 rgba(255, 255, 255, .28) !important;
        transform: none !important;
        transition: transform .18s ease, background .18s ease, box-shadow .18s ease !important;
    }

    .rn-theme-toggle-desktop:hover {
        transform: translateX(8px) scale(1.02) !important;
        box-shadow:
            0 20px 40px rgba(5, 84, 188, .34),
            inset 0 1px 0 rgba(255, 255, 255, .3) !important;
    }

    .rn-theme-toggle-desktop svg {
        width: 25px !important;
        height: 25px !important;
        transform: translateX(6px) !important;
        stroke-width: 2.1 !important;
    }

    html:not([data-theme="dark"]) .rn-theme-toggle-desktop .rn-theme-sun {
        display: block !important;
    }

    html:not([data-theme="dark"]) .rn-theme-toggle-desktop .rn-theme-moon {
        display: none !important;
    }

    html[data-theme="dark"] .rn-theme-toggle-desktop {
        border-color: rgba(255, 255, 255, .12) !important;
        background:
            radial-gradient(circle at 68% 26%, rgba(255,255,255,.14), transparent 34%),
            linear-gradient(145deg, #15191f, #020405) !important;
        color: #fff !important;
        box-shadow:
            0 18px 38px rgba(0, 0, 0, .42),
            inset 0 1px 0 rgba(255, 255, 255, .12) !important;
    }

    html[data-theme="dark"] .rn-theme-toggle-desktop .rn-theme-sun {
        display: none !important;
    }

    html[data-theme="dark"] .rn-theme-toggle-desktop .rn-theme-moon {
        display: block !important;
    }
}

@media (min-width: 1201px) {
    @layer components {
        .ks-topbar {
            grid-template-columns: auto auto minmax(430px, 600px) auto auto !important;
            grid-template-areas: "account tools search menu brand" !important;
        }
    }
}

@media (max-width: 1200px) {
    @layer components {
        .rn-theme-toggle-desktop {
            top: 62px !important;
            left: -16px !important;
            width: 52px !important;
            height: 52px !important;
            min-width: 52px !important;
        }

        .rn-theme-toggle-desktop svg {
            width: 22px !important;
            height: 22px !important;
            transform: translateX(6px) !important;
        }

        .ks-topbar {
            grid-template-columns: 46px minmax(78px, 1fr) auto !important;
            grid-template-areas:
                "mobile-menu account brand"
                "search search search" !important;
        }
    }
}

/* Premium RaseedNow header polish + correct section heading alignment */
@layer components {
    .ks-header {
        height: 78px !important;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .94)),
            #fff !important;
        border-bottom: 1px solid rgba(0, 54, 47, .07) !important;
        box-shadow: 0 12px 34px rgba(0, 54, 47, .045) !important;
        backdrop-filter: blur(18px);
    }

    .ks-topbar {
        width: min(calc(100% - 110px), 1660px) !important;
        grid-template-columns: 205px 315px minmax(520px, 620px) 285px 230px !important;
        gap: 22px !important;
        min-height: 78px !important;
    }

    .ks-brand {
        gap: 10px !important;
        color: #0a377c !important;
        transform: translateY(-1px);
    }

    .ks-brand span:last-child {
        font-size: 31px;
        letter-spacing: -.055em;
    }

    .ks-brand-mark {
        width: 38px !important;
        height: 38px !important;
        border-radius: 12px !important;
        background: linear-gradient(145deg, #0b62d8, #07377f) !important;
        box-shadow: 0 12px 22px rgba(11, 98, 216, .22) !important;
    }

    .ks-brand::after {
        margin-top: 36px !important;
        margin-inline-start: 58px !important;
        letter-spacing: .72em !important;
        opacity: .8;
    }

    .ks-menu {
        gap: 30px !important;
        padding: 7px 12px !important;
        border: 1px solid rgba(0, 54, 47, .06) !important;
        border-radius: 999px !important;
        background: rgba(246, 250, 249, .86) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
        font-size: 18px !important;
    }

    .ks-menu a {
        min-height: 34px;
        border-radius: 999px;
        padding: 0 12px;
        transition: background .18s ease, color .18s ease;
    }

    .ks-menu a:hover,
    .ks-menu a:first-child {
        background: #fff !important;
        color: #0750ac !important;
        box-shadow: 0 8px 18px rgba(0, 54, 47, .07);
    }

    .ks-search {
        height: 50px !important;
        border: 1px solid rgba(0, 54, 47, .05) !important;
        border-radius: 17px !important;
        background: #edf2f1 !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .75),
            0 10px 22px rgba(0, 54, 47, .04) !important;
    }

    .ks-search input {
        font-size: 17px !important;
        color: #536873 !important;
    }

    .ks-header-tools {
        gap: 10px !important;
        padding: 6px !important;
        border: 1px solid rgba(0, 54, 47, .07) !important;
        border-radius: 999px !important;
        background: #f5f9f8 !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .92),
            0 10px 22px rgba(0, 54, 47, .055);
    }

    .kr-preference summary {
        min-height: 42px !important;
        border-radius: 999px !important;
        background: #fff !important;
        padding: 0 12px !important;
        color: #07362f !important;
        font-size: 15px !important;
        box-shadow: 0 7px 14px rgba(0, 54, 47, .055);
        transition: transform .18s ease, box-shadow .18s ease;
    }

    .kr-preference summary:hover {
        transform: translateY(-1px);
        box-shadow: 0 12px 20px rgba(0, 54, 47, .09);
    }

    .kr-preference[open] summary {
        color: #0750ac !important;
        box-shadow: 0 12px 20px rgba(7, 80, 172, .12);
    }

    .kr-preference summary::after {
        content: "";
        width: 8px;
        height: 8px;
        border-inline-end: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg) translateY(-2px);
        opacity: .75;
    }

    .kr-preference-menu {
        top: calc(100% + 12px) !important;
        min-width: 185px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(0, 54, 47, .08) !important;
        padding: 7px !important;
        background: rgba(255, 255, 255, .98) !important;
        box-shadow:
            0 22px 42px rgba(0, 54, 47, .16),
            inset 0 1px 0 rgba(255, 255, 255, .9) !important;
        backdrop-filter: blur(18px);
    }

    .kr-preference-menu button {
        border-radius: 13px !important;
        padding: 12px 13px !important;
        font-size: 15px !important;
    }

    .kr-preference-menu button:hover,
    .kr-preference-menu button.is-active {
        background: linear-gradient(135deg, #eef7ff, #eef8f5) !important;
        color: #0750ac !important;
    }

    .kr-flag {
        width: 26px !important;
        height: 26px !important;
        box-shadow:
            0 0 0 2px #fff,
            0 0 0 3px rgba(0, 54, 47, .1),
            0 8px 14px rgba(0, 54, 47, .12) !important;
    }

    .ks-login-button,
    .ks-account-nav > a {
        min-height: 50px !important;
        border-radius: 14px !important;
        background: linear-gradient(145deg, #0b6de0, #074aa8) !important;
        box-shadow:
            0 15px 26px rgba(7, 80, 172, .24),
            inset 0 1px 0 rgba(255, 255, 255, .28) !important;
    }

    .ks-login-button:hover,
    .ks-account-nav > a:hover {
        transform: translateY(-1px);
        box-shadow:
            0 18px 32px rgba(7, 80, 172, .28),
            inset 0 1px 0 rgba(255, 255, 255, .32) !important;
    }

    .kr-section-head {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        direction: rtl;
        width: 100% !important;
    }

    .kr-section-head h2 {
        order: 0 !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        margin-inline: 0 !important;
        text-align: right !important;
    }

    .kr-section-head a {
        order: 1 !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        margin-inline: 0 !important;
        align-self: center;
    }
}

/* Screenshot-matched Kroty storefront pass */
@layer components {
    :root {
        --kr-text: #00362f;
        --kr-blue: #0056b8;
        --kr-bg: #f5f8f7;
    }

    body {
        font-family: "Cairo", ui-sans-serif, system-ui, sans-serif !important;
        background: #f6f8f7 !important;
        color: var(--kr-text) !important;
    }

    .ks-header {
        height: 100px;
        border-bottom: 0 !important;
        background: #fff !important;
        box-shadow: none !important;
    }

    .ks-topbar {
        width: min(calc(100% - 150px), 1740px) !important;
        grid-template-columns: 210px 210px minmax(420px, 560px) 220px 210px !important;
        min-height: 52px !important;
        gap: 28px !important;
        padding-top: 1px;
    }

    .ks-brand {
        grid-column: 1;
        grid-row: 1 / span 2;
        justify-self: end !important;
        color: #0d3471 !important;
        font-family: "Cairo", ui-sans-serif, system-ui, sans-serif !important;
        font-size: 30px !important;
        letter-spacing: -.07em;
        line-height: 1;
    }

    .ks-brand::after {
        content: "STORE";
        display: block;
        margin-top: 2px;
        color: #607085;
        font-size: 8px;
        letter-spacing: .55em;
        text-align: center;
    }

    .ks-brand-mark {
        width: 28px !important;
        height: 34px !important;
        border-radius: 0 !important;
        background: #0d3471 !important;
    }

    .ks-menu {
        position: absolute;
        top: 0;
        inset-inline-end: calc((100% - min(calc(100% - 150px), 1740px)) / 2 + 330px);
        z-index: 3;
        display: flex !important;
        width: 330px !important;
        min-height: 52px !important;
        margin: 0 !important;
        border: 0 !important;
        gap: 42px !important;
        color: #0f2e3a !important;
        font-size: 21px !important;
        font-weight: 950 !important;
    }

    .ks-menu a:nth-child(n+3) {
        display: none;
    }

    .kr-all-cats-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .kr-all-cats-link svg {
        width: 18px;
        height: 18px;
    }

    .ks-search {
        grid-column: 3;
        width: 100%;
        height: 46px !important;
        border-radius: 14px !important;
        background: #e7ecea !important;
        box-shadow: none !important;
    }

    .ks-search input {
        padding-inline: 20px !important;
        color: #687a84 !important;
        font-size: 18px !important;
        font-weight: 500;
        text-align: right;
    }

    .ks-search svg {
        width: 23px !important;
        height: 23px !important;
    }

    .ks-header-tools {
        grid-column: 4;
        display: flex !important;
        justify-content: center !important;
        gap: 14px !important;
    }

    .ks-account-nav {
        grid-column: 5;
        justify-self: start;
    }

    .ks-login-button,
    .ks-account-nav > a {
        min-height: 48px !important;
        border-radius: 9px !important;
        background: #0056b8 !important;
        padding: 0 30px !important;
        font-size: 20px !important;
        box-shadow: 0 7px 14px rgba(0, 86, 184, .18) !important;
    }

    .kr-preference {
        position: relative;
    }

    .kr-preference summary {
        display: inline-flex;
        min-height: 38px;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        list-style: none;
        color: #0f2e3a;
        font-size: 18px;
        font-weight: 850;
    }

    .kr-preference summary::-webkit-details-marker {
        display: none;
    }

    .kr-preference summary::after {
        content: "⌄";
        color: #52636d;
        font-size: 18px;
        line-height: 1;
    }

    .kr-preference summary svg {
        width: 21px;
        height: 21px;
    }

    .kr-flag {
        display: inline-block;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
    }

    .kr-flag-eg {
        background: linear-gradient(#cf1f25 0 33%, #fff 33% 66%, #111 66% 100%);
    }

    .kr-flag-world {
        background: linear-gradient(135deg, #0b5fb3, #e9f3ff);
    }

    .kr-preference-menu {
        position: absolute;
        top: 44px;
        left: 0;
        z-index: 100;
        min-width: 145px;
        overflow: hidden;
        border: 1px solid #dfe8e5;
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 16px 35px rgba(0, 54, 47, .12);
    }

    .kr-preference-menu button {
        display: flex;
        width: 100%;
        align-items: center;
        gap: 8px;
        padding: 10px 12px;
        color: #173b45;
        font-weight: 850;
        text-align: right;
    }

    .kr-preference-menu button.is-active,
    .kr-preference-menu button:hover {
        background: #edf4f3;
        color: #0056b8;
    }

    .kr-hero-stage {
        display: grid;
        width: min(calc(100% - 280px), 1540px);
        grid-template-columns: 360px minmax(0, 1fr);
        gap: 52px;
        margin: 28px auto 0;
        align-items: start;
        direction: ltr;
    }

    .kr-hero-side {
        display: grid;
        grid-template-columns: repeat(2, 150px);
        gap: 28px 44px;
        direction: rtl;
    }

    .kr-hero-side a {
        display: grid;
        justify-items: center;
        color: #00362f;
        font-size: 24px;
        font-weight: 950;
        line-height: 1.1;
        text-align: center;
    }

    .kr-hero-side img {
        width: 148px;
        height: 148px;
        object-fit: contain;
    }

    .kr-hero-side span {
        margin-top: 12px;
    }

    .kr-hero-carousel {
        position: relative !important;
        width: 100% !important;
        margin: 0 !important;
        border-radius: 0 18px 0 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        direction: rtl;
    }

    .kr-hero-slide img {
        height: 460px !important;
        background: #08111f;
        object-fit: fill;
    }

    .kr-hero-dots {
        position: absolute;
        bottom: 16px;
        left: 50%;
        display: flex;
        gap: 8px;
        transform: translateX(-50%);
    }

    .kr-hero-dots span {
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .2);
    }

    .kr-hero-dots .is-active {
        width: 32px;
        background: #f7c500;
    }

    .kr-category-strip {
        width: min(calc(100% - 280px), 1540px) !important;
        grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
        gap: 28px !important;
        margin-top: 62px !important;
    }

    .kr-category-tile {
        min-height: auto !important;
        gap: 13px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        padding: 0 !important;
        color: #00362f !important;
        box-shadow: none !important;
        font-size: 22px !important;
        font-weight: 950 !important;
        line-height: 1.2;
    }

    .kr-category-tile img {
        width: 48px !important;
        height: 48px !important;
        filter: grayscale(1) contrast(2) brightness(.15);
    }

    .kr-page {
        width: min(calc(100% - 280px), 1540px) !important;
        margin-top: 64px !important;
    }

    .kr-section {
        position: relative;
        margin-top: 58px !important;
    }

    .kr-section-head {
        display: flex !important;
        flex-direction: row-reverse;
        align-items: center !important;
        margin-bottom: 36px !important;
    }

    .kr-section-head h2 {
        color: #003d36 !important;
        font-size: 42px !important;
        font-weight: 950 !important;
        letter-spacing: -.04em;
        line-height: 1;
    }

    .kr-section-head a {
        min-height: 38px;
        border: 1px solid #cfdad8;
        border-radius: 999px;
        background: #fff;
        color: #00362f !important;
        padding: 6px 22px;
        font-size: 20px;
        font-weight: 850;
    }

    .kr-service-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 48px 64px !important;
    }

    .kr-service-card {
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        text-align: center;
    }

    .kr-service-card:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    .kr-service-card__image {
        display: grid !important;
        place-items: center;
        background: transparent !important;
    }

    .kr-service-card__image img {
        width: 190px !important;
        height: 190px !important;
        aspect-ratio: auto !important;
        object-fit: contain !important;
    }

    .kr-service-card__body {
        padding: 0 !important;
    }

    .kr-service-card h3 {
        min-height: auto !important;
        margin-top: 16px !important;
        color: #00362f !important;
        font-size: 25px !important;
        font-weight: 950 !important;
        line-height: 1.15 !important;
    }

    .kr-card-hidden-action {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

@media (max-width: 1200px) {
    @layer components {
        .ks-topbar,
        .kr-hero-stage,
        .kr-category-strip,
        .kr-page {
            width: min(calc(100% - 36px), 1000px) !important;
        }

        .ks-topbar {
            grid-template-columns: 1fr auto !important;
        }

        .ks-menu,
        .ks-search,
        .ks-header-tools {
            display: none !important;
        }

        .kr-hero-stage {
            grid-template-columns: 1fr;
        }

        .kr-hero-side {
            order: 2;
            grid-template-columns: repeat(4, 1fr);
            justify-content: center;
        }

        .kr-service-grid,
        .kr-category-strip {
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        }
    }
}

@media (max-width: 1100px) {
    .lc-product-layout,
    .lc-checkout-layout {
        grid-template-columns: 1fr;
    }

    .lc-cart-row {
        grid-template-columns: 70px 1fr;
    }
}

/* Krotystore-grade client storefront reset */
@layer components {
    :root {
        --kr-blue: #1769d1;
        --kr-blue-dark: #0e4ea7;
        --kr-bg: #f3f6f5;
        --kr-card: #ffffff;
        --kr-footer: #dfe7e5;
        --kr-text: #19313f;
        --kr-muted: #6b7a86;
        --kr-line: #e3e9e8;
        --kr-soft: #eef3f2;
        --kr-shadow: 0 14px 34px rgba(25, 49, 63, .08);
    }

    html,
    body {
        background: var(--kr-bg) !important;
        color: var(--kr-text) !important;
        font-family: "Cairo", ui-sans-serif, system-ui, sans-serif !important;
    }

    .ks-header {
        position: sticky;
        top: 0;
        z-index: 90;
        border-bottom: 1px solid var(--kr-line) !important;
        background: rgba(255, 255, 255, .97) !important;
        box-shadow: 0 4px 14px rgba(25, 49, 63, .04);
        backdrop-filter: blur(12px);
    }

    .ks-topbar,
    .ks-menu,
    .kr-page,
    .kr-category-strip,
    .ks-footer-inner {
        width: min(calc(100% - 36px), 1220px) !important;
        margin-inline: auto !important;
    }

    .ks-topbar {
        display: grid !important;
        grid-template-columns: 172px 92px 1fr auto !important;
        min-height: 64px !important;
        gap: 18px !important;
        align-items: center !important;
    }

    .ks-brand {
        direction: ltr;
        justify-self: start;
        color: var(--kr-blue) !important;
        font-size: 23px !important;
        font-weight: 950 !important;
        letter-spacing: -.04em;
    }

    .ks-brand-mark {
        width: 34px !important;
        height: 34px !important;
        border-radius: 10px !important;
        background: var(--kr-blue) !important;
        color: #fff !important;
        box-shadow: none !important;
    }

    .ks-search {
        grid-column: 3;
        height: 38px !important;
        border: 0 !important;
        border-radius: 10px !important;
        background: #f0f3f2 !important;
        box-shadow: inset 0 0 0 1px #e8eeee;
    }

    .ks-search input {
        color: #71808a !important;
        font-size: 13px !important;
    }

    .ks-search button {
        color: #7d8b94 !important;
    }

    .ks-account-nav {
        grid-column: 4;
        justify-content: end !important;
        align-items: center;
        order: 5;
    }

    .ks-login-button,
    .ks-account-nav > a {
        display: inline-flex !important;
        min-height: 38px !important;
        align-items: center;
        justify-content: center;
        border-radius: 10px !important;
        background: var(--kr-blue) !important;
        color: #fff !important;
        padding: 0 18px !important;
        font-weight: 900 !important;
    }

    .ks-header-tools {
        grid-column: 2;
        grid-row: 1;
        justify-content: center;
    }

    .ks-cart {
        display: none !important;
    }

    .ks-lang,
    .ks-currency {
        min-height: 32px !important;
        border: 0 !important;
        border-radius: 8px !important;
        background: #f0f3f2 !important;
        color: #344c5a !important;
        padding-inline: 10px !important;
    }

    .ks-menu {
        min-height: 42px !important;
        border-top: 1px solid #eef3f2 !important;
        color: #536775 !important;
        gap: 28px !important;
        font-size: 14px !important;
        font-weight: 800 !important;
    }

    .ks-menu a:first-child {
        color: var(--kr-blue) !important;
    }

    .kr-hero-carousel {
        display: grid;
        width: min(calc(100% - 36px), 1220px);
        margin: 22px auto 0;
        overflow: hidden;
        border-radius: 0;
        background: var(--kr-card);
        box-shadow: var(--kr-shadow);
    }

    .kr-hero-slide {
        grid-area: 1 / 1;
        display: none;
    }

    .kr-hero-slide.is-active {
        display: block;
    }

    .kr-hero-slide img {
        display: block;
        width: 100%;
        height: clamp(230px, 28vw, 378px);
        object-fit: cover;
    }

    .kr-category-strip {
        display: grid;
        grid-template-columns: repeat(8, minmax(0, 1fr));
        gap: 13px;
        margin-top: 22px !important;
    }

    .kr-category-tile {
        display: grid;
        min-height: 128px;
        place-items: center;
        gap: 10px;
        border-radius: 4px;
        background: var(--kr-card);
        padding: 13px 8px;
        color: var(--kr-text);
        font-size: 13px;
        font-weight: 850;
        text-align: center;
        box-shadow: 0 8px 22px rgba(25, 49, 63, .055);
    }

    .kr-category-tile img {
        width: 72px;
        height: 72px;
        object-fit: contain;
    }

    .kr-page {
        margin-top: 28px !important;
    }

    .kr-section {
        margin-top: 32px;
    }

    .kr-section-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
    }

    .kr-section-head h2 {
        color: #233d4a;
        font-size: 25px;
        font-weight: 900;
    }

    .kr-section-head a {
        color: var(--kr-blue);
        font-size: 13px;
        font-weight: 900;
    }

    .kr-service-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 18px;
    }

    .kr-service-card {
        overflow: hidden;
        border: 1px solid var(--kr-line);
        border-radius: 5px;
        background: var(--kr-card);
        box-shadow: 0 10px 24px rgba(25, 49, 63, .06);
        transition: transform .18s ease, box-shadow .18s ease;
    }

    .kr-service-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 34px rgba(25, 49, 63, .1);
    }

    .kr-service-card__image {
        display: block;
        background: #edf3f2;
    }

    .kr-service-card__image img {
        display: block;
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }

    .kr-service-card__body {
        padding: 12px 12px 14px;
    }

    .kr-service-card__body > span {
        color: var(--kr-blue);
        font-size: 11px;
        font-weight: 850;
    }

    .kr-service-card h3 {
        margin-top: 5px;
        min-height: 44px;
        color: #203a48;
        font-size: 15px;
        font-weight: 900;
        line-height: 1.45;
    }

    .kr-service-card__meta {
        display: grid;
        gap: 4px;
        margin-top: 8px;
        color: var(--kr-muted);
        font-size: 12px;
    }

    .kr-service-card__meta strong {
        color: #203a48;
        font-size: 13px;
    }

    .kr-details-link {
        display: inline-flex;
        min-height: 31px;
        align-items: center;
        margin-top: 11px;
        border-radius: 8px;
        background: #eef5ff;
        color: var(--kr-blue);
        padding: 0 12px;
        font-size: 12px;
        font-weight: 900;
    }

    .kr-product-page {
        padding: 28px 18px 70px;
    }

    .kr-product-shell {
        display: grid;
        width: min(100%, 1220px);
        grid-template-columns: 300px minmax(0, 1fr) 310px;
        gap: 20px;
        margin-inline: auto;
        align-items: start;
    }

    .kr-service-panel,
    .kr-options-panel,
    .kr-buy-panel {
        border: 1px solid var(--kr-line);
        border-radius: 6px;
        background: var(--kr-card);
        box-shadow: 0 10px 26px rgba(25, 49, 63, .055);
    }

    .kr-service-panel {
        padding: 16px;
    }

    .kr-breadcrumb {
        display: inline-flex;
        margin-bottom: 12px;
        color: var(--kr-muted);
        font-size: 12px;
        font-weight: 800;
    }

    .kr-product-image {
        overflow: hidden;
        border-radius: 5px;
        background: #edf3f2;
    }

    .kr-product-image img {
        display: block;
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }

    .kr-service-panel h1 {
        margin-top: 16px;
        color: #203a48;
        font-size: 24px;
        font-weight: 950;
        line-height: 1.25;
    }

    .kr-service-panel p,
    .kr-buy-panel p,
    .kr-info-stack p {
        color: var(--kr-muted);
        font-size: 13px;
        line-height: 1.85;
    }

    .kr-service-panel p {
        margin-top: 8px;
    }

    .kr-mini-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 14px;
    }

    .kr-mini-badges span {
        border-radius: 999px;
        background: #eef5ff;
        color: var(--kr-blue);
        padding: 6px 10px;
        font-size: 11px;
        font-weight: 900;
    }

    .kr-options-panel {
        padding: 18px;
    }

    .kr-panel-title span {
        color: var(--kr-blue);
        font-size: 12px;
        font-weight: 900;
    }

    .kr-panel-title h2 {
        margin-top: 4px;
        color: #203a48;
        font-size: 22px;
        font-weight: 950;
    }

    .kr-variant-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        margin-top: 17px;
    }

    .kr-variant-option {
        display: grid;
        min-height: 86px;
        align-content: center;
        gap: 7px;
        border: 1px solid #dfe8e7;
        border-radius: 5px;
        background: #fff;
        padding: 13px 12px;
        color: #243f4d;
        text-align: center;
    }

    .kr-variant-option span {
        font-size: 14px;
        font-weight: 900;
    }

    .kr-variant-option strong {
        color: var(--kr-blue);
        font-size: 14px;
        font-weight: 950;
    }

    .kr-variant-option.is-selected {
        border-color: var(--kr-blue);
        background: #edf6ff;
        box-shadow: 0 0 0 2px rgba(23, 105, 209, .08);
    }

    .kr-info-stack {
        display: grid;
        gap: 10px;
        margin-top: 18px;
    }

    .kr-info-stack details {
        border: 1px solid var(--kr-line);
        border-radius: 5px;
        background: #fbfdfd;
        padding: 13px 14px;
    }

    .kr-info-stack summary {
        cursor: pointer;
        color: #203a48;
        font-weight: 950;
    }

    .kr-info-stack p {
        margin-top: 10px;
    }

    .kr-buy-panel {
        position: sticky;
        top: 128px;
        padding: 18px;
    }

    .kr-buy-panel h2 {
        color: #203a48;
        font-size: 21px;
        font-weight: 950;
    }

    .kr-selected-card {
        display: grid;
        gap: 7px;
        margin-top: 14px;
        border-radius: 5px;
        background: #f1f6f5;
        padding: 14px;
    }

    .kr-selected-card span,
    .kr-summary-lines span {
        color: var(--kr-muted);
        font-size: 12px;
        font-weight: 800;
    }

    .kr-selected-card strong {
        color: #203a48;
        font-size: 17px;
        font-weight: 950;
    }

    .kr-selected-card b {
        color: var(--kr-blue);
        font-size: 22px;
        font-weight: 950;
    }

    .kr-summary-lines {
        display: grid;
        gap: 10px;
        margin-top: 14px;
    }

    .kr-summary-lines div {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        border-bottom: 1px solid #edf2f1;
        padding-bottom: 10px;
    }

    .kr-summary-lines strong {
        color: #203a48;
        font-size: 13px;
        font-weight: 900;
        text-align: left;
    }

    .kr-buy-now,
    .kr-add-cart,
    .primary-button {
        display: inline-flex !important;
        width: 100%;
        min-height: 44px !important;
        align-items: center;
        justify-content: center;
        border-radius: 6px !important;
        background: var(--kr-blue) !important;
        color: #fff !important;
        font-weight: 950 !important;
        box-shadow: none !important;
    }

    .kr-buy-now {
        margin-top: 16px;
    }

    .kr-add-cart,
    .secondary-button {
        margin-top: 10px;
        border: 1px solid #d8e3e1 !important;
        background: #fff !important;
        color: var(--kr-blue) !important;
    }

    .lc-auth-shell {
        min-height: calc(100vh - 106px) !important;
        background: var(--kr-bg) !important;
        padding: 80px 18px 70px !important;
    }

    .lc-auth-card {
        width: min(100%, 430px) !important;
        border: 1px solid var(--kr-line) !important;
        border-radius: 6px !important;
        box-shadow: 0 12px 28px rgba(25, 49, 63, .06) !important;
        padding: 30px !important;
    }

    .lc-auth-card.wide {
        width: min(100%, 650px) !important;
    }

    .lc-auth-icon {
        background: #eef5ff !important;
        color: var(--kr-blue) !important;
    }

    .lc-auth-card h1 {
        color: #203a48 !important;
        font-size: 24px !important;
    }

    .lc-auth-link {
        color: var(--kr-blue) !important;
    }

    .form-field {
        border-radius: 6px !important;
        background: #f5f8f7 !important;
    }

    .form-field input,
    .form-field select,
    .form-field textarea {
        border-color: #dfe8e7 !important;
        border-radius: 5px !important;
        background: #fff !important;
    }

    .ks-footer {
        margin-top: 58px !important;
        background: var(--kr-footer) !important;
        border-top: 1px solid #cfdad8 !important;
        color: #344c5a !important;
    }

    .ks-footer-inner {
        padding: 36px 0 24px !important;
    }

    .ks-footer-grid {
        border-top: 1px solid #cfdad8;
        margin-top: 24px;
        padding-top: 24px;
    }

    .ks-footer h3,
    .ks-footer-about p,
    .ks-footer a,
    .ks-copyright {
        color: #344c5a !important;
    }

    .ks-payments span {
        border-color: #c7d3d1 !important;
        background: rgba(255, 255, 255, .5) !important;
    }
}

@media (max-width: 1120px) {
    @layer components {
        .kr-service-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .kr-category-strip {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        .kr-product-shell {
            grid-template-columns: 1fr;
        }

        .kr-buy-panel {
            position: static;
        }
    }
}

@media (max-width: 760px) {
    @layer components {
        .ks-topbar {
            grid-template-columns: 1fr auto !important;
        }

        .ks-search,
        .ks-header-tools,
        .ks-menu {
            display: none !important;
        }

        .ks-account-nav {
            grid-column: 2;
        }

        .kr-category-strip,
        .kr-service-grid,
        .kr-variant-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .kr-hero-slide img {
            height: 180px;
        }

        .kr-category-tile {
            min-height: 112px;
        }
    }
}

/* Admin hard visual lock: old storefront/card backgrounds must never leak into admin. */
body.rn-admin-body .ad-main .surface,
body.rn-admin-body main.ad-main .surface {
    background-color: rgba(15, 23, 42, .86) !important;
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .035)) !important;
    border-color: rgba(148, 163, 184, .20) !important;
    color: #e5eefc !important;
}

body.rn-admin-body .ad-main .surface *,
body.rn-admin-body main.ad-main .surface * {
    border-color: rgba(148, 163, 184, .18) !important;
}

body.rn-admin-body .ad-main .surface .metric-card {
    background-color: rgba(15, 23, 42, .70) !important;
    background-image:
        radial-gradient(circle at 18% 8%, rgba(56, 189, 248, .24), transparent 48%),
        linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .035)) !important;
}

body.rn-admin-body .ad-main .surface .admin-row {
    background-color: rgba(2, 6, 23, .38) !important;
    color: #e5eefc !important;
}

body.rn-admin-body .ad-main .surface .admin-row span,
body.rn-admin-body .ad-main .surface .admin-row strong,
body.rn-admin-body .ad-main .surface .admin-row em {
    opacity: 1 !important;
}

/* Krotystore-inspired storefront skin for RaseedNow */
@layer components {
    :root {
        --ks-orange: #ff7800;
        --ks-orange-dark: #f05f00;
        --ks-ink: #0f172a;
        --ks-muted: #667085;
        --ks-line: #edf0f4;
        --ks-soft: #f7f8fb;
        --ks-dark: #070d1d;
        --ks-card: #fff;
        --ks-shadow: 0 12px 32px rgba(15, 23, 42, .08);
    }

    html,
    body {
        background: var(--ks-soft) !important;
        color: var(--ks-ink);
        font-family: "Cairo", ui-sans-serif, system-ui, sans-serif;
    }

    .rn-main {
        min-height: auto !important;
    }

    .ks-header {
        position: sticky;
        top: 0;
        z-index: 80;
        background: rgba(255, 255, 255, .96);
        border-bottom: 1px solid var(--ks-line);
        backdrop-filter: blur(16px);
    }

    .ks-topbar,
    .ks-menu,
    .ks-page-shell,
    .ks-category-rail,
    .ks-trust-inner,
    .ks-footer-inner,
    .ks-newsletter {
        width: min(calc(100% - 48px), 1380px);
        margin-inline: auto;
    }

    .ks-topbar {
        display: grid;
        grid-template-columns: 210px minmax(280px, 440px) 1fr auto;
        min-height: 58px;
        align-items: center;
        gap: 18px;
    }

    .ks-brand {
        direction: ltr;
        display: inline-flex;
        align-items: center;
        gap: 9px;
        color: var(--ks-orange);
        font-weight: 950;
        letter-spacing: -.03em;
    }

    .ks-brand-mark {
        display: inline-grid;
        width: 29px;
        height: 29px;
        place-items: center;
        border-radius: 9px;
        background: var(--ks-orange);
        color: #fff;
        box-shadow: 0 10px 20px rgba(255, 120, 0, .25);
    }

    .ks-brand-mark svg {
        width: 19px;
        height: 19px;
    }

    .ks-search {
        position: relative;
        display: flex;
        height: 38px;
        align-items: center;
        overflow: hidden;
        border: 1px solid var(--ks-line);
        border-radius: 10px;
        background: #fff;
    }

    .ks-search input,
    .ks-mobile-search input {
        width: 100%;
        border: 0;
        background: transparent;
        padding: 0 15px;
        color: var(--ks-ink);
        font-size: 13px;
        outline: 0;
    }

    .ks-search button {
        display: grid;
        width: 42px;
        height: 100%;
        place-items: center;
        color: #98a2b3;
    }

    .ks-search svg,
    .ks-cart svg {
        width: 19px;
        height: 19px;
    }

    .ks-account-nav {
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        color: #344054;
        font-size: 13px;
        font-weight: 800;
    }

    .ks-account-nav form button {
        color: var(--ks-orange);
        font-weight: 900;
    }

    .ks-header-tools {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .ks-cart,
    .ks-lang,
    .ks-currency {
        display: inline-flex;
        min-height: 32px;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--ks-line);
        border-radius: 999px;
        background: #fff;
        color: #344054;
        padding: 0 10px;
        font-size: 12px;
        font-weight: 900;
    }

    .ks-cart {
        position: relative;
        width: 36px;
        padding: 0;
        color: var(--ks-orange);
    }

    .ks-cart-count {
        position: absolute;
        top: -5px;
        inset-inline-start: -5px;
        display: grid;
        min-width: 17px;
        height: 17px;
        place-items: center;
        border-radius: 99px;
        background: var(--ks-orange);
        color: #fff;
        font-size: 10px;
    }

    .ks-menu {
        display: flex;
        min-height: 42px;
        align-items: center;
        gap: 24px;
        border-top: 1px solid #f4f5f7;
        color: #475467;
        font-size: 13px;
        font-weight: 800;
    }

    .ks-menu a:first-child {
        color: var(--ks-orange);
    }

    .ks-mobile-search {
        display: none;
    }

    .ks-hero {
        position: relative;
        width: min(calc(100% - 48px), 1380px);
        min-height: 416px;
        margin: 26px auto 0;
        overflow: hidden;
        border-radius: 20px;
        background:
            linear-gradient(90deg, rgba(7, 13, 29, .96), rgba(7, 13, 29, .76) 48%, rgba(255, 120, 0, .22)),
            var(--hero) center / cover no-repeat;
        box-shadow: var(--ks-shadow);
    }

    .ks-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at 18% 20%, rgba(255, 120, 0, .32), transparent 26%),
            radial-gradient(circle at 78% 72%, rgba(255, 255, 255, .12), transparent 30%);
    }

    .ks-hero-copy {
        position: relative;
        z-index: 1;
        width: min(560px, 90%);
        margin-inline-start: auto;
        padding: 74px 58px;
        color: #fff;
    }

    .ks-hero-copy > span {
        display: inline-flex;
        border: 1px solid rgba(255, 255, 255, .14);
        border-radius: 999px;
        background: rgba(255, 120, 0, .16);
        padding: 8px 13px;
        color: #ffd9b2;
        font-size: 12px;
        font-weight: 900;
    }

    .ks-hero h1 {
        margin-top: 18px;
        font-size: clamp(32px, 4vw, 56px);
        font-weight: 950;
        line-height: 1.1;
        letter-spacing: -.04em;
    }

    .ks-hero p {
        margin-top: 15px;
        color: rgba(255, 255, 255, .74);
        font-size: 16px;
        line-height: 1.9;
    }

    .ks-hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 24px;
    }

    .ks-hero-actions a {
        display: inline-flex;
        min-height: 44px;
        align-items: center;
        border-radius: 12px;
        padding: 0 20px;
        font-weight: 950;
    }

    .ks-hero-actions a:first-child,
    .primary-button {
        background: linear-gradient(135deg, var(--ks-orange), var(--ks-orange-dark)) !important;
        color: #fff !important;
        box-shadow: 0 14px 24px rgba(255, 120, 0, .22) !important;
    }

    .ks-hero-actions a:last-child {
        border: 1px solid rgba(255, 255, 255, .16);
        background: rgba(255, 255, 255, .08);
        color: #fff;
    }

    .ks-hero-stats {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 34px;
    }

    .ks-hero-stats span {
        border-radius: 999px;
        background: rgba(255, 255, 255, .09);
        padding: 8px 12px;
        color: rgba(255, 255, 255, .78);
        font-size: 12px;
        font-weight: 800;
    }

    .ks-category-rail {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
        margin-top: 24px;
    }

    .ks-category-chip {
        display: flex;
        min-height: 58px;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        border: 1px solid var(--ks-line);
        border-radius: 14px;
        background: #fff;
        padding: 10px 14px;
        box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
        color: #344054;
        font-weight: 900;
    }

    .ks-category-chip img {
        width: 34px;
        height: 34px;
        object-fit: contain;
    }

    .ks-page-shell {
        margin-top: 36px;
    }

    .ks-section + .ks-section {
        margin-top: 58px;
    }

    .ks-section-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 18px;
    }

    .ks-section-head h2 {
        position: relative;
        color: var(--ks-ink);
        font-size: 25px;
        font-weight: 950;
        letter-spacing: -.03em;
    }

    .ks-section-head h2::before {
        content: "";
        display: inline-block;
        width: 5px;
        height: 23px;
        margin-inline-end: 9px;
        border-radius: 999px;
        background: var(--ks-orange);
        vertical-align: -5px;
    }

    .ks-section-head a {
        color: var(--ks-orange);
        font-size: 13px;
        font-weight: 900;
    }

    .ks-product-grid {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 16px;
    }

    .ks-product-card {
        overflow: hidden;
        border: 1px solid var(--ks-line);
        border-radius: 13px;
        background: #fff;
        box-shadow: 0 9px 24px rgba(15, 23, 42, .04);
        transition: transform .18s ease, box-shadow .18s ease;
    }

    .ks-product-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 15px 32px rgba(15, 23, 42, .08);
    }

    .ks-product-image {
        position: relative;
        display: grid;
        height: 174px;
        place-items: center;
        background: #f9fafb;
    }

    .ks-product-image img {
        width: 135px;
        height: 135px;
        object-fit: contain;
    }

    .ks-product-image span {
        position: absolute;
        top: 9px;
        inset-inline-start: 9px;
        border-radius: 5px;
        background: #ef4444;
        color: #fff;
        padding: 4px 6px;
        font-size: 10px;
        font-weight: 950;
    }

    .ks-product-content {
        padding: 12px;
    }

    .ks-product-content small {
        color: var(--ks-muted);
        font-size: 11px;
        font-weight: 800;
    }

    .ks-product-content h3 {
        min-height: 42px;
        margin-top: 5px;
        color: #182230;
        font-size: 13px;
        font-weight: 950;
        line-height: 1.55;
    }

    .ks-product-price {
        margin-top: 9px;
    }

    .ks-product-price span {
        display: block;
        color: var(--ks-muted);
        font-size: 11px;
        font-weight: 800;
    }

    .ks-product-price strong {
        color: var(--ks-orange);
        font-size: 14px;
        font-weight: 950;
    }

    .ks-product-actions {
        display: grid;
        grid-template-columns: 1fr 36px;
        gap: 8px;
        margin-top: 11px;
    }

    .ks-product-actions a,
    .ks-product-actions button {
        display: grid;
        min-height: 35px;
        place-items: center;
        border-radius: 9px;
        font-size: 12px;
        font-weight: 950;
    }

    .ks-product-actions a {
        border: 1px solid var(--ks-line);
        color: #344054;
    }

    .ks-product-actions button {
        background: var(--ks-orange);
        color: #fff;
    }

    .ks-product-actions svg {
        width: 17px;
        height: 17px;
    }

    .ks-trust-band {
        margin-top: 70px;
        background:
            radial-gradient(circle at 12% 10%, rgba(255, 120, 0, .22), transparent 22%),
            linear-gradient(135deg, #070d1d, #111827);
        padding: 70px 0;
        color: #fff;
    }

    .ks-trust-inner {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
    }

    .ks-trust-inner article {
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: 16px;
        background: rgba(255, 255, 255, .04);
        padding: 22px;
    }

    .ks-trust-inner span {
        display: grid;
        width: 42px;
        height: 42px;
        place-items: center;
        border-radius: 12px;
        background: rgba(255, 120, 0, .16);
        color: var(--ks-orange);
    }

    .ks-trust-inner svg {
        width: 22px;
        height: 22px;
    }

    .ks-trust-inner h3,
    .ks-testimonial-grid strong {
        margin-top: 14px;
        color: #fff;
        font-weight: 950;
    }

    .ks-trust-inner p {
        margin-top: 9px;
        color: rgba(255, 255, 255, .62);
        font-size: 13px;
        line-height: 1.8;
    }

    .ks-testimonials {
        margin-top: 58px;
    }

    .ks-testimonial-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

    .ks-testimonial-grid article {
        border: 1px solid var(--ks-line);
        border-radius: 16px;
        background: #fff;
        padding: 22px;
        box-shadow: 0 10px 24px rgba(15, 23, 42, .04);
    }

    .ks-quote {
        color: var(--ks-orange);
        font-size: 42px;
        font-weight: 950;
        line-height: 1;
    }

    .ks-testimonial-grid p {
        color: #475467;
        font-size: 14px;
        line-height: 1.9;
    }

    .ks-testimonial-grid strong {
        display: block;
        color: var(--ks-ink);
    }

    .ks-testimonial-grid small {
        color: var(--ks-muted);
        font-size: 12px;
        font-weight: 800;
    }

    .ks-footer {
        margin-top: 70px;
        background: var(--ks-dark);
        color: #d0d5dd;
    }

    .ks-newsletter {
        position: relative;
        top: -34px;
        display: grid;
        grid-template-columns: 1fr minmax(280px, 520px);
        gap: 20px;
        align-items: center;
        border-radius: 18px;
        background: linear-gradient(135deg, var(--ks-orange), #ff9b24);
        padding: 28px;
        color: #fff;
        box-shadow: 0 18px 34px rgba(255, 120, 0, .2);
    }

    .ks-newsletter h2 {
        font-size: 24px;
        font-weight: 950;
    }

    .ks-newsletter p {
        margin-top: 7px;
        color: rgba(255, 255, 255, .75);
        font-size: 13px;
    }

    .ks-newsletter form {
        display: flex;
        gap: 8px;
    }

    .ks-newsletter input {
        flex: 1;
        min-height: 44px;
        border: 0;
        border-radius: 12px;
        background: #fff;
        padding: 0 14px;
        color: var(--ks-ink);
        outline: 0;
    }

    .ks-newsletter button {
        min-height: 44px;
        border-radius: 12px;
        background: var(--ks-dark);
        color: #fff;
        padding: 0 18px;
        font-weight: 950;
    }

    .ks-footer-inner {
        padding: 18px 0 34px;
    }

    .ks-footer-about {
        display: grid;
        max-width: 460px;
        gap: 12px;
    }

    .ks-footer-brand {
        color: #fff;
        font-size: 20px;
    }

    .ks-footer-about p {
        color: #98a2b3;
        line-height: 1.9;
    }

    .ks-footer-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 24px;
        margin-top: 38px;
    }

    .ks-footer-grid h3 {
        color: var(--ks-orange);
        font-size: 14px;
        font-weight: 950;
    }

    .ks-footer-grid a {
        display: block;
        margin-top: 12px;
        color: #cbd5e1;
        font-size: 13px;
    }

    .ks-payments {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 14px;
    }

    .ks-payments span {
        border-radius: 8px;
        background: rgba(255, 255, 255, .08);
        padding: 7px 9px;
        color: #fff;
        font-size: 11px;
        font-weight: 900;
    }

    .ks-copyright {
        margin-top: 35px;
        border-top: 1px solid rgba(255, 255, 255, .08);
        padding-top: 20px;
        color: #98a2b3;
        font-size: 12px;
    }

    .surface,
    .lc-auth-card,
    .lc-form-card,
    .lc-buy-box,
    .lc-cart-list,
    .lc-product-detail {
        border: 1px solid var(--ks-line) !important;
        border-radius: 16px !important;
        background: #fff !important;
        box-shadow: 0 12px 30px rgba(15, 23, 42, .06) !important;
    }

    .lc-page-shell {
        width: min(calc(100% - 48px), 1380px) !important;
        margin: 34px auto 34px !important;
        padding-bottom: 0 !important;
    }

    .lc-auth-shell {
        min-height: auto !important;
        padding: 72px 16px 56px !important;
    }

    .lc-product-visual,
    .lc-cart-thumb {
        background: #f8fafc !important;
        border-radius: 14px !important;
    }

    .lc-product-detail h1,
    .lc-form-card h1,
    .lc-buy-box h2,
    .section-heading h1,
    .lc-auth-card h1 {
        color: var(--ks-ink) !important;
        font-weight: 950 !important;
    }

    .eyebrow.dark,
    .section-heading span,
    .section-heading a,
    .lc-auth-link,
    .lc-back-link {
        color: var(--ks-orange) !important;
    }

    .secondary-button {
        border-color: var(--ks-line) !important;
        border-radius: 12px !important;
        color: #344054 !important;
    }

    .summary-row.total {
        background: var(--ks-dark) !important;
        border-radius: 12px !important;
    }
}

@media (max-width: 1180px) {
    .ks-product-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .ks-category-rail,
    .ks-trust-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ks-topbar {
        grid-template-columns: 1fr auto;
    }

    .ks-search,
    .ks-account-nav {
        display: none;
    }

    .ks-mobile-search {
        display: block;
        width: min(calc(100% - 32px), 720px);
        margin: 0 auto 12px;
        border: 1px solid var(--ks-line);
        border-radius: 12px;
        background: #fff;
        padding: 10px 0;
    }
}

@media (max-width: 720px) {
    .ks-topbar,
    .ks-menu,
    .ks-page-shell,
    .ks-category-rail,
    .ks-trust-inner,
    .ks-footer-inner,
    .ks-newsletter,
    .ks-hero {
        width: calc(100% - 24px);
    }

    .ks-menu {
        overflow-x: auto;
        gap: 18px;
        white-space: nowrap;
    }

    .ks-header-tools .ks-currency {
        display: none;
    }

    .ks-hero {
        min-height: 430px;
        border-radius: 16px;
    }

    .ks-hero-copy {
        padding: 42px 24px;
    }

    .ks-category-rail,
    .ks-product-grid,
    .ks-trust-inner,
    .ks-testimonial-grid,
    .ks-newsletter,
    .ks-footer-grid {
        grid-template-columns: 1fr;
    }

    .ks-product-image {
        height: 190px;
    }

    .ks-newsletter form {
        display: grid;
    }
}

@media (max-width: 760px) {
    .rn-header-top {
        min-height: 66px;
    }

    .lc-hero {
        height: 330px;
    }

    .lc-hero-copy h1 {
        top: 70px;
        right: 18px;
        width: calc(100vw - 36px);
        font-size: 46px;
    }

    .lc-hero-copy h2 {
        top: 137px;
        right: 18px;
        width: calc(100vw - 36px);
        font-size: 42px;
    }

    .lc-hero-copy a {
        top: 238px;
        right: 18px;
    }

    .lc-quick-card {
        margin-inline: 14px;
        transform: translateY(-18px);
    }

    .lc-auth-card,
    .lc-auth-card.wide {
        padding: 24px;
    }

    .lc-auth-grid,
    .lc-product-detail-grid {
        grid-template-columns: 1fr;
    }

    .rn-app-card,
    .rn-footer-grid,
    .rn-footer-bottom {
        grid-template-columns: 1fr;
        display: grid;
    }

    .rn-footer {
        margin-bottom: 74px;
    }
}

@layer base {
    * {
        box-sizing: border-box;
    }

    body {
        letter-spacing: 0;
    }

    a,
    button,
    input,
    select {
        transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
    }

    svg {
        width: 1.2em;
        height: 1.2em;
    }
}

@layer components {
    .surface {
        border: 1px solid rgba(16, 32, 27, .08);
        border-radius: 22px;
        background: rgba(255, 255, 255, .92);
        box-shadow: 0 18px 50px rgba(16, 32, 27, .08);
    }

    .nav-pill,
    .secondary-button,
    .primary-button,
    .ghost-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 42px;
        border-radius: 14px;
        padding: 0 18px;
        font-size: 14px;
        font-weight: 800;
    }

    .nav-pill,
    .secondary-button {
        border: 1px solid #dfe8e3;
        background: #fff;
        color: #16352d;
    }

    .primary-button {
        background: #0f6b57;
        color: #fff;
        box-shadow: 0 12px 24px rgba(15, 107, 87, .22);
    }

    .primary-button.compact {
        min-height: 40px;
        padding-inline: 12px;
    }

    .ghost-button {
        border: 1px solid rgba(255, 255, 255, .25);
        background: rgba(255, 255, 255, .12);
        color: #fff;
    }

    .primary-button:hover,
    .secondary-button:hover,
    .nav-pill:hover {
        transform: translateY(-1px);
    }

    .icon-button {
        display: grid;
        width: 42px;
        height: 42px;
        place-items: center;
        border: 1px solid #dfe8e3;
        border-radius: 14px;
        background: #fff;
        color: #17362e;
    }

    .mobile-tab {
        display: grid;
        gap: 3px;
        place-items: center;
        color: #52635c;
        font-size: 11px;
        font-weight: 800;
    }

    .mobile-tab svg {
        width: 21px;
        height: 21px;
    }

    .hero-panel {
        position: relative;
        overflow: hidden;
        min-height: 360px;
        border-radius: 28px;
        background:
            linear-gradient(135deg, rgba(18, 49, 43, .98), rgba(12, 35, 51, .98)),
            #12312b;
        color: #fff;
        padding: clamp(24px, 5vw, 54px);
    }

    .hero-panel::after {
        content: "";
        position: absolute;
        inset: auto -12% -35% auto;
        width: 420px;
        height: 420px;
        border: 1px solid rgba(255, 255, 255, .12);
        border-radius: 50%;
    }

    .hero-device {
        position: absolute;
        inset: auto 8% 30px auto;
        display: none;
        width: 230px;
        height: 250px;
    }

    .hero-card {
        position: absolute;
        inset: 20px 20px auto auto;
        width: 170px;
        height: 210px;
        border: 1px solid rgba(255, 255, 255, .25);
        border-radius: 26px;
        background: rgba(255, 255, 255, .13);
        box-shadow: 0 30px 70px rgba(0, 0, 0, .28);
        backdrop-filter: blur(10px);
    }

    .hero-card.is-small {
        inset: auto auto 12px 0;
        width: 145px;
        height: 110px;
        border-radius: 22px;
        background: rgba(15, 107, 87, .65);
    }

    .eyebrow {
        display: inline-flex;
        border: 1px solid rgba(255, 255, 255, .22);
        border-radius: 999px;
        padding: 7px 12px;
        color: rgba(255, 255, 255, .82);
        font-size: 12px;
        font-weight: 900;
    }

    .eyebrow.dark {
        border-color: #dbe6e0;
        color: #0f6b57;
    }

    .side-banner {
        display: grid;
        min-height: 172px;
        align-content: end;
        gap: 8px;
        border-radius: 24px;
        padding: 22px;
        color: #fff;
        box-shadow: 0 16px 40px rgba(16, 32, 27, .12);
    }

    .side-banner strong {
        font-size: 21px;
        line-height: 1.35;
    }

    .side-banner span:last-child {
        color: rgba(255, 255, 255, .72);
        font-size: 13px;
        line-height: 1.7;
    }

    .tone-emerald {
        background: #0f6b57;
    }

    .tone-indigo {
        background: #203047;
    }

    .category-chip {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        gap: 9px;
        height: 44px;
        border: 1px solid #dfe8e3;
        border-radius: 999px;
        background: #fff;
        padding: 0 16px;
        color: #253a34;
        font-size: 14px;
        font-weight: 900;
    }

    .category-chip.is-active {
        border-color: #0f6b57;
        background: #e9f6f1;
        color: #0f6b57;
    }

    .chip-icon {
        width: 10px;
        height: 10px;
        border-radius: 999px;
    }

    .section-heading {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 16px;
    }

    .section-heading span {
        color: #0f6b57;
        font-size: 12px;
        font-weight: 900;
    }

    .section-heading h1,
    .section-heading h2 {
        margin-top: 4px;
        color: #13241f;
        font-size: clamp(22px, 3vw, 30px);
        font-weight: 950;
        line-height: 1.25;
    }

    .section-heading a {
        color: #0f6b57;
        font-size: 14px;
        font-weight: 900;
    }

    .game-card,
    .product-card,
    .metric-card {
        border: 1px solid rgba(16, 32, 27, .08);
        border-radius: 20px;
        background: #fff;
        padding: 14px;
        box-shadow: 0 14px 34px rgba(16, 32, 27, .07);
    }

    .game-cover {
        display: grid;
        height: 92px;
        place-items: center;
        border-radius: 16px;
        color: #fff;
    }

    .game-card h3,
    .product-card h3 {
        margin-top: 12px;
        font-size: 16px;
        font-weight: 950;
    }

    .game-card p {
        margin-top: 4px;
        color: #6c7a74;
        font-size: 12px;
        font-weight: 800;
    }

    .method-badge,
    .status-pill {
        display: inline-flex;
        align-items: center;
        border-radius: 999px;
        background: #eef5f1;
        padding: 7px 10px;
        color: #0f6b57;
        font-size: 11px;
        font-weight: 900;
        text-transform: capitalize;
    }

    .empty-state {
        display: grid;
        min-height: 240px;
        place-items: center;
        border: 1px dashed #bfd0c8;
        border-radius: 24px;
        background: #fff;
        padding: 32px;
        text-align: center;
    }

    .empty-state svg {
        width: 42px;
        height: 42px;
        color: #0f6b57;
    }

    .empty-state h3 {
        margin-top: 12px;
        font-size: 20px;
        font-weight: 950;
    }

    .product-visual {
        display: grid;
        min-height: 230px;
        place-items: center;
        border-radius: 24px;
        color: #fff;
    }

    .product-visual svg {
        width: 96px;
        height: 96px;
    }

    .info-box,
    .summary-row,
    .form-field,
    .metric-card {
        border-radius: 16px;
        background: #f6faf7;
        padding: 14px;
    }

    .info-box span,
    .summary-row span,
    .metric-card span,
    .form-field span {
        display: block;
        color: #697871;
        font-size: 12px;
        font-weight: 800;
    }

    .info-box strong,
    .metric-card strong {
        margin-top: 4px;
        display: block;
        font-size: 20px;
        font-weight: 950;
    }

    .summary-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .summary-row.total {
        background: #12312b;
        color: #fff;
    }

    .summary-row.total span {
        color: rgba(255, 255, 255, .72);
    }

    .form-field input,
    .form-field select {
        margin-top: 8px;
        width: 100%;
        height: 46px;
        border: 1px solid #dce6e0;
        border-radius: 14px;
        background: #fff;
        padding: 0 13px;
        outline: 0;
    }

    .admin-row {
        display: grid;
        grid-template-columns: 1fr auto auto;
        gap: 12px;
        align-items: center;
        border-bottom: 1px solid #e6eee9;
        padding: 13px 15px;
        font-size: 14px;
    }

    .admin-row:last-child {
        border-bottom: 0;
    }

    .admin-row em {
        border-radius: 999px;
        background: #eef5f1;
        padding: 5px 9px;
        color: #0f6b57;
        font-size: 11px;
        font-style: normal;
        font-weight: 900;
    }
}

@media (min-width: 1024px) {
    .hero-device {
        display: block;
    }
}

@layer components {
    .rn-header {
        position: sticky;
        top: 0;
        z-index: 60;
        background: #17264d;
        color: #fff;
        box-shadow: 0 2px 0 rgba(255, 255, 255, .06);
    }

    .rn-header-row {
        max-width: 1232px;
        margin-inline: auto;
        padding-inline: 16px;
    }

    .rn-header-top {
        display: grid;
        grid-template-columns: 220px minmax(320px, 464px) 1fr auto;
        align-items: center;
        gap: 28px;
        min-height: 88px;
    }

    .rn-brand {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: #fff;
        justify-self: end;
    }

    .rn-brand-mark {
        display: grid;
        width: 48px;
        height: 48px;
        place-items: center;
        color: #fff;
    }

    .rn-brand-mark svg {
        width: 48px;
        height: 48px;
    }

    .rn-brand-name {
        display: block;
        font-size: 20px;
        font-weight: 900;
        line-height: 1;
    }

    .rn-brand-tagline {
        display: block;
        margin-top: 4px;
        color: #ffb454;
        font-size: 11px;
        font-weight: 800;
    }

    .rn-search {
        position: relative;
        height: 49px;
    }

    .rn-search input,
    .rn-mobile-search input {
        width: 100%;
        height: 100%;
        border: 0;
        border-radius: 5px;
        background: #fff;
        padding: 0 18px 0 54px;
        color: #17213f;
        font-size: 14px;
        outline: none;
        text-align: right;
    }

    .rn-search button {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 13px;
        display: grid;
        width: 34px;
        place-items: center;
        color: #24324f;
    }

    .rn-search button svg {
        width: 24px;
        height: 24px;
    }

    .rn-account-nav,
    .rn-header-tools {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        font-size: 14px;
        font-weight: 900;
        white-space: nowrap;
    }

    .rn-user-circle {
        display: grid;
        width: 28px;
        height: 28px;
        place-items: center;
        border-radius: 999px;
        background: #fff;
        color: #17264d;
    }

    .rn-user-circle svg {
        width: 20px;
        height: 20px;
    }

    .rn-header-tools button {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        min-height: 34px;
        color: #fff;
        font-weight: 900;
    }

    .rn-header-tools svg {
        width: 20px;
        height: 20px;
    }

    .rn-flag {
        display: grid;
        width: 29px;
        height: 29px;
        place-items: center;
        border-radius: 999px;
        background: linear-gradient(#ef4444 0 33%, #fff 33% 66%, #111827 66%);
        color: transparent;
        box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .18);
    }

    .rn-mode {
        width: 49px;
        justify-content: center;
        border-radius: 999px;
        background: rgba(255, 255, 255, .08);
    }

    .rn-cart {
        gap: 7px;
    }

    .rn-header-menu {
        display: flex;
        align-items: center;
        gap: clamp(20px, 4vw, 48px);
        min-height: 62px;
        border-top: 1px solid rgba(255, 255, 255, .05);
        color: #fff;
        font-size: 15px;
        font-weight: 900;
    }

    .rn-header-menu a {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .rn-all-cats svg {
        width: 22px;
        height: 22px;
    }

    .rn-mobile-search {
        display: none;
        height: 44px;
        padding: 0 16px 12px;
    }

    .lc-hero {
        position: relative;
        height: 400px;
        overflow: hidden;
        background:
            radial-gradient(circle at 19% 18%, rgba(23, 135, 170, .52), transparent 24%),
            radial-gradient(circle at 22% 57%, rgba(8, 43, 73, .86), transparent 27%),
            linear-gradient(90deg, #05070d 0%, #11182a 32%, #331c15 100%);
        color: #fff;
    }

    .lc-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            linear-gradient(90deg, rgba(0, 0, 0, .34), transparent 44%, rgba(0, 0, 0, .28)),
            radial-gradient(circle at 28% 50%, rgba(60, 196, 230, .22), transparent 24%);
    }

    .lc-hero-copy {
        position: relative;
        z-index: 2;
        max-width: 1232px;
        margin-inline: auto;
        padding: 84px 16px 0;
        text-align: right;
    }

    .lc-hero-copy h1 {
        position: absolute;
        top: 78px;
        right: 92px;
        width: min(560px, 44vw);
        color: rgba(255, 255, 255, .78);
        font-size: clamp(48px, 5.5vw, 76px);
        font-weight: 950;
        line-height: 1.04;
    }

    .lc-hero-copy h2 {
        position: absolute;
        top: 214px;
        right: 92px;
        width: min(560px, 44vw);
        margin-top: 0;
        color: #a46608;
        font-size: clamp(38px, 4.9vw, 62px);
        font-weight: 950;
        line-height: 1;
    }

    .lc-hero-copy a {
        position: absolute;
        top: 326px;
        right: 92px;
        display: inline-flex;
        min-height: 39px;
        align-items: center;
        justify-content: center;
        margin-top: 0;
        border-radius: 4px;
        background: #fff;
        padding: 0 18px;
        color: #17264d;
        font-size: 14px;
        font-weight: 900;
    }

    .lc-hero-art {
        position: absolute;
        inset: 20px auto 0 8%;
        z-index: 2;
        width: 500px;
        height: 360px;
    }

    .lc-wifi {
        position: absolute;
        top: 4px;
        right: 165px;
        width: 104px;
        color: #47bfd0;
        transform: rotate(-18deg);
        filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .36));
    }

    .lc-wifi svg {
        width: 104px;
        height: 104px;
    }

    .lc-gift-card {
        position: absolute;
        top: 68px;
        right: 120px;
        width: 210px;
        height: 285px;
        padding: 34px 22px;
        border-radius: 16px;
        background:
            linear-gradient(150deg, rgba(34, 119, 151, .98), rgba(11, 70, 93, .96)),
            #0f6b91;
        box-shadow: 0 36px 70px rgba(0, 0, 0, .42);
        transform: rotate(-10deg);
    }

    .lc-mini-logo {
        display: grid;
        width: 62px;
        height: 62px;
        place-items: center;
        border-radius: 999px;
        background: rgba(255, 255, 255, .12);
    }

    .lc-mini-logo span {
        width: 36px;
        height: 36px;
        border: 9px solid #fff;
        border-left-color: #f69b13;
        border-radius: 999px;
    }

    .lc-gift-card strong {
        display: block;
        margin-top: 22px;
        font-size: 28px;
        font-weight: 900;
    }

    .lc-gift-card small {
        display: block;
        margin-top: 16px;
        border-radius: 4px;
        background: rgba(255, 255, 255, .12);
        padding: 8px;
        color: rgba(255, 255, 255, .82);
        font-size: 14px;
        font-weight: 900;
    }

    .lc-slider-arrow {
        position: absolute;
        top: 56%;
        z-index: 4;
        display: grid;
        width: 47px;
        height: 47px;
        place-items: center;
        border-radius: 999px;
        background: #fff;
        color: #17264d;
        box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
    }

    .lc-slider-arrow svg {
        width: 30px;
        height: 30px;
    }

    .lc-arrow-right {
        right: 82px;
    }

    .lc-arrow-left {
        left: 82px;
    }

    .lc-dots {
        position: absolute;
        bottom: 18px;
        left: 50%;
        z-index: 4;
        display: flex;
        gap: 8px;
        transform: translateX(-50%);
    }

    .lc-dots span {
        width: 55px;
        height: 4px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .2);
    }

    .lc-dots span.active {
        background: #fff;
    }

    .lc-quick-card {
        position: relative;
        z-index: 5;
        max-width: 1232px;
        min-height: 177px;
        margin: -1px auto 0;
        transform: translateY(-1px);
        border-radius: 3px;
        background: #fff;
        padding: 26px 32px 24px;
        box-shadow: 0 10px 26px rgba(23, 38, 77, .12);
    }

    .lc-quick-title {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        color: #ff8417;
        font-size: 25px;
        font-weight: 950;
    }

    .lc-quick-title svg {
        width: 30px;
        height: 30px;
    }

    .lc-quick-strip {
        display: flex;
        gap: 32px;
        align-items: center;
        overflow-x: auto;
        margin-top: 33px;
        padding-bottom: 22px;
        border-bottom: 4px solid #9398aa;
    }

    .lc-quick-pill {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        gap: 10px;
        min-width: 140px;
        justify-content: center;
        border-radius: 999px;
        background: #fbfbfc;
        padding: 13px 18px;
        color: #5d647a;
        font-size: 14px;
        font-weight: 950;
    }

    .lc-quick-pill.active,
    .lc-quick-pill:hover {
        color: #17264d;
        box-shadow: inset 0 -3px 0 #ff8417;
    }

    .lc-pill-icon {
        color: var(--tone);
    }

    .lc-pill-icon svg {
        width: 22px;
        height: 22px;
    }

    .lc-page-shell {
        max-width: 1232px;
        margin: 46px auto 80px;
        padding-inline: 16px;
    }

    .lc-section + .lc-section {
        margin-top: 46px;
    }

    .lc-section-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 28px;
    }

    .lc-section-head h2 {
        color: #17264d;
        font-size: 25px;
        font-weight: 500;
    }

    .lc-section-head a {
        color: #ff8417;
        font-size: 14px;
        font-weight: 800;
    }

    .lc-category-grid {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 16px;
    }

    .lc-category-card {
        min-height: 151px;
        border: 1px solid #f0f0f3;
        border-radius: 4px;
        background: #fff;
        padding: 17px 14px;
        text-align: center;
        box-shadow: 0 7px 20px rgba(23, 38, 77, .04);
    }

    .lc-category-icon {
        display: grid;
        height: 82px;
        place-items: center;
        color: var(--tone);
    }

    .lc-category-icon svg {
        width: 40px;
        height: 40px;
    }

    .lc-category-card h3 {
        margin-top: 12px;
        color: #17264d;
        font-size: 16px;
        font-weight: 950;
    }

    .lc-category-card p {
        margin-top: 5px;
        color: #8c92a4;
        font-size: 12px;
        font-weight: 800;
    }

    .lc-product-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 18px;
    }

    .lc-product-card {
        overflow: hidden;
        border: 1px solid #eceef5;
        border-radius: 5px;
        background: #fff;
        box-shadow: 0 8px 20px rgba(23, 38, 77, .05);
    }

    .lc-product-top {
        position: relative;
        display: grid;
        height: 128px;
        place-items: center;
        background: var(--tone);
        color: #fff;
    }

    .lc-product-top svg {
        width: 46px;
        height: 46px;
    }

    .lc-product-top span {
        position: absolute;
        top: 12px;
        right: 12px;
        border-radius: 999px;
        background: #ff8417;
        padding: 5px 9px;
        font-size: 11px;
        font-weight: 900;
    }

    .lc-product-body {
        padding: 15px;
    }

    .lc-product-body small {
        color: #8a90a3;
        font-weight: 900;
    }

    .lc-product-body h3 {
        margin-top: 8px;
        color: #17264d;
        font-size: 17px;
        font-weight: 950;
    }

    .lc-price-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 16px;
    }

    .lc-price-row strong {
        color: #17264d;
        font-size: 20px;
        font-weight: 950;
    }

    .lc-price-row span {
        border-radius: 999px;
        background: #f2f3f7;
        padding: 6px 8px;
        color: #6e7488;
        font-size: 11px;
        font-weight: 900;
        text-transform: capitalize;
    }

    .lc-product-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 14px;
    }

    .lc-product-actions a {
        display: grid;
        min-height: 38px;
        place-items: center;
        border-radius: 4px;
        font-size: 13px;
        font-weight: 950;
    }

    .lc-product-actions a:first-child {
        border: 1px solid #dfe2ea;
        color: #17264d;
    }

    .lc-product-actions a:last-child {
        background: #ff8417;
        color: #fff;
    }

    .lc-product-actions form button {
        display: grid;
        width: 100%;
        min-height: 38px;
        place-items: center;
        border-radius: 4px;
        background: #ff8417;
        color: #fff;
        font-size: 13px;
        font-weight: 950;
    }

    .lc-empty-state {
        grid-column: 1 / -1;
        border: 1px dashed #d8dbe5;
        border-radius: 8px;
        background: #fff;
        padding: 48px;
        text-align: center;
    }

    .rn-mobile-nav {
        display: none;
    }
}

@media (max-width: 1100px) {
    .rn-header-top {
        grid-template-columns: 180px minmax(280px, 1fr) auto;
    }

    .rn-header-tools {
        display: none;
    }

    .rn-header-menu {
        gap: 20px;
        overflow-x: auto;
        white-space: nowrap;
    }

    .lc-category-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lc-product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .rn-header {
        position: sticky;
    }

    .rn-header-top {
        display: flex;
        min-height: 66px;
        justify-content: space-between;
        gap: 12px;
    }

    .rn-brand-name {
        font-size: 17px;
    }

    .rn-brand-mark,
    .rn-brand-mark svg {
        width: 40px;
        height: 40px;
    }

    .rn-search,
    .rn-account-nav,
    .rn-header-tools,
    .rn-header-menu {
        display: none;
    }

    .rn-mobile-search {
        display: block;
    }

    .lc-hero {
        min-height: 330px;
    }

    .lc-hero-art {
        inset: 40px auto 0 -40px;
        width: 270px;
        opacity: .86;
        transform: scale(.8);
        transform-origin: left top;
    }

    .lc-hero-copy {
        padding-top: 58px;
        padding-inline: 18px;
    }

    .lc-hero-copy h1 {
        right: 18px;
        width: calc(100vw - 36px);
        font-size: 42px;
    }

    .lc-hero-copy h2 {
        right: 18px;
        width: calc(100vw - 36px);
        font-size: 34px;
    }

    .lc-hero-copy a {
        right: 18px;
    }

    .lc-slider-arrow {
        display: none;
    }

    .lc-quick-card {
        margin-inline: 14px;
        padding: 20px 16px;
        transform: translateY(-18px);
    }

    .lc-quick-title {
        font-size: 21px;
    }

    .lc-quick-strip {
        gap: 10px;
        margin-top: 20px;
    }

    .lc-page-shell {
        margin-top: 12px;
        padding-inline: 14px;
        padding-bottom: 82px;
    }

    .lc-section-head h2 {
        font-size: 21px;
    }

    .lc-category-grid,
    .lc-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .lc-product-grid {
        grid-template-columns: 1fr;
    }

    .rn-mobile-nav {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 80;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        border-top: 1px solid #e7e9ef;
        background: #fff;
        padding: 8px 6px;
    }

    .rn-mobile-nav a,
    .rn-mobile-nav button {
        display: grid;
        place-items: center;
        gap: 4px;
        color: #17264d;
        font-size: 11px;
        font-weight: 900;
    }

    .rn-mobile-nav svg {
        width: 22px;
        height: 22px;
    }
}

@layer components {
    .surface {
        border-color: #eceef5;
        border-radius: 5px;
        background: #fff;
        box-shadow: 0 8px 22px rgba(23, 38, 77, .06);
    }

    .primary-button {
        border-radius: 4px;
        background: #ff8417;
        box-shadow: 0 10px 22px rgba(255, 132, 23, .18);
    }

    .secondary-button,
    .nav-pill {
        border-color: #dfe2ea;
        border-radius: 4px;
        color: #17264d;
    }

    .eyebrow.dark,
    .section-heading span,
    .section-heading a {
        color: #ff8417;
    }

    .section-heading h1,
    .section-heading h2,
    .product-card h3,
    .game-card h3 {
        color: #17264d;
    }

    .summary-row.total {
        background: #17264d;
    }
}

@layer components {
    .lc-hero {
        height: 400px;
        background:
            linear-gradient(90deg, #02040b 0%, #07111f 44%, #30170f 100%) !important;
    }

    .lc-hero::before,
    .lc-hero::after,
    .lc-hero-art {
        display: none !important;
    }

    .lc-hero-copy h1,
    .lc-hero-copy h2,
    .lc-hero-copy a,
    .lc-slider-arrow,
    .lc-dots {
        opacity: 0 !important;
    }

    .rn-footer {
        margin-top: 80px;
        background: #fff;
        border-top: 1px solid #eceef5;
    }

    .lc-auth-shell {
        min-height: calc(100vh - 150px);
        display: grid;
        place-items: start center;
        padding: 70px 16px 90px;
    }

    .lc-product-layout,
    .lc-checkout-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 420px;
        gap: 22px;
        align-items: start;
    }

    .lc-product-detail-grid {
        display: grid;
        grid-template-columns: 260px 1fr;
        gap: 28px;
        align-items: start;
    }

    .lc-product-detail h1,
    .lc-form-card h1,
    .lc-buy-box h2 {
        color: #17264d;
        font-weight: 950;
    }

    .lc-form-card,
    .lc-buy-box,
    .lc-cart-list,
    .lc-product-detail {
        padding: 24px;
    }

    .lc-cart-row {
        display: grid;
        grid-template-columns: 76px minmax(0, 1fr) 180px 130px auto;
        gap: 16px;
        align-items: center;
        border-bottom: 1px solid #eceef5;
        padding: 16px 0;
    }

    .lc-cart-thumb {
        display: grid;
        width: 70px;
        height: 70px;
        place-items: center;
        border-radius: 5px;
        background: var(--tone);
        color: #fff;
    }
}

@media (max-width: 1100px) {
    .lc-product-layout,
    .lc-checkout-layout,
    .lc-product-detail-grid {
        grid-template-columns: 1fr;
    }

    .lc-cart-row {
        grid-template-columns: 70px 1fr;
    }
}

/* Authorised LikeCard CDN asset fidelity pass */
@layer components {
    :root {
        --lc-navy: #17264d;
        --lc-orange: #ff8417;
        --lc-page: #f7f7f9;
        --lc-copy: #252f55;
        --lc-muted: #858b9f;
        --lc-border: #eceef5;
    }

    html,
    body {
        font-family: "Cairo", ui-sans-serif, system-ui, sans-serif;
        background: var(--lc-page);
        letter-spacing: 0;
    }

    .rn-header {
        background: var(--lc-navy) !important;
        color: #fff;
    }

    .rn-header-row {
        width: min(100%, 1232px);
        margin-inline: auto;
    }

    .rn-header-top {
        min-height: 72px !important;
        grid-template-columns: 82px minmax(320px, 462px) minmax(180px, 1fr) auto !important;
        gap: 24px !important;
        align-items: center;
    }

    .rn-brand {
        justify-content: flex-start;
    }

    .rn-likecard-logo {
        display: block;
        width: 58px;
        height: 58px;
        object-fit: contain;
        filter: none;
    }

    .rn-search {
        height: 47px !important;
        max-width: 462px;
        border-radius: 5px !important;
        background: #fff;
    }

    .rn-search input,
    .rn-mobile-search input {
        height: 100%;
        border: 0 !important;
        border-radius: 5px !important;
        background: #fff !important;
        color: #7f8598 !important;
        font-size: 14px !important;
        font-weight: 500;
    }

    .rn-search button {
        width: 49px !important;
        color: var(--lc-orange);
    }

    .rn-search button img {
        width: 18px;
        height: 18px;
    }

    .rn-account-nav,
    .rn-header-tools,
    .rn-header-tools button,
    .rn-cart {
        color: #fff !important;
        font-size: 14px !important;
        font-weight: 700 !important;
    }

    .rn-user-circle {
        display: none !important;
    }

    .rn-header-tools button,
    .rn-cart {
        display: inline-flex;
        min-height: 31px;
        align-items: center;
        gap: 7px;
        border: 0;
        background: transparent !important;
        padding: 0;
    }

    .rn-tool-icon {
        width: 20px !important;
        height: 20px !important;
        object-fit: contain;
        filter: brightness(0) invert(1);
    }

    .rn-flag-img {
        width: 24px !important;
        height: 24px !important;
        filter: none;
    }

    .rn-mode {
        width: 50px !important;
        height: 31px !important;
        border-radius: 99px !important;
        background: rgba(255, 255, 255, .13) !important;
        padding: 4px !important;
    }

    .rn-mode-dot {
        display: block;
        width: 23px;
        height: 23px;
        margin-inline-start: auto;
        border-radius: 99px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
    }

    .rn-cart-count {
        min-width: 18px !important;
        height: 18px !important;
        background: var(--lc-orange) !important;
        font-size: 11px !important;
        line-height: 18px;
    }

    .rn-header-menu {
        min-height: 76px !important;
        gap: clamp(25px, 3.4vw, 53px) !important;
        border-top: 0 !important;
        font-size: 14px !important;
        font-weight: 700 !important;
    }

    .rn-header-menu a {
        color: #fff !important;
    }

    .rn-all-cats img {
        width: 18px;
        height: 18px;
        filter: brightness(0) invert(1);
    }

    .lc-hero {
        height: 400px !important;
        background: linear-gradient(135deg, #0e4ea7, #1769d1) !important;
    }

    .lc-hero-copy,
    .lc-hero-copy h1,
    .lc-hero-copy h2,
    .lc-hero-copy a,
    .lc-hero-art,
    .lc-slider-arrow,
    .lc-dots {
        display: none !important;
    }

    .lc-quick-card {
        width: min(calc(100% - 32px), 1232px) !important;
        min-height: 176px !important;
        margin: -1px auto 0 !important;
        border: 0 !important;
        border-radius: 3px !important;
        background: #fff !important;
        padding: 25px 31px 23px !important;
        box-shadow: 0 13px 30px rgba(23, 38, 77, .12) !important;
    }

    .lc-quick-title {
        color: var(--lc-orange) !important;
        font-size: 26px !important;
        font-weight: 700 !important;
    }

    .lc-quick-title svg {
        width: 28px;
        height: 28px;
    }

    .lc-quick-strip {
        gap: 31px !important;
        margin-top: 31px !important;
        border-bottom: 4px solid #989dad !important;
        padding-bottom: 24px !important;
    }

    .lc-quick-pill {
        min-width: 143px !important;
        height: 44px !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: #fafafb !important;
        color: #666d82 !important;
        box-shadow: none !important;
        font-size: 14px !important;
        font-weight: 700 !important;
    }

    .lc-pill-icon {
        width: 31px !important;
        height: 31px !important;
        background: transparent !important;
        color: var(--lc-orange);
    }

    .lc-pill-icon img {
        width: 21px;
        height: 21px;
        object-fit: contain;
    }

    .lc-page-shell {
        width: min(calc(100% - 32px), 1232px) !important;
        margin: 46px auto 0 !important;
    }

    .lc-section-head h2 {
        color: var(--lc-copy) !important;
        font-size: 25px !important;
        font-weight: 700 !important;
    }

    .lc-section-head a {
        color: var(--lc-orange) !important;
        font-weight: 700 !important;
    }

    .lc-category-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 18px !important;
    }

    .lc-category-card {
        min-height: 157px !important;
        border: 1px solid var(--lc-border) !important;
        border-radius: 5px !important;
        background: #fff !important;
        padding: 18px 12px !important;
        box-shadow: 0 8px 22px rgba(23, 38, 77, .06) !important;
    }

    .lc-category-icon {
        width: 74px !important;
        height: 74px !important;
        margin-inline: auto;
        border-radius: 5px !important;
        background: #f4f5f8 !important;
        overflow: hidden;
    }

    .lc-category-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 8px;
    }

    .lc-category-card h3 {
        margin-top: 13px !important;
        color: var(--lc-copy) !important;
        font-size: 15px !important;
        font-weight: 700 !important;
    }

    .lc-category-card p {
        color: var(--lc-muted) !important;
        font-size: 12px !important;
    }

    .lc-product-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 18px !important;
    }

    .lc-product-card {
        overflow: hidden;
        border: 1px solid var(--lc-border) !important;
        border-radius: 5px !important;
        background: #fff !important;
        box-shadow: 0 8px 22px rgba(23, 38, 77, .06) !important;
    }

    .lc-product-top {
        height: 148px !important;
        border-radius: 0 !important;
        background: #f4f5f8 !important;
    }

    .lc-product-top img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 14px;
    }

    .lc-product-top span {
        top: 10px !important;
        inset-inline-start: 10px !important;
        border-radius: 3px !important;
        background: var(--lc-orange) !important;
        font-size: 11px !important;
        font-weight: 700 !important;
    }

    .lc-product-body {
        padding: 15px !important;
    }

    .lc-product-body small {
        color: var(--lc-muted) !important;
        font-size: 12px !important;
    }

    .lc-product-body h3 {
        min-height: 42px;
        color: var(--lc-copy) !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1.35;
    }

    .lc-price-row strong {
        color: var(--lc-orange) !important;
        font-size: 18px !important;
        font-weight: 800 !important;
    }

    .lc-product-actions {
        grid-template-columns: 1fr auto !important;
        gap: 8px !important;
    }

    .lc-product-actions a,
    .lc-product-actions form button,
    .primary-button {
        border-radius: 4px !important;
        font-weight: 800 !important;
    }

    .lc-product-visual,
    .lc-cart-thumb {
        overflow: hidden;
        background: #f4f5f8 !important;
    }

    .lc-product-visual img,
    .lc-cart-thumb img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 12px;
    }

    .rn-footer {
        background: #fff !important;
    }

    .rn-store-badges img {
        width: 20px;
        height: 20px;
        object-fit: contain;
    }

    .rn-social a {
        background: transparent !important;
        border: 0 !important;
        width: 28px !important;
        height: 28px !important;
    }

    .rn-social img {
        width: 22px;
        height: 22px;
        object-fit: contain;
    }

    .rn-likecard-footer-logo {
        width: 76px;
        height: 76px;
        object-fit: contain;
    }
}

@media (max-width: 1100px) {
    .rn-header-top {
        grid-template-columns: 1fr auto !important;
    }

    .rn-likecard-logo {
        width: 52px;
        height: 52px;
    }

    .lc-category-grid,
    .lc-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    .lc-hero {
        height: 160px !important;
        background-image: linear-gradient(135deg, #0e4ea7, #1769d1) !important;
    }

    .lc-quick-card {
        width: calc(100% - 20px) !important;
        min-height: 150px !important;
        padding: 18px 14px !important;
    }

    .lc-quick-title {
        font-size: 22px !important;
    }

    .lc-quick-strip {
        gap: 10px !important;
        margin-top: 18px !important;
        padding-bottom: 18px !important;
    }

    .lc-page-shell {
        width: calc(100% - 20px) !important;
        margin-top: 26px !important;
        padding-bottom: 82px !important;
    }

    .lc-category-grid,
    .lc-product-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Pixel-match tightening against the authorised LikeCard desktop reference */
@layer components {
    .rn-header-top {
        min-height: 84px !important;
        grid-template-columns: 190px minmax(360px, 464px) minmax(260px, 1fr) auto !important;
        gap: 28px !important;
    }

    .rn-brand {
        direction: ltr;
        display: inline-flex !important;
        flex-direction: row-reverse;
        align-items: center;
        gap: 8px !important;
        justify-self: start;
        color: #fff !important;
    }

    .rn-likecard-logo {
        width: 54px !important;
        height: 54px !important;
        flex: 0 0 54px;
    }

    .rn-likecard-wordmark {
        display: grid;
        gap: 0;
        color: #fff;
        line-height: 1;
        text-align: left;
    }

    .rn-likecard-wordmark span {
        color: #fff;
        font-size: 22px;
        font-weight: 800;
        letter-spacing: -.02em;
    }

    .rn-likecard-wordmark small {
        margin-top: 3px;
        color: #ff9b25;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: -.02em;
        white-space: nowrap;
    }

    .rn-search {
        height: 48px !important;
    }

    .rn-search input {
        font-size: 15px !important;
        text-align: right;
    }

    .rn-account-nav {
        justify-content: flex-start;
    }

    .rn-header-tools {
        justify-content: flex-end;
    }

    .rn-header-menu {
        min-height: 66px !important;
        justify-content: flex-start;
        gap: clamp(34px, 4.2vw, 64px) !important;
        border-top: 1px solid rgba(255, 255, 255, .04) !important;
    }

    .rn-header-menu a {
        font-size: 15px !important;
        font-weight: 800 !important;
    }

    .rn-all-cats {
        margin-inline-start: 0 !important;
    }

    .lc-hero {
        position: relative;
        height: 400px !important;
        background-image: linear-gradient(135deg, #0e4ea7, #1769d1) !important;
        background-position: center top !important;
        background-size: cover !important;
    }

    .lc-quick-card {
        position: relative;
        z-index: 3;
        transform: translateY(-60px);
        margin-bottom: -28px !important;
        min-height: 178px !important;
        padding: 27px 31px 26px !important;
        border-radius: 4px !important;
        box-shadow: 0 18px 28px rgba(23, 38, 77, .13) !important;
    }

    .lc-quick-title {
        justify-content: flex-start !important;
        gap: 12px !important;
        font-size: 26px !important;
        line-height: 1 !important;
    }

    .lc-quick-strip {
        direction: rtl;
        justify-content: flex-start;
        gap: 27px !important;
        margin-top: 34px !important;
        border-bottom-color: #979cab !important;
    }

    .lc-quick-pill {
        min-width: 155px !important;
        padding-inline: 17px !important;
        justify-content: center !important;
        gap: 10px !important;
        color: #6a7188 !important;
        background: #fbfbfc !important;
    }

    .lc-pill-icon {
        color: var(--lc-orange);
        filter: none;
    }

    .lc-pill-icon img {
        width: 25px !important;
        height: 25px !important;
        object-fit: contain;
    }

    .lc-page-shell {
        margin-top: 8px !important;
    }

    .lc-section-head {
        align-items: center;
        margin-bottom: 28px !important;
    }

    .lc-section-head h2 {
        font-size: 27px !important;
        font-weight: 500 !important;
        letter-spacing: -.02em;
    }

    .lc-category-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }

    .lc-category-card {
        min-height: 158px !important;
        padding: 21px 10px 17px !important;
    }

    .lc-category-icon {
        width: 78px !important;
        height: 78px !important;
        background: transparent !important;
        border-radius: 0 !important;
    }

    .lc-category-icon img {
        width: 100%;
        height: 100%;
        padding: 0 !important;
        object-fit: contain;
    }

    .lc-category-card h3 {
        margin-top: 12px !important;
        font-size: 16px !important;
        color: #18254d !important;
    }

    .lc-category-card p {
        margin-top: 3px !important;
        font-size: 12px !important;
    }

    .lc-product-grid {
        gap: 18px !important;
    }

    .lc-product-top {
        height: 154px !important;
    }

    .lc-product-body h3 {
        font-size: 16px !important;
        font-weight: 800 !important;
    }

    .lc-price-row strong {
        font-size: 19px !important;
    }
}

@media (max-width: 1100px) {
    .rn-header-top {
        grid-template-columns: 1fr auto !important;
        min-height: 70px !important;
    }

    .rn-likecard-wordmark {
        display: none;
    }

    .lc-quick-card {
        transform: translateY(-28px);
        margin-bottom: -12px !important;
    }
}

/* Final Krotystore visual authority: keep old LikeCard passes from leaking orange/navy into the client UI. */
@layer components {
    .ks-header,
    .ks-footer,
    .kr-hero-carousel,
    .kr-category-strip,
    .kr-page,
    .kr-product-page,
    .lc-auth-shell {
        --lc-orange: var(--kr-blue) !important;
        --lc-navy: var(--kr-text) !important;
    }

    .primary-button,
    .lc-auth-form .primary-button,
    .kr-buy-now,
    .ks-login-button,
    .ks-account-nav > a {
        background: var(--kr-blue) !important;
        color: #fff !important;
        border-color: var(--kr-blue) !important;
        box-shadow: 0 10px 20px rgba(23, 105, 209, .16) !important;
    }

    .primary-button:hover,
    .lc-auth-form .primary-button:hover,
    .kr-buy-now:hover,
    .ks-login-button:hover {
        background: var(--kr-blue-dark) !important;
    }

    .lc-auth-link,
    .ks-menu a:first-child,
    .kr-section-head a,
    .kr-details-link,
    .kr-service-card__body > span,
    .kr-variant-option strong,
    .kr-selected-card b {
        color: var(--kr-blue) !important;
    }

    .kr-add-cart,
    .secondary-button {
        background: #fff !important;
        color: var(--kr-blue) !important;
        border-color: #d8e3e1 !important;
        box-shadow: none !important;
    }
}

/* Task polish final authority: selected header capsule, mobile drawer, and night mode. */
@layer components {
    header.ks-header .ks-menu {
        min-width: 238px !important;
        min-height: 48px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        overflow: hidden !important;
        border-radius: 999px !important;
        padding: 6px !important;
        line-height: 1 !important;
        box-sizing: border-box !important;
    }

    header.ks-header .ks-menu a {
        min-height: 36px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        flex: 1 1 auto !important;
        border-radius: 999px !important;
        padding: 0 13px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    header.ks-header .ks-menu svg {
        width: 17px !important;
        height: 17px !important;
        flex: 0 0 auto !important;
    }

    .rn-mobile-sidebar {
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .rn-sidebar-open .rn-mobile-sidebar {
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .rn-sidebar-backdrop {
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .rn-sidebar-open .rn-sidebar-backdrop {
        visibility: visible !important;
        pointer-events: auto !important;
    }

    html[data-theme="dark"] .kr-preference summary,
    html[data-theme="dark"] .kr-preference[open] summary,
    html[data-theme="dark"] .kr-preference-menu {
        background: #102026 !important;
        color: #e8f4f2 !important;
        border-color: rgba(255, 255, 255, .1) !important;
        box-shadow: 0 18px 38px rgba(0, 0, 0, .32) !important;
    }

    html[data-theme="dark"] .kr-preference-menu button {
        color: #e8f4f2 !important;
    }

    html[data-theme="dark"] .kr-preference-menu button:hover,
    html[data-theme="dark"] .kr-preference-menu button.is-active {
        background: #172b33 !important;
        color: #70b7ff !important;
    }
}

@media (max-width: 1200px) {
    @layer components {
        body {
            padding-bottom: 0 !important;
        }

        .ks-header {
            position: sticky !important;
            top: 0 !important;
            z-index: 900 !important;
            border-bottom: 1px solid rgba(0, 54, 47, .06) !important;
            background: rgba(247, 249, 249, .96) !important;
            backdrop-filter: blur(18px) saturate(1.25) !important;
        }

        .ks-topbar {
            grid-template-columns: 50px minmax(0, 1fr) auto !important;
            grid-template-areas:
                "mobile-menu account brand"
                "search search search" !important;
            gap: 10px !important;
            min-height: 106px !important;
            padding: 9px 12px 10px !important;
            align-items: center !important;
        }

        .rn-mobile-menu-trigger {
            grid-area: mobile-menu !important;
            position: relative !important;
            z-index: 1201 !important;
            display: grid !important;
            width: 46px !important;
            height: 46px !important;
            place-items: center !important;
            border: 1px solid rgba(0, 54, 47, .08) !important;
            border-radius: 16px !important;
            background:
                radial-gradient(circle at 30% 18%, rgba(255,255,255,.9), transparent 42%),
                linear-gradient(145deg, #ffffff, #e8f2f0) !important;
            color: #07362f !important;
            box-shadow: 0 14px 28px rgba(0, 54, 47, .12), inset 0 1px 0 rgba(255,255,255,.86) !important;
            pointer-events: auto !important;
        }

        .rn-mobile-menu-trigger svg {
            width: 24px !important;
            height: 24px !important;
        }

        .ks-brand {
            grid-area: brand !important;
            position: static !important;
            transform: none !important;
            justify-self: end !important;
            max-width: 148px !important;
        }

        .ks-brand::after {
            display: none !important;
        }

        .ks-brand span:last-child {
            font-size: 16px !important;
            white-space: nowrap !important;
        }

        .ks-account-nav {
            grid-area: account !important;
            justify-self: start !important;
            width: auto !important;
            min-width: 0 !important;
        }

        .ks-account-nav .ks-login-button,
        .ks-account-nav > a,
        .ks-account-nav button {
            min-height: 42px !important;
            border-radius: 15px !important;
            padding: 0 13px !important;
            font-size: 13px !important;
            white-space: nowrap !important;
        }

        .ks-search,
        .ks-mobile-search {
            grid-area: search !important;
            grid-column: 1 / -1 !important;
            display: flex !important;
            width: 100% !important;
            max-width: none !important;
            height: 48px !important;
            margin: 0 !important;
            justify-self: stretch !important;
        }

        .ks-mobile-search {
            display: none !important;
        }

        .ks-search input {
            font-size: 14px !important;
        }

        header.ks-header .ks-menu,
        .ks-menu,
        .ks-header-tools,
        .rn-theme-toggle-desktop,
        .rn-mobile-nav,
        .ks-mobile-nav {
            display: none !important;
        }

        .rn-mobile-sidebar {
            z-index: 1600 !important;
            display: flex !important;
            width: min(91vw, 392px) !important;
            padding: 18px !important;
            border-radius: 26px 0 0 26px !important;
            transform: translateX(112%) !important;
        }

        .rn-sidebar-open .rn-mobile-sidebar {
            transform: translateX(0) !important;
        }

        .rn-sidebar-backdrop {
            z-index: 1550 !important;
            display: block !important;
        }

        .rn-sidebar-links a {
            position: relative !important;
            overflow: hidden !important;
            min-height: 60px !important;
            border-radius: 20px !important;
            background:
                linear-gradient(135deg, rgba(255,255,255,.92), rgba(244,249,248,.78)) !important;
        }

        .rn-sidebar-links a::before {
            content: "" !important;
            position: absolute !important;
            inset-inline-start: 0 !important;
            top: 13px !important;
            bottom: 13px !important;
            width: 4px !important;
            border-radius: 999px !important;
            background: linear-gradient(180deg, #1677ff, #043f88) !important;
            opacity: .9 !important;
        }

        html[data-theme="dark"] .ks-header {
            background: rgba(7, 18, 22, .96) !important;
            border-bottom-color: rgba(255,255,255,.08) !important;
        }

        html[data-theme="dark"] .rn-mobile-menu-trigger {
            border-color: rgba(255,255,255,.1) !important;
            background:
                radial-gradient(circle at 30% 18%, rgba(112,183,255,.18), transparent 42%),
                linear-gradient(145deg, #14272e, #0d1b20) !important;
            color: #e8f4f2 !important;
            box-shadow: 0 14px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08) !important;
        }

        html[data-theme="dark"] .rn-sidebar-links a {
            background:
                linear-gradient(135deg, rgba(18,34,40,.96), rgba(12,26,31,.86)) !important;
        }
    }
}

@media (min-width: 1201px) {
    @layer components {
        .rn-mobile-menu-trigger {
            display: none !important;
        }

        .rn-mobile-sidebar,
        .rn-sidebar-backdrop {
            display: none !important;
        }
    }
}

/* Real image flags + image logo instead of text brand. */
@layer components {
    .ks-brand {
        min-width: 0 !important;
        gap: 0 !important;
    }

    .ks-brand-mark,
    .ks-brand > span,
    .ks-brand::after {
        display: none !important;
    }

    .ks-brand-logo {
        display: block !important;
        width: clamp(132px, 9.6vw, 184px) !important;
        height: auto !important;
        max-height: 54px !important;
        object-fit: contain !important;
    }

    .rn-sidebar-head .ks-brand-logo {
        width: 132px !important;
        max-height: 42px !important;
    }

    .ks-footer-brand .ks-brand-logo {
        width: 154px !important;
        max-height: 48px !important;
    }

    .kr-flag-img {
        display: inline-block !important;
        width: 26px !important;
        height: 26px !important;
        flex: 0 0 26px !important;
        overflow: hidden !important;
        border: 1px solid rgba(0, 0, 0, .08) !important;
        border-radius: 999px !important;
        background: #fff !important;
        object-fit: cover !important;
        object-position: center !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .08) !important;
    }

    .kr-preference-menu .kr-flag-img {
        width: 25px !important;
        height: 25px !important;
        flex-basis: 25px !important;
    }

    html[data-theme="dark"] .kr-flag-img {
        border-color: rgba(255, 255, 255, .16) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .28) !important;
    }
}

@media (max-width: 1200px) {
    @layer components {
        .ks-brand {
            max-width: 142px !important;
        }

        .ks-brand-logo {
            width: 118px !important;
            max-height: 38px !important;
        }

        .rn-sidebar-head .ks-brand-logo {
            width: 124px !important;
        }
    }
}

/* Premium header refit: clean Krotystore-like single row, no sticky follow, no mobile side drift. */
@layer components {
    html,
    body {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .ks-header {
        position: relative !important;
        top: auto !important;
        z-index: 50 !important;
        height: auto !important;
        min-height: 84px !important;
        border-bottom: 1px solid #e7ecef !important;
        background: #fff !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }

    .ks-topbar {
        position: relative !important;
        display: flex !important;
        width: min(calc(100% - 150px), 1740px) !important;
        max-width: 1740px !important;
        min-height: 84px !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: clamp(18px, 2.1vw, 40px) !important;
        margin: 0 auto !important;
        padding: 0 !important;
        direction: rtl !important;
    }

    .ks-brand {
        order: 1 !important;
        position: static !important;
        flex: 0 0 auto !important;
        transform: none !important;
        justify-self: auto !important;
    }

    .ks-brand-logo {
        width: 156px !important;
        max-height: 48px !important;
    }

    header.ks-header .ks-menu {
        order: 2 !important;
        flex: 0 0 auto !important;
        min-width: 252px !important;
        min-height: 50px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    header.ks-header .ks-menu a {
        flex: 0 0 auto !important;
        min-height: 42px !important;
        padding: 0 18px !important;
        border-radius: 999px !important;
        color: #263238 !important;
        font-size: 18px !important;
        font-weight: 950 !important;
    }

    header.ks-header .ks-menu a:first-child,
    header.ks-header .ks-menu a:hover {
        background: #f5f9f8 !important;
        color: #0b56be !important;
    }

    .ks-search {
        order: 3 !important;
        flex: 1 1 530px !important;
        width: auto !important;
        max-width: 600px !important;
        min-width: 360px !important;
        height: 48px !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 16px !important;
        background: #e9efee !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.75),
            0 4px 12px rgba(23, 39, 45, .04) !important;
    }

    .ks-search input {
        color: #263238 !important;
        font-size: 17px !important;
        font-weight: 750 !important;
    }

    .ks-search input::placeholder {
        color: #68787e !important;
        opacity: .9 !important;
    }

    .ks-search button {
        color: #111f25 !important;
    }

    .ks-header-tools {
        order: 4 !important;
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 20px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    header.ks-header .kr-preference summary {
        display: inline-flex !important;
        min-height: 42px !important;
        align-items: center !important;
        gap: 8px !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: transparent !important;
        padding: 0 !important;
        color: #111f25 !important;
        font-size: 16px !important;
        font-weight: 850 !important;
        box-shadow: none !important;
    }

    header.ks-header .kr-preference summary::after {
        width: 8px !important;
        height: 8px !important;
        border-color: #59686d !important;
    }

    .kr-flag-img {
        width: 24px !important;
        height: 24px !important;
        flex-basis: 24px !important;
    }

    .rn-theme-toggle-desktop {
        order: 5 !important;
        flex: 0 0 46px !important;
        display: inline-grid !important;
        width: 46px !important;
        height: 46px !important;
        place-items: center !important;
        border: 1px solid rgba(5, 54, 87, .08) !important;
        border-radius: 16px !important;
        background:
            radial-gradient(circle at 30% 18%, rgba(255,255,255,.95), transparent 44%),
            linear-gradient(145deg, #f7fbfa, #e7f0ee) !important;
        color: #07362f !important;
        box-shadow: 0 12px 24px rgba(0,54,47,.08), inset 0 1px 0 rgba(255,255,255,.92) !important;
        margin: 0 !important;
        transform: none !important;
    }

    .rn-theme-toggle-desktop svg {
        width: 22px !important;
        height: 22px !important;
    }

    .ks-account-nav {
        order: 6 !important;
        flex: 0 0 auto !important;
        display: inline-flex !important;
        justify-content: flex-start !important;
        justify-self: auto !important;
        margin-inline-start: 0 !important;
    }

    .ks-login-button,
    .ks-account-nav > a,
    .ks-account-nav button {
        min-height: 48px !important;
        border: 0 !important;
        border-radius: 9px !important;
        background: linear-gradient(180deg, #0b67d8, #0552b6) !important;
        color: #fff !important;
        padding: 0 24px !important;
        font-size: 22px !important;
        font-weight: 950 !important;
        letter-spacing: -.02em !important;
        box-shadow:
            0 12px 24px rgba(5, 82, 182, .24),
            inset 0 1px 0 rgba(255,255,255,.22) !important;
    }

    .ks-login-button:hover,
    .ks-account-nav > a:hover,
    .ks-account-nav button:hover {
        background: linear-gradient(180deg, #0a72ef, #064aa4) !important;
        transform: translateY(-1px) !important;
    }

    html[data-theme="dark"] .ks-header {
        background: #071216 !important;
        border-bottom-color: rgba(255,255,255,.08) !important;
    }

    html[data-theme="dark"] .ks-search {
        background: #111f25 !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 24px rgba(0,0,0,.18) !important;
    }

    html[data-theme="dark"] .ks-search input,
    html[data-theme="dark"] header.ks-header .ks-menu a,
    html[data-theme="dark"] header.ks-header .kr-preference summary {
        color: #e8f4f2 !important;
    }

    html[data-theme="dark"] header.ks-header .ks-menu a:first-child,
    html[data-theme="dark"] header.ks-header .ks-menu a:hover {
        background: #102026 !important;
        color: #70b7ff !important;
    }

    html[data-theme="dark"] .rn-theme-toggle-desktop {
        border-color: rgba(255,255,255,.1) !important;
        background:
            radial-gradient(circle at 30% 18%, rgba(112,183,255,.2), transparent 44%),
            linear-gradient(145deg, #14272e, #0d1b20) !important;
        color: #e8f4f2 !important;
        box-shadow: 0 14px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08) !important;
    }
}

@media (max-width: 1200px) {
    @layer components {
        .ks-header {
            position: relative !important;
            top: auto !important;
            min-height: 124px !important;
            overflow-x: clip !important;
        }

        .ks-topbar {
            display: grid !important;
            width: calc(100% - 24px) !important;
            max-width: 100% !important;
            min-height: 124px !important;
            grid-template-columns: 46px 44px minmax(78px, 1fr) auto !important;
            grid-template-areas:
                "mobile-menu theme account brand"
                "search search search search" !important;
            gap: 10px !important;
            margin: 0 auto !important;
            padding: 10px 0 !important;
            align-items: center !important;
            direction: rtl !important;
        }

        .rn-mobile-menu-trigger {
            grid-area: mobile-menu !important;
            display: grid !important;
            width: 46px !important;
            height: 46px !important;
            justify-self: start !important;
            order: initial !important;
        }

        .rn-theme-toggle-desktop {
            grid-area: theme !important;
            display: inline-grid !important;
            width: 44px !important;
            height: 44px !important;
            min-width: 44px !important;
            justify-self: start !important;
            order: initial !important;
            border-radius: 15px !important;
        }

        .ks-brand {
            grid-area: brand !important;
            justify-self: end !important;
            order: initial !important;
            max-width: none !important;
        }

        .ks-brand-logo {
            width: 116px !important;
            max-height: 38px !important;
        }

        .ks-account-nav {
            grid-area: account !important;
            justify-self: stretch !important;
            order: initial !important;
            min-width: 0 !important;
        }

        .ks-account-nav .ks-login-button,
        .ks-account-nav > a,
        .ks-account-nav button {
            min-height: 44px !important;
            border-radius: 14px !important;
            padding: 0 12px !important;
            font-size: 13px !important;
        }

        .ks-search {
            grid-area: search !important;
            grid-column: 1 / -1 !important;
            display: flex !important;
            width: 100% !important;
            max-width: none !important;
            min-width: 0 !important;
            height: 50px !important;
            justify-self: stretch !important;
            order: initial !important;
        }

        .ks-search input {
            min-width: 0 !important;
            font-size: 14px !important;
        }

        header.ks-header .ks-menu,
        .ks-header-tools,
        .ks-mobile-search,
        .rn-mobile-nav,
        .ks-mobile-nav {
            display: none !important;
        }

        .rn-main,
        .kr-page,
        .kr-section,
        .kr-category-strip,
        .ks-footer,
        .ks-footer-inner {
            max-width: 100vw !important;
            overflow-x: clip !important;
        }

        .kr-page {
            padding-inline: 12px !important;
        }

        .kr-hero-stage {
            width: 100% !important;
            max-width: 100% !important;
            grid-template-columns: 1fr !important;
            margin-inline: auto !important;
            overflow: hidden !important;
        }

        .kr-hero-carousel,
        .kr-hero-slide,
        .kr-hero-slide img {
            width: 100% !important;
            max-width: 100% !important;
            overflow: hidden !important;
        }

        .kr-hero-slide img {
            object-fit: cover !important;
            object-position: center !important;
        }

        .kr-service-grid,
        .kr-category-grid,
        .lc-product-grid,
        .lc-category-grid {
            width: 100% !important;
            max-width: 100% !important;
            overflow-x: clip !important;
        }
    }
}

/* Absolute correction: header layout must never push controls outside the viewport. */
@media (min-width: 1201px) {
    @layer components {
        .ks-topbar {
            display: grid !important;
            width: min(calc(100% - 160px), 1740px) !important;
            max-width: 1740px !important;
            grid-template-columns: auto 48px auto minmax(430px, 600px) auto auto !important;
            grid-template-areas: "account theme tools search menu brand" !important;
            gap: clamp(22px, 2.15vw, 46px) !important;
            align-items: center !important;
            justify-content: space-between !important;
            direction: ltr !important;
            overflow: visible !important;
        }

        .ks-account-nav {
            grid-area: account !important;
            order: initial !important;
            width: auto !important;
            min-width: 0 !important;
            justify-self: start !important;
        }

        .rn-theme-toggle-desktop {
            grid-area: theme !important;
            order: initial !important;
            justify-self: center !important;
        }

        .ks-header-tools {
            grid-area: tools !important;
            order: initial !important;
            width: auto !important;
            min-width: 0 !important;
            justify-self: start !important;
            direction: rtl !important;
        }

        .ks-search {
            grid-area: search !important;
            order: initial !important;
            width: 100% !important;
            min-width: 0 !important;
            max-width: 600px !important;
            justify-self: center !important;
            direction: rtl !important;
        }

        header.ks-header .ks-menu {
            grid-area: menu !important;
            order: initial !important;
            width: auto !important;
            min-width: 252px !important;
            max-width: 310px !important;
            justify-self: center !important;
            direction: rtl !important;
        }

        .ks-brand {
            grid-area: brand !important;
            order: initial !important;
            width: auto !important;
            justify-self: end !important;
            direction: ltr !important;
        }
    }
}

@media (max-width: 1200px) {
    @layer components {
        .ks-topbar {
            direction: ltr !important;
            grid-template-columns: 46px 44px minmax(78px, 1fr) auto !important;
            grid-template-areas:
                "mobile-menu theme account brand"
                "search search search search" !important;
        }

        .rn-mobile-menu-trigger {
            justify-self: start !important;
        }

        .rn-theme-toggle-desktop {
            justify-self: start !important;
        }

        .ks-account-nav {
            justify-self: center !important;
            direction: rtl !important;
        }

        .ks-brand {
            justify-self: end !important;
        }

        .ks-search {
            direction: rtl !important;
        }
    }
}

/* Final edge toggle authority: keep it circular, clipped, and outside header flow. */
@layer components {
    .rn-theme-toggle-desktop {
        position: fixed !important;
        top: 18px !important;
        left: -15px !important;
        right: auto !important;
        z-index: 1200 !important;
        display: inline-grid !important;
        width: 58px !important;
        height: 58px !important;
        min-width: 58px !important;
        min-height: 58px !important;
        max-width: 58px !important;
        max-height: 58px !important;
        aspect-ratio: 1 / 1 !important;
        place-items: center !important;
        border-radius: 999px !important;
        border: 1px solid rgba(255, 255, 255, .22) !important;
        background:
            radial-gradient(circle at 68% 26%, rgba(255,255,255,.42), transparent 34%),
            linear-gradient(145deg, #1677ff, #0554bc) !important;
        color: #fff !important;
        box-shadow: 0 16px 34px rgba(5, 84, 188, .28), inset 0 1px 0 rgba(255, 255, 255, .28) !important;
        transform: none !important;
    }

    .rn-theme-toggle-desktop svg {
        width: 25px !important;
        height: 25px !important;
        transform: translateX(6px) !important;
    }

    html:not([data-theme="dark"]) .rn-theme-toggle-desktop .rn-theme-sun {
        display: block !important;
    }

    html:not([data-theme="dark"]) .rn-theme-toggle-desktop .rn-theme-moon {
        display: none !important;
    }

    html[data-theme="dark"] .rn-theme-toggle-desktop {
        background:
            radial-gradient(circle at 68% 26%, rgba(255,255,255,.14), transparent 34%),
            linear-gradient(145deg, #15191f, #020405) !important;
        color: #fff !important;
        box-shadow: 0 18px 38px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .12) !important;
    }

    html[data-theme="dark"] .rn-theme-toggle-desktop .rn-theme-sun {
        display: none !important;
    }

    html[data-theme="dark"] .rn-theme-toggle-desktop .rn-theme-moon {
        display: block !important;
    }
}

@media (min-width: 1201px) {
    @layer components {
        .ks-topbar {
            grid-template-columns: auto auto minmax(430px, 600px) auto auto !important;
            grid-template-areas: "account tools search menu brand" !important;
        }
    }
}

@media (max-width: 1200px) {
    @layer components {
        .rn-theme-toggle-desktop {
            top: 130px !important;
            left: -14px !important;
            width: 52px !important;
            height: 52px !important;
            min-width: 52px !important;
            min-height: 52px !important;
            max-width: 52px !important;
            max-height: 52px !important;
        }

        .rn-theme-toggle-desktop svg {
            width: 22px !important;
            height: 22px !important;
            transform: translateX(6px) !important;
        }

        .ks-topbar {
            grid-template-columns: 46px minmax(78px, 1fr) auto !important;
            grid-template-areas:
                "mobile-menu account brand"
                "search search search" !important;
        }
    }
}

/* Final compact pass: quieter edge toggle, safer login spacing, balanced mobile catalog. */
@layer components {
    .rn-theme-toggle-desktop {
        top: 116px !important;
        left: -10px !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
        border: 0 !important;
        background: #0b67d8 !important;
        color: #fff !important;
        box-shadow: none !important;
    }

    .rn-theme-toggle-desktop:hover {
        transform: translateX(5px) !important;
        box-shadow: none !important;
    }

    .rn-theme-toggle-desktop svg {
        width: 19px !important;
        height: 19px !important;
        transform: translateX(4px) !important;
    }

    html[data-theme="dark"] .rn-theme-toggle-desktop {
        background: #111 !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .ks-login-button,
    .ks-account-nav > a,
    .ks-account-nav button {
        box-shadow: none !important;
        background: #075dc5 !important;
    }

    .ks-login-button:hover,
    .ks-account-nav > a:hover,
    .ks-account-nav button:hover {
        background: #064fa8 !important;
        box-shadow: none !important;
    }
}

@media (min-width: 1201px) {
    @layer components {
        .ks-topbar {
            grid-template-columns: minmax(168px, auto) minmax(190px, auto) minmax(440px, 600px) minmax(260px, auto) minmax(150px, auto) !important;
            gap: clamp(24px, 2.35vw, 54px) !important;
        }

        .ks-account-nav {
            min-width: 168px !important;
        }

        .ks-login-button,
        .ks-account-nav > a,
        .ks-account-nav button {
            min-width: 156px !important;
            min-height: 48px !important;
            justify-content: center !important;
            border-radius: 9px !important;
            padding-inline: 22px !important;
        }

        .ks-header-tools {
            min-width: 190px !important;
            gap: 24px !important;
        }
    }
}

@media (max-width: 1200px) {
    @layer components {
        .ks-topbar {
            grid-template-columns: 46px minmax(118px, 1fr) minmax(104px, auto) !important;
            grid-template-areas:
                "mobile-menu account brand"
                "search search search" !important;
            gap: 10px !important;
        }

        .ks-account-nav {
            justify-self: center !important;
            width: 100% !important;
            max-width: 134px !important;
        }

        .ks-account-nav .ks-login-button,
        .ks-account-nav > a,
        .ks-account-nav button {
            width: 100% !important;
            min-width: 118px !important;
            min-height: 42px !important;
            justify-content: center !important;
            border-radius: 13px !important;
            padding: 0 10px !important;
            font-size: 12.5px !important;
            line-height: 1 !important;
            box-shadow: none !important;
        }

        .rn-theme-toggle-desktop {
            top: 132px !important;
            left: -9px !important;
            width: 40px !important;
            height: 40px !important;
            min-width: 40px !important;
            min-height: 40px !important;
            max-width: 40px !important;
            max-height: 40px !important;
        }

        .rn-theme-toggle-desktop svg {
            width: 17px !important;
            height: 17px !important;
            transform: translateX(4px) !important;
        }

        .kr-page {
            padding-inline: 14px !important;
        }

        .kr-category-strip {
            width: 100% !important;
            max-width: 100% !important;
            grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
            gap: 14px 10px !important;
            margin-top: 26px !important;
            padding-inline: 4px !important;
        }

        .kr-category-tile {
            min-height: 88px !important;
            gap: 8px !important;
            justify-content: start !important;
            align-content: start !important;
            padding: 0 !important;
            font-size: 11.5px !important;
            line-height: 1.22 !important;
            text-align: center !important;
        }

        .kr-category-tile img {
            width: 36px !important;
            height: 36px !important;
            object-fit: contain !important;
        }

        .kr-section {
            margin-top: 26px !important;
        }

        .kr-section-head {
            margin-bottom: 16px !important;
            align-items: center !important;
        }

        .kr-section-head h2 {
            font-size: 25px !important;
            line-height: 1.15 !important;
        }

        .kr-section-head a {
            min-height: 30px !important;
            padding-inline: 12px !important;
            font-size: 11px !important;
        }

        .kr-service-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
            gap: 22px 14px !important;
            align-items: start !important;
        }

        .kr-service-card {
            display: grid !important;
            justify-items: center !important;
            gap: 7px !important;
            min-width: 0 !important;
            overflow: visible !important;
        }

        .kr-service-card__image {
            width: 72px !important;
            height: 72px !important;
            display: grid !important;
            place-items: center !important;
            background: transparent !important;
            border: 0 !important;
            border-radius: 0 !important;
            overflow: visible !important;
        }

        .kr-service-card__image img {
            width: 72px !important;
            height: 72px !important;
            max-width: 72px !important;
            max-height: 72px !important;
            object-fit: contain !important;
            border-radius: 0 !important;
            display: block !important;
        }

        .kr-service-card__body {
            width: 100% !important;
            padding: 0 !important;
        }

        .kr-service-card h3 {
            min-height: 32px !important;
            margin: 0 !important;
            color: #003d36 !important;
            font-size: 13.5px !important;
            font-weight: 950 !important;
            line-height: 1.16 !important;
            text-align: center !important;
            overflow-wrap: anywhere !important;
        }

        .kr-hero-side {
            grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
            gap: 14px 10px !important;
        }

        .kr-hero-side a {
            gap: 7px !important;
            font-size: 12.5px !important;
            line-height: 1.15 !important;
            text-align: center !important;
        }

        .kr-hero-side img {
            width: 70px !important;
            height: 70px !important;
            object-fit: contain !important;
        }
    }
}

@media (max-width: 430px) {
    @layer components {
        .kr-service-grid {
            gap: 20px 10px !important;
        }

        .kr-service-card__image,
        .kr-service-card__image img {
            width: 66px !important;
            height: 66px !important;
            max-width: 66px !important;
            max-height: 66px !important;
        }

        .kr-service-card h3 {
            font-size: 12.8px !important;
        }
    }
}

/* Mobile slider sections, full hero images, admin-driven product page polish. */
@layer components {
    .rn-scroll-section {
        position: relative;
    }

    .rn-scroll-btn {
        display: none;
        place-items: center;
        border: 1px solid #dbe5e3;
        border-radius: 999px;
        background: rgba(255, 255, 255, .94);
        color: #003d36;
        box-shadow: 0 10px 22px rgba(8, 31, 38, .08);
    }

    .rn-scroll-btn svg {
        width: 18px;
        height: 18px;
    }

    .kr-hero-carousel {
        background: #111f25 !important;
    }

    .kr-hero-slide img {
        object-fit: contain !important;
        background: #111f25 !important;
    }

    .rn-product-pro {
        width: min(calc(100% - 110px), 1540px);
        margin: 42px auto 70px;
    }

    .rn-product-breadcrumb {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 9px;
        margin-bottom: 22px;
        color: #718286;
        font-size: 14px;
        font-weight: 850;
    }

    .rn-product-breadcrumb a {
        color: #0b5fc8;
    }

    .rn-product-layout {
        display: grid;
        grid-template-columns: minmax(260px, 350px) minmax(420px, 1fr) minmax(280px, 340px);
        gap: 26px;
        align-items: start;
    }

    .rn-product-visual,
    .rn-product-options,
    .rn-product-buy-card {
        border: 1px solid #e2ebe9;
        border-radius: 30px;
        background: rgba(255, 255, 255, .92);
        box-shadow: 0 18px 42px rgba(16, 37, 47, .07);
    }

    .rn-product-visual {
        padding: 28px;
        text-align: center;
    }

    .rn-product-image-card {
        display: grid;
        min-height: 260px;
        place-items: center;
        border-radius: 28px;
        background: linear-gradient(180deg, #f1f6f5, #ffffff);
    }

    .rn-product-image-card img {
        width: min(100%, 240px);
        height: 240px;
        object-fit: contain;
    }

    .rn-product-visual h1 {
        margin-top: 24px;
        color: #003d36;
        font-size: clamp(28px, 3vw, 44px);
        font-weight: 950;
        line-height: 1.05;
    }

    .rn-product-visual p {
        margin-top: 12px;
        color: #65777b;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.8;
    }

    .rn-product-options {
        padding: 28px;
    }

    .rn-product-options-head {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 20px;
    }

    .rn-product-options-head span {
        color: #0b5fc8;
        font-size: 13px;
        font-weight: 950;
    }

    .rn-product-options-head h2 {
        color: #003d36;
        font-size: clamp(26px, 2.5vw, 38px);
        font-weight: 950;
    }

    .rn-product-variant-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .rn-product-variant {
        display: grid;
        min-height: 92px;
        align-content: center;
        gap: 8px;
        border: 1px solid #dfe9e7;
        border-radius: 22px;
        background: #fff;
        padding: 16px 18px;
        color: #003d36;
        transition: border-color .18s ease, background .18s ease, transform .18s ease;
    }

    .rn-product-variant:hover,
    .rn-product-variant.is-selected {
        border-color: #0b67d8;
        background: #f0f7ff;
        transform: translateY(-1px);
    }

    .rn-product-variant span {
        font-size: 15px;
        font-weight: 950;
    }

    .rn-product-variant strong {
        color: #0b5fc8;
        font-size: 19px;
        font-weight: 950;
    }

    .rn-product-accordion {
        margin-top: 24px;
        display: grid;
        gap: 10px;
    }

    .rn-product-accordion details {
        border: 1px solid #e1ebe9;
        border-radius: 18px;
        background: #fbfdfd;
        padding: 0 16px;
    }

    .rn-product-accordion summary {
        cursor: pointer;
        padding: 15px 0;
        color: #003d36;
        font-weight: 950;
        list-style: none;
    }

    .rn-product-accordion summary::-webkit-details-marker {
        display: none;
    }

    .rn-product-accordion p {
        padding-bottom: 16px;
        color: #64777b;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.8;
    }

    .rn-product-buy-card {
        position: sticky;
        top: 22px;
        padding: 22px;
    }

    .rn-selected-package {
        display: grid;
        gap: 9px;
        border-radius: 24px;
        background: linear-gradient(180deg, #f1f7f6, #ffffff);
        padding: 18px;
    }

    .rn-selected-package span {
        color: #6c7d82;
        font-size: 12px;
        font-weight: 950;
    }

    .rn-selected-package strong {
        color: #003d36;
        font-size: 18px;
        font-weight: 950;
    }

    .rn-selected-package b {
        color: #0b5fc8;
        font-size: 28px;
        font-weight: 950;
    }

    .rn-buy-primary,
    .rn-buy-secondary {
        display: flex;
        width: 100%;
        min-height: 54px;
        align-items: center;
        justify-content: center;
        margin-top: 14px;
        border-radius: 18px;
        font-size: 16px;
        font-weight: 950;
    }

    .rn-buy-primary {
        background: #075dc5;
        color: #fff;
    }

    .rn-buy-secondary {
        border: 1px solid #d8e3e1;
        background: #fff;
        color: #075dc5;
    }

    .rn-trust-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-top: 18px;
    }

    .rn-trust-grid span {
        display: grid;
        min-height: 66px;
        place-items: center;
        gap: 6px;
        border-radius: 18px;
        background: #f4f8f7;
        color: #003d36;
        font-size: 12px;
        font-weight: 950;
    }

    .rn-trust-grid svg {
        width: 20px;
        height: 20px;
        color: #075dc5;
    }

    .rn-product-buy-card p {
        margin-top: 16px;
        color: #66797d;
        font-size: 13px;
        font-weight: 800;
        line-height: 1.7;
        text-align: center;
    }

    html[data-theme="dark"] .rn-product-visual,
    html[data-theme="dark"] .rn-product-options,
    html[data-theme="dark"] .rn-product-buy-card,
    html[data-theme="dark"] .rn-product-variant,
    html[data-theme="dark"] .rn-product-accordion details,
    html[data-theme="dark"] .rn-selected-package {
        border-color: rgba(255,255,255,.08);
        background: #102026;
        color: #e8f4f2;
    }

    html[data-theme="dark"] .rn-product-visual h1,
    html[data-theme="dark"] .rn-product-options-head h2,
    html[data-theme="dark"] .rn-product-variant,
    html[data-theme="dark"] .rn-product-accordion summary,
    html[data-theme="dark"] .rn-selected-package strong,
    html[data-theme="dark"] .rn-trust-grid span {
        color: #e8f4f2;
    }

    html[data-theme="dark"] .rn-product-image-card,
    html[data-theme="dark"] .rn-trust-grid span {
        background: #0d1b20;
    }
}

@media (max-width: 1200px) {
    @layer components {
        .rn-theme-toggle-desktop {
            display: none !important;
        }

        .rn-scroll-section {
            width: 100%;
            padding-inline: 34px;
        }

        .rn-category-scroll-section {
            margin-top: 24px;
        }

        .rn-scroll-btn {
            position: absolute;
            top: 50%;
            z-index: 5;
            display: grid;
            width: 30px;
            height: 30px;
            transform: translateY(-50%);
        }

        .rn-scroll-prev {
            inset-inline-start: 0;
        }

        .rn-scroll-next {
            inset-inline-end: 0;
        }

        .rn-mobile-carousel {
            display: grid !important;
            grid-auto-flow: column !important;
            grid-auto-columns: calc((100% - 20px) / 3) !important;
            grid-template-columns: none !important;
            gap: 10px !important;
            overflow-x: auto !important;
            overflow-y: hidden !important;
            scroll-snap-type: x mandatory;
            scrollbar-width: none;
            padding: 2px 0 8px !important;
        }

        .rn-mobile-carousel::-webkit-scrollbar {
            display: none;
        }

        .rn-mobile-carousel > * {
            scroll-snap-align: start;
        }

        .kr-category-strip.rn-mobile-carousel {
            margin-top: 0 !important;
        }

        .kr-hero-carousel {
            border-radius: 22px !important;
            background: #111f25 !important;
        }

        .kr-hero-slide img {
            height: auto !important;
            min-height: 210px !important;
            max-height: 300px !important;
            object-fit: contain !important;
            background: #111f25 !important;
        }

        .rn-product-pro {
            width: calc(100% - 24px);
            margin: 24px auto 50px;
        }

        .rn-product-layout {
            grid-template-columns: 1fr;
            gap: 16px;
        }

        .rn-product-visual,
        .rn-product-options,
        .rn-product-buy-card {
            border-radius: 24px;
            padding: 18px;
        }

        .rn-product-image-card {
            min-height: 190px;
            border-radius: 22px;
        }

        .rn-product-image-card img {
            width: min(100%, 170px);
            height: 170px;
        }

        .rn-product-visual h1 {
            font-size: 30px;
        }

        .rn-product-options-head {
            align-items: start;
            flex-direction: column;
            margin-bottom: 14px;
        }

        .rn-product-variant-grid {
            grid-template-columns: 1fr;
            gap: 10px;
        }

        .rn-product-variant {
            min-height: 74px;
            border-radius: 18px;
            padding: 13px 14px;
        }

        .rn-product-buy-card {
            position: static;
        }
    }
}

/* Final hero image fit: full banner visible without ugly letterboxing. */
@layer components {
    .kr-hero-carousel {
        display: grid !important;
        align-items: center !important;
        background: transparent !important;
    }

    .kr-hero-slide {
        align-self: center !important;
        background: transparent !important;
    }

    .kr-hero-slide img {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: 520px !important;
        object-fit: contain !important;
        background: transparent !important;
    }
}

@media (max-width: 1200px) {
    @layer components {
        .kr-hero-slide img {
            max-height: 300px !important;
        }
    }
}

/* Final carousel polish: physical arrows match the direction they move, and the hero is manually controllable. */
@layer components {
    .kr-hero-carousel {
        position: relative !important;
        overflow: hidden !important;
    }

    .rn-hero-arrow {
        position: absolute;
        top: 50%;
        z-index: 8;
        display: grid;
        width: 42px;
        height: 42px;
        place-items: center;
        border: 1px solid rgb(255 255 255 / 62%);
        border-radius: 999px;
        color: #082f34;
        background: rgb(255 255 255 / 86%);
        box-shadow: 0 18px 38px rgb(5 26 31 / 18%);
        transform: translateY(-50%);
        transition: transform 180ms ease, background 180ms ease, color 180ms ease;
    }

    .rn-hero-arrow:hover,
    .rn-hero-arrow:focus-visible {
        color: #ffffff;
        background: #1769d1;
        transform: translateY(-50%) scale(1.04);
        outline: none;
    }

    .rn-hero-arrow svg {
        width: 21px;
        height: 21px;
    }

    .rn-hero-prev {
        right: auto !important;
        left: 14px !important;
    }

    .rn-hero-next {
        right: 14px !important;
        left: auto !important;
    }

    .kr-hero-dots {
        z-index: 9 !important;
        gap: 7px !important;
    }

    .kr-hero-dots button {
        width: 8px;
        height: 8px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: rgb(255 255 255 / 42%);
        cursor: pointer;
        transition: width 180ms ease, background 180ms ease;
    }

    .kr-hero-dots button.is-active {
        width: 34px;
        background: #f6c41a;
    }

    html[data-theme="dark"] .rn-hero-arrow {
        color: #e9fbff;
        border-color: rgb(255 255 255 / 16%);
        background: rgb(12 28 34 / 82%);
    }
}

@media (max-width: 1200px) {
    @layer components {
        .rn-scroll-prev {
            right: auto !important;
            left: 0 !important;
            inset-inline-start: auto !important;
            inset-inline-end: auto !important;
        }

        .rn-scroll-next {
            right: 0 !important;
            left: auto !important;
            inset-inline-start: auto !important;
            inset-inline-end: auto !important;
        }

        .rn-mobile-carousel {
            direction: ltr !important;
        }

        html[dir="rtl"] .rn-mobile-carousel > * {
            direction: rtl;
        }

        html[dir="ltr"] .rn-mobile-carousel > * {
            direction: ltr;
        }

        .rn-hero-arrow {
            width: 34px;
            height: 34px;
        }

        .rn-hero-prev {
            left: 8px !important;
        }

        .rn-hero-next {
            right: 8px !important;
        }
    }
}

/* Auth, footer, and product-card final refinement. Clean Krotystore-like rhythm without copied assets or neon. */
@layer components {
    .ks-cart-link {
        position: relative;
        display: grid !important;
        width: 42px;
        height: 42px;
        place-items: center;
        border: 1px solid #dfe7e5;
        border-radius: 14px;
        color: #003d36 !important;
        background: #fff;
    }

    .ks-cart-link svg {
        width: 22px;
        height: 22px;
    }

    .ks-cart-link span {
        position: absolute;
        top: -7px;
        left: -7px;
        display: grid;
        min-width: 20px;
        height: 20px;
        place-items: center;
        border-radius: 999px;
        color: #fff;
        background: #0754b8;
        font-size: 11px;
        font-weight: 950;
    }

    .ks-account-nav {
        align-items: center !important;
        gap: 8px !important;
    }

    .ks-account-nav > a:not(.ks-login-button) {
        display: inline-flex !important;
        min-height: 36px !important;
        align-items: center !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: transparent !important;
        padding: 0 8px !important;
        color: #243b46 !important;
        box-shadow: none !important;
        font-size: 14px !important;
        font-weight: 950 !important;
        white-space: nowrap !important;
    }

    .ks-account-nav form,
    .ks-account-nav form button {
        width: auto !important;
        min-width: 0 !important;
    }

    .ks-account-nav form button {
        min-height: 34px !important;
        border-radius: 0 !important;
        background: #0754b8 !important;
        padding: 0 13px !important;
        color: #fff !important;
        box-shadow: none !important;
        font-size: 13px !important;
        font-weight: 950 !important;
        white-space: nowrap !important;
    }

    .rn-account-body .ks-mobile-search,
    .rn-account-body .ks-mobile-nav {
        display: none !important;
    }

    .rn-auth-page {
        width: min(calc(100% - 32px), 1120px);
        min-height: clamp(620px, calc(100vh - 190px), 900px);
        display: grid;
        place-items: center;
        margin: 0 auto;
        padding: 54px 0 64px;
        background:
            radial-gradient(circle at 16% 20%, rgb(23 105 209 / 8%), transparent 30%),
            radial-gradient(circle at 84% 76%, rgb(244 194 27 / 12%), transparent 26%);
    }

    .rn-auth-body .rn-theme-toggle-desktop {
        display: none !important;
    }

    .rn-auth-card {
        position: relative;
        width: min(100%, 460px);
        overflow: hidden;
        border: 1px solid #dce5e3;
        border-radius: 30px;
        background: rgb(255 255 255 / 96%);
        padding: 34px;
        box-shadow: 0 26px 70px rgb(16 35 42 / 12%);
    }

    .rn-auth-card--wide {
        width: min(100%, 720px);
    }

    .rn-auth-card::before {
        content: "";
        position: absolute;
        inset: 0 0 auto;
        height: 5px;
        background: linear-gradient(90deg, #1769d1, #0b5e55, #f4c21b);
    }

    .rn-auth-badge {
        display: grid;
        width: 62px;
        height: 62px;
        margin: 0 auto 18px;
        place-items: center;
        border-radius: 22px;
        color: #fff;
        background: linear-gradient(145deg, #1769d1, #064e46);
        box-shadow: 0 16px 32px rgb(23 105 209 / 18%);
    }

    .rn-auth-badge svg {
        width: 30px;
        height: 30px;
    }

    .rn-auth-heading {
        text-align: center;
    }

    .rn-auth-heading h1 {
        color: #003d36;
        font-size: clamp(32px, 4vw, 44px);
        font-weight: 950;
        letter-spacing: -.04em;
        line-height: 1.05;
    }

    .rn-auth-heading p {
        max-width: 430px;
        margin: 10px auto 0;
        color: #66756f;
        font-size: 15px;
        font-weight: 750;
        line-height: 1.8;
    }

    .rn-auth-form {
        display: grid;
        gap: 15px;
        margin-top: 28px;
    }

    .rn-auth-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rn-auth-field {
        display: grid;
        gap: 8px;
    }

    .rn-auth-field > span:first-child {
        color: #123f3a;
        font-size: 14px;
        font-weight: 950;
    }

    .rn-auth-input {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 54px;
        border: 1px solid #d9e3e0;
        border-radius: 16px;
        background: #f7faf9;
        padding: 0 14px;
        color: #6c7a76;
        transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
    }

    .rn-auth-input:focus-within {
        border-color: #1769d1;
        background: #fff;
        box-shadow: 0 0 0 4px rgb(23 105 209 / 10%);
    }

    .rn-auth-input svg {
        width: 21px;
        height: 21px;
        flex: 0 0 auto;
    }

    .rn-auth-input input {
        width: 100%;
        min-width: 0;
        border: 0;
        outline: 0;
        background: transparent;
        color: #102a30;
        font-size: 15px;
        font-weight: 800;
    }

    .rn-auth-row,
    .rn-auth-terms {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        color: #53645f;
        font-size: 13px;
        font-weight: 850;
    }

    .rn-auth-row a,
    .rn-auth-switch a {
        color: #1769d1;
        font-weight: 950;
    }

    .rn-auth-check,
    .rn-auth-terms {
        justify-content: flex-start;
    }

    .rn-auth-check input,
    .rn-auth-terms input {
        width: 17px;
        height: 17px;
        accent-color: #1769d1;
    }

    .rn-auth-terms {
        grid-column: 1 / -1;
        border: 1px solid #e4ece9;
        border-radius: 16px;
        background: #fbfcfc;
        padding: 12px 14px;
    }

    .rn-auth-submit {
        min-height: 54px;
        border-radius: 16px;
        color: #fff;
        background: #0754b8;
        box-shadow: 0 16px 32px rgb(7 84 184 / 18%);
        font-size: 17px;
        font-weight: 950;
        transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
    }

    .rn-auth-submit:hover,
    .rn-auth-submit:focus-visible {
        background: #06499f;
        box-shadow: 0 18px 38px rgb(7 84 184 / 23%);
        transform: translateY(-1px);
        outline: none;
    }

    .rn-auth-grid .rn-auth-submit {
        grid-column: 1 / -1;
    }

    .rn-auth-divider {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 12px;
        margin: 24px 0 16px;
        color: #71817c;
        font-size: 13px;
        font-weight: 900;
    }

    .rn-auth-divider::before,
    .rn-auth-divider::after {
        content: "";
        height: 1px;
        background: #e0e8e5;
    }

    .rn-social-login {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .rn-social-login button {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 48px;
        border: 1px solid #dfe8e5;
        border-radius: 15px;
        background: #fff;
        color: #253935;
        font-weight: 950;
        transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
    }

    .rn-social-login button:hover {
        border-color: #cbd8d4;
        box-shadow: 0 14px 26px rgb(16 35 42 / 8%);
        transform: translateY(-1px);
    }

    .rn-social-login svg {
        width: 22px;
        height: 22px;
    }

    .rn-auth-switch {
        margin-top: 20px;
        color: #5f716b;
        text-align: center;
        font-size: 14px;
        font-weight: 850;
    }

    .kr-service-card {
        align-self: start !important;
    }

    .kr-service-card__body {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        justify-items: center !important;
    }

    .kr-service-card h3 {
        width: 260px !important;
        max-width: none !important;
        margin-top: 9px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        unicode-bidi: plaintext !important;
    }

    .kr-hero-side span,
    .kr-category-tile span {
        display: block !important;
        width: 100% !important;
        max-width: 190px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        unicode-bidi: plaintext !important;
    }

    .ks-footer {
        margin-top: 72px !important;
        border-top: 1px solid #dce6e3;
        background: linear-gradient(180deg, #eef3f1, #dfe8e5) !important;
        color: #24413d !important;
    }

    .ks-footer-inner {
        width: min(calc(100% - 48px), 1480px) !important;
        margin: 0 auto !important;
        padding: 42px 0 28px !important;
    }

    .ks-footer-about {
        display: grid !important;
        grid-template-columns: minmax(250px, 420px) 1fr !important;
        gap: 28px !important;
        max-width: none !important;
        align-items: center !important;
    }

    .ks-footer-brand {
        width: fit-content;
    }

    .ks-footer-about p {
        max-width: 720px;
        color: #53645f !important;
        font-size: 15px;
        font-weight: 750;
        line-height: 2;
    }

    .ks-footer-social {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: flex-end;
    }

    .ks-footer-social a {
        display: grid !important;
        width: 42px;
        height: 42px;
        place-items: center;
        border: 1px solid #cbd8d4;
        border-radius: 14px;
        color: #0b5e55 !important;
        background: rgb(255 255 255 / 74%);
        box-shadow: 0 10px 24px rgb(16 35 42 / 6%);
    }

    .ks-footer-social a:hover {
        background: #ffffff;
        border-color: #0f9f98;
        transform: translateY(-1px);
    }

    .ks-footer-social img {
        width: 24px;
        height: 24px;
        object-fit: contain;
        display: block;
    }

    .ks-footer-grid {
        grid-template-columns: 1fr 1fr 1fr minmax(270px, 1.25fr) !important;
        gap: 26px !important;
        margin-top: 36px !important;
        padding-top: 30px;
        border-top: 1px solid #cfdbd7;
    }

    .ks-footer-grid > div {
        min-width: 0;
    }

    .ks-footer h3 {
        margin-bottom: 13px;
        color: #003d36 !important;
        font-size: 16px !important;
        font-weight: 950 !important;
    }

    .ks-footer-grid a {
        width: fit-content;
        margin-top: 10px !important;
        color: #53645f !important;
        font-size: 14px !important;
        font-weight: 800;
    }

    .ks-footer-grid a:hover {
        color: #0754b8 !important;
    }

    .ks-payments {
        display: flex !important;
        flex-wrap: wrap;
        gap: 9px !important;
        margin-top: 10px !important;
    }

    .ks-payments img {
        height: 42px;
        width: 62px;
        object-fit: contain;
        border: 1px solid #dfe7e5;
        border-radius: 12px;
        background: #ffffff;
        padding: 7px;
        filter: drop-shadow(0 8px 16px rgb(16 35 42 / 6%));
    }

    .ks-copyright {
        margin-top: 30px !important;
        border-top: 1px solid #cfdbd7 !important;
        padding-top: 18px !important;
        color: #62736f !important;
        text-align: center;
        font-size: 13px !important;
        font-weight: 850;
    }

    html[data-theme="dark"] .rn-auth-page {
        background:
            radial-gradient(circle at 18% 18%, rgb(23 105 209 / 16%), transparent 30%),
            radial-gradient(circle at 82% 78%, rgb(244 194 27 / 10%), transparent 26%);
    }

    html[data-theme="dark"] .rn-auth-card {
        border-color: rgb(255 255 255 / 10%);
        background: rgb(13 27 32 / 96%);
        box-shadow: 0 26px 70px rgb(0 0 0 / 24%);
    }

    html[data-theme="dark"] .rn-auth-heading h1,
    html[data-theme="dark"] .rn-auth-field > span:first-child {
        color: #e9fbff;
    }

    html[data-theme="dark"] .rn-auth-heading p,
    html[data-theme="dark"] .rn-auth-row,
    html[data-theme="dark"] .rn-auth-switch,
    html[data-theme="dark"] .rn-auth-divider {
        color: #a9bbb7;
    }

    html[data-theme="dark"] .rn-auth-input,
    html[data-theme="dark"] .rn-auth-terms,
    html[data-theme="dark"] .rn-social-login button {
        border-color: rgb(255 255 255 / 10%);
        background: #102329;
        color: #b7c9c5;
    }

    html[data-theme="dark"] .rn-auth-input input {
        color: #f4fbfa;
    }

    html[data-theme="dark"] .ks-footer {
        border-top-color: rgb(255 255 255 / 9%);
        background: linear-gradient(180deg, #102329, #0a171b) !important;
        color: #d8e6e3 !important;
    }

    html[data-theme="dark"] .ks-footer h3 {
        color: #e8f4f2 !important;
    }

    html[data-theme="dark"] .ks-footer-about p,
    html[data-theme="dark"] .ks-footer-grid a,
    html[data-theme="dark"] .ks-copyright {
        color: #a9bbb7 !important;
    }

    html[data-theme="dark"] .ks-footer-grid,
    html[data-theme="dark"] .ks-copyright {
        border-color: rgb(255 255 255 / 9%) !important;
    }

    html[data-theme="dark"] .ks-footer-social a {
        border-color: rgb(255 255 255 / 10%);
        color: #e8f4f2 !important;
        background: rgb(255 255 255 / 5%);
    }
}

@media (min-width: 1201px) {
    @layer components {
        .kr-service-card__image img {
            width: 198px !important;
            height: 198px !important;
        }
    }
}

@media (max-width: 900px) {
    @layer components {
        .rn-auth-card,
        .rn-auth-card--wide {
            width: min(100%, 520px);
            padding: 26px 20px;
            border-radius: 24px;
        }

        .rn-auth-grid {
            grid-template-columns: 1fr;
        }

        .ks-footer-inner {
            width: min(calc(100% - 32px), 720px) !important;
        }

        .ks-footer-about {
            grid-template-columns: 1fr !important;
            gap: 18px !important;
            text-align: center;
            justify-items: center;
        }

        .ks-footer-social {
            justify-content: center;
        }

        .ks-footer-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }
    }
}

/* Pixel-tight internal dashboard pass: account-only header and spacing tuned against the audited KROTY screens. */
@layer components {
    .rn-account-body {
        background: #f3f5f4 !important;
    }

    .rn-account-body .ks-header {
        position: static !important;
        border-bottom: 0 !important;
        background: #fff !important;
        box-shadow: none !important;
    }

    .rn-account-body .ks-topbar {
        display: flex !important;
        width: min(calc(100% - 48px), 1500px) !important;
        height: 66px !important;
        min-height: 66px !important;
        align-items: center !important;
        gap: 26px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        direction: rtl;
    }

    .rn-account-body .ks-brand {
        order: 1;
        flex: 0 0 auto;
    }

    .rn-account-body .ks-brand-logo {
        width: 92px !important;
        height: 42px !important;
        object-fit: contain !important;
    }

    .rn-account-body .ks-menu {
        order: 2;
        display: flex !important;
        flex: 0 0 auto;
        gap: 34px !important;
    }

    .rn-account-body .ks-menu a {
        min-height: 38px !important;
        padding: 0 !important;
        color: #111827 !important;
        background: transparent !important;
        box-shadow: none !important;
        font-size: 16px !important;
        font-weight: 950 !important;
    }

    .rn-account-body .ks-search {
        order: 3;
        flex: 0 1 390px !important;
        width: 390px !important;
        height: 38px !important;
        margin-inline: auto !important;
        border: 0 !important;
        border-radius: 12px !important;
        background: #e1e7e4 !important;
        box-shadow: none !important;
    }

    .rn-account-body .ks-search input {
        height: 38px !important;
        color: #263a3a !important;
        font-size: 14px !important;
        font-weight: 800 !important;
    }

    .rn-account-body .ks-search button {
        width: 42px !important;
        height: 38px !important;
        color: #0c2d33 !important;
    }

    .rn-account-body .ks-header-tools {
        order: 4;
        display: flex !important;
        flex: 0 0 auto;
        gap: 8px !important;
    }

    .rn-account-body .kr-preference summary {
        min-height: 34px !important;
        gap: 4px !important;
        border: 0 !important;
        background: transparent !important;
        padding: 0 2px !important;
        box-shadow: none !important;
        color: #111827 !important;
        font-size: 13px !important;
        font-weight: 950 !important;
    }

    .rn-account-body .kr-flag-img {
        width: 18px !important;
        height: 18px !important;
    }

    .rn-account-body .ks-account-nav {
        order: 5;
        display: flex !important;
        flex: 0 0 auto;
        align-items: center !important;
        gap: 12px !important;
        direction: rtl;
    }

    .rn-account-body .ks-cart-link,
    .rn-account-body .rn-theme-toggle-desktop {
        display: none !important;
    }

    .kd-header-balance {
        display: inline-flex !important;
        min-height: 34px !important;
        align-items: center !important;
        gap: 8px !important;
        border-radius: 0 !important;
        background: #0754b8 !important;
        padding: 0 13px !important;
        color: #fff !important;
        font-size: 13px !important;
        font-weight: 950 !important;
        line-height: 1 !important;
        box-shadow: none !important;
        white-space: nowrap !important;
    }

    .kd-header-balance b {
        font-size: 17px;
        line-height: 1;
    }

    .kd-header-icon {
        position: relative;
        display: grid !important;
        width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        place-items: center !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: transparent !important;
        color: #334155 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .kd-header-icon svg {
        width: 24px;
        height: 24px;
    }

    .kd-header-icon span {
        position: absolute;
        top: -5px;
        right: -4px;
        display: grid;
        min-width: 18px;
        height: 18px;
        place-items: center;
        border-radius: 999px;
        background: #0754b8;
        color: #fff;
        font-size: 10px;
        font-weight: 950;
    }

    .kd-user-menu {
        position: relative;
        direction: ltr;
    }

    .kd-user-menu summary {
        display: inline-flex;
        min-height: 34px;
        align-items: center;
        gap: 8px;
        color: #1f2937;
        cursor: pointer;
        font-size: 14px;
        font-weight: 950;
        list-style: none;
        white-space: nowrap;
    }

    .kd-user-menu summary::-webkit-details-marker {
        display: none;
    }

    .kd-user-menu summary::before {
        content: "⌄";
        color: #7a8592;
        font-size: 13px;
    }

    .kd-user-menu summary b {
        display: grid;
        width: 28px;
        height: 28px;
        place-items: center;
        border-radius: 999px;
        background: #0754b8;
        color: #fff;
        font-size: 13px;
    }

    .kd-user-menu > div {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        z-index: 50;
        display: grid;
        min-width: 170px;
        border: 1px solid #dfe7e5;
        border-radius: 14px;
        background: #fff;
        padding: 8px;
        box-shadow: 0 18px 44px rgb(15 30 36 / 12%);
    }

    .kd-user-menu a,
    .kd-user-menu button {
        display: block !important;
        width: 100% !important;
        min-height: 36px !important;
        border-radius: 10px !important;
        background: transparent !important;
        padding: 0 10px !important;
        color: #003d36 !important;
        text-align: start !important;
        font-size: 13px !important;
        font-weight: 900 !important;
    }

    .kd-user-menu a:hover,
    .kd-user-menu button:hover {
        background: #f3f6f5 !important;
    }

    .rn-account-body .kd-shell {
        width: min(calc(100% - 48px), 1500px);
        padding-top: 38px;
        padding-right: 72px;
    }

    .rn-account-body .kd-page-head {
        min-height: 68px;
        margin-bottom: 2px;
        align-items: flex-start;
    }

    .rn-account-body .kd-page-head h1 {
        font-size: 42px;
        letter-spacing: -.045em;
    }

    .rn-account-body .kd-side-nav {
        top: 170px;
        right: max(18px, calc((100vw - 1500px) / 2));
        width: 64px;
        padding: 14px 8px;
        border-radius: 16px;
    }

    .rn-account-body .kd-stat-card {
        min-height: 106px;
        justify-content: flex-end;
    }

    .rn-account-body .kd-chart-card {
        border-radius: 17px;
    }
}

@media (max-width: 900px) {
    @layer components {
        .rn-account-body .ks-header {
            background: #fff !important;
        }

        .rn-account-body .ks-topbar {
            display: grid !important;
            grid-template-columns: 46px 1fr 92px !important;
            width: min(calc(100% - 28px), 620px) !important;
            height: 64px !important;
            min-height: 64px !important;
            gap: 8px !important;
            direction: ltr;
        }

        .rn-account-body .ks-brand {
            order: 3;
            justify-self: end;
        }

        .rn-account-body .ks-brand-logo {
            width: 78px !important;
            height: 36px !important;
        }

        .rn-account-body .rn-mobile-menu-trigger {
            order: 1;
            display: grid !important;
            justify-self: start;
            width: 38px !important;
            height: 38px !important;
            border: 0 !important;
            border-radius: 999px !important;
            background: transparent !important;
            color: #6b7280 !important;
            box-shadow: none !important;
        }

        .rn-account-body .ks-menu,
        .rn-account-body .ks-search,
        .rn-account-body .ks-header-tools,
        .rn-account-body .kd-user-menu,
        .rn-account-body .kd-header-icon {
            display: none !important;
        }

        .rn-account-body .ks-account-nav {
            order: 2;
            justify-content: center !important;
            direction: ltr;
        }

        .rn-account-body .kd-header-balance {
            min-height: 34px !important;
            padding-inline: 14px !important;
            font-size: 13px !important;
        }

        .rn-account-body .kd-mobile-head {
            display: none !important;
        }

        .rn-account-body .kd-shell {
            width: min(calc(100% - 48px), 430px);
            padding-top: 38px;
            padding-right: 0;
        }

        .rn-account-body .kd-page-head h1 {
            font-size: 35px;
        }

        .rn-account-body .kd-bottom-nav {
            grid-template-columns: repeat(5, 1fr);
        }

        .rn-account-body .kd-bottom-nav a:nth-child(4) {
            display: none;
        }
    }
}

@media (max-width: 520px) {
    @layer components {
        .rn-auth-page {
            width: min(calc(100% - 22px), 440px);
            padding: 28px 0 44px;
        }

        .rn-social-login {
            grid-template-columns: 1fr;
        }

        .kr-service-card h3 {
            width: 100% !important;
            min-height: auto !important;
            white-space: nowrap !important;
            overflow-wrap: normal !important;
        }

        .ks-footer-grid {
            grid-template-columns: 1fr !important;
            text-align: center;
            justify-items: center;
        }

        .ks-footer-grid a {
            margin-inline: auto;
        }

        .ks-payments {
            justify-content: center;
        }
    }
}

/* Customer dashboard system inspired by the audited internal reference: compact icon rail, mobile bottom nav, clean cards. */
@layer components {
    .kd-shell {
        position: relative;
        width: min(calc(100% - 48px), 1500px);
        min-height: calc(100vh - 130px);
        margin: 0 auto;
        padding: 46px 72px 70px 0;
    }

    .kd-side-nav {
        position: fixed;
        top: 170px;
        right: max(18px, calc((100vw - 1500px) / 2));
        z-index: 20;
        display: grid;
        gap: 8px;
        width: 64px;
        border: 1px solid #dfe7e5;
        border-radius: 16px;
        background: #fff;
        padding: 12px 8px;
        box-shadow: 0 20px 44px rgb(15 30 36 / 10%);
    }

    .kd-side-nav a,
    .kd-side-nav button {
        position: relative;
        display: grid;
        width: 46px;
        height: 46px;
        place-items: center;
        border-radius: 13px;
        color: #6b7786;
        background: transparent;
        transition: background 160ms ease, color 160ms ease;
    }

    .kd-side-nav a span,
    .kd-side-nav button span {
        position: absolute;
        right: 54px;
        min-width: 120px;
        border-radius: 10px;
        background: #102329;
        padding: 7px 10px;
        color: #fff;
        font-size: 12px;
        font-weight: 900;
        opacity: 0;
        pointer-events: none;
        transform: translateX(-6px);
        transition: opacity 140ms ease, transform 140ms ease;
    }

    .kd-side-nav a:hover span,
    .kd-side-nav button:hover span {
        opacity: 1;
        transform: translateX(0);
    }

    .kd-side-nav svg {
        width: 23px;
        height: 23px;
    }

    .kd-side-nav a.is-active {
        color: #fff;
        background: #0754b8;
    }

    .kd-side-nav form {
        margin-top: 8px;
        border-top: 1px solid #e7eeee;
        padding-top: 8px;
    }

    .kd-mobile-head,
    .kd-bottom-nav {
        display: none;
    }

    .kd-content {
        display: grid;
        gap: 28px;
    }

    .kd-page-head {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 18px;
        min-height: 76px;
    }

    .kd-page-head.has-action {
        justify-content: space-between;
    }

    .kd-page-head h1 {
        color: #003d36;
        font-size: clamp(36px, 4vw, 48px);
        font-weight: 950;
        letter-spacing: -.05em;
        line-height: 1;
    }

    .kd-stats-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .kd-stats-grid.four {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .kd-stat-card,
    .kd-card,
    .kd-wallet-hero {
        border: 1px solid #dfe7e5;
        background: #fff;
        box-shadow: 0 10px 28px rgb(15 30 36 / 4%);
    }

    .kd-stat-card {
        display: flex;
        min-height: 104px;
        align-items: center;
        justify-content: flex-end;
        gap: 18px;
        padding: 22px 24px;
        color: #003d36;
    }

    .kd-stat-card span {
        color: #7a8592;
        font-size: 15px;
        font-weight: 850;
    }

    .kd-stat-card strong {
        font-size: 28px;
        font-weight: 950;
    }

    .kd-stat-card i {
        display: grid;
        width: 50px;
        height: 50px;
        place-items: center;
        border-radius: 0;
        color: #2575ff;
        background: #eef5ff;
    }

    .kd-stat-card i.tone-red {
        color: #ff1f3d;
        background: #fff0f2;
    }

    .kd-stat-card svg {
        width: 28px;
        height: 28px;
    }

    .kd-card {
        overflow: hidden;
        border-radius: 18px;
    }

    .kd-card-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        border-bottom: 1px solid #edf1f0;
        padding: 22px 24px;
    }

    .kd-card-head.wrap {
        flex-wrap: wrap;
    }

    .kd-card-head h2 {
        color: #003d36;
        font-size: 21px;
        font-weight: 950;
    }

    .kd-card-head p,
    .kd-card-head a {
        color: #7a8592;
        font-size: 13px;
        font-weight: 850;
    }

    .kd-chart-card {
        padding-bottom: 28px;
    }

    .kd-month-chart {
        display: flex;
        height: 210px;
        align-items: end;
        gap: 12px;
        padding: 28px 38px 12px;
        border-bottom: 1px solid #edf1f0;
    }

    .kd-month-chart span {
        width: 8px;
        height: var(--h);
        min-height: 6px;
        border-radius: 999px;
        background: #003d36;
    }

    .kd-promo {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-inline: calc((100vw - min(calc(100vw - 48px), 1500px)) / -2);
        background: #0754b8;
        padding: 26px max(32px, calc((100vw - 1500px) / 2 + 32px));
        color: #fff;
    }

    .kd-promo h2 {
        font-size: 28px;
        font-weight: 950;
    }

    .kd-promo p {
        color: rgb(255 255 255 / 78%);
        font-weight: 800;
    }

    .kd-promo a {
        display: grid;
        width: 56px;
        height: 56px;
        place-items: center;
        border-radius: 14px;
        background: rgb(255 255 255 / 14%);
        color: #fff;
        font-size: 26px;
    }

    .kd-two-col {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }

    .kd-list {
        display: grid;
    }

    .kd-list-row,
    .kd-order-row {
        display: grid;
        grid-template-columns: 1.1fr 1.4fr auto auto;
        gap: 14px;
        align-items: center;
        border-bottom: 1px solid #edf1f0;
        padding: 18px 24px;
        color: #003d36;
    }

    .kd-list-row.stacked {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .kd-list-row:last-child,
    .kd-order-row:last-child {
        border-bottom: 0;
    }

    .kd-list-row span,
    .kd-order-row span {
        color: #7a8592;
        font-size: 13px;
        font-weight: 800;
    }

    .kd-list-row strong,
    .kd-order-row strong {
        font-weight: 950;
    }

    .kd-list-row em,
    .kd-order-row em {
        width: fit-content;
        border-radius: 999px;
        background: #eef5ff;
        padding: 6px 10px;
        color: #0754b8;
        font-size: 12px;
        font-style: normal;
        font-weight: 950;
    }

    .kd-list-row.is-unread {
        background: #f7fbff;
    }

    .kd-empty {
        display: grid;
        min-height: 170px;
        place-items: center;
        align-content: center;
        gap: 8px;
        padding: 34px;
        color: #7a8592;
        text-align: center;
    }

    .kd-empty h3 {
        color: #003d36;
        font-size: 22px;
        font-weight: 950;
    }

    .kd-empty a,
    .kd-primary,
    .kd-secondary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        border-radius: 0;
        padding: 0 22px;
        font-weight: 950;
    }

    .kd-primary {
        color: #fff;
        background: #0754b8;
    }

    .kd-secondary,
    .kd-empty a {
        border: 1px solid #dfe7e5;
        color: #003d36;
        background: #fff;
    }

    .kd-form {
        display: grid;
        gap: 16px;
        padding: 22px 24px;
    }

    .kd-form label {
        display: grid;
        gap: 8px;
    }

    .kd-form label span {
        color: #003d36;
        font-size: 14px;
        font-weight: 950;
    }

    .kd-form input,
    .kd-form select,
    .kd-form textarea,
    .kd-filter-form select {
        min-height: 48px;
        border: 1px solid #dfe7e5;
        border-radius: 14px;
        background: #f8faf9;
        padding: 0 14px;
        color: #003d36;
        font-weight: 850;
        outline: none;
    }

    .kd-form textarea {
        padding-block: 12px;
    }

    .kd-tabs {
        display: flex;
        gap: 8px;
    }

    .kd-tabs a {
        border-radius: 999px;
        padding: 9px 16px;
        color: #6b7786;
        background: #f3f6f5;
    }

    .kd-tabs a.is-active {
        color: #fff;
        background: #0754b8;
    }

    .kd-wallet-hero {
        display: grid;
        gap: 8px;
        border-radius: 20px;
        padding: 26px;
        color: #fff;
        background: linear-gradient(135deg, #0754b8, #003d36);
    }

    .kd-wallet-hero span,
    .kd-wallet-hero p {
        color: rgb(255 255 255 / 78%);
        font-weight: 850;
    }

    .kd-wallet-hero strong {
        font-size: 40px;
        font-weight: 950;
    }

    .kd-copy-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        border: 1px solid #dfe7e2;
        border-radius: 16px;
        background: linear-gradient(180deg, #ffffff 0%, #f8faf9 100%);
        padding: 13px;
    }

    .kd-copy-box span {
        display: grid;
        gap: 4px;
        min-width: 0;
        color: #0f2824;
        font-weight: 900;
    }

    .kd-copy-box span b {
        color: #66756f;
        font-size: 12px;
        font-weight: 850;
    }

    .kd-copy-box span em {
        direction: ltr;
        text-align: right;
        font-style: normal;
        font-size: 18px;
        font-weight: 950;
        letter-spacing: .02em;
        word-break: break-all;
    }

    .kd-copy-box button {
        min-height: 34px;
        border-radius: 12px;
        background: #0754b8;
        color: #fff;
        padding: 0 15px;
        font-weight: 950;
        white-space: nowrap;
        transition: transform .18s ease, background .18s ease;
    }

    .kd-copy-box button:hover {
        transform: translateY(-1px);
        background: #004a9d;
    }

    .kd-copy-box button.copied {
        background: #0f9f98;
    }

    .kd-help {
        color: #66756f;
        font-size: 13px;
        font-weight: 800;
        line-height: 1.8;
    }

    .kd-pay-head {
        display: grid;
        gap: 6px;
        margin-bottom: 16px;
    }

    .kd-pay-head span {
        color: #0f9f98;
        font-size: 12px;
        font-weight: 950;
    }

    .kd-pay-head h2 {
        margin: 0;
        color: #092520;
        font-size: 24px;
        font-weight: 950;
    }

    .kd-pay-head p {
        margin: 0;
        color: #687772;
        line-height: 1.8;
        font-size: 14px;
    }

    .kd-pay-steps {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin: 10px 0;
    }

    .kd-pay-steps div {
        display: flex;
        align-items: center;
        gap: 8px;
        border: 1px solid #e4ece8;
        border-radius: 14px;
        padding: 10px;
        background: #fff;
        color: #17342f;
        font-size: 12px;
        font-weight: 950;
    }

    .kd-pay-steps b {
        width: 24px;
        height: 24px;
        display: grid;
        place-items: center;
        border-radius: 9px;
        background: #e6f7f5;
        color: #0f766e;
    }

    .kd-receiver-list {
        display: grid;
        gap: 10px;
    }

    .kd-proof-drop {
        position: relative;
        display: grid !important;
        gap: 7px;
        border: 1px dashed #93c5fd !important;
        border-radius: 18px !important;
        background: #eff6ff !important;
        padding: 18px !important;
        cursor: pointer;
    }

    .kd-proof-drop input[type="file"] {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
    }

    .kd-proof-drop strong {
        color: #004a9d;
        font-size: 15px;
        font-weight: 950;
    }

    .kd-proof-drop small {
        color: #64748b;
        font-size: 12px;
        font-weight: 800;
    }

    .kd-order-manual-pay {
        margin-top: 22px;
        border: 1px solid #dfe7e2;
        border-radius: 22px;
        background: #f8faf8;
        padding: 18px;
    }

    .kd-order-pay-form {
        margin-top: 14px;
    }

    .kd-pay-amount,
    .kd-payment-status {
        display: grid;
        gap: 5px;
        border: 1px solid #d6efe9;
        border-radius: 16px;
        background: #ffffff;
        padding: 14px;
    }

    .kd-pay-amount span,
    .kd-payment-status span {
        color: #687772;
        font-size: 12px;
        font-weight: 850;
    }

    .kd-pay-amount strong,
    .kd-payment-status strong {
        color: #092520;
        font-size: 22px;
        font-weight: 950;
    }

    .kd-payment-status.warning {
        border-color: #fed7aa;
        background: #fff7ed;
    }

    .kd-modal {
        position: fixed;
        inset: 0;
        z-index: 100;
        display: grid;
        place-items: center;
        background: rgb(0 0 0 / 36%);
        padding: 20px;
    }

    .kd-modal[hidden] {
        display: none !important;
    }

    .kd-modal-card {
        position: relative;
        width: min(100%, 560px);
        max-height: min(90vh, 760px);
        overflow: auto;
        border-radius: 24px;
        background: #fff;
        padding-top: 26px;
        box-shadow: 0 30px 80px rgb(0 0 0 / 22%);
    }

    .kd-modal-card > h2,
    .kd-modal-card > p {
        padding-inline: 24px;
    }

    .kd-modal-card > h2 {
        color: #003d36;
        font-size: 28px;
        font-weight: 950;
    }

    .kd-modal-card > p {
        margin-top: 6px;
        color: #66756f;
        font-weight: 800;
    }

    .kd-modal-close {
        position: absolute;
        top: 14px;
        left: 14px;
        display: grid;
        width: 36px;
        height: 36px;
        place-items: center;
        border-radius: 999px;
        background: #f3f6f5;
        color: #003d36;
        font-size: 24px;
    }

    .kd-favorites-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 24px;
        padding: 24px;
    }

    .kd-favorite-card {
        display: grid;
        gap: 10px;
        justify-items: center;
        text-align: center;
    }

    .kd-favorite-card img {
        width: 132px;
        height: 132px;
        object-fit: contain;
    }

    .kd-favorite-card h3 {
        overflow: hidden;
        width: 100%;
        color: #003d36;
        font-size: 18px;
        font-weight: 950;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .kd-favorite-card button {
        color: #e11d48;
        font-size: 13px;
        font-weight: 950;
    }

    .kd-alert {
        border-radius: 16px;
        padding: 14px 16px;
        font-weight: 900;
    }

    .kd-alert.success {
        border: 1px solid #c8ecd1;
        color: #166534;
        background: #effaf2;
    }

    .kd-alert.danger {
        border: 1px solid #fecaca;
        color: #b91c1c;
        background: #fef2f2;
    }

    .kd-ticket-message {
        display: grid;
        gap: 10px;
        border-bottom: 1px solid #edf1f0;
        padding: 20px 24px;
    }

    .kd-ticket-message.is-admin {
        background: #f7fbff;
    }

    .kd-ticket-message div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .kd-ticket-message strong {
        color: #003d36;
        font-weight: 950;
    }

    .kd-ticket-message span {
        color: #7a8592;
        font-size: 12px;
        font-weight: 800;
    }

    .kd-ticket-message p {
        color: #24413d;
        font-weight: 800;
        line-height: 1.9;
    }
}

@media (max-width: 900px) {
    @layer components {
        .kd-shell {
            width: min(calc(100% - 28px), 620px);
            padding: 18px 0 90px;
        }

        .kd-side-nav {
            display: none;
        }

        .kd-mobile-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 18px;
        }

        .kd-mobile-head button,
        .kd-avatar {
            display: grid;
            width: 42px;
            height: 42px;
            place-items: center;
            border-radius: 14px;
            color: #003d36;
            background: #fff;
            box-shadow: 0 8px 20px rgb(15 30 36 / 7%);
        }

        .kd-mobile-head svg {
            width: 23px;
            height: 23px;
        }

        .kd-balance-pill {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            min-height: 42px;
            border-radius: 0;
            background: #0754b8;
            padding: 0 16px;
            color: #fff;
            font-weight: 950;
        }

        .kd-page-head,
        .kd-page-head.has-action {
            justify-content: center;
            flex-direction: column;
            text-align: center;
        }

        .kd-page-head h1 {
            font-size: 38px;
        }

        .kd-stats-grid,
        .kd-stats-grid.four,
        .kd-two-col {
            grid-template-columns: 1fr;
        }

        .kd-stat-card {
            justify-content: center;
            text-align: center;
        }

        .kd-month-chart {
            gap: 5px;
            overflow: hidden;
            padding-inline: 18px;
        }

        .kd-promo {
            margin-inline: -14px;
            padding: 22px 18px;
        }

        .kd-promo h2 {
            font-size: 24px;
        }

        .kd-order-row,
        .kd-list-row {
            grid-template-columns: 1fr;
            text-align: start;
        }

        .kd-bottom-nav {
            position: fixed;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 80;
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            border-top: 1px solid #dfe7e5;
            background: rgb(255 255 255 / 94%);
            backdrop-filter: blur(18px);
            box-shadow: 0 -12px 30px rgb(15 30 36 / 9%);
        }

        .kd-bottom-nav a {
            display: grid;
            gap: 4px;
            place-items: center;
            padding: 8px 2px 9px;
            color: #7a8592;
            font-size: 10px;
            font-weight: 950;
        }

        .kd-bottom-nav a.is-active {
            color: #0754b8;
        }

        .kd-bottom-nav svg {
            width: 22px;
            height: 22px;
        }

        .kd-favorites-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
}

/* Final account pixel pass: must stay at EOF so it wins over the shared storefront rules. */
@layer components {
    .rn-account-body .ks-topbar {
        display: grid !important;
        direction: ltr !important;
        grid-template-columns: minmax(330px, .92fr) 194px minmax(360px, 430px) 260px 120px !important;
        align-items: center !important;
        gap: 18px !important;
        width: min(calc(100% - 88px), 1480px) !important;
        height: 64px !important;
        min-height: 64px !important;
        margin-inline: auto !important;
        padding: 0 !important;
    }

    .rn-account-body .ks-account-nav {
        grid-column: 1 !important;
        justify-self: start !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        min-width: 0 !important;
    }

    .rn-account-body .ks-header-tools {
        grid-column: 2 !important;
        justify-self: start !important;
        display: flex !important;
        gap: 12px !important;
    }

    .rn-account-body .ks-search {
        grid-column: 3 !important;
        justify-self: center !important;
        width: 100% !important;
        max-width: 430px !important;
        margin: 0 !important;
    }

    .rn-account-body .ks-menu {
        grid-column: 4 !important;
        justify-self: end !important;
        margin: 0 !important;
    }

    .rn-account-body .ks-brand {
        grid-column: 5 !important;
        justify-self: end !important;
        margin: 0 !important;
        max-width: none !important;
    }

    .rn-account-body .ks-brand-logo {
        width: 104px !important;
        height: 42px !important;
        object-fit: contain !important;
    }

    .rn-account-body .kd-header-icon {
        width: 38px !important;
        height: 38px !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #1d2f3c !important;
    }

    .rn-account-body .kd-header-icon span {
        top: -5px !important;
        inset-inline-end: -5px !important;
    }

    .rn-account-body .kd-user-menu summary {
        min-height: 38px !important;
        padding-inline: 4px 8px !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        gap: 7px !important;
    }

    .rn-account-body .kd-user-menu summary b {
        width: 30px !important;
        height: 30px !important;
        font-size: 14px !important;
    }

    .rn-account-body .kd-header-balance {
        min-height: 34px !important;
        padding-inline: 8px !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .rn-account-body .kd-header-balance b {
        font-size: 16px !important;
    }

    .rn-account-body .kd-shell {
        width: min(calc(100% - 88px), 1480px) !important;
        padding: 40px 72px 94px 0 !important;
    }

    .rn-account-body .kd-content {
        gap: 28px !important;
    }

    .rn-account-body .kd-promo {
        width: min(100%, 1420px) !important;
        margin-inline: auto !important;
        border-radius: 0 !important;
    }
}

@media (max-width: 900px) {
    @layer components {
        .rn-account-body .ks-header {
            height: 76px !important;
            overflow: hidden !important;
        }

        .rn-account-body .ks-topbar {
            grid-template-columns: 42px 42px minmax(0, 1fr) 76px !important;
            width: min(calc(100% - 28px), 430px) !important;
            height: 58px !important;
            min-height: 58px !important;
            gap: 6px !important;
        }

        .rn-account-body .ks-menu-trigger {
            grid-column: 1 !important;
            justify-self: start !important;
            width: 34px !important;
            height: 34px !important;
        }

        .rn-account-body .ks-account-nav {
            grid-column: 2 / 4 !important;
            display: flex !important;
            flex-direction: row !important;
            justify-content: flex-start !important;
            gap: 5px !important;
        }

        .rn-account-body .kd-header-icon {
            display: inline-grid !important;
            width: 34px !important;
            height: 34px !important;
        }

        .rn-account-body .kd-header-icon svg {
            width: 19px !important;
            height: 19px !important;
        }

        .rn-account-body .kd-header-icon span {
            min-width: 14px !important;
            height: 14px !important;
            font-size: 8px !important;
        }

        .rn-account-body .kd-user-menu,
        .rn-account-body .ks-header-tools,
        .rn-account-body .ks-search,
        .rn-account-body .ks-menu {
            display: none !important;
        }

        .rn-account-body .kd-header-balance {
            min-height: 32px !important;
            padding-inline: 4px !important;
            gap: 4px !important;
            font-size: 11px !important;
            max-width: 124px !important;
            overflow: hidden !important;
            white-space: nowrap !important;
        }

        .rn-account-body .kd-header-balance b {
            font-size: 12px !important;
        }

        .rn-account-body .ks-brand {
            grid-column: 4 !important;
            justify-self: end !important;
        }

        .rn-account-body .ks-brand-logo {
            width: 68px !important;
            height: 32px !important;
        }

        .rn-account-body .kd-mobile-head {
            display: none !important;
        }

        .rn-account-body .kd-shell {
            width: min(calc(100% - 28px), 430px) !important;
            padding: 34px 0 92px !important;
        }

        .rn-account-body .kd-page-head {
            margin-bottom: 24px !important;
            text-align: right !important;
            align-items: flex-end !important;
        }

        .rn-account-body .kd-page-head h1 {
            font-size: 32px !important;
        }

        .rn-account-body .kd-stats-grid {
            gap: 16px !important;
        }

        .rn-account-body .kd-stat-card {
            min-height: 104px !important;
            justify-content: flex-start !important;
            padding-inline: 24px !important;
            text-align: right !important;
        }

        .rn-account-body .kd-promo {
            margin-inline: 0 !important;
            border-radius: 0 !important;
        }

        .rn-account-body .kd-bottom-nav {
            display: grid !important;
            grid-template-columns: repeat(5, 1fr) !important;
            padding-bottom: max(4px, env(safe-area-inset-bottom)) !important;
        }

        .rn-account-body .kd-bottom-nav a:nth-child(4) {
            display: none !important;
        }
    }
}
/* Live UX final guard: keep the new account icon, cart counter, and live toast above older visual passes. */
@layer components {
    .ks-profile-menu summary b,
    .kd-user-menu summary b {
        display: inline-grid !important;
        place-items: center !important;
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        border-radius: 999px !important;
        background: #0b65c8 !important;
        color: #ffffff !important;
        border: 1px solid rgba(255, 255, 255, .55) !important;
        box-shadow: 0 8px 18px rgba(8, 55, 116, .16) !important;
        font-size: 0 !important;
        line-height: 1 !important;
    }

    .ks-profile-menu summary b svg,
    .kd-user-menu summary b svg {
        width: 20px !important;
        height: 20px !important;
        display: block !important;
    }

    .ks-profile-menu > div,
    .kd-user-menu > div {
        width: 252px !important;
        padding: 10px !important;
        border-radius: 20px !important;
        border: 1px solid rgba(12, 54, 65, .10) !important;
        background: rgba(255, 255, 255, .98) !important;
        box-shadow: 0 24px 55px rgba(11, 38, 51, .16) !important;
    }

    .ks-cart-link.is-cart-added,
    .kd-header-icon[href*="cart"].is-cart-added {
        animation: rnCartBump .52s cubic-bezier(.2, .9, .25, 1.25) !important;
    }

    [data-rn-cart-count].is-bumping {
        animation: rnCartBadgePop .58s cubic-bezier(.2, .9, .25, 1.25) !important;
    }

    .rn-live-toast.is-visible {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}
/* Absolute final header polish override. */
@layer components {
    header.ks-header .kr-preference-menu form,
    header.ks-header .kr-preference-menu form:hover {
        background: transparent !important;
        box-shadow: none !important;
    }

    header.ks-header .kr-preference-menu button,
    header.ks-header .kr-preference-menu button:not(.is-active),
    header.ks-header .kr-preference-menu button:not(.is-active):focus,
    header.ks-header .kr-preference-menu button:not(.is-active):focus-visible {
        background: transparent !important;
        background-image: none !important;
        color: #173642 !important;
        border-color: transparent !important;
        box-shadow: none !important;
        outline: none !important;
    }

    header.ks-header .kr-preference-menu button:not(.is-active):hover {
        background: #f4f7f8 !important;
        color: #0754b8 !important;
        border-color: rgba(7, 84, 184, .08) !important;
    }

    header.ks-header .kr-preference-menu button.is-active,
    header.ks-header .kr-preference-menu button.is-active:hover,
    header.ks-header .kr-preference-menu button.is-active:focus,
    header.ks-header .kr-preference-menu button.is-active:focus-visible {
        background: #eaf3ff !important;
        background-image: none !important;
        color: #0754b8 !important;
        border-color: rgba(7, 84, 184, .16) !important;
        box-shadow: inset 3px 0 0 #0754b8 !important;
        outline: none !important;
    }

    header.ks-header .ks-cart-link {
        position: relative !important;
        overflow: visible !important;
        display: inline-grid !important;
        place-items: center !important;
        flex: 0 0 42px !important;
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
        border-radius: 999px !important;
    }

    header.ks-header .ks-cart-link > span[data-rn-cart-count] {
        top: -8px !important;
        right: -8px !important;
        left: auto !important;
        inset-inline-start: auto !important;
        inset-inline-end: -8px !important;
        z-index: 30 !important;
    }

    .kr-hero-carousel,
    .kr-hero-slide,
    .kr-hero-slide img {
        border-radius: 18px !important;
    }

    html[dir="ltr"] header.ks-header .ks-menu {
        min-width: 230px !important;
        gap: 16px !important;
    }

    html[dir="ltr"] header.ks-header .ks-brand {
        min-width: 116px !important;
        margin-inline-start: 18px !important;
    }
}
/* Cart badge final position: tucked onto the cart/store icon, not floating near account. */
@layer components {
    header.ks-header .ks-cart-link > span[data-rn-cart-count],
    header.ks-header .ks-cart-link > span[data-rn-cart-count]:not([hidden]) {
        top: 1px !important;
        right: -5px !important;
        left: auto !important;
        inset-inline-start: auto !important;
        inset-inline-end: -5px !important;
        min-width: 18px !important;
        width: auto !important;
        height: 18px !important;
        padding-inline: 5px !important;
        border-width: 2px !important;
        transform: none !important;
    }

    html[dir="rtl"] header.ks-header .ks-cart-link > span[data-rn-cart-count],
    html[dir="rtl"] header.ks-header .ks-cart-link > span[data-rn-cart-count]:not([hidden]) {
        right: -5px !important;
        left: auto !important;
        inset-inline-start: auto !important;
        inset-inline-end: -5px !important;
    }
}
/* Premium cart icon finish. */
@layer components {
    header.ks-header .ks-cart-link {
        color: #173642 !important;
        background: linear-gradient(180deg, #ffffff, #f7fafb) !important;
        border: 1px solid rgba(16, 55, 66, .10) !important;
        box-shadow: 0 8px 20px rgba(13, 43, 54, .08) !important;
        transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease !important;
    }

    header.ks-header .ks-cart-link:hover {
        color: #0754b8 !important;
        background: #f2f7fb !important;
        border-color: rgba(7, 84, 184, .16) !important;
        transform: translateY(-1px) !important;
    }

    header.ks-header .ks-cart-link .ks-cart-icon {
        width: 24px !important;
        height: 24px !important;
        display: block !important;
        stroke-width: 1.95 !important;
        filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .7)) !important;
    }

    html[data-theme="dark"] header.ks-header .ks-cart-link {
        color: #e8f4f2 !important;
        background: rgba(255, 255, 255, .07) !important;
        border-color: rgba(255, 255, 255, .10) !important;
        box-shadow: none !important;
    }

    html[data-theme="dark"] header.ks-header .ks-cart-link:hover {
        color: #8ec9ff !important;
        background: rgba(255, 255, 255, .10) !important;
    }
}
/* Global font final override: Cairo everywhere. */
@layer components {
    html,
    body,
    button,
    input,
    select,
    textarea,
    a,
    p,
    span,
    strong,
    b,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    label,
    summary,
    table {
        font-family: "Cairo", ui-sans-serif, system-ui, sans-serif !important;
    }
}

html,
body,
body *,
body *::before,
body *::after {
    font-family: "Cairo", ui-sans-serif, system-ui, sans-serif !important;
}

.ks-brand,
.ks-brand::before,
.ks-brand::after,
.ks-footer-brand,
.ks-footer-brand::before,
.ks-footer-brand::after {
    font-family: "Cairo", ui-sans-serif, system-ui, sans-serif !important;
}

/* Final compact rhythm pass: balanced header + tighter service card titles. */
@layer components {
    header.ks-header {
        min-height: 76px !important;
        height: 76px !important;
    }

    header.ks-header .ks-topbar {
        width: min(calc(100% - 92px), 1320px) !important;
        min-height: 70px !important;
        height: 70px !important;
        align-items: center !important;
        gap: 16px !important;
        grid-template-columns:
            minmax(170px, 240px)
            minmax(154px, 190px)
            minmax(360px, 500px)
            minmax(205px, 252px)
            minmax(108px, 138px) !important;
    }

    header.ks-header .ks-brand {
        min-width: 112px !important;
        max-width: 138px !important;
    }

    header.ks-header .ks-menu {
        min-width: 230px !important;
        height: 42px !important;
        gap: 18px !important;
    }

    header.ks-header .ks-menu a {
        min-height: 36px !important;
        padding-inline: 12px !important;
        font-size: 15.5px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    header.ks-header .ks-search {
        height: 44px !important;
    }

    header.ks-header .ks-search input {
        height: 44px !important;
        min-height: 44px !important;
        font-size: 15px !important;
        line-height: 1.2 !important;
    }

    header.ks-header .ks-header-tools {
        height: 40px !important;
        gap: 14px !important;
    }

    header.ks-header .kr-preference summary {
        min-height: 36px !important;
        height: 36px !important;
        padding-inline: 6px !important;
        font-size: 14px !important;
        line-height: 1 !important;
    }

    header.ks-header .ks-account-nav {
        height: 42px !important;
        gap: 8px !important;
    }

    header.ks-header .ks-login-button {
        min-height: 42px !important;
        height: 42px !important;
        padding-inline: 20px !important;
        font-size: 18px !important;
        line-height: 1 !important;
    }

    header.ks-header .ks-cart-link {
        flex: 0 0 40px !important;
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
    }

    header.ks-header .ks-cart-link > span[data-rn-cart-count],
    header.ks-header .ks-cart-link > span[data-rn-cart-count]:not([hidden]) {
        top: 2px !important;
        right: -7px !important;
        inset-inline-end: -7px !important;
    }

    .kr-section {
        margin-top: 42px !important;
    }

    .kr-section-head {
        margin-bottom: 18px !important;
        align-items: center !important;
    }

    .kr-section-head h2 {
        font-size: clamp(30px, 2.25vw, 36px) !important;
        line-height: 1.16 !important;
        letter-spacing: -.02em !important;
    }

    .kr-section-head a {
        min-height: 34px !important;
        padding-inline: 16px !important;
        font-size: 14px !important;
        line-height: 1 !important;
    }

    .kr-service-card {
        width: 220px !important;
        min-width: 220px !important;
        min-height: 238px !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        overflow: visible !important;
    }

    .kr-service-card__image {
        width: 178px !important;
        height: 178px !important;
        flex: 0 0 178px !important;
        margin-inline: auto !important;
    }

    .kr-service-card__image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

    .kr-service-card__body {
        width: 100% !important;
        margin-top: 10px !important;
        padding: 0 !important;
        display: block !important;
    }

    .kr-service-card__body h3 {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 4px !important;
        font-size: 22px !important;
        line-height: 1.18 !important;
        font-weight: 900 !important;
        letter-spacing: -.015em !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

@media (max-width: 900px) {
    @layer components {
        header.ks-header {
            min-height: 108px !important;
            height: auto !important;
        }

        header.ks-header .ks-topbar {
            min-height: 60px !important;
            height: 60px !important;
        }

        header.ks-header .ks-account-nav {
            width: auto !important;
            max-width: 168px !important;
        }

        .kr-section {
            margin-top: 30px !important;
        }

        .kr-section-head h2 {
            font-size: 25px !important;
            line-height: 1.2 !important;
        }

        .kr-section-head a {
            min-height: 30px !important;
            padding-inline: 12px !important;
            font-size: 12px !important;
        }

        .kr-service-card {
            width: 142px !important;
            min-width: 142px !important;
            min-height: 92px !important;
        }

        .kr-service-card__image {
            width: 68px !important;
            height: 68px !important;
            flex-basis: 68px !important;
        }

        .kr-service-card__body {
            margin-top: 6px !important;
            width: 100% !important;
        }

        .kr-service-card__body h3 {
            width: 100% !important;
            max-width: 100% !important;
            padding-inline: 2px !important;
            font-size: 13px !important;
            line-height: 1.15 !important;
        }
    }
}

/* True EOF mobile title width lock. */
@media (max-width: 900px) {
    article.kr-service-card,
    .kr-service-card {
        display: grid !important;
        grid-template-columns: 100% !important;
        grid-template-rows: auto auto !important;
        justify-items: center !important;
        align-items: start !important;
        row-gap: 6px !important;
    }

    article.kr-service-card > .kr-service-card__image,
    .kr-service-card > .kr-service-card__image {
        width: 68px !important;
        max-width: 68px !important;
        height: 68px !important;
        justify-self: center !important;
    }

    article.kr-service-card > .kr-service-card__body,
    .kr-service-card > .kr-service-card__body {
        width: 100% !important;
        max-width: 100% !important;
        align-self: stretch !important;
        justify-self: stretch !important;
        margin-top: 6px !important;
        padding: 0 !important;
    }

    article.kr-service-card > .kr-service-card__body > h3,
    .kr-service-card > .kr-service-card__body > h3 {
        width: 100% !important;
        max-width: 100% !important;
        padding-inline: 2px !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

/* Hero quick cards + category icon labels: show readable full names without collisions. */
.kr-hero-side a {
    align-content: start !important;
    justify-items: center !important;
    row-gap: 10px !important;
    overflow: visible !important;
}

.kr-hero-side span {
    width: 100% !important;
    max-width: 142px !important;
    min-height: 54px !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    text-align: center !important;
    font-size: clamp(20px, 1.7vw, 28px) !important;
    line-height: 1.18 !important;
    letter-spacing: -.02em !important;
}

.kr-category-tile {
    justify-items: center !important;
    align-content: start !important;
    gap: 8px !important;
    min-height: 104px !important;
    overflow: visible !important;
}

.kr-category-tile span {
    width: 112px !important;
    max-width: 112px !important;
    min-height: 38px !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    text-align: center !important;
    font-size: 16px !important;
    line-height: 1.16 !important;
    font-weight: 900 !important;
    letter-spacing: -.015em !important;
}

@media (max-width: 900px) {
    .kr-hero-side {
        align-items: start !important;
    }

    .kr-hero-side a {
        row-gap: 8px !important;
    }

    .kr-hero-side span {
        max-width: 126px !important;
        min-height: 42px !important;
        font-size: 18px !important;
        line-height: 1.16 !important;
    }

    .kr-category-strip {
        align-items: start !important;
    }

    .kr-category-tile {
        min-height: 92px !important;
        gap: 7px !important;
    }

    .kr-category-tile span {
        width: 92px !important;
        max-width: 92px !important;
        min-height: 34px !important;
        font-size: 12.5px !important;
        line-height: 1.16 !important;
    }
}

/* Dedicated label classes beat older generic span rules. */
.kr-hero-side a > span.kr-hero-side-label {
    width: 100% !important;
    max-width: 150px !important;
    min-height: 56px !important;
    display: block !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    text-align: center !important;
    font-size: clamp(20px, 1.55vw, 26px) !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
    letter-spacing: -.018em !important;
}

.kr-category-tile > span.kr-category-label {
    width: 116px !important;
    max-width: 116px !important;
    min-height: 42px !important;
    display: block !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    text-align: center !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    letter-spacing: -.01em !important;
}

@media (max-width: 900px) {
    .kr-hero-side a > span.kr-hero-side-label {
        max-width: 132px !important;
        min-height: 44px !important;
        font-size: 18px !important;
        line-height: 1.16 !important;
    }

    .kr-category-tile > span.kr-category-label {
        width: 98px !important;
        max-width: 98px !important;
        min-height: 34px !important;
        font-size: 12.25px !important;
        line-height: 1.18 !important;
    }
}

/* Dedicated Admin Command Center: completely separate from storefront header/footer. */
.rn-admin-body {
    --ad-bg: #070b18;
    --ad-panel: rgba(15, 23, 42, .88);
    --ad-panel-solid: #0f172a;
    --ad-panel-soft: rgba(255, 255, 255, .055);
    --ad-border: rgba(148, 163, 184, .18);
    --ad-border-strong: rgba(148, 163, 184, .28);
    --ad-text: #e5eefc;
    --ad-muted: #8ea2bd;
    --ad-primary: #38bdf8;
    --ad-primary-2: #2563eb;
    --ad-success: #22c55e;
    --ad-warning: #f59e0b;
    min-height: 100vh;
    background:
        radial-gradient(circle at top right, rgba(56, 189, 248, .18), transparent 34rem),
        radial-gradient(circle at bottom left, rgba(37, 99, 235, .18), transparent 30rem),
        linear-gradient(135deg, #050816 0%, #0b1020 48%, #090d18 100%) !important;
    color: var(--ad-text) !important;
}

.rn-admin-body * {
    font-family: "Cairo", ui-sans-serif, system-ui, sans-serif !important;
}

.ad-shell {
    width: 100%;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 292px minmax(0, 1fr);
}

.ad-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 22px 18px;
    border-inline-start: 1px solid rgba(255, 255, 255, .04);
    border-inline-end: 1px solid var(--ad-border);
    background:
        linear-gradient(180deg, rgba(15, 23, 42, .96), rgba(2, 6, 23, .92)),
        rgba(15, 23, 42, .96);
    box-shadow: -18px 0 60px rgba(0, 0, 0, .25);
    overflow-y: auto;
}

.ad-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 22px;
    color: var(--ad-text) !important;
    text-decoration: none !important;
    background: rgba(255, 255, 255, .055);
    border: 1px solid var(--ad-border);
}

.ad-brand-mark {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 17px;
    background: linear-gradient(135deg, #e0f2fe, #ffffff);
    box-shadow: 0 18px 36px rgba(56, 189, 248, .16);
    overflow: hidden;
}

.ad-brand-mark img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.ad-brand b {
    display: block;
    font-size: 18px;
    line-height: 1.1;
    font-weight: 1000;
}

.ad-brand small {
    display: block;
    margin-top: 3px;
    color: var(--ad-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ad-nav {
    display: grid;
    gap: 7px;
    margin-top: 20px;
}

.ad-nav a {
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: 16px;
    color: #a9bad2 !important;
    text-decoration: none !important;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 900;
    transition: .18s ease;
}

.ad-nav a svg {
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
}

.ad-nav a:hover,
.ad-nav a.is-active {
    color: #ffffff !important;
    background: linear-gradient(135deg, rgba(56, 189, 248, .16), rgba(37, 99, 235, .18));
    border-color: rgba(56, 189, 248, .22);
    box-shadow: inset 3px 0 0 var(--ad-primary);
}

html[dir="rtl"] .ad-nav a:hover,
html[dir="rtl"] .ad-nav a.is-active {
    box-shadow: inset -3px 0 0 var(--ad-primary);
}

.ad-sidebar-card {
    margin-top: 22px;
    padding: 16px;
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(34, 197, 94, .16), rgba(56, 189, 248, .08)),
        rgba(255, 255, 255, .05);
    border: 1px solid rgba(34, 197, 94, .18);
}

.ad-sidebar-card span,
.ad-sidebar-card small {
    display: block;
    color: var(--ad-muted);
    font-size: 12px;
    font-weight: 800;
}

.ad-sidebar-card strong {
    display: block;
    margin-block: 4px;
    color: #dcfce7;
    font-size: 18px;
    font-weight: 1000;
}

.ad-workspace {
    min-width: 0;
    padding: 22px 24px 34px;
}

.ad-topbar {
    position: sticky;
    top: 14px;
    z-index: 20;
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 16px 14px 22px;
    border-radius: 26px;
    border: 1px solid var(--ad-border);
    background: rgba(15, 23, 42, .78);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .20);
    backdrop-filter: blur(18px);
}

.ad-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ad-primary);
    font-size: 12px;
    font-weight: 1000;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ad-eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--ad-success);
    box-shadow: 0 0 0 5px rgba(34, 197, 94, .12);
}

.ad-topbar h1 {
    margin: 3px 0 0;
    color: #ffffff;
    font-size: clamp(20px, 2vw, 30px);
    line-height: 1.15;
    font-weight: 1000;
}

.ad-top-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ad-store-link,
.ad-user-menu summary {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 13px;
    border-radius: 16px;
    color: #eaf6ff !important;
    background: rgba(255, 255, 255, .07);
    border: 1px solid var(--ad-border);
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 900;
}

.ad-store-link svg {
    width: 19px;
    height: 19px;
}

.ad-user-menu {
    position: relative;
}

.ad-user-menu summary {
    cursor: pointer;
    list-style: none;
}

.ad-user-menu summary::-webkit-details-marker {
    display: none;
}

.ad-user-menu summary span {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--ad-primary), var(--ad-primary-2));
    color: #ffffff;
    font-weight: 1000;
}

.ad-user-menu summary b {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ad-user-menu > div {
    position: absolute;
    inset-block-start: calc(100% + 10px);
    inset-inline-end: 0;
    width: 230px;
    padding: 9px;
    border-radius: 20px;
    background: #101827;
    border: 1px solid var(--ad-border-strong);
    box-shadow: 0 26px 70px rgba(0, 0, 0, .36);
}

.ad-user-menu a,
.ad-user-menu button {
    width: 100%;
    min-height: 40px;
    display: flex;
    align-items: center;
    padding: 9px 11px;
    border-radius: 13px;
    color: #dbeafe !important;
    background: transparent;
    border: 0;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

.ad-user-menu a:hover,
.ad-user-menu button:hover {
    background: rgba(56, 189, 248, .12);
}

.ad-main {
    padding-top: 22px;
}

.ad-alert {
    margin-bottom: 16px;
    padding: 13px 16px;
    border-radius: 18px;
    color: #dcfce7;
    background: rgba(34, 197, 94, .12);
    border: 1px solid rgba(34, 197, 94, .2);
    font-weight: 900;
}

.rn-admin-body .surface {
    color: var(--ad-text) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .045)),
        rgba(15, 23, 42, .78) !important;
    border: 1px solid var(--ad-border) !important;
    border-radius: 26px !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .22) !important;
}

.rn-admin-body .section-heading {
    gap: 18px !important;
}

.rn-admin-body .section-heading > div:first-child span {
    color: var(--ad-primary) !important;
    font-size: 13px !important;
    font-weight: 1000 !important;
}

.rn-admin-body .section-heading h1,
.rn-admin-body .surface h1,
.rn-admin-body .surface h2,
.rn-admin-body .surface h3 {
    color: #ffffff !important;
}

.rn-admin-body .section-heading h1 {
    font-size: clamp(26px, 3vw, 42px) !important;
    line-height: 1.12 !important;
    font-weight: 1000 !important;
}

.rn-admin-body .section-heading .flex {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.rn-admin-body .secondary-button,
.rn-admin-body .primary-button {
    min-height: 40px !important;
    border-radius: 14px !important;
    border: 1px solid var(--ad-border) !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

.rn-admin-body .secondary-button {
    color: #dbeafe !important;
    background: rgba(255, 255, 255, .065) !important;
}

.rn-admin-body .primary-button {
    color: #ffffff !important;
    background: linear-gradient(135deg, #0284c7, #2563eb) !important;
}

.rn-admin-body .metric-card {
    min-height: 126px;
    padding: 18px !important;
    border-radius: 24px !important;
    color: #ffffff !important;
    background:
        radial-gradient(circle at top left, rgba(56, 189, 248, .20), transparent 52%),
        rgba(255, 255, 255, .06) !important;
    border: 1px solid var(--ad-border) !important;
    box-shadow: none !important;
}

.rn-admin-body .metric-card span {
    color: var(--ad-muted) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

.rn-admin-body .metric-card strong {
    margin-top: 10px;
    color: #ffffff !important;
    font-size: clamp(24px, 2.3vw, 34px) !important;
    line-height: 1 !important;
    font-weight: 1000 !important;
}

.rn-admin-body .admin-row {
    color: var(--ad-text) !important;
    background: rgba(255, 255, 255, .035) !important;
    border-color: var(--ad-border) !important;
}

.rn-admin-body .admin-row:hover {
    background: rgba(56, 189, 248, .10) !important;
}

.rn-admin-body .admin-row span,
.rn-admin-body .admin-row strong {
    color: #f8fbff !important;
}

.rn-admin-body .admin-row em,
.rn-admin-body p,
.rn-admin-body label span,
.rn-admin-body table,
.rn-admin-body td,
.rn-admin-body th {
    color: var(--ad-muted) !important;
}

.rn-admin-body input,
.rn-admin-body select,
.rn-admin-body textarea {
    color: #eaf2ff !important;
    background: rgba(2, 6, 23, .52) !important;
    border-color: var(--ad-border-strong) !important;
    border-radius: 16px !important;
}

.rn-admin-body input:focus,
.rn-admin-body select:focus,
.rn-admin-body textarea:focus {
    border-color: rgba(56, 189, 248, .62) !important;
    box-shadow: 0 0 0 4px rgba(56, 189, 248, .11) !important;
    outline: none !important;
}

@media (max-width: 1180px) {
    .ad-shell {
        grid-template-columns: 92px minmax(0, 1fr);
    }

    .ad-sidebar {
        padding-inline: 12px;
    }

    .ad-brand {
        justify-content: center;
        padding: 10px;
    }

    .ad-brand > span:last-child,
    .ad-nav a span,
    .ad-sidebar-card {
        display: none;
    }

    .ad-nav a {
        justify-content: center;
        padding-inline: 10px;
    }
}

@media (max-width: 760px) {
    .ad-shell {
        display: block;
        padding-bottom: 86px;
    }

    .ad-sidebar {
        position: fixed;
        inset-inline: 10px;
        inset-block-end: 10px;
        top: auto;
        z-index: 50;
        height: 68px;
        padding: 8px;
        border-radius: 24px;
        border: 1px solid var(--ad-border);
        overflow-x: auto;
        overflow-y: hidden;
    }

    .ad-brand,
    .ad-sidebar-card {
        display: none;
    }

    .ad-nav {
        display: flex;
        gap: 7px;
        margin: 0;
        min-width: max-content;
    }

    .ad-nav a {
        width: 52px;
        min-width: 52px;
        height: 52px;
        min-height: 52px;
        border-radius: 18px;
    }

    .ad-workspace {
        padding: 12px 12px 22px;
    }

    .ad-topbar {
        position: relative;
        top: 0;
        align-items: stretch;
        flex-direction: column;
        border-radius: 22px;
        padding: 14px;
    }

    .ad-top-actions {
        justify-content: space-between;
    }

    .ad-store-link,
    .ad-user-menu summary {
        min-height: 42px;
        font-size: 12px;
    }

    .ad-user-menu > div {
        inset-inline-end: auto;
        inset-inline-start: 0;
    }

    .rn-admin-body .surface {
        border-radius: 22px !important;
    }

    .rn-admin-body .section-heading {
        align-items: stretch !important;
    }
}

/* True EOF admin surface lock. */
html body.rn-admin-body .ad-workspace .ad-main .surface {
    background-color: #0f172a !important;
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .035)) !important;
    border-color: rgba(148, 163, 184, .22) !important;
    color: #e5eefc !important;
}

html body.rn-admin-body .ad-workspace .ad-main .surface .metric-card {
    background-color: rgba(15, 23, 42, .74) !important;
    background-image:
        radial-gradient(circle at 18% 8%, rgba(56, 189, 248, .24), transparent 48%),
        linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .035)) !important;
    border-color: rgba(148, 163, 184, .22) !important;
}

html body.rn-admin-body .ad-workspace .ad-main .surface .admin-row {
    background-color: rgba(2, 6, 23, .42) !important;
    color: #e5eefc !important;
}

html body.rn-admin-body .ad-workspace .ad-main .surface .admin-row span,
html body.rn-admin-body .ad-workspace .ad-main .surface .admin-row strong {
    color: #f8fbff !important;
}

html body.rn-admin-body .ad-workspace .ad-main .surface .admin-row em {
    color: #93a7c2 !important;
}

/* Sprint 4+ Admin final classic polish: light CodeCanyon-style surface lock. */
html:has(body.rn-admin-classic) {
    background: #f3f5f8 !important;
    overflow-x: hidden;
}

body.rn-admin-classic {
    --ac-bg: #f3f5f8;
    --ac-panel: #ffffff;
    --ac-soft: #f8fafc;
    --ac-line: #e4e9f0;
    --ac-line-2: #d9e2ec;
    --ac-text: #101828;
    --ac-muted: #667085;
    --ac-primary: #16b8b2;
    --ac-primary-dark: #0f8f8b;
    --ac-blue: #2563eb;
    --ac-shadow: 0 12px 34px rgba(15, 23, 42, .07);
    background:
        radial-gradient(circle at 88% 5%, rgba(20, 184, 166, .10), transparent 26rem),
        linear-gradient(180deg, #f8fafc 0%, #f3f5f8 100%) !important;
    color: var(--ac-text) !important;
    overflow-x: hidden;
}

body.rn-admin-classic * {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

body.rn-admin-classic .ac-shell {
    grid-template-columns: 82px minmax(0, 1fr) !important;
    direction: ltr;
}

body.rn-admin-classic.ac-sidebar-expanded .ac-shell {
    grid-template-columns: 286px minmax(0, 1fr) !important;
}

body.rn-admin-classic .ac-sidebar {
    inset-inline-start: 0;
    border-inline: 0 1px solid var(--ac-line) !important;
    background: rgba(255,255,255,.94) !important;
    box-shadow: 12px 0 34px rgba(15, 23, 42, .055) !important;
    padding: 16px 12px !important;
}

body.rn-admin-classic .ac-brand {
    height: 54px;
    justify-content: center;
    gap: 10px;
    padding: 8px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.rn-admin-classic.ac-sidebar-expanded .ac-brand {
    justify-content: flex-start;
    background: #f8fafc !important;
    border: 1px solid var(--ac-line) !important;
}

body.rn-admin-classic .ac-brand > span:not(.ac-brand-logo),
body.rn-admin-classic .ac-nav-group p,
body.rn-admin-classic .ac-nav a span {
    display: none;
}

body.rn-admin-classic.ac-sidebar-expanded .ac-brand > span:not(.ac-brand-logo),
body.rn-admin-classic.ac-sidebar-expanded .ac-nav-group p,
body.rn-admin-classic.ac-sidebar-expanded .ac-nav a span {
    display: block;
}

body.rn-admin-classic .ac-brand-logo {
    width: 42px !important;
    height: 42px !important;
    border-radius: 16px !important;
    background: #eefdfc !important;
    box-shadow: inset 0 0 0 1px #ccfbf1;
}

body.rn-admin-classic .ac-collapse-pill {
    width: 34px !important;
    height: 34px !important;
    inset-inline-end: -17px !important;
    top: 26px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #18b9b3, #20c7bd) !important;
    color: #fff !important;
    border: 3px solid #fff !important;
    box-shadow: 0 12px 22px rgba(20, 184, 166, .22) !important;
}

body.rn-admin-classic .ac-nav {
    gap: 12px !important;
    margin-top: 18px !important;
}

body.rn-admin-classic .ac-nav-group {
    display: grid;
    gap: 6px;
}

body.rn-admin-classic .ac-nav a {
    min-height: 46px !important;
    justify-content: center;
    padding: 10px !important;
    border-radius: 14px !important;
    color: #475467 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
}

body.rn-admin-classic.ac-sidebar-expanded .ac-nav a {
    justify-content: flex-start;
    padding-inline: 12px !important;
}

body.rn-admin-classic .ac-nav a svg {
    color: #344054 !important;
}

body.rn-admin-classic .ac-nav a.active,
body.rn-admin-classic .ac-nav a:hover {
    background: #14b8a6 !important;
    color: #ffffff !important;
    border-color: #14b8a6 !important;
    box-shadow: 0 12px 24px rgba(20, 184, 166, .20) !important;
}

body.rn-admin-classic .ac-nav a.active svg,
body.rn-admin-classic .ac-nav a:hover svg {
    color: #ffffff !important;
}

body.rn-admin-classic .ac-topbar {
    position: sticky !important;
    top: 14px !important;
    margin: 14px 20px 0 !important;
    min-height: 68px !important;
    grid-template-columns: minmax(280px, 520px) auto !important;
    justify-content: space-between !important;
    border: 1px solid var(--ac-line) !important;
    background: rgba(255,255,255,.92) !important;
    border-radius: 24px !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .06) !important;
}

body.rn-admin-classic .ac-search {
    height: 44px !important;
    max-width: 520px;
    border-radius: 14px !important;
    background: #f8fafc !important;
    border-color: var(--ac-line-2) !important;
}

body.rn-admin-classic .ac-actions {
    justify-content: flex-end;
}

body.rn-admin-classic .ac-iconbtn,
body.rn-admin-classic .ac-user summary,
body.rn-admin-classic .ac-store,
body.rn-admin-classic .ac-btn,
body.rn-admin-classic .primary-button,
body.rn-admin-classic .secondary-button {
    box-shadow: none !important;
    text-shadow: none !important;
    white-space: nowrap;
}

body.rn-admin-classic .ac-filter button,
body.rn-admin-classic .ac-bulkbar button,
body.rn-admin-classic .ac-bulkbar select {
    white-space: nowrap;
}

body.rn-admin-classic .ac-iconbtn {
    width: 40px !important;
    height: 40px !important;
    background: #f8fafc !important;
    border-color: var(--ac-line) !important;
}

body.rn-admin-classic .ac-iconbtn span {
    top: -6px !important;
    inset-inline-start: auto !important;
    inset-inline-end: -6px !important;
    background: #14b8a6 !important;
}

body.rn-admin-classic .ac-store,
body.rn-admin-classic .ac-btn:not(.secondary),
body.rn-admin-classic .primary-button {
    background: #14b8a6 !important;
    border-color: #14b8a6 !important;
    color: #ffffff !important;
}

body.rn-admin-classic .ac-btn.secondary,
body.rn-admin-classic .secondary-button {
    background: #ffffff !important;
    color: #344054 !important;
    border: 1px solid var(--ac-line-2) !important;
}

body.rn-admin-classic .ac-main {
    padding: 22px 20px 38px !important;
}

body.rn-admin-classic .ac-section,
body.rn-admin-classic .lc-page-shell {
    display: grid;
    gap: 18px;
    max-width: 100% !important;
    min-width: 0 !important;
}

body.rn-admin-classic .ac-panel,
body.rn-admin-classic .surface,
body.rn-admin-classic .section-heading {
    background: var(--ac-panel) !important;
    color: var(--ac-text) !important;
    border: 1px solid var(--ac-line) !important;
    border-radius: 24px !important;
    box-shadow: var(--ac-shadow) !important;
}

body.rn-admin-classic .ac-panel,
body.rn-admin-classic .surface {
    padding: 20px !important;
}

body.rn-admin-classic .section-heading {
    padding: 18px 20px !important;
}

body.rn-admin-classic .ac-panel-head {
    align-items: center;
    margin-bottom: 16px;
}

body.rn-admin-classic .ac-panel-head h2,
body.rn-admin-classic .section-heading h1,
body.rn-admin-classic .surface h1,
body.rn-admin-classic .surface h2,
body.rn-admin-classic .surface h3 {
    color: #101828 !important;
    font-weight: 950 !important;
    letter-spacing: -.035em;
}

body.rn-admin-classic .ac-panel-head p,
body.rn-admin-classic .surface p,
body.rn-admin-classic .surface em,
body.rn-admin-classic .section-heading span,
body.rn-admin-classic .ac-muted {
    color: var(--ac-muted) !important;
}

body.rn-admin-classic .ac-kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
}

body.rn-admin-classic .ac-kpi:not(.gradient) {
    min-height: 118px;
    border-radius: 22px !important;
    background: #ffffff !important;
    border: 1px solid var(--ac-line) !important;
    box-shadow: 0 8px 22px rgba(15,23,42,.045) !important;
}

body.rn-admin-classic .ac-kpi:not(.gradient)::after {
    width: 4px;
    background: var(--accent, #14b8a6) !important;
}

body.rn-admin-classic .ac-kpi strong {
    color: #101828 !important;
}

body.rn-admin-classic .ac-grid-2 {
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr) !important;
}

body.rn-admin-classic .ac-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body.rn-admin-classic .ac-list-row,
body.rn-admin-classic .admin-row {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    min-width: 0;
    border-radius: 16px !important;
    background: #f8fafc !important;
    border-color: #edf2f7 !important;
}

body.rn-admin-classic .ac-list-row span,
body.rn-admin-classic .admin-row span {
    min-width: 0;
    overflow-wrap: anywhere;
}

body.rn-admin-classic .ac-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    border-color: var(--ac-line) !important;
}

body.rn-admin-classic .ac-table {
    min-width: 760px;
}

body.rn-admin-classic .ac-table th {
    background: #f8fafc !important;
    color: #667085 !important;
}

body.rn-admin-classic input,
body.rn-admin-classic select,
body.rn-admin-classic textarea {
    min-height: 42px;
    border-radius: 14px !important;
    border: 1px solid var(--ac-line-2) !important;
    background: #ffffff !important;
    color: #101828 !important;
    font-weight: 800;
}

body.rn-admin-classic textarea {
    padding: 11px 12px !important;
}

body.rn-admin-classic .ac-micro-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

body.rn-admin-classic .ac-micro-grid > div,
body.rn-admin-classic .ac-profit-card > div {
    padding: 14px;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px solid #edf2f7;
}

body.rn-admin-classic .ac-micro-grid span,
body.rn-admin-classic .ac-profit-card span {
    display: block;
    color: #667085;
    font-size: 12px;
    font-weight: 900;
}

body.rn-admin-classic .ac-micro-grid strong,
body.rn-admin-classic .ac-profit-card strong {
    display: block;
    margin-top: 6px;
    color: #101828;
    font-size: 22px;
    font-weight: 950;
}

body.rn-admin-classic .ac-profit-card {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

body.rn-admin-classic .ac-command-strip {
    background:
        linear-gradient(135deg, rgba(20,184,166,.08), transparent 42%),
        #ffffff !important;
}

@media (max-width: 1180px) {
    body.rn-admin-classic .ac-shell,
    body.rn-admin-classic.ac-sidebar-expanded .ac-shell {
        display: block !important;
    }

    body.rn-admin-classic .ac-mobilebar {
        display: flex !important;
        position: sticky;
        top: 0;
        z-index: 80;
        min-height: 62px;
        padding: 10px 14px;
        align-items: center;
        justify-content: space-between;
        background: rgba(255,255,255,.96);
        border-bottom: 1px solid var(--ac-line);
    }

    body.rn-admin-classic .ac-sidebar {
        position: fixed !important;
        top: 72px !important;
        bottom: 14px !important;
        inset-inline-start: 14px !important;
        width: min(320px, calc(100vw - 28px)) !important;
        height: auto !important;
        transform: translateX(-115%);
        transition: transform .22s ease;
        z-index: 90;
        border-radius: 24px !important;
        border: 1px solid var(--ac-line) !important;
    }

    html[dir="rtl"] body.rn-admin-classic .ac-sidebar {
        transform: translateX(115%);
    }

    body.rn-admin-classic .ac-sidebar.open {
        transform: translateX(0) !important;
    }

    body.rn-admin-classic .ac-brand > span:not(.ac-brand-logo),
    body.rn-admin-classic .ac-nav-group p,
    body.rn-admin-classic .ac-nav a span {
        display: block !important;
    }

    body.rn-admin-classic .ac-nav a {
        justify-content: flex-start !important;
    }

    body.rn-admin-classic .ac-collapse-pill {
        display: none !important;
    }

    body.rn-admin-classic .ac-overlay.open {
        display: block !important;
        position: fixed;
        inset: 0;
        background: rgba(15,23,42,.22);
        z-index: 85;
        backdrop-filter: blur(3px);
    }

    body.rn-admin-classic .ac-topbar {
        position: static !important;
        margin: 14px !important;
        grid-template-columns: 1fr !important;
        padding: 12px !important;
    }

    body.rn-admin-classic .ac-actions {
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    body.rn-admin-classic .ac-store,
    body.rn-admin-classic .ac-user summary b {
        white-space: nowrap;
    }

    body.rn-admin-classic .ac-main {
        padding: 14px !important;
    }

    body.rn-admin-classic .ac-grid-2,
    body.rn-admin-classic .ac-grid-3,
    body.rn-admin-classic .ac-profit-card,
    body.rn-admin-classic .ac-micro-grid {
        grid-template-columns: 1fr !important;
    }

    body.rn-admin-classic .ac-panel,
    body.rn-admin-classic .surface,
    body.rn-admin-classic .section-heading {
        border-radius: 20px !important;
        padding: 16px !important;
    }
}

@media (max-width: 640px) {
    body.rn-admin-classic .ac-panel-head,
    body.rn-admin-classic .section-heading {
        flex-direction: column;
        align-items: stretch !important;
    }

    body.rn-admin-classic .ac-actions,
    body.rn-admin-classic .ac-filter,
    body.rn-admin-classic .ac-bulkbar {
        display: flex;
        flex-wrap: wrap;
    }

    body.rn-admin-classic .ac-list-row,
    body.rn-admin-classic .admin-row {
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
    }

    body.rn-admin-classic .ac-kpi:not(.gradient) {
        min-height: 96px;
    }

    body.rn-admin-classic .ac-kpi strong {
        font-size: 23px !important;
    }
}

/* Modern SaaS Admin System — restrained RTL dashboard */
html:has(body.rn-admin-classic) {
    background: #f6f7f9 !important;
}

body.rn-admin-classic {
    --ad-bg: #f6f7f9;
    --ad-card: #ffffff;
    --ad-text: #101828;
    --ad-muted: #667085;
    --ad-border: #e4e7ec;
    --ad-border-strong: #d0d5dd;
    --ad-brand: #0f9f98;
    --ad-brand-dark: #0b7f7a;
    --ad-radius: 12px;
    --ad-radius-sm: 10px;
    --ad-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    margin: 0 !important;
    background: var(--ad-bg) !important;
    color: var(--ad-text) !important;
    font-family: "IBM Plex Sans Arabic", Alexandria, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
}

body.rn-admin-classic,
body.rn-admin-classic * {
    box-sizing: border-box;
}

body.rn-admin-classic svg {
    stroke-width: 1.8;
}

body.rn-admin-classic .ac-mobilebar {
    display: none !important;
}

body.rn-admin-classic .ac-shell,
body.rn-admin-classic.ac-sidebar-expanded .ac-shell {
    display: block !important;
    min-height: 100vh !important;
    direction: rtl !important;
    background: var(--ad-bg) !important;
}

body.rn-admin-classic .ac-sidebar,
body.rn-admin-classic.ac-sidebar-expanded .ac-sidebar {
    position: fixed !important;
    inset: 0 0 0 auto !important;
    width: 240px !important;
    height: 100vh !important;
    padding: 16px 12px !important;
    background: #ffffff !important;
    border: 0 !important;
    border-left: 1px solid var(--ad-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    overflow-y: auto !important;
    z-index: 90 !important;
}

body.rn-admin-classic .ac-brand,
body.rn-admin-classic.ac-sidebar-expanded .ac-brand {
    height: 44px !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-radius: var(--ad-radius-sm) !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ad-text) !important;
    gap: 10px !important;
}

body.rn-admin-classic .ac-brand-logo {
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    border: 1px solid var(--ad-border) !important;
    background: #fff !important;
}

body.rn-admin-classic .ac-brand strong {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--ad-text) !important;
}

body.rn-admin-classic .ac-brand small {
    display: block !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: var(--ad-muted) !important;
}

body.rn-admin-classic .ac-collapse-pill {
    display: none !important;
}

body.rn-admin-classic .ac-nav {
    margin-top: 18px !important;
    display: grid !important;
    gap: 18px !important;
}

body.rn-admin-classic .ac-nav-group {
    display: grid !important;
    gap: 4px !important;
}

body.rn-admin-classic .ac-nav-group p {
    display: block !important;
    margin: 0 8px 4px !important;
    color: var(--ad-muted) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

body.rn-admin-classic .ac-nav a,
body.rn-admin-classic.ac-sidebar-expanded .ac-nav a {
    min-height: 36px !important;
    padding: 8px 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    border-radius: var(--ad-radius-sm) !important;
    color: #344054 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

body.rn-admin-classic .ac-nav a span,
body.rn-admin-classic.ac-sidebar-expanded .ac-nav a span {
    display: inline !important;
}

body.rn-admin-classic .ac-nav a svg {
    width: 18px !important;
    height: 18px !important;
    color: #667085 !important;
    flex: 0 0 auto !important;
}

body.rn-admin-classic .ac-nav a:hover,
body.rn-admin-classic .ac-nav a:focus-visible {
    background: #f2f4f7 !important;
    color: var(--ad-text) !important;
    outline: none !important;
}

body.rn-admin-classic .ac-nav a.active {
    background: #e8f7f6 !important;
    color: var(--ad-brand-dark) !important;
    font-weight: 600 !important;
}

body.rn-admin-classic .ac-nav a.active svg {
    color: var(--ad-brand) !important;
}

body.rn-admin-classic .ac-topbar {
    position: fixed !important;
    top: 0 !important;
    right: 240px !important;
    left: 0 !important;
    height: 64px !important;
    min-height: 64px !important;
    margin: 0 !important;
    padding: 0 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    background: rgba(255, 255, 255, .96) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ad-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    z-index: 80 !important;
}

body.rn-admin-classic .ac-search {
    height: 40px !important;
    max-width: 420px !important;
    width: min(420px, 42vw) !important;
    border: 1px solid var(--ad-border) !important;
    border-radius: var(--ad-radius-sm) !important;
    background: #ffffff !important;
    box-shadow: var(--ad-shadow) !important;
}

body.rn-admin-classic .ac-search input {
    height: 38px !important;
    padding: 0 4px !important;
    color: var(--ad-text) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

body.rn-admin-classic .ac-search input::placeholder {
    color: #98a2b3 !important;
}

body.rn-admin-classic .ac-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

body.rn-admin-classic .ac-iconbtn,
body.rn-admin-classic .ac-user summary,
body.rn-admin-classic .ac-store,
body.rn-admin-classic .ac-btn,
body.rn-admin-classic .primary-button,
body.rn-admin-classic .secondary-button,
body.rn-admin-classic .ad-btn {
    height: 40px !important;
    border-radius: var(--ad-radius-sm) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-weight: 600 !important;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease !important;
}

body.rn-admin-classic .ac-iconbtn {
    width: 40px !important;
    background: #ffffff !important;
    border: 1px solid var(--ad-border) !important;
    color: #344054 !important;
}

body.rn-admin-classic .ac-iconbtn:hover,
body.rn-admin-classic .ac-iconbtn:focus-visible {
    background: #f9fafb !important;
    border-color: var(--ad-border-strong) !important;
    outline: none !important;
}

body.rn-admin-classic .ac-store,
body.rn-admin-classic .ac-btn:not(.secondary),
body.rn-admin-classic .primary-button,
body.rn-admin-classic .ad-btn.primary {
    background: var(--ad-brand) !important;
    border: 1px solid var(--ad-brand) !important;
    color: #ffffff !important;
}

body.rn-admin-classic .ac-store:hover,
body.rn-admin-classic .ac-btn:not(.secondary):hover,
body.rn-admin-classic .primary-button:hover,
body.rn-admin-classic .ad-btn.primary:hover {
    background: var(--ad-brand-dark) !important;
}

body.rn-admin-classic .ac-btn.secondary,
body.rn-admin-classic .secondary-button,
body.rn-admin-classic .ad-btn.secondary,
body.rn-admin-classic .ad-btn.ghost {
    background: #ffffff !important;
    border: 1px solid var(--ad-border) !important;
    color: #344054 !important;
}

body.rn-admin-classic .ad-btn,
body.rn-admin-classic .ad-export-menu summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    padding: 0 14px;
    text-decoration: none;
    cursor: pointer;
}

body.rn-admin-classic .ac-user summary {
    background: #ffffff !important;
    border: 1px solid var(--ad-border) !important;
}

body.rn-admin-classic .ac-user summary span {
    background: var(--ad-brand) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
}

body.rn-admin-classic .ac-user div,
body.rn-admin-classic .ad-export-menu div {
    border: 1px solid var(--ad-border) !important;
    border-radius: var(--ad-radius) !important;
    box-shadow: 0 8px 20px rgba(16, 24, 40, .08) !important;
    background: #ffffff !important;
}

body.rn-admin-classic .ac-main {
    min-height: 100vh !important;
    margin-right: 240px !important;
    padding: 88px 24px 32px !important;
    background: var(--ad-bg) !important;
}

body.rn-admin-classic .ad-dashboard,
body.rn-admin-classic .ac-section {
    width: min(100%, 1280px) !important;
    margin: 0 auto !important;
    display: grid !important;
    gap: 24px !important;
}

body.rn-admin-classic .ad-page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

body.rn-admin-classic .ad-page-head p,
body.rn-admin-classic .ad-page-head span,
body.rn-admin-classic .ad-card-head p {
    margin: 0;
    color: var(--ad-muted);
    font-size: 13px;
    font-weight: 500;
}

body.rn-admin-classic .ad-page-head h1 {
    margin: 4px 0 2px;
    color: var(--ad-text);
    font-size: 28px;
    line-height: 1.25;
    font-weight: 700;
}

body.rn-admin-classic .ad-export-menu {
    position: relative;
}

body.rn-admin-classic .ad-export-menu summary {
    height: 40px;
    list-style: none;
    border-radius: var(--ad-radius-sm);
    color: #ffffff;
    background: var(--ad-brand);
    font-size: 14px;
    font-weight: 600;
}

body.rn-admin-classic .ad-export-menu summary::-webkit-details-marker {
    display: none;
}

body.rn-admin-classic .ad-export-menu svg {
    width: 18px;
    height: 18px;
}

body.rn-admin-classic .ad-export-menu div {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 230px;
    z-index: 30;
    padding: 6px;
}

body.rn-admin-classic .ad-export-menu a,
body.rn-admin-classic .ac-user div a,
body.rn-admin-classic .ac-user div button {
    display: block;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #344054;
    text-align: right;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
}

body.rn-admin-classic .ad-export-menu a:hover,
body.rn-admin-classic .ac-user div a:hover,
body.rn-admin-classic .ac-user div button:hover {
    background: #f2f4f7;
    color: var(--ad-text);
}

body.rn-admin-classic .ad-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

body.rn-admin-classic .ad-kpi-card,
body.rn-admin-classic .ad-card {
    background: var(--ad-card);
    border: 1px solid var(--ad-border);
    border-radius: var(--ad-radius);
    box-shadow: var(--ad-shadow);
}

body.rn-admin-classic .ad-kpi-card {
    min-height: 154px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

body.rn-admin-classic .ad-kpi-card header {
    display: flex;
    align-items: center;
    gap: 10px;
}

body.rn-admin-classic .ad-kpi-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: var(--ad-brand);
    background: #e8f7f6;
}

body.rn-admin-classic .ad-kpi-icon svg {
    width: 18px;
    height: 18px;
}

body.rn-admin-classic .ad-kpi-card p {
    margin: 0;
    color: var(--ad-muted);
    font-size: 13px;
    font-weight: 600;
}

body.rn-admin-classic .ad-kpi-card strong {
    margin-top: 14px;
    display: block;
    color: var(--ad-text);
    font-size: 28px;
    line-height: 1.2;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

body.rn-admin-classic .ad-kpi-card footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--ad-muted);
    font-size: 12px;
}

body.rn-admin-classic .ad-kpi-card footer span {
    color: var(--ad-brand-dark);
    font-weight: 600;
}

body.rn-admin-classic .ad-kpi-card footer em {
    color: var(--ad-muted);
    font-style: normal;
    font-weight: 500;
}

body.rn-admin-classic .ad-chart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
}

body.rn-admin-classic .ad-card {
    padding: 18px;
}

body.rn-admin-classic .ad-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

body.rn-admin-classic .ad-card-head h2 {
    margin: 0 0 4px;
    color: var(--ad-text);
    font-size: 18px;
    line-height: 1.35;
    font-weight: 700;
}

body.rn-admin-classic .ad-segmented {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

body.rn-admin-classic .ad-segmented > a,
body.rn-admin-classic .ad-date-range input,
body.rn-admin-classic .ad-date-range button,
body.rn-admin-classic input,
body.rn-admin-classic select {
    height: 40px !important;
    border-radius: var(--ad-radius-sm) !important;
    border: 1px solid var(--ad-border) !important;
    background: #ffffff !important;
    color: #344054 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

body.rn-admin-classic .ad-segmented > a {
    display: inline-flex;
    align-items: center;
    padding: 0 13px;
    text-decoration: none;
}

body.rn-admin-classic .ad-segmented > a.active {
    background: #e8f7f6 !important;
    border-color: #b8e4e1 !important;
    color: var(--ad-brand-dark) !important;
    font-weight: 600 !important;
}

body.rn-admin-classic .ad-date-range {
    display: flex;
    gap: 8px;
    align-items: center;
}

body.rn-admin-classic .ad-date-range input {
    padding: 0 10px;
}

body.rn-admin-classic .ad-date-range button {
    padding: 0 14px;
    background: var(--ad-brand) !important;
    border-color: var(--ad-brand) !important;
    color: #fff !important;
    cursor: pointer;
}

body.rn-admin-classic .ad-chart-skeleton,
body.rn-admin-classic .ad-mini-chart {
    min-height: 300px;
    display: grid;
    place-items: center;
    color: var(--ad-muted);
    border-radius: var(--ad-radius-sm);
    background: linear-gradient(90deg, #f2f4f7 25%, #ffffff 37%, #f2f4f7 63%);
    background-size: 400% 100%;
    animation: ad-skeleton 1.4s ease infinite;
}

body.rn-admin-classic .ad-mini-chart {
    min-height: 160px;
}

body.rn-admin-classic .ad-chart-skeleton.is-loaded,
body.rn-admin-classic .ad-mini-chart.is-loaded {
    display: block;
    background: #ffffff;
    animation: none;
}

@keyframes ad-skeleton {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

body.rn-admin-classic .apexcharts-canvas {
    direction: ltr;
}

body.rn-admin-classic .ad-status-list {
    display: grid;
    gap: 10px;
}

body.rn-admin-classic .ad-status-list a,
body.rn-admin-classic .ad-list-compact a {
    min-height: 44px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--ad-border);
    border-radius: var(--ad-radius-sm);
    color: var(--ad-text);
    text-decoration: none;
    background: #ffffff;
}

body.rn-admin-classic .ad-status-list a:hover,
body.rn-admin-classic .ad-list-compact a:hover {
    border-color: var(--ad-border-strong);
    background: #f9fafb;
}

body.rn-admin-classic .ad-status-list span,
body.rn-admin-classic .ad-list-compact span {
    color: #344054;
    font-size: 13px;
    font-weight: 500;
}

body.rn-admin-classic .ad-status-list strong,
body.rn-admin-classic .ad-num,
body.rn-admin-classic .ad-widget-metrics strong,
body.rn-admin-classic .ad-wallet-total strong {
    font-variant-numeric: tabular-nums;
}

body.rn-admin-classic .ad-table-wrap {
    width: 100%;
    overflow-x: auto;
}

body.rn-admin-classic .ad-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

body.rn-admin-classic .ad-table th,
body.rn-admin-classic .ad-table td {
    padding: 12px;
    border-bottom: 1px solid var(--ad-border);
    text-align: right;
    vertical-align: middle;
}

body.rn-admin-classic .ad-table th {
    color: var(--ad-muted);
    font-size: 12px;
    font-weight: 600;
    background: #ffffff;
}

body.rn-admin-classic .ad-table td {
    color: #344054;
    font-size: 13px;
    font-weight: 500;
}

body.rn-admin-classic .ad-table td strong,
body.rn-admin-classic .ad-table td a {
    display: block;
    color: var(--ad-text);
    font-weight: 600;
    text-decoration: none;
}

body.rn-admin-classic .ad-table td span {
    display: block;
    margin-top: 2px;
    color: var(--ad-muted);
    font-size: 12px;
}

body.rn-admin-classic .ad-badge {
    display: inline-flex !important;
    align-items: center;
    min-height: 24px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 600;
}

body.rn-admin-classic .ad-badge.green { color: #067647; background: #ecfdf3; border-color: #abefc6; }
body.rn-admin-classic .ad-badge.amber { color: #b54708; background: #fffaeb; border-color: #fedf89; }
body.rn-admin-classic .ad-badge.red { color: #b42318; background: #fef3f2; border-color: #fecdca; }
body.rn-admin-classic .ad-badge.blue { color: #175cd3; background: #eff8ff; border-color: #b2ddff; }

body.rn-admin-classic .ad-widget-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

body.rn-admin-classic .ad-widget {
    min-height: 300px;
}

body.rn-admin-classic .ad-widget-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

body.rn-admin-classic .ad-widget-metrics > div,
body.rn-admin-classic .ad-wallet-total {
    padding: 12px;
    border: 1px solid var(--ad-border);
    border-radius: var(--ad-radius-sm);
    background: #fcfcfd;
}

body.rn-admin-classic .ad-widget-metrics span,
body.rn-admin-classic .ad-wallet-total span,
body.rn-admin-classic .ad-wallet-total em,
body.rn-admin-classic .ad-list-compact em {
    color: var(--ad-muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
}

body.rn-admin-classic .ad-widget-metrics strong,
body.rn-admin-classic .ad-wallet-total strong {
    display: block;
    margin-top: 4px;
    color: var(--ad-text);
    font-size: 20px;
    font-weight: 700;
}

body.rn-admin-classic .ad-list-compact {
    display: grid;
    gap: 8px;
}

body.rn-admin-classic .ad-empty-state {
    min-height: 112px;
    display: grid;
    place-items: center;
    gap: 4px;
    text-align: center;
    color: var(--ad-muted);
    background: #fcfcfd;
    border: 1px dashed var(--ad-border-strong);
    border-radius: var(--ad-radius-sm);
}

body.rn-admin-classic .ad-empty-state.compact {
    min-height: 86px;
}

body.rn-admin-classic .ad-empty-state strong {
    color: #344054;
    font-size: 14px;
    font-weight: 600;
}

body.rn-admin-classic .ad-empty-state span {
    color: var(--ad-muted);
    font-size: 13px;
}

body.rn-admin-classic :focus-visible {
    outline: 2px solid rgba(15, 159, 152, .35) !important;
    outline-offset: 2px !important;
}

@media (max-width: 1180px) {
    body.rn-admin-classic .ac-mobilebar {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        z-index: 100 !important;
        height: 56px !important;
        min-height: 56px !important;
        padding: 0 16px !important;
        background: #ffffff !important;
        border-bottom: 1px solid var(--ad-border) !important;
    }

    body.rn-admin-classic .ac-sidebar,
    body.rn-admin-classic.ac-sidebar-expanded .ac-sidebar {
        top: 56px !important;
        width: min(280px, calc(100vw - 32px)) !important;
        height: calc(100vh - 56px) !important;
        transform: translateX(110%) !important;
        transition: transform .2s ease !important;
    }

    body.rn-admin-classic .ac-sidebar.open {
        transform: translateX(0) !important;
    }

    body.rn-admin-classic .ac-overlay.open {
        display: block !important;
        position: fixed !important;
        inset: 56px 0 0 !important;
        background: rgba(16, 24, 40, .28) !important;
        z-index: 85 !important;
    }

    body.rn-admin-classic .ac-topbar {
        top: 56px !important;
        right: 0 !important;
        height: auto !important;
        min-height: 64px !important;
        padding: 12px 16px !important;
        flex-wrap: wrap !important;
    }

    body.rn-admin-classic .ac-search {
        width: min(100%, 460px) !important;
        max-width: none !important;
    }

    body.rn-admin-classic .ac-main {
        margin-right: 0 !important;
        padding: 144px 16px 28px !important;
    }

    body.rn-admin-classic .ad-kpi-row,
    body.rn-admin-classic .ad-chart-layout,
    body.rn-admin-classic .ad-widget-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    body.rn-admin-classic .ad-chart-card {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    body.rn-admin-classic .ac-topbar {
        align-items: stretch !important;
    }

    body.rn-admin-classic .ac-actions {
        width: 100% !important;
        overflow-x: auto !important;
        justify-content: flex-start !important;
        padding-bottom: 4px !important;
    }

    body.rn-admin-classic .ad-page-head,
    body.rn-admin-classic .ad-card-head {
        flex-direction: column;
        align-items: stretch;
    }

    body.rn-admin-classic .ad-export-menu,
    body.rn-admin-classic .ad-export-menu summary {
        width: 100%;
    }

    body.rn-admin-classic .ad-export-menu div {
        right: 0;
        left: auto;
        width: 100%;
    }

    body.rn-admin-classic .ad-kpi-row,
    body.rn-admin-classic .ad-chart-layout,
    body.rn-admin-classic .ad-widget-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    body.rn-admin-classic .ad-dashboard,
    body.rn-admin-classic .ac-section {
        gap: 16px !important;
    }

    body.rn-admin-classic .ad-card,
    body.rn-admin-classic .ad-kpi-card {
        padding: 14px;
    }

    body.rn-admin-classic .ad-page-head h1 {
        font-size: 24px;
    }

    body.rn-admin-classic .ad-date-range {
        width: 100%;
        flex-wrap: wrap;
    }

    body.rn-admin-classic .ad-date-range input {
        flex: 1 1 130px;
    }
}
@media (max-width: 640px) {
    .kd-pay-steps {
        grid-template-columns: 1fr !important;
    }

    .kd-copy-box {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .kd-copy-box button {
        width: 100% !important;
    }

    .kd-pay-head h2 {
        font-size: 21px !important;
    }

    .kd-pay-amount strong,
    .kd-payment-status strong {
        font-size: 19px !important;
    }
}