/*
 * Rikoooo header refresh.
 * Conservative integration: keeps the Joomla/YOOtheme structure and only refines
 * spacing, hierarchy and visual quality. No global header-height rewrite.
 */

:root {
    --riko-h-ink: var(--riko-ink);
    --riko-h-muted: var(--riko-on-brand-muted);
    --riko-h-blue-950: var(--riko-brand-deep);
    --riko-h-blue-900: var(--riko-brand-deep);
    --riko-h-blue-800: var(--riko-brand);
    --riko-h-blue-600: var(--riko-action);
    --riko-h-blue-100: var(--riko-action-soft);
    --riko-h-line: var(--riko-line);
    --riko-h-shadow: 0 22px 62px color-mix(in srgb, var(--riko-ink) 18%, transparent);
}

.tm-header-bg {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--riko-brand-deep) 8%, transparent) 0%, color-mix(in srgb, var(--riko-brand-deep) 0%, transparent) 38%),
        radial-gradient(ellipse at 12% 8%, color-mix(in srgb, var(--riko-surface) 28%, transparent), transparent 18rem),
        radial-gradient(ellipse at 82% 0, color-mix(in srgb, var(--riko-surface-soft) 30%, transparent), transparent 28rem),
        radial-gradient(ellipse at 55% 82%, color-mix(in srgb, var(--riko-brand) 22%, transparent), transparent 34rem),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1800 340'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M-80 210 C250 108 520 112 800 168 S1320 252 1880 128' stroke='%23ffffff' stroke-opacity='.13' stroke-width='2'/%3E%3Cpath d='M-40 250 C330 178 620 190 920 226 S1390 262 1840 182' stroke='%236fd6f2' stroke-opacity='.16' stroke-width='1.4' stroke-dasharray='16 18'/%3E%3Cpath d='M1110 80 C1188 54 1284 64 1372 106' stroke='%23ffffff' stroke-opacity='.18' stroke-width='1.4'/%3E%3Cpath d='M1336 100 l42 13' stroke='%23c9f4ff' stroke-opacity='.24' stroke-width='1.6'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='.18'%3E%3Ccircle cx='290' cy='72' r='2'/%3E%3Ccircle cx='870' cy='92' r='1.5'/%3E%3Ccircle cx='1520' cy='58' r='2.2'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(135deg, var(--riko-brand) 0%, var(--riko-brand-end) 48%, var(--riko-brand-end) 100%) !important;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-size: 100% 100%, 42rem 22rem, 48rem 26rem, 56rem 26rem, cover, cover;
    background-position: center top, left top, right top, center bottom, center top, center top;
}

@media (min-width: 901px) {
    .tm-header-bg {
        height: 150px;
    }
}

#tm-toolbar.tm-toolbar {
    position: relative !important;
    z-index: 96 !important;
    padding-top: 14px !important;
    padding-bottom: 8px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

#tm-toolbar .riko-toolbar-shell {
    display: flex !important;
    align-items: center !important;
    gap: 14px;
    width: min(1540px, calc(100vw - 64px)) !important;
    max-width: 1540px !important;
    min-height: 42px;
    margin: 0 -5px !important;
    padding: 0 !important;
}

#tm-toolbar .uk-float-left,
#tm-toolbar .uk-float-right {
    float: none !important;
}

#tm-toolbar,
#tm-toolbar * {
    box-sizing: border-box;
}

#tm-toolbar .riko-toolbar-l {
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 5px !important;
    border: 1px solid color-mix(in srgb, var(--riko-inverse) 26%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--riko-brand-deep) 20%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--riko-inverse) 16%, transparent);
}

#tm-toolbar .riko-toolbar-r {
    margin-left: auto !important;
}

#tm-toolbar .riko-toolbar-search {
    flex: 0 1 clamp(230px, 19vw, 300px);
    width: clamp(230px, 19vw, 300px);
    max-width: clamp(230px, 19vw, 300px);
    min-width: 220px;
    transition:
        flex-basis .28s ease,
        width .28s ease,
        max-width .28s ease;
}

#tm-toolbar .riko-toolbar-search:focus-within {
    flex-basis: clamp(290px, 25vw, 380px);
    width: clamp(290px, 25vw, 380px);
    max-width: clamp(290px, 25vw, 380px);
}

#tm-toolbar .riko-language-module,
#tm-toolbar .riko-language-switcher,
#tm-toolbar .riko-language-list {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#tm-toolbar .riko-language-list {
    list-style: none;
}

#tm-toolbar .riko-language-item {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
}

#tm-toolbar .riko-language-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    min-width: 58px;
    gap: 7px;
    padding: 0 9px !important;
    border-radius: 999px;
    color: color-mix(in srgb, var(--riko-on-brand) 84%, transparent) !important;
    line-height: 28px !important;
    text-decoration: none !important;
    text-shadow: none !important;
}

#tm-toolbar .riko-language-code {
    color: currentColor;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0;
    line-height: 1;
}

#tm-toolbar .riko-language-link:hover,
#tm-toolbar .riko-language-link:focus,
#tm-toolbar .riko-language-link[aria-current="page"] {
    color: var(--riko-h-ink) !important;
    background: var(--riko-surface) !important;
    box-shadow: 0 7px 18px color-mix(in srgb, var(--riko-brand-deep) 18%, transparent);
}

#tm-toolbar .riko-language-flag {
    display: block !important;
    width: 18px !important;
    height: 12px !important;
    border-radius: 2px;
    object-fit: cover;
}

#tm-toolbar .riko-language-item.is-disabled {
    opacity: .5;
}

:is(#offcanvas, #riko-mobile-menu) .riko-language-module,
:is(#offcanvas, #riko-mobile-menu) .riko-language-switcher {
    width: 100%;
}

:is(#offcanvas, #riko-mobile-menu) .riko-language-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

:is(#offcanvas, #riko-mobile-menu) .riko-language-item {
    min-width: 0;
    margin: 0;
}

:is(#offcanvas, #riko-mobile-menu) .riko-language-link {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid color-mix(in srgb, var(--riko-inverse) 24%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--riko-inverse) 8%, transparent);
    color: var(--riko-on-brand) !important;
    font-size: 13px;
    font-weight: 850;
    letter-spacing: 0;
    text-decoration: none !important;
}

:is(#offcanvas, #riko-mobile-menu) .riko-language-link:hover,
:is(#offcanvas, #riko-mobile-menu) .riko-language-link:focus,
:is(#offcanvas, #riko-mobile-menu) .riko-language-link[aria-current="page"] {
    border-color: var(--riko-surface);
    background: var(--riko-surface);
    color: var(--riko-focus) !important;
}

:is(#offcanvas, #riko-mobile-menu) .riko-language-flag {
    display: block;
    width: 18px;
    height: 12px;
    border-radius: 2px;
    object-fit: cover;
}

:is(#offcanvas, #riko-mobile-menu) .riko-language-item.is-disabled {
    opacity: .5;
}

#tm-toolbar .riko-toolbar-r > div {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    padding: 5px !important;
    border: 1px solid color-mix(in srgb, var(--riko-inverse) 22%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--riko-brand-deep) 16%, transparent);
    font: inherit !important;
}

#tm-toolbar .riko-toolbar-r a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 12px !important;
    border-radius: 999px;
    color: color-mix(in srgb, var(--riko-on-brand) 94%, transparent) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 30px !important;
    text-decoration: none !important;
    text-shadow: none !important;
}

#tm-toolbar .riko-toolbar-r a:hover,
#tm-toolbar .riko-toolbar-r a:focus {
    color: var(--riko-h-ink) !important;
    background: var(--riko-surface) !important;
}

#tm-toolbar form.uk-search {
    display: flex !important;
    align-items: center;
    width: 100% !important;
    min-height: 40px;
    margin: 0 !important;
    padding: 4px 5px 4px 14px !important;
    border: 1px solid color-mix(in srgb, var(--riko-inverse) 42%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--riko-inverse) 15%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--riko-inverse) 22%, transparent);
    overflow: hidden;
    transition:
        border-color .22s ease,
        background-color .22s ease,
        box-shadow .22s ease;
}

#tm-toolbar form.uk-search:focus-within {
    border-color: color-mix(in srgb, var(--riko-inverse) 58%, transparent) !important;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--riko-inverse) 22%, transparent) !important;
}

#tm-toolbar form.uk-search:before,
#tm-toolbar form.uk-search:after {
    display: none !important;
    content: none !important;
}

#tm-toolbar form.uk-search input.uk-search-field {
    flex: 1 1 auto;
    width: 100% !important;
    min-width: 0;
    height: 32px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    color: var(--riko-on-brand) !important;
    background: transparent !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    line-height: 32px !important;
}

#tm-toolbar form.uk-search input.uk-search-field:focus {
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

#tm-toolbar form.uk-search input.uk-search-field::placeholder {
    color: color-mix(in srgb, var(--riko-on-brand) 82%, transparent) !important;
    transition: color .16s ease, opacity .16s ease;
}

#tm-toolbar form.uk-search input.uk-search-field:focus::placeholder {
    color: transparent !important;
    opacity: 0 !important;
}

#tm-toolbar form.uk-search .riko-header-search-submit {
    flex: 0 0 auto;
    min-height: 32px;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: var(--riko-action-contrast) !important;
    background: color-mix(in srgb, var(--riko-action) 48%, transparent) !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    line-height: 32px !important;
    text-shadow: none !important;
}

.tm-header-container.riko-global-header {
    width: min(1540px, calc(100vw - 64px)) !important;
    max-width: 1540px !important;
    margin: 12px -5px 0 !important;
    border: 1px solid color-mix(in srgb, var(--riko-surface) 82%, transparent) !important;
    border-radius: 24px 24px 18px 18px !important;
    background: transparent !important;
    box-shadow: var(--riko-h-shadow) !important;
}

.riko-global-header,
.riko-global-header * {
    box-sizing: border-box;
}

.riko-global-header .tm-header-call,
.riko-global-header .tm-header,
.riko-global-header .tm-minibar {
    overflow: visible !important;
}

.riko-global-header .tm-header {
    position: relative;
    z-index: 120 !important;
    isolation: isolate;
    overflow: visible !important;
    min-height: 96px !important;
    padding: 13px 18px 13px 22px !important;
    border-radius: 24px 24px 0 0 !important;
    background:
        radial-gradient(ellipse at 84% 35%, color-mix(in srgb, var(--riko-brand-end) 12%, transparent), transparent 23rem),
        radial-gradient(circle at 20% 45%, color-mix(in srgb, var(--riko-brand) 4.5%, transparent), transparent 15rem),
        linear-gradient(90deg, color-mix(in srgb, var(--riko-surface) 98.5%, transparent), color-mix(in srgb, var(--riko-surface) 94%, transparent)) !important;
}

.riko-global-header .tm-header:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: clamp(255px, 19vw, 305px);
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(90deg, color-mix(in srgb, var(--riko-surface) 99%, transparent) 0, color-mix(in srgb, var(--riko-surface) 97%, transparent) 126px, color-mix(in srgb, var(--riko-surface) 72%, transparent) 210px, transparent 310px),
        url("/media/templates/site/rikoooo/images/rikoooo_header_white_avionics_v2_clean_planes.svg?v=20260628a");
    background-repeat: no-repeat, no-repeat;
    background-size: 320px 100%, cover;
    background-position: left center, left center;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .35) 18px, #000 58px);
    mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .35) 18px, #000 58px);
    border-top-right-radius: 24px;
    opacity: 1;
    content: "";
}

.riko-global-header .tm-header:after {
    display: none !important;
    content: none !important;
}

.riko-global-header .tm-header > * {
    position: relative;
    z-index: 5;
}

.riko-global-header .tm-logo,
.riko-global-header .tm-logo-small {
    display: inline-flex !important;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    text-decoration: none !important;
}

.riko-global-header .tm-logo-small.uk-visible-small {
    display: none !important;
}

.riko-global-header .tm-logo img,
.riko-global-header .tm-logo-small img {
    display: block;
    width: auto;
    max-width: min(276px, 25vw) !important;
    max-height: 64px !important;
    padding-right: 0 !important;
    border-right: 0 !important;
}

@media (min-width: 901px) {
    .riko-global-header .tm-logo img[src*="logo-icon-plane.svg"] {
        width: 256px !important;
        max-width: min(280px, 27vw) !important;
        max-height: 70px !important;
    }
}

.riko-global-header .riko-brand-caption {
    display: block;
    max-width: min(300px, 29vw);
    margin-top: 2px;
    color: color-mix(in srgb, var(--riko-ink) 66%, transparent);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1.15;
    text-transform: uppercase;
    white-space: nowrap;
}

.riko-global-header .tm-header > .uk-flex {
    flex: 1 1 auto;
    min-width: 0;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 16px;
    margin-left: 18px;
}

.riko-global-header .tm-navbar.uk-navbar {
    position: relative;
    z-index: 130 !important;
    padding: 6px !important;
    border: 1px solid color-mix(in srgb, var(--riko-line) 18%, transparent) !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--riko-surface) 96%, transparent), color-mix(in srgb, var(--riko-surface-soft) 82%, transparent)) !important;
    box-shadow: inset 0 1px 0 var(--riko-surface), 0 12px 30px color-mix(in srgb, var(--riko-brand-deep) 8%, transparent) !important;
}

.riko-global-header .tm-navbar,
.riko-global-header .tm-navbar .uk-navbar-nav {
    min-width: 0;
}

.riko-global-header .tm-navbar .uk-navbar-nav {
    display: flex !important;
    align-items: center;
    gap: 4px;
}

.riko-global-header .tm-navbar .uk-navbar-nav > li {
    position: relative;
    z-index: 140;
}

.riko-global-header .tm-navbar .uk-navbar-nav > li:hover,
.riko-global-header .tm-navbar .uk-navbar-nav > li:focus-within,
.riko-global-header .tm-navbar .uk-navbar-nav > li.uk-open {
    z-index: 10000 !important;
}

.riko-global-header .tm-navbar .uk-navbar-nav > li > a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 46px !important;
    height: 46px !important;
    padding: 0 13px !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--riko-h-ink) !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    line-height: 46px !important;
    text-decoration: none !important;
    text-shadow: none !important;
    white-space: nowrap;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

.riko-global-header .tm-navbar .uk-navbar-nav > li > a:hover,
.riko-global-header .tm-navbar .uk-navbar-nav > li > a:focus,
.riko-global-header .tm-navbar .uk-navbar-nav > li.uk-active > a {
    border-color: color-mix(in srgb, var(--riko-focus) 34%, transparent) !important;
    color: var(--riko-focus) !important;
    background: var(--riko-surface) !important;
    box-shadow: 0 12px 26px color-mix(in srgb, var(--riko-brand-deep) 13%, transparent) !important;
    transform: translateY(-1px);
}

.riko-global-header .tm-navbar .uk-navbar-nav > li > a i,
.riko-global-header .tm-navbar .uk-navbar-nav > li > a .uk-icon {
    margin-right: 7px;
    color: var(--riko-h-blue-600) !important;
    font-size: 15px;
}

.riko-global-header .tm-navbar .uk-dropdown-navbar,
.riko-global-header .tm-navbar .uk-dropdown {
    z-index: 100000 !important;
    min-width: 230px !important;
    margin-top: 14px !important;
    padding: 10px !important;
    border: 1px solid color-mix(in srgb, var(--riko-line) 20%, transparent) !important;
    border-radius: 18px !important;
    background:
        linear-gradient(180deg, var(--riko-surface), var(--riko-surface)) !important;
    box-shadow:
        0 24px 58px color-mix(in srgb, var(--riko-brand-deep) 22%, transparent),
        inset 0 1px 0 var(--riko-surface) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    overflow: hidden;
}

.riko-global-header .tm-navbar .uk-dropdown-navbar:before,
.riko-global-header .tm-navbar .uk-dropdown:before {
    position: absolute;
    top: 0;
    right: 18px;
    left: 18px;
    height: 3px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, var(--riko-brand-end), var(--riko-brand-end));
    content: "";
}

.riko-global-header .tm-navbar .uk-nav-navbar {
    display: grid !important;
    gap: 4px;
    margin: 0 !important;
}

.riko-global-header .tm-navbar .uk-nav-navbar > li {
    margin: 0 !important;
}

.riko-global-header .tm-navbar .uk-nav-navbar > li > a {
    position: relative;
    display: flex !important;
    min-height: 42px;
    align-items: center;
    padding: 0 14px 0 18px !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    color: var(--riko-h-ink) !important;
    background: transparent !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    text-shadow: none !important;
    transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

.riko-global-header .tm-navbar .uk-nav-navbar > li > a:before {
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 7px;
    width: 3px;
    border-radius: 999px;
    background: transparent;
    content: "";
}

.riko-global-header .tm-navbar .uk-nav-navbar > li > a:hover,
.riko-global-header .tm-navbar .uk-nav-navbar > li > a:focus,
.riko-global-header .tm-navbar .uk-nav-navbar > li.uk-active > a {
    border-color: color-mix(in srgb, var(--riko-focus) 18%, transparent) !important;
    color: var(--riko-focus) !important;
    background: linear-gradient(90deg, color-mix(in srgb, var(--riko-action-soft-hover) 95%, transparent), color-mix(in srgb, var(--riko-surface) 88%, transparent)) !important;
    transform: translateX(2px);
}

.riko-global-header .tm-navbar .uk-nav-navbar > li > a:hover:before,
.riko-global-header .tm-navbar .uk-nav-navbar > li > a:focus:before,
.riko-global-header .tm-navbar .uk-nav-navbar > li.uk-active > a:before {
    background: linear-gradient(180deg, var(--riko-action-hover), var(--riko-action-hover));
}

.riko-global-header .tm-call-action {
    display: flex !important;
    width: auto !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.riko-global-header .tm-call-action:before,
.riko-global-header .tm-call-action:after {
    display: none !important;
    content: none !important;
}

.riko-global-header .tm-call-action > div {
    position: relative;
    display: inline-flex !important;
    min-width: 0;
    min-height: 0;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--riko-action) !important;
    line-height: 1.05 !important;
    text-align: center !important;
    overflow: visible;
}

.riko-global-header .tm-call-action > div:before {
    display: none !important;
    content: none !important;
}

.riko-global-header .tm-call-action > div > div:first-child {
    order: 2;
    margin-top: 3px;
    color: var(--riko-muted) !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.riko-global-header .tm-call-action a {
    position: relative;
    display: inline-flex !important;
    order: 1;
    min-height: 44px !important;
    align-items: center;
    justify-content: center;
    padding: 0 17px 0 20px !important;
    border: 1px solid color-mix(in srgb, var(--riko-action) 22%, transparent) !important;
    border-radius: 14px !important;
    color: var(--riko-action) !important;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--riko-action) 96%, transparent) 0 3px, transparent 3px),
        linear-gradient(180deg, color-mix(in srgb, var(--riko-surface) 98%, transparent), color-mix(in srgb, var(--riko-surface) 94%, transparent)) !important;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--riko-surface) 95%, transparent),
        0 9px 20px color-mix(in srgb, var(--riko-brand-deep) 8%, transparent) !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    text-shadow: none !important;
}

.riko-global-header .tm-call-action a:hover,
.riko-global-header .tm-call-action a:focus {
    border-color: color-mix(in srgb, var(--riko-action-hover) 34%, transparent) !important;
    color: var(--riko-action-hover) !important;
    background:
        linear-gradient(90deg, var(--riko-action-hover) 0 3px, transparent 3px),
        linear-gradient(180deg, var(--riko-surface), var(--riko-action-soft-hover)) !important;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--riko-surface) 95%, transparent),
        0 12px 26px color-mix(in srgb, var(--riko-brand-deep) 12%, transparent) !important;
    transform: translateY(-1px);
}

.riko-global-header .tm-call-action a strong,
.riko-global-header .tm-call-action a b {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}

.riko-global-header .tm-call-action a .uk-icon-caret-right,
.riko-global-header .tm-call-action a .uk-icon-caret-left {
    display: none !important;
}

.riko-global-header .tm-call-action img,
.riko-global-header .tm-call-action iframe,
.riko-global-header .tm-call-action object,
.riko-global-header .tm-call-action embed {
    max-width: 100% !important;
    border-radius: 10px !important;
}

.riko-global-header .tm-minibar {
    position: relative;
    z-index: 1 !important;
    min-height: 62px !important;
    padding: 10px 16px !important;
    border: 0 !important;
    border-radius: 0 0 18px 18px !important;
    background:
        radial-gradient(ellipse at 82% -38%, color-mix(in srgb, var(--riko-brand-end) 32%, transparent), transparent 30rem),
        radial-gradient(ellipse at 18% 118%, color-mix(in srgb, var(--riko-brand-end) 28%, transparent), transparent 24rem),
        radial-gradient(ellipse at 48% 18%, color-mix(in srgb, var(--riko-inverse) 8%, transparent), transparent 34rem),
        linear-gradient(180deg, color-mix(in srgb, var(--riko-brand-deep) 99%, transparent), color-mix(in srgb, var(--riko-brand-deep) 98.5%, transparent) 48%, color-mix(in srgb, var(--riko-brand-deep) 98%, transparent)) !important;
    color: var(--riko-on-brand) !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.riko-global-header .tm-minibar:before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1520 72'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='66' cy='18' r='1.15' fill-opacity='.78'/%3E%3Ccircle cx='152' cy='42' r='.85' fill-opacity='.54'/%3E%3Ccircle cx='248' cy='16' r='.95' fill-opacity='.68'/%3E%3Ccircle cx='338' cy='54' r='1.2' fill-opacity='.58'/%3E%3Ccircle cx='462' cy='24' r='.8' fill-opacity='.62'/%3E%3Ccircle cx='578' cy='48' r='1.1' fill-opacity='.76'/%3E%3Ccircle cx='706' cy='18' r='.75' fill-opacity='.54'/%3E%3Ccircle cx='812' cy='38' r='1.25' fill-opacity='.82'/%3E%3Ccircle cx='952' cy='16' r='.9' fill-opacity='.56'/%3E%3Ccircle cx='1064' cy='52' r='1.15' fill-opacity='.70'/%3E%3Ccircle cx='1192' cy='26' r='.8' fill-opacity='.58'/%3E%3Ccircle cx='1318' cy='48' r='1.2' fill-opacity='.72'/%3E%3Ccircle cx='1450' cy='18' r='.95' fill-opacity='.66'/%3E%3C/g%3E%3Cg fill='%2378dcf7'%3E%3Ccircle cx='214' cy='30' r='.9' fill-opacity='.55'/%3E%3Ccircle cx='640' cy='58' r='.8' fill-opacity='.50'/%3E%3Ccircle cx='1004' cy='34' r='1' fill-opacity='.54'/%3E%3Ccircle cx='1374' cy='26' r='.75' fill-opacity='.46'/%3E%3C/g%3E%3Cpath d='M1038 18 C1080 8 1120 11 1168 24' fill='none' stroke='%23ffffff' stroke-opacity='.22' stroke-width='1' stroke-linecap='round'/%3E%3Cpath d='M1144 20 l28 8' fill='none' stroke='%2378dcf7' stroke-opacity='.35' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: cover;
    opacity: .95;
    content: "";
}

.riko-global-header .tm-minibar:after {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 68% 112%, color-mix(in srgb, var(--riko-brand-end) 22%, transparent), transparent 26rem),
        linear-gradient(92deg, transparent 0 42%, color-mix(in srgb, var(--riko-brand-end) 6%, transparent) 48%, transparent 64%);
    pointer-events: none;
    opacity: 1;
    content: "";
}

.riko-global-header .tm-minibar > * {
    position: relative;
    z-index: 1;
}

.riko-global-header .tm-minibar > div,
.riko-global-header .tm-minibar > div > div {
    width: 100%;
    min-width: 0;
}

.riko-global-header .tm-minibar .riko-sclogin-desktop {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.riko-global-header .riko-native-login .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.riko-global-header .tm-minibar .riko-sclogin-form {
    display: flex !important;
    flex: 1 1 auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.riko-global-header .tm-minibar .riko-sclogin-title {
    display: inline-flex !important;
    flex: 1 1 auto;
    align-items: center;
    gap: 10px;
    min-width: 190px;
    color: var(--riko-on-brand) !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
    white-space: nowrap;
}

.riko-global-header .tm-minibar .riko-sclogin-title:before {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--riko-brand-end);
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--riko-action) 14%, transparent);
    content: "";
}

.riko-global-header .tm-minibar .riko-sclogin-title > i {
    display: none !important;
}

.riko-global-header .tm-minibar .riko-sclogin-field {
    position: relative;
    flex: 0 0 auto;
    width: 166px !important;
    height: 38px !important;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--riko-inverse) 74%, transparent) !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--riko-surface) 96%, transparent) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--riko-surface) 90%, transparent), 0 8px 18px color-mix(in srgb, var(--riko-brand-deep) 12%, transparent) !important;
}

.riko-global-header .tm-minibar .riko-sclogin-input {
    width: 100% !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 39px 0 15px !important;
    border: 0 !important;
    border-radius: 999px !important;
    outline: 0 !important;
    color: var(--riko-h-ink) !important;
    background: var(--riko-surface) !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    line-height: 38px !important;
    text-shadow: none !important;
}

.riko-global-header .tm-minibar .riko-sclogin-input::placeholder {
    color: var(--riko-muted) !important;
}

.riko-global-header .tm-minibar .riko-sclogin-field .forgot.btn {
    position: absolute !important;
    top: 50% !important;
    right: 7px !important;
    display: grid !important;
    width: 26px !important;
    height: 26px !important;
    min-height: 26px !important;
    place-items: center;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    color: var(--riko-action-contrast) !important;
    background: color-mix(in srgb, var(--riko-action) 78%, transparent) !important;
    font-size: 0 !important;
    transform: translateY(-50%);
}

.riko-global-header .tm-minibar .riko-sclogin-field .forgot.btn:after {
    font-size: 13px;
    font-weight: 950;
    content: "?";
}

.riko-global-header .tm-minibar .riko-sclogin-actions {
    display: inline-flex !important;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
}

.riko-global-header .tm-minibar .riko-sclogin-submit,
.riko-global-header .tm-minibar .riko-sclogin-register {
    display: inline-flex !important;
    height: 38px !important;
    min-height: 38px !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    line-height: 38px !important;
    text-decoration: none !important;
    text-shadow: none !important;
}

.riko-global-header .tm-minibar .riko-sclogin-submit {
    border: 0 !important;
    color: var(--riko-action-contrast) !important;
    background: var(--riko-action) !important;
    box-shadow: 0 10px 20px color-mix(in srgb, var(--riko-action) 20%, transparent);
}

.riko-global-header .tm-minibar .riko-sclogin-register {
    border: 1px solid color-mix(in srgb, var(--riko-inverse) 28%, transparent) !important;
    color: var(--riko-on-brand) !important;
    background: transparent !important;
}

.riko-global-header .tm-minibar .riko-sclogin-social {
    display: inline-flex !important;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-left: 18px;
    border-left: 1px solid color-mix(in srgb, var(--riko-inverse) 14%, transparent);
    white-space: nowrap;
}

.riko-global-header .tm-minibar .riko-sclogin-social > span {
    color: color-mix(in srgb, var(--riko-on-brand) 74%, transparent) !important;
    font-size: 13px !important;
    font-weight: 850 !important;
}

.riko-global-header .tm-minibar .riko-sclogin-social > i {
    display: none !important;
}

.riko-global-header .tm-minibar .riko-sclogin-google {
    display: grid !important;
    width: 38px !important;
    height: 38px !important;
    place-items: center;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 13px !important;
    background: var(--riko-surface) !important;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--riko-brand-deep) 13%, transparent);
    overflow: hidden;
}

.riko-global-header .tm-minibar .riko-sclogin-google,
.riko-global-header .tm-minibar .riko-sclogin-google * {
    border-radius: 13px !important;
}

.riko-global-header .tm-minibar .riko-sclogin-google .sprites_google {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.riko-global-header .tm-minibar .riko-sclogin-google .riko-google-mark {
    display: block;
    width: 22px;
    height: 22px;
}

.riko-global-header .tm-minibar .riko-sclogin-password-field .riko-sclogin-input {
    padding-right: 68px !important;
}

.riko-global-header .tm-minibar .riko-password-toggle {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 34px;
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--riko-muted);
    background: transparent;
    cursor: pointer;
    transform: translateY(-50%);
}

.riko-global-header .tm-minibar .riko-password-toggle:hover,
.riko-global-header .tm-minibar .riko-password-toggle:focus {
    color: var(--riko-focus);
    background: color-mix(in srgb, var(--riko-on-brand-muted) 14%, transparent);
    outline: 0;
}

.riko-global-header .tm-minibar .riko-sclogin-remember {
    display: grid;
    flex: 0 0 30px;
    width: 30px;
    height: 38px;
    place-items: center;
    margin: 0;
    color: color-mix(in srgb, var(--riko-on-brand) 78%, transparent);
    cursor: pointer;
}

.riko-global-header .tm-minibar .riko-sclogin-remember input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.riko-global-header .tm-minibar .riko-sclogin-remember > span[aria-hidden="true"] {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--riko-inverse) 42%, transparent);
    border-radius: 50%;
    font-size: 12px;
}

.riko-global-header .tm-minibar .riko-sclogin-remember .riko-remember-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
}

.riko-global-header .tm-minibar .riko-sclogin-remember input:focus + span,
.riko-global-header .tm-minibar .riko-sclogin-remember:hover > span[aria-hidden="true"] {
    border-color: var(--riko-focus-on-brand);
    color: var(--riko-on-brand);
    background: color-mix(in srgb, var(--riko-on-brand-muted) 18%, transparent);
}

.riko-global-header .tm-minibar .riko-sclogin-passkey {
    display: grid !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    place-items: center;
    padding: 8px !important;
    border: 0 !important;
    border-radius: 13px !important;
    color: var(--riko-ink) !important;
    background: var(--riko-surface) !important;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--riko-brand-deep) 13%, transparent);
    cursor: pointer;
}

.riko-global-header .tm-minibar .riko-sclogin-passkey svg {
    display: block;
    width: 22px;
    height: 22px;
}

.riko-global-header .tm-minibar .riko-native-account .riko-sclogin-desktop {
    width: 100%;
}

.riko-global-header .tm-minibar .riko-account-welcome {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    color: var(--riko-on-brand);
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}

.riko-global-header .tm-minibar .riko-account-welcome span {
    color: var(--riko-on-brand-muted);
}

.riko-global-header .tm-minibar .riko-account-navigation {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    margin-left: auto;
}

.riko-global-header .tm-minibar .riko-account-navigation .uk-navbar-nav {
    display: flex;
    float: none;
    width: 100%;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    margin: 0;
}

.riko-global-header .tm-minibar .riko-account-navigation a {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
    color: color-mix(in srgb, var(--riko-on-brand) 88%, transparent);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.riko-global-header .tm-minibar .riko-account-navigation a:hover,
.riko-global-header .tm-minibar .riko-account-navigation a:focus {
    color: var(--riko-focus-on-brand);
}

.riko-global-header .tm-minibar .riko-account-notification {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--riko-on-brand-muted);
}

.riko-global-header .tm-minibar .riko-account-logout-form {
    flex: 0 0 auto;
    width: auto !important;
    margin: 0;
    white-space: nowrap;
}

.riko-global-header .tm-minibar .riko-account-logout {
    height: 38px !important;
    min-height: 38px !important;
    margin: 0;
    padding: 0 14px;
    border: 1px solid color-mix(in srgb, var(--riko-inverse) 28%, transparent);
    border-radius: 999px;
    color: var(--riko-on-brand);
    background: transparent;
    font-size: 13px;
    font-weight: 900;
}

.riko-global-header .tm-minibar .riko-account-logout:hover,
.riko-global-header .tm-minibar .riko-account-logout:focus {
    border-color: color-mix(in srgb, var(--riko-inverse) 62%, transparent);
    background: color-mix(in srgb, var(--riko-inverse) 10%, transparent);
}

/* Joomla and Gravity system messages use one accessible modal surface. */
html.riko-system-modal-open,
body.riko-system-modal-open {
    overflow: hidden !important;
}

#system-message-container:not(.riko-system-message--open) {
    display: none !important;
}

#system-message-container.riko-system-message--open {
    position: fixed !important;
    z-index: 20050 !important;
    inset: 0 !important;
    display: grid !important;
    width: auto !important;
    height: auto !important;
    place-items: center;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 20px !important;
    overflow: auto !important;
}

#system-message-container .riko-system-message__backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--riko-brand-deep) 62%, transparent);
    -webkit-backdrop-filter: blur(9px) saturate(.88);
    backdrop-filter: blur(9px) saturate(.88);
}

#system-message-container .riko-system-message__dialog {
    --riko-message-accent: var(--riko-action);
    --riko-message-accent-dark: var(--riko-action-hover);
    --riko-message-soft: var(--riko-surface-soft);
    --riko-message-line: var(--riko-line);
    position: relative;
    z-index: 1;
    width: min(620px, 100%);
    max-height: min(760px, calc(100vh - 40px));
    overflow: auto;
    border: 1px solid color-mix(in srgb, var(--riko-line) 92%, transparent);
    border-radius: 22px;
    outline: none;
    background: var(--riko-surface);
    box-shadow: 0 32px 90px color-mix(in srgb, var(--riko-brand-deep) 38%, transparent), inset 0 1px 0 var(--riko-surface);
    color: var(--riko-ink);
    animation: riko-system-modal-in .2s ease-out both;
}

#system-message-container .riko-system-message__dialog--success {
    --riko-message-accent: var(--riko-success);
    --riko-message-accent-dark: var(--riko-success);
    --riko-message-soft: color-mix(in srgb, var(--riko-success) 9%, var(--riko-surface));
    --riko-message-line: color-mix(in srgb, var(--riko-success) 28%, transparent);
}

#system-message-container .riko-system-message__dialog--warning {
    --riko-message-accent: var(--riko-warning);
    --riko-message-accent-dark: var(--riko-warning);
    --riko-message-soft: color-mix(in srgb, var(--riko-warning) 9%, var(--riko-surface));
    --riko-message-line: color-mix(in srgb, var(--riko-warning) 28%, transparent);
}

#system-message-container .riko-system-message__dialog--error {
    --riko-message-accent: var(--riko-danger);
    --riko-message-accent-dark: var(--riko-danger);
    --riko-message-soft: color-mix(in srgb, var(--riko-danger) 9%, var(--riko-surface));
    --riko-message-line: color-mix(in srgb, var(--riko-danger) 28%, transparent);
}

#system-message-container .riko-system-message__head {
    position: relative;
    display: grid;
    min-height: 104px;
    grid-template-columns: 54px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 16px;
    padding: 22px 22px 20px;
    overflow: hidden;
    border-bottom: 1px solid var(--riko-message-line);
    background: linear-gradient(180deg, var(--riko-surface) 0%, var(--riko-message-soft) 100%);
}

#system-message-container .riko-system-message__head::after {
    position: absolute;
    z-index: 0;
    top: -38px;
    right: -34px;
    width: 250px;
    height: 180px;
    background-image:
        radial-gradient(circle, color-mix(in srgb, var(--riko-message-accent) 24%, transparent) 0 1px, transparent 1.4px),
        radial-gradient(circle, color-mix(in srgb, var(--riko-brand-end) 8%, transparent) 0 .8px, transparent 1.15px);
    background-position: 0 0, 8px 8px;
    background-size: 16px 16px, 32px 32px;
    content: "";
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse at 100% 0, #000 0, rgba(0, 0, 0, .8) 42%, transparent 78%);
    mask-image: radial-gradient(ellipse at 100% 0, #000 0, rgba(0, 0, 0, .8) 42%, transparent 78%);
}

#system-message-container .riko-system-message__head > * {
    position: relative;
    z-index: 1;
}

#system-message-container .riko-system-message__icon {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border: 1px solid var(--riko-message-line);
    border-radius: 50%;
    background: color-mix(in srgb, var(--riko-surface) 82%, transparent);
    color: var(--riko-message-accent-dark);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--riko-message-accent) 18%, transparent);
    font-size: 22px;
}

#system-message-container .riko-system-message__icon-glyph {
    font-family: inherit;
    font-size: 23px;
    font-weight: 950;
    line-height: 1;
}

#system-message-container .riko-system-message__eyebrow {
    display: block;
    margin-bottom: 4px;
    color: var(--riko-message-accent-dark);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
}

#system-message-container .riko-system-message__title {
    margin: 0;
    color: var(--riko-ink);
    font-size: clamp(22px, 3.2vw, 29px);
    font-weight: 900;
    line-height: 1.1;
}

#system-message-container .riko-system-message__close {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--riko-brand) 18%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--riko-surface) 82%, transparent);
    color: var(--riko-ink);
    font-size: 27px;
    line-height: 1;
    box-shadow: none;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

#system-message-container .riko-system-message__close:hover,
#system-message-container .riko-system-message__close:focus-visible {
    border-color: var(--riko-message-accent);
    background: var(--riko-surface);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--riko-message-accent) 22%, transparent);
    transform: translateY(-1px);
}

#system-message-container .riko-system-message__list {
    display: grid;
    gap: 10px;
    padding: 20px 22px 22px;
}

#system-message-container .riko-system-message__list > joomla-alert,
#system-message-container .riko-system-message__list > .alert,
#system-message-container .riko-system-message__list > .riko-system-message__item {
    --jui-alert-min-width: 0;
    --jui-alert-padding: 0;
    --jui-alert-margin: 0;
    --jui-alert-border-radius: 14px;
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid color-mix(in srgb, var(--riko-action) 34%, transparent) !important;
    border-left: 4px solid var(--riko-row-accent, var(--riko-brand)) !important;
    border-radius: 14px !important;
    background: var(--riko-surface) !important;
    box-shadow: none !important;
    color: var(--riko-ink) !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
}

#system-message-container [data-riko-message-kind="success"] {
    --riko-row-accent: var(--riko-success);
    background: var(--riko-surface) !important;
}

#system-message-container [data-riko-message-kind="warning"] {
    --riko-row-accent: var(--riko-warning);
    background: color-mix(in srgb, var(--riko-warning) 9%, var(--riko-surface)) !important;
}

#system-message-container [data-riko-message-kind="error"] {
    --riko-row-accent: var(--riko-danger);
    background: var(--riko-surface) !important;
}

#system-message-container joomla-alert .alert-heading,
#system-message-container joomla-alert .joomla-alert--close,
#system-message-container joomla-alert .joomla-alert-button--close,
#system-message-container .alert .close,
#system-message-container .riko-system-message__item.uk-alert > .uk-alert-close,
#system-message-container .riko-system-message__item.uk-alert > h2 {
    display: none !important;
}

#system-message-container joomla-alert .alert-wrapper,
#system-message-container .riko-system-message__list > .alert,
#system-message-container .riko-system-message__list > .riko-system-message__item {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 15px 17px !important;
}

#system-message-container .riko-system-message__item > strong {
    display: block;
    margin: 0 0 4px;
    color: var(--riko-ink);
    font-size: 15px;
    font-weight: 900;
}

#system-message-container .riko-system-message__item > span {
    display: block;
    color: var(--riko-muted);
}

#system-message-container joomla-alert .alert-message,
#system-message-container .riko-system-message__list > .alert > :first-child {
    margin-top: 0 !important;
}

#system-message-container joomla-alert .alert-message,
#system-message-container .riko-system-message__list > .alert > :last-child,
#system-message-container .riko-system-message__item.uk-alert > p {
    margin-bottom: 0 !important;
}

#system-message-container .riko-system-message__item.uk-alert > p {
    margin-top: 0 !important;
}

#system-message-container a {
    color: var(--riko-message-accent-dark) !important;
    font-weight: 850;
    text-decoration: underline;
    text-underline-offset: 2px;
}

@keyframes riko-system-modal-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 640px) {
    #system-message-container.riko-system-message--open {
        align-items: end;
        padding: 12px !important;
    }

    #system-message-container .riko-system-message__dialog {
        width: 100%;
        max-height: calc(100vh - 24px);
        border-radius: 20px;
    }

    #system-message-container .riko-system-message__head {
        min-height: 88px;
        grid-template-columns: 46px minmax(0, 1fr) 40px;
        gap: 12px;
        padding: 17px 16px;
    }

    #system-message-container .riko-system-message__icon {
        width: 46px;
        height: 46px;
        font-size: 19px;
    }

    #system-message-container .riko-system-message__title {
        font-size: 22px;
    }

    #system-message-container .riko-system-message__close {
        width: 40px;
        height: 40px;
    }

    #system-message-container .riko-system-message__list {
        padding: 14px 16px 17px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #system-message-container .riko-system-message__dialog {
        animation: none;
    }
}

/* Compact account control integrated next to the Jumbo action. */
.riko-global-header .riko-header-controls {
    gap: 8px;
}

.riko-global-header .riko-header-account {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    min-width: 0;
}

.riko-global-header .riko-header-account > div,
.riko-global-header .riko-header-account > div > div,
.riko-global-header .riko-header-account [id^="sclogin-"],
.riko-global-header .riko-header-account .riko-sclogin-bar {
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.riko-global-header .riko-header-account .riko-sclogin-desktop {
    display: none !important;
}

.riko-global-header .riko-header-account .riko-sclogin-mobile,
.riko-global-header .riko-header-account .riko-sclogin-mobile.pull-right {
    display: inline-flex !important;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
}

.riko-global-header .riko-header-account .riko-sclogin-mobile-button,
.riko-global-header .riko-header-account a.riko-sclogin-mobile-button {
    display: inline-flex !important;
    width: auto !important;
    min-width: 108px !important;
    height: 42px !important;
    min-height: 42px !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid color-mix(in srgb, var(--riko-action) 28%, transparent) !important;
    border-radius: 8px !important;
    color: var(--riko-ink) !important;
    background: color-mix(in srgb, var(--riko-surface) 94%, transparent) !important;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--riko-brand-deep) 10%, transparent) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap;
}

.riko-global-header .riko-header-account .riko-sclogin-mobile-button:hover,
.riko-global-header .riko-header-account .riko-sclogin-mobile-button:focus {
    border-color: color-mix(in srgb, var(--riko-focus) 56%, transparent) !important;
    color: var(--riko-ink) !important;
    background: var(--riko-surface) !important;
    outline: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--riko-action) 16%, transparent), 0 8px 18px color-mix(in srgb, var(--riko-brand-deep) 12%, transparent) !important;
}

.riko-global-header .riko-header-account .riko-sclogin-mobile-button i {
    color: inherit !important;
    font-size: 15px !important;
}

@media (min-width: 901px) and (max-width: 1320px) {
    .riko-global-header .riko-header-account .riko-sclogin-mobile-button,
    .riko-global-header .riko-header-account a.riko-sclogin-mobile-button {
        width: 42px !important;
        min-width: 42px !important;
        padding: 0 !important;
        overflow: hidden;
        font-size: 0 !important;
    }

    .riko-global-header .riko-header-account .riko-sclogin-mobile-button i {
        margin: 0 !important;
        font-size: 16px !important;
    }

}

@media (max-width: 900px) {
    .riko-global-header .riko-header-controls {
        gap: 6px;
    }

    .riko-global-header .riko-header-account .riko-sclogin-mobile-button,
    .riko-global-header .riko-header-account a.riko-sclogin-mobile-button {
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        padding: 0 !important;
        overflow: hidden;
        font-size: 0 !important;
    }

    .riko-global-header .riko-header-account .riko-sclogin-mobile-button i {
        margin: 0 !important;
        font-size: 16px !important;
    }

    /*
     * The signed-in launcher also carries a notification count. Keep both
     * pieces inside the same 44px target instead of letting the badge enlarge
     * or spill out of the header control.
     */
    body .riko-global-header .riko-header-account .riko-native-account .riko-sclogin-mobile-button.riko-account-launcher {
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        flex: 0 0 44px !important;
        justify-content: center !important;
        gap: 2px !important;
        padding: 2px !important;
        overflow: hidden !important;
        border-radius: 13px !important;
        font-size: 0 !important;
        line-height: 1 !important;
    }

    body .riko-global-header .riko-header-account .riko-native-account .riko-sclogin-mobile-button.riko-account-launcher > span {
        display: none !important;
    }

    body .riko-global-header .riko-header-account .riko-native-account .riko-sclogin-mobile-button.riko-account-launcher > i {
        display: inline-flex !important;
        width: 16px !important;
        height: 16px !important;
        flex: 0 0 16px !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        background: transparent !important;
        font-size: 16px !important;
        line-height: 16px !important;
    }

    body .riko-global-header .riko-header-account .riko-native-account .riko-sclogin-mobile-button.riko-account-launcher > .riko-account-launcher__count {
        position: static !important;
        display: inline-grid !important;
        width: auto !important;
        min-width: 16px !important;
        max-width: 20px !important;
        height: 16px !important;
        min-height: 16px !important;
        flex: 0 1 auto !important;
        place-items: center;
        margin: 0 !important;
        padding: 0 2px !important;
        overflow: hidden;
        border: 0 !important;
        border-radius: 999px !important;
        color: var(--riko-ink) !important;
        background: var(--riko-action-soft) !important;
        font-size: 9px !important;
        font-weight: 900 !important;
        letter-spacing: -.02em;
        line-height: 1 !important;
    }

    body .riko-global-header.is-authenticated .riko-header-account .riko-native-account .riko-sclogin-mobile-button.riko-account-launcher::after {
        display: none !important;
        content: none !important;
    }
}

@media (min-width: 901px) and (max-width: 1320px) {
    .riko-global-header .tm-logo img {
        max-width: 230px !important;
    }

    .riko-global-header .tm-header > .uk-flex {
        gap: 10px;
        margin-left: 12px;
    }

    .riko-global-header .tm-navbar .uk-navbar-nav {
        gap: 2px;
    }

    .riko-global-header .tm-navbar .uk-navbar-nav > li > a {
        height: 42px !important;
        min-height: 42px !important;
        padding-right: 8px !important;
        padding-left: 8px !important;
        font-size: 13px !important;
    }

    .riko-global-header .tm-call-action > div {
        min-width: 92px;
        padding-right: 11px !important;
        padding-left: 11px !important;
    }

    .riko-global-header .tm-minibar .riko-sclogin-field {
        width: 145px !important;
    }
}

@media (min-width: 901px) {
    .riko-global-header .tm-header {
        border-bottom: 1px solid var(--riko-line) !important;
    }

    .riko-global-header .tm-navbar .uk-navbar-nav {
        gap: 6px !important;
    }

    #tm-toolbar.tm-toolbar {
        min-height: 54px !important;
    }

    #tm-toolbar .riko-toolbar-shell,
    #tm-toolbar .uk-container.uk-container-center {
        min-height: 54px !important;
    }

    #tm-toolbar .riko-toolbar-shell > .uk-float-left,
    #tm-toolbar .uk-container.uk-container-center > .uk-float-left {
        order: 0;
        flex: 0 0 auto;
    }

    #tm-toolbar .riko-toolbar-shell > .uk-float-right:not(.uk-hidden-small),
    #tm-toolbar .uk-container.uk-container-center > .uk-float-right:not(.uk-hidden-small) {
        order: 1;
        margin-left: auto !important;
    }

    #tm-toolbar .riko-toolbar-shell > .uk-float-right.uk-hidden-small,
    #tm-toolbar .uk-container.uk-container-center > .uk-float-right.uk-hidden-small {
        order: 2;
        flex: 0 0 auto;
    }

    .riko-global-header .tm-call-action > div {
        min-width: 118px !important;
        min-height: 52px !important;
        border-color: var(--riko-line) !important;
        background: var(--riko-surface) !important;
        box-shadow: inset 0 1px 0 var(--riko-surface), 0 8px 20px color-mix(in srgb, var(--riko-brand-deep) 8%, transparent) !important;
    }

    .riko-global-header .tm-call-action a,
    .riko-global-header .tm-call-action a strong {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: var(--riko-action) !important;
    }

    .riko-global-header .tm-minibar .riko-sclogin-field {
        flex: 0 1 188px !important;
        width: 188px !important;
        min-width: 150px !important;
    }
}

@media (min-width: 901px) and (max-width: 1320px) {
    .riko-global-header .tm-navbar .uk-navbar-nav {
        gap: 3px !important;
    }

    .riko-global-header .tm-minibar .riko-sclogin-field {
        flex-basis: 170px !important;
        width: 170px !important;
        min-width: 138px !important;
    }
}

@media (max-width: 900px) {
    .tm-header-bg {
        height: auto !important;
        min-height: 0 !important;
        padding-bottom: 10px !important;
    }

    body .tm-inner-container.uk-container {
        width: auto !important;
        margin-right: 8px !important;
        margin-left: 8px !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    #tm-toolbar .riko-toolbar-shell {
        display: grid !important;
        width: 100% !important;
        gap: 10px;
    }

    #tm-toolbar .riko-toolbar-r,
    #tm-toolbar .riko-toolbar-search {
        display: none !important;
    }

    .tm-header-container.riko-global-header {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 22px !important;
    }

    .riko-global-header .tm-header {
        min-height: 78px !important;
        padding: 12px !important;
        border-radius: 22px 22px 0 0 !important;
    }

    .riko-global-header .tm-logo.uk-hidden-small {
        display: none !important;
    }

    .riko-global-header .tm-logo-small.uk-visible-small {
        display: inline-flex !important;
    }

    .riko-global-header .tm-logo-small img {
        max-width: 205px !important;
        max-height: 56px !important;
        border-right: 0;
    }

    .riko-global-header .riko-brand-caption {
        max-width: 205px;
        font-size: 8px;
        letter-spacing: 0.08em;
        white-space: normal;
    }

    .riko-global-header .tm-header:before {
        left: min(58vw, 225px);
        background-size: auto 100%;
        opacity: .82;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .18) 18px, #000 56px);
        mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .18) 18px, #000 56px);
    }

    .riko-global-header .tm-header .uk-navbar-toggle {
        display: inline-flex !important;
        width: auto !important;
        min-height: 42px;
        align-items: center;
        padding: 0 14px !important;
        border: 1px solid var(--riko-h-line);
        border-radius: 999px;
        color: var(--riko-h-ink) !important;
        background: var(--riko-surface);
        font-weight: 950;
    }

    .riko-global-header .tm-minibar {
        min-height: 60px !important;
        padding: 10px 12px !important;
    }

    .riko-global-header .tm-minibar .riko-sclogin-desktop {
        display: none !important;
    }

    .riko-global-header .tm-minibar .riko-sclogin-mobile {
        display: flex !important;
        width: 100%;
        justify-content: center;
    }

    .riko-global-header .tm-minibar .riko-sclogin-mobile-button {
        display: inline-flex !important;
        min-height: 42px;
        align-items: center;
        justify-content: center;
        padding: 0 18px !important;
        border-radius: 999px !important;
        color: var(--riko-action-contrast) !important;
        background: var(--riko-action) !important;
        font-weight: 950 !important;
        text-shadow: none !important;
    }
}

@media (max-width: 900px) {
    :is(#offcanvas, #riko-mobile-menu).uk-offcanvas {
        background: color-mix(in srgb, var(--riko-brand-deep) 56%, transparent) !important;
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }

    :is(#offcanvas, #riko-mobile-menu) .uk-offcanvas-bar {
        width: min(372px, 92vw) !important;
        max-width: 92vw !important;
        padding: 18px 16px 22px !important;
        background:
            radial-gradient(ellipse at 22% 0, color-mix(in srgb, var(--riko-brand-end) 20%, transparent), transparent 18rem),
            radial-gradient(ellipse at 86% 42%, color-mix(in srgb, var(--riko-brand-end) 16%, transparent), transparent 18rem),
            linear-gradient(180deg, var(--riko-brand-deep) 0%, var(--riko-brand-deep) 46%, var(--riko-brand-deep) 100%) !important;
        border-left: 1px solid color-mix(in srgb, var(--riko-line) 20%, transparent);
        box-shadow: -28px 0 70px color-mix(in srgb, var(--riko-brand-deep) 46%, transparent) !important;
        color: var(--riko-on-brand) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    :is(#offcanvas, #riko-mobile-menu) .uk-offcanvas-bar:before {
        display: block;
        margin: 0 0 14px;
        padding: 16px 126px 17px 18px;
        border: 1px solid color-mix(in srgb, var(--riko-line) 18%, transparent);
        border-radius: 22px;
        background:
            radial-gradient(circle at 87% 22%, color-mix(in srgb, var(--riko-inverse) 20%, transparent) 0 1.4px, transparent 2.4px),
            radial-gradient(circle at 66% 62%, color-mix(in srgb, var(--riko-brand-end) 24%, transparent) 0 1.2px, transparent 2.2px),
            linear-gradient(135deg, color-mix(in srgb, var(--riko-inverse) 10%, transparent), color-mix(in srgb, var(--riko-inverse) 3.5%, transparent));
        box-shadow: inset 0 1px 0 color-mix(in srgb, var(--riko-inverse) 14%, transparent), 0 14px 34px color-mix(in srgb, var(--riko-brand-deep) 18%, transparent);
        color: var(--riko-on-brand);
        content: "Navigation Rikoooo";
        font-size: 20px;
        font-weight: 950;
        letter-spacing: .01em;
        line-height: 1.1;
    }

    :is(#offcanvas, #riko-mobile-menu) .uk-offcanvas-bar:after {
        position: absolute;
        top: 28px;
        right: 28px;
        width: 42px;
        height: 42px;
        border: 1px solid color-mix(in srgb, var(--riko-line) 20%, transparent);
        border-radius: 50%;
        background:
            radial-gradient(circle, color-mix(in srgb, var(--riko-brand-end) 28%, transparent) 0 2px, transparent 3px),
            conic-gradient(from -45deg, transparent 0 66deg, color-mix(in srgb, var(--riko-brand-end) 30%, transparent) 67deg 72deg, transparent 73deg 360deg);
        opacity: .8;
        pointer-events: none;
        content: "";
    }

    :is(#offcanvas, #riko-mobile-menu) .uk-panel {
        position: absolute;
        top: 29px;
        right: 26px;
        z-index: 3;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    :is(#offcanvas, #riko-mobile-menu) .uk-panel > span {
        display: inline-flex !important;
        gap: 7px;
        align-items: center;
        padding: 4px;
        border: 1px solid color-mix(in srgb, var(--riko-inverse) 14%, transparent);
        border-radius: 999px;
        background: color-mix(in srgb, var(--riko-inverse) 8%, transparent);
    }

    :is(#offcanvas, #riko-mobile-menu) .uk-panel a[title] {
        display: inline-flex !important;
        width: 36px;
        height: 28px;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: color-mix(in srgb, var(--riko-inverse) 8%, transparent);
    }

    :is(#offcanvas, #riko-mobile-menu) .uk-panel a[title]:hover,
    :is(#offcanvas, #riko-mobile-menu) .uk-panel a[title]:focus {
        background: color-mix(in srgb, var(--riko-inverse) 18%, transparent);
    }

    :is(#offcanvas, #riko-mobile-menu) .uk-panel span[class^="sprites_"] {
        width: 18px !important;
        height: 12px !important;
        overflow: hidden;
        border-radius: 2px;
        color: transparent !important;
        text-indent: -999px;
    }

    :is(#offcanvas, #riko-mobile-menu) .uk-nav-offcanvas {
        position: relative;
        z-index: 1;
        display: grid !important;
        gap: 8px;
        margin: 0 0 12px !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    :is(#offcanvas, #riko-mobile-menu) .uk-nav-offcanvas + .uk-nav-offcanvas {
        margin-top: 14px !important;
        padding-top: 14px !important;
        border-top: 1px solid color-mix(in srgb, var(--riko-line) 12%, transparent) !important;
    }

    :is(#offcanvas, #riko-mobile-menu) .uk-nav-offcanvas > li {
        position: relative;
        margin: 0 !important;
        border: 1px solid color-mix(in srgb, var(--riko-line) 15%, transparent);
        border-radius: 18px;
        background: color-mix(in srgb, var(--riko-inverse) 6.5%, transparent);
        box-shadow: inset 0 1px 0 color-mix(in srgb, var(--riko-inverse) 8%, transparent);
        overflow: hidden;
    }

    :is(#offcanvas, #riko-mobile-menu) .uk-nav-offcanvas > li > a:not(.tm-toggle-offcanvas) {
        display: flex !important;
        min-height: 52px;
        align-items: center;
        gap: 11px;
        padding: 0 54px 0 15px !important;
        color: color-mix(in srgb, var(--riko-on-brand) 96%, transparent) !important;
        background: transparent !important;
        font-size: 15px !important;
        font-weight: 900 !important;
        line-height: 1.18 !important;
        text-decoration: none !important;
        text-shadow: none !important;
    }

    :is(#offcanvas, #riko-mobile-menu) .uk-nav-parent-icon > .uk-parent > a:not(.tm-toggle-offcanvas):after,
    :is(#offcanvas, #riko-mobile-menu) .uk-nav-parent-icon > .uk-parent > a:not(.tm-toggle-offcanvas):before {
        display: none !important;
        content: none !important;
    }

    :is(#offcanvas, #riko-mobile-menu) .uk-nav-offcanvas > li > a:not(.tm-toggle-offcanvas) i {
        display: inline-grid;
        width: 28px;
        height: 28px;
        flex: 0 0 28px;
        place-items: center;
        border-radius: 10px;
        color: var(--riko-link) !important;
        background: linear-gradient(180deg, var(--riko-action-soft), color-mix(in srgb, var(--riko-action) 22%, var(--riko-surface)));
        font-size: 13px !important;
        line-height: 1 !important;
        box-shadow: 0 8px 18px color-mix(in srgb, var(--riko-action) 18%, transparent);
    }

    :is(#offcanvas, #riko-mobile-menu) .uk-nav-offcanvas > li > a:not(.tm-toggle-offcanvas):hover,
    :is(#offcanvas, #riko-mobile-menu) .uk-nav-offcanvas > li > a:not(.tm-toggle-offcanvas):focus,
    :is(#offcanvas, #riko-mobile-menu) .uk-nav-offcanvas > li.uk-open > a:not(.tm-toggle-offcanvas) {
        background: color-mix(in srgb, var(--riko-inverse) 9.5%, transparent) !important;
    }

    :is(#offcanvas, #riko-mobile-menu) .tm-toggle-offcanvas {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        display: grid !important;
        width: 34px !important;
        height: 34px !important;
        place-items: center;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid color-mix(in srgb, var(--riko-line) 22%, transparent);
        border-radius: 12px;
        background: color-mix(in srgb, var(--riko-inverse) 9%, transparent) !important;
        color: var(--riko-on-brand) !important;
        text-decoration: none !important;
        box-shadow: none !important;
    }

    :is(#offcanvas, #riko-mobile-menu) .tm-toggle-offcanvas:before,
    :is(#offcanvas, #riko-mobile-menu) .uk-parent > a.tm-toggle-offcanvas:before {
        display: block !important;
        color: var(--riko-on-brand) !important;
        font-family: Arial, sans-serif !important;
        font-size: 23px !important;
        font-weight: 800;
        line-height: 1;
        content: "+" !important;
    }

    :is(#offcanvas, #riko-mobile-menu) .uk-parent.uk-open > .tm-toggle-offcanvas:before,
    :is(#offcanvas, #riko-mobile-menu) .uk-parent[aria-expanded="true"] > .tm-toggle-offcanvas:before {
        content: "-" !important;
    }

    :is(#offcanvas, #riko-mobile-menu) .uk-nav-offcanvas .uk-nav-sub {
        display: grid !important;
        gap: 7px;
        margin: 0 !important;
        padding: 0 12px 13px 56px !important;
        background: transparent !important;
    }

    :is(#offcanvas, #riko-mobile-menu) .uk-nav-offcanvas .uk-nav-sub > li {
        margin: 0 !important;
    }

    :is(#offcanvas, #riko-mobile-menu) .uk-nav-offcanvas .uk-nav-sub a {
        display: flex !important;
        min-height: 38px;
        align-items: center;
        gap: 9px;
        padding: 0 12px !important;
        border: 1px solid color-mix(in srgb, var(--riko-line) 12%, transparent);
        border-radius: 13px;
        color: color-mix(in srgb, var(--riko-on-brand) 88%, transparent) !important;
        background: color-mix(in srgb, var(--riko-inverse) 5.5%, transparent) !important;
        font-size: 13px !important;
        font-weight: 820 !important;
        line-height: 1.1 !important;
        text-decoration: none !important;
        text-shadow: none !important;
    }

    :is(#offcanvas, #riko-mobile-menu) .uk-nav-offcanvas .uk-nav-sub a:hover,
    :is(#offcanvas, #riko-mobile-menu) .uk-nav-offcanvas .uk-nav-sub a:focus {
        color: var(--riko-on-brand) !important;
        background: color-mix(in srgb, var(--riko-on-brand-muted) 12%, transparent) !important;
    }
}

.riko-global-header .tm-navbar.uk-navbar .uk-dropdown-navbar .uk-nav-navbar > li > a,
.riko-global-header .tm-navbar.uk-navbar .uk-dropdown .uk-nav-navbar > li > a {
    min-height: 42px !important;
    padding: 0 14px 0 18px !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    color: var(--riko-h-ink) !important;
    background: transparent !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 42px !important;
    text-shadow: none !important;
}

.riko-global-header .tm-navbar.uk-navbar .uk-dropdown-navbar .uk-nav-navbar > li > a:hover,
.riko-global-header .tm-navbar.uk-navbar .uk-dropdown-navbar .uk-nav-navbar > li > a:focus,
.riko-global-header .tm-navbar.uk-navbar .uk-dropdown-navbar .uk-nav-navbar > li.uk-active > a,
.riko-global-header .tm-navbar.uk-navbar .uk-dropdown .uk-nav-navbar > li > a:hover,
.riko-global-header .tm-navbar.uk-navbar .uk-dropdown .uk-nav-navbar > li > a:focus,
.riko-global-header .tm-navbar.uk-navbar .uk-dropdown .uk-nav-navbar > li.uk-active > a {
    border-color: color-mix(in srgb, var(--riko-focus) 18%, transparent) !important;
    color: var(--riko-focus) !important;
    background: linear-gradient(90deg, color-mix(in srgb, var(--riko-action-soft-hover) 95%, transparent), color-mix(in srgb, var(--riko-surface) 88%, transparent)) !important;
    transform: translateX(2px);
}

#tm-toolbar.tm-toolbar form.uk-search input.uk-search-field,
#tm-toolbar.tm-toolbar form.uk-search input.uk-search-field:focus,
#tm-toolbar.tm-toolbar form.uk-search input.uk-search-field:active {
    border: 0 !important;
    outline: 0 !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

@media (max-width: 900px) {
    :is(#offcanvas, #riko-mobile-menu) .uk-offcanvas-bar.riko-mobile-offcanvas-ready {
        width: min(360px, 92vw) !important;
        max-width: 92vw !important;
        padding: 14px 14px 20px !important;
        background:
            radial-gradient(ellipse at 16% 0, color-mix(in srgb, var(--riko-brand-end) 20%, transparent), transparent 17rem),
            radial-gradient(ellipse at 92% 36%, color-mix(in srgb, var(--riko-brand-end) 17%, transparent), transparent 17rem),
            linear-gradient(180deg, var(--riko-brand-deep) 0%, var(--riko-brand-deep) 48%, var(--riko-brand-deep) 100%) !important;
    }

    :is(#offcanvas, #riko-mobile-menu) .uk-offcanvas-bar.riko-mobile-offcanvas-ready:before,
    :is(#offcanvas, #riko-mobile-menu) .uk-offcanvas-bar.riko-mobile-offcanvas-ready:after {
        display: none !important;
        content: none !important;
    }

    :is(#offcanvas, #riko-mobile-menu) .riko-offcanvas-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
        margin: 0 0 10px;
        padding: 13px;
        border: 1px solid color-mix(in srgb, var(--riko-line) 18%, transparent);
        border-radius: 20px;
        background:
            radial-gradient(circle at 85% 18%, color-mix(in srgb, var(--riko-inverse) 16%, transparent) 0 1.6px, transparent 2.6px),
            linear-gradient(135deg, color-mix(in srgb, var(--riko-inverse) 12%, transparent), color-mix(in srgb, var(--riko-inverse) 4.5%, transparent));
        box-shadow: inset 0 1px 0 color-mix(in srgb, var(--riko-inverse) 14%, transparent), 0 14px 34px color-mix(in srgb, var(--riko-brand-deep) 18%, transparent);
    }

    :is(#offcanvas, #riko-mobile-menu) .riko-offcanvas-copy {
        display: grid;
        gap: 3px;
        min-width: 0;
    }

    :is(#offcanvas, #riko-mobile-menu) .riko-offcanvas-eyebrow {
        color: color-mix(in srgb, var(--riko-on-brand-muted) 88%, transparent);
        font-size: 11px;
        font-weight: 950;
        letter-spacing: .11em;
        line-height: 1;
        text-transform: uppercase;
    }

    :is(#offcanvas, #riko-mobile-menu) .riko-offcanvas-title {
        color: var(--riko-on-brand);
        font-size: 22px;
        font-weight: 950;
        line-height: 1.05;
    }

    :is(#offcanvas, #riko-mobile-menu) .riko-offcanvas-close {
        display: inline-flex;
        min-height: 38px;
        align-items: center;
        gap: 8px;
        padding: 0 10px 0 13px;
        border: 1px solid color-mix(in srgb, var(--riko-line) 30%, transparent);
        border-radius: 999px;
        color: var(--riko-on-brand);
        background: color-mix(in srgb, var(--riko-inverse) 10%, transparent);
        box-shadow: inset 0 1px 0 color-mix(in srgb, var(--riko-inverse) 12%, transparent);
        font: inherit;
        font-size: 13px;
        font-weight: 950;
        line-height: 38px;
        cursor: pointer;
    }

    :is(#offcanvas, #riko-mobile-menu) .riko-offcanvas-close b {
        display: grid;
        width: 22px;
        height: 22px;
        place-items: center;
        border-radius: 50%;
        color: var(--riko-ink);
        background: linear-gradient(180deg, var(--riko-surface-soft), var(--riko-brand-end));
        font-size: 14px;
        font-weight: 950;
        line-height: 1;
    }

    :is(#offcanvas, #riko-mobile-menu) .riko-offcanvas-close:hover,
    :is(#offcanvas, #riko-mobile-menu) .riko-offcanvas-close:focus {
        border-color: color-mix(in srgb, var(--riko-focus-on-brand) 48%, transparent);
        background: color-mix(in srgb, var(--riko-inverse) 16%, transparent);
        outline: 0;
    }

    :is(#offcanvas, #riko-mobile-menu) .uk-offcanvas-bar.riko-mobile-offcanvas-ready .uk-panel {
        position: static;
        display: flex;
        justify-content: flex-start;
        margin: 0 0 12px !important;
        padding: 0 !important;
    }

    :is(#offcanvas, #riko-mobile-menu) .uk-offcanvas-bar.riko-mobile-offcanvas-ready .uk-panel > span {
        padding: 4px;
        border-color: color-mix(in srgb, var(--riko-inverse) 16%, transparent);
        background: color-mix(in srgb, var(--riko-inverse) 7.5%, transparent);
    }

    :is(#offcanvas, #riko-mobile-menu) .uk-offcanvas-bar.riko-mobile-offcanvas-ready .uk-nav-offcanvas {
        gap: 7px;
        margin-top: 0 !important;
    }

    :is(#offcanvas, #riko-mobile-menu) .uk-offcanvas-bar.riko-mobile-offcanvas-ready .uk-nav-offcanvas > li {
        border-radius: 17px;
        background:
            radial-gradient(ellipse at 100% 0, color-mix(in srgb, var(--riko-brand-end) 10%, transparent), transparent 11rem),
            linear-gradient(135deg, color-mix(in srgb, var(--riko-inverse) 8.2%, transparent), color-mix(in srgb, var(--riko-inverse) 4.5%, transparent));
    }

    :is(#offcanvas, #riko-mobile-menu) .uk-offcanvas-bar.riko-mobile-offcanvas-ready .uk-nav-offcanvas > li > a:not(.tm-toggle-offcanvas) {
        min-height: 49px;
        padding-right: 52px !important;
        padding-left: 13px !important;
    }

    :is(#offcanvas, #riko-mobile-menu) .uk-offcanvas-bar.riko-mobile-offcanvas-ready .uk-nav-offcanvas > li.uk-open,
    :is(#offcanvas, #riko-mobile-menu) .uk-offcanvas-bar.riko-mobile-offcanvas-ready .uk-nav-offcanvas > li:focus-within {
        border-color: color-mix(in srgb, var(--riko-focus-on-brand) 28%, transparent);
        background:
            radial-gradient(ellipse at 100% 0, color-mix(in srgb, var(--riko-on-brand-muted) 16%, transparent), transparent 11rem),
            linear-gradient(135deg, color-mix(in srgb, var(--riko-inverse) 10.5%, transparent), color-mix(in srgb, var(--riko-inverse) 5.5%, transparent));
    }

    :is(#offcanvas, #riko-mobile-menu) .uk-offcanvas-bar.riko-mobile-offcanvas-ready .tm-toggle-offcanvas {
        top: 8px !important;
        right: 8px !important;
        width: 32px !important;
        height: 32px !important;
    }

    :is(#offcanvas, #riko-mobile-menu) .uk-offcanvas-bar.riko-mobile-offcanvas-ready .uk-nav-offcanvas .uk-nav-sub {
        gap: 8px;
        margin: 7px 10px 12px 50px !important;
        padding: 9px 0 0 !important;
        border-top: 1px solid color-mix(in srgb, var(--riko-line) 12%, transparent);
    }

    :is(#offcanvas, #riko-mobile-menu) .uk-offcanvas-bar.riko-mobile-offcanvas-ready .uk-nav-offcanvas .uk-nav-sub a {
        min-height: 40px;
        border-color: color-mix(in srgb, var(--riko-line) 15%, transparent);
        background:
            linear-gradient(135deg, color-mix(in srgb, var(--riko-inverse) 8.2%, transparent), color-mix(in srgb, var(--riko-inverse) 4%, transparent)) !important;
        box-shadow: inset 0 1px 0 color-mix(in srgb, var(--riko-inverse) 6%, transparent);
    }
}

.riko-account-modal,
.riko-account-modal * {
    box-sizing: border-box;
}

.riko-account-modal {
    position: fixed;
    inset: 0;
    z-index: 100500;
    display: grid;
    align-items: center;
    justify-items: center;
    --riko-account-edge: max(16px, env(safe-area-inset-top), env(safe-area-inset-bottom));
    padding: var(--riko-account-edge) max(12px, env(safe-area-inset-right)) var(--riko-account-edge) max(12px, env(safe-area-inset-left));
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
}

.riko-account-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.riko-account-modal-backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--riko-brand-deep) 65%, transparent);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.riko-account-sheet {
    position: relative;
    width: min(440px, 100%);
    max-height: calc(100vh - 2 * var(--riko-account-edge));
    max-height: calc(100dvh - 2 * var(--riko-account-edge));
    overflow: hidden auto;
    overscroll-behavior: contain;
    scroll-padding: 16px;
    border: 1px solid color-mix(in srgb, var(--riko-surface) 25%, transparent);
    border-radius: 18px;
    color: var(--riko-ink);
    background: var(--riko-surface);
    box-shadow: 0 20px 64px color-mix(in srgb, var(--riko-brand-deep) 30%, transparent);
    transform: translateY(-8px) scale(.985);
    transition: transform .24s ease;
}

.riko-account-modal.is-open .riko-account-sheet {
    transform: translateY(0) scale(1);
}

.riko-account-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 4;
    display: flex;
    width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    color: var(--riko-on-brand);
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.riko-account-close > span {
    display: none;
}

.riko-account-close b {
    font-size: 28px;
    font-weight: 400;
    line-height: 1;
}

.riko-account-close:hover {
    background: color-mix(in srgb, var(--riko-surface) 12%, transparent);
}

.riko-account-hero {
    position: relative;
    padding: 22px;
    color: var(--riko-on-brand);
    background: var(--riko-brand-deep);
}

.riko-account-kicker {
    display: block;
    margin-bottom: 8px;
    padding-right: 36px;
    color: var(--riko-on-brand-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    line-height: 1.4;
    text-transform: uppercase;
}

.riko-account-modal[data-riko-account-mode="login"] .riko-account-kicker {
    display: none;
}

.riko-account-hero h2 {
    margin: 0 0 8px !important;
    padding-right: 32px;
    color: var(--riko-on-brand) !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-shadow: none !important;
}

.riko-account-hero p {
    margin: 0 !important;
    color: var(--riko-on-brand-muted) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}

.riko-account-content {
    display: grid;
    gap: 18px;
    padding: 20px 22px;
}

.riko-account-modal .riko-mobile-login-form {
    display: grid !important;
    gap: 14px;
    width: 100% !important;
    margin: 0 !important;
}

.riko-account-modal .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.riko-account-modal .riko-mobile-login-form .riko-sclogin-title {
    display: none !important;
}

.riko-account-modal .riko-mobile-login-form .riko-sclogin-field {
    position: relative;
    width: 100% !important;
}

.riko-account-modal .riko-sclogin-field > label {
    display: block;
    margin-bottom: 6px;
    color: var(--riko-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.riko-account-modal .riko-mobile-login-form .riko-sclogin-input {
    width: 100% !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 1px solid var(--riko-line) !important;
    border-radius: 8px !important;
    outline: 0 !important;
    color: var(--riko-h-ink) !important;
    background: var(--riko-surface) !important;
    box-shadow: none !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: normal !important;
}

.riko-account-modal .riko-mobile-login-form .riko-sclogin-password-field .riko-sclogin-input {
    padding-right: 52px !important;
}

.riko-account-modal .riko-mobile-login-form .riko-password-toggle {
    position: absolute;
    top: auto;
    bottom: 2px;
    right: 2px;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 6px;
    color: var(--riko-ink);
    background: transparent;
    transform: none;
    cursor: pointer;
}

.riko-account-modal .riko-password-toggle:hover {
    background: var(--riko-action-soft-hover);
}

.riko-account-modal .riko-mobile-login-form .riko-sclogin-remember {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin: -6px 0;
    color: var(--riko-muted);
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
}

.riko-account-modal .riko-sclogin-remember input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--riko-focus);
}

.riko-account-modal .riko-mobile-login-form .riko-sclogin-remember > span[aria-hidden="true"] {
    display: none;
}

.riko-account-modal .riko-mobile-login-form .riko-remember-text {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}

.riko-account-modal .riko-mobile-login-social .riko-sclogin-passkey svg {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
}

.riko-account-modal .riko-mobile-login-form .riko-sclogin-input:focus {
    border-color: var(--riko-focus) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--riko-brand-deep) 16%, transparent) !important;
}

.riko-account-modal .riko-mobile-login-form .riko-sclogin-input::placeholder {
    color: var(--riko-muted) !important;
}

.riko-account-modal .riko-mobile-login-form .forgot.btn {
    display: none !important;
}

.riko-account-modal .riko-mobile-login-form .riko-sclogin-actions {
    display: grid !important;
    gap: 10px;
    margin-top: 2px !important;
}

.riko-account-modal .riko-mobile-login-form .riko-sclogin-submit {
    display: inline-flex !important;
    width: 100% !important;
    min-height: 48px !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    border: 0 !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    color: var(--riko-action-contrast) !important;
    background: var(--riko-action) !important;
    box-shadow: none;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-shadow: none !important;
}

.riko-account-modal .riko-mobile-login-form .riko-sclogin-submit:hover {
    background: var(--riko-action-hover) !important;
}

.riko-account-modal .riko-mobile-login-social {
    display: grid !important;
    align-items: center;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--riko-line);
}

.riko-account-modal .riko-mobile-login-social > span {
    color: var(--riko-muted) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.4;
}

.riko-account-modal .riko-mobile-login-social > i {
    display: none !important;
}

.riko-account-modal .riko-mobile-login-social .riko-sclogin-google,
.riko-account-modal .riko-mobile-login-social .riko-sclogin-passkey {
    display: flex !important;
    width: 100% !important;
    min-height: 46px !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 12px !important;
    border: 1px solid var(--riko-line) !important;
    border-radius: 8px !important;
    color: var(--riko-ink) !important;
    background: var(--riko-surface) !important;
    box-shadow: none;
    font: inherit;
    font-size: 14px !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    cursor: pointer;
}

.riko-account-modal .riko-account-method-label {
    font-weight: 600;
}

.riko-account-modal .riko-google-mark {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
}

.riko-account-modal .riko-mobile-login-social .riko-sclogin-google:hover,
.riko-account-modal .riko-mobile-login-social .riko-sclogin-passkey:hover {
    background: var(--riko-action-soft-hover) !important;
}

.riko-account-footer {
    padding: 0 22px 16px;
}

.riko-account-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 8px;
}

.riko-account-link-primary,
.riko-account-link-secondary {
    display: flex !important;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 10px 12px !important;
    border-radius: 8px;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-align: center;
    text-decoration: none !important;
    text-shadow: none !important;
}

.riko-account-link-primary {
    grid-column: 1 / -1;
    margin-bottom: 8px;
    border: 1px solid var(--riko-line);
    color: var(--riko-link) !important;
    background: var(--riko-surface);
}

.riko-account-link-secondary {
    color: var(--riko-ink) !important;
    background: transparent;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    font-weight: 400 !important;
}

.riko-account-modal :is(a, button, input[type="checkbox"]):focus-visible {
    outline: 2px solid var(--riko-focus) !important;
    outline-offset: 3px;
}

.riko-account-modal .riko-account-close:focus-visible {
    outline-color: var(--riko-surface) !important;
    outline-offset: -4px;
}

@media (max-width: 700px) {
    .riko-account-modal {
        align-items: end;
    }

    .riko-account-hero {
        padding: 20px 18px;
    }

    .riko-account-hero h2 {
        font-size: 25px !important;
    }

    .riko-account-content {
        padding: 18px;
    }

    .riko-account-footer {
        padding: 0 18px 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .riko-account-modal,
    .riko-account-sheet {
        transition: none;
    }
}

.riko-account-modal[data-riko-account-mode="account"] .riko-account-content {
    padding-bottom: 12px;
}

.riko-account-menu {
    display: grid;
    gap: 10px;
}

.riko-account-menu-link,
.riko-account-link-danger {
    position: relative;
    display: flex !important;
    min-height: 54px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 16px !important;
    border-radius: 18px;
    font-size: 15px !important;
    font-weight: 940 !important;
    line-height: 1.15 !important;
    text-decoration: none !important;
    text-shadow: none !important;
}

.riko-account-menu-link {
    border: 1px solid color-mix(in srgb, var(--riko-line) 20%, transparent);
    color: var(--riko-h-ink) !important;
    background:
        radial-gradient(ellipse at 100% 0, color-mix(in srgb, var(--riko-brand-end) 12%, transparent), transparent 9rem),
        var(--riko-surface);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--riko-brand-deep) 8%, transparent);
}

.riko-account-menu-link:after,
.riko-account-link-danger:after {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    place-items: center;
    border-radius: 50%;
    content: ">";
    font-size: 15px;
    font-weight: 950;
    line-height: 1;
}

.riko-account-menu-link:after {
    color: var(--riko-ink);
    background: linear-gradient(180deg, var(--riko-surface-soft), var(--riko-brand-end));
}

.riko-account-menu-link.is-primary {
    color: var(--riko-action-contrast) !important;
    border-color: color-mix(in srgb, var(--riko-action) 18%, transparent);
    background:
        radial-gradient(ellipse at 100% 0, color-mix(in srgb, var(--riko-on-brand-muted) 28%, transparent), transparent 10rem),
        linear-gradient(135deg, var(--riko-action) 0%, var(--riko-action) 100%);
}

.riko-account-menu-link.is-primary:after {
    color: var(--riko-link);
    background: var(--riko-surface);
}

.riko-account-menu-link .riko-account-link__label {
    min-width: 0;
    flex: 1 1 auto;
}

.riko-account-menu-link__status {
    display: inline-flex;
    min-height: 27px;
    flex: 0 0 auto;
    align-items: center;
    padding: 0 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.riko-account-menu-link__status.is-current {
    border-color: color-mix(in srgb, var(--riko-action) 16%, transparent);
    color: var(--riko-action);
    background: var(--riko-surface-soft);
}

.riko-account-menu-link__status.is-attention {
    border-color: color-mix(in srgb, var(--riko-warning) 20%, transparent);
    color: var(--riko-warning);
    background: color-mix(in srgb, var(--riko-warning) 9%, var(--riko-surface));
}

.riko-account-menu-link__status.is-pending {
    border-color: color-mix(in srgb, var(--riko-brand) 18%, transparent);
    color: var(--riko-ink);
    background: var(--riko-surface-soft);
}

.riko-account-menu-link.is-primary .riko-account-menu-link__status {
    border-color: color-mix(in srgb, var(--riko-inverse) 28%, transparent);
    color: var(--riko-action-contrast);
    background: color-mix(in srgb, var(--riko-inverse) 14%, transparent);
}

.riko-account-link-danger {
    border: 1px solid color-mix(in srgb, var(--riko-danger) 20%, transparent);
    color: var(--riko-danger) !important;
    background: color-mix(in srgb, var(--riko-danger) 92%, transparent);
}

button.riko-account-link-danger {
    width: 100%;
    font: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.riko-account-link-danger:after {
    color: var(--riko-danger);
    background: color-mix(in srgb, var(--riko-danger) 12%, transparent);
}

.riko-account-modal-open {
    overflow: hidden !important;
}