@layer reset, theme, base, vendor, layout, components, utilities;

/* filtr żałobny
body {
	filter: grayscale(100%) !important;
}
*/

/* filtr inwersji kolorów   
body {
	filter: invert(100%);
	background: #000 !important;
}

img {
	filter: invert();
}
*/

@layer reset {

    * {
        box-sizing: border-box;
    }
    /*
      1. Add the correct height in Firefox.
      2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
      3. Reset the default border style to a 1px solid border.
    */
    hr {
        height: 0; /* 1 */
        color: inherit; /* 2 */
        border-top-width: 1px; /* 3 */
    }

    /*
      Reset links to optimize for opt-in styling instead of opt-out.
    */
    a {
        color: inherit;
        text-decoration: inherit;
    }

    /*
        This helps to avoid unexpected alignment issues that you often run into using the browser default of display: inline.
    */
    img, svg, video, canvas, audio, iframe, embed, object {
        vertical-align: middle;
        display: block;
    }
}

@layer theme {
    :root, :root:has(input.theme-controller[value=light]:checked), [data-theme=light] {
        /* = Greyscale colors = */
        --white: #fff;
        --black: #000;
        --greyscale-10: #F5F5F5;
        --greyscale-20: #E6E6E6;
        --greyscale-30: #D2D2D2;
        --greyscale-40: #B4B4B4;
        --greyscale-50: #797979;
        --greyscale-60: #646464;
        --greyscale-70: #505050;
        --greyscale-80: #3C3C3C;
        --greyscale-90: #1E1E1E;

        /* = Brand Yellow UMK = */
        --brand-yellow-10: #FFFBED;
        --brand-yellow-20: #FFF7D6;
        --brand-yellow-30: #FFEFAE;
        --brand-yellow-40: #FFE782;
        --brand-yellow-50: #FFDE56;
        --brand-yellow-60: #FFCD00;
        --brand-yellow-70: #D5AB00;
        --brand-yellow-80: #937600;
        --brand-yellow-90: #856B00;
        --brand-yellow-95: #685400;
        --brand-yellow-100: #403400;

        /* = Brand Blue UMK = */
        --brand-blue-10: #EBF4FF;
        --brand-blue-20: #CCE2F9;
        --brand-blue-30: #8EB9E7;
        --brand-blue-40: #5897DC;
        --brand-blue-50: #2979D2;
        --brand-blue-60: #0050AA;
        --brand-blue-70: #014694;
        --brand-blue-80: #023A7A;
        --brand-blue-90: #002D60;
        --brand-blue-100: #002043;

        /* = Yellow UMK = */
        --yellow-10: #FEFBEC;
        --yellow-90: #b35c00;

        /* = Blue UMK = */
        --blue-10: #F3F5FF;
        --blue-90: #0e55dd;

        /* = Green UMK = */
        --green-10: #F0FDF6;
        --green-90: #00843b;

        /* = Red UMK = */
        --red-10: #FCF3F2;
        --red-90: #e10d00;

        /* = Backgrounds = */
        --bg-neutral-primary: var(--white);
        --bg-neutral-secondary: var(--greyscale-10);
        --bg-neutral-tertiary: var(--greyscale-20);
        --bg-neutral-disabled: var(--greyscale-30);

        --bg-neutral-inverse-primary: var(--greyscale-90);
        --bg-neutral-inverse-secondary: var(--greyscale-80);
        --bg-neutral-inverse-tertiary: var(--greyscale-70);

        /* = Brand Backgrounds = */
        --bg-brand-y-primary: var(--brand-yellow-50);
        --bg-brand-y-secondary: var(--brand-yellow-30);
        --bg-brand-y-tertiary: var(--brand-yellow-10);

        --bg-brand-b-primary: var(--brand-blue-60);
        --bg-brand-b-secondary: var(--brand-blue-40);
        --bg-brand-b-tertiary: var(--brand-blue-20);

        /* = Semantic success backgrounds = */
        --bg-success: var(--green-90);
        --bg-success-subtle: var(--green-10);

        --bg-warning: var(--yellow-90);
        --bg-warning-subtle: var(--yellow-10);

        --bg-error: var(--red-90);
        --bg-error-subtle: var(--red-10);

        --bg-info: var(--blue-90);
        --bg-info-subtle: var(--blue-10);

        --text-neutral-primary: var(--greyscale-90);
        --text-neutral-secondary: var(--greyscale-70);
        --text-neutral-teritary: var(--greyscale-60);
        --text-neutral-disabled: var(--greyscale-40);

        --text-neutral-inverse-primary: var(--white);
        --text-neutral-inverse-secondary: var(--greyscale-10);
        --text-neutral-inverse-teritary: var(--greyscale-20);

        --text-success: var(--green-90);
        --text-success-inverse: var(--green-10);

        --text-warning: var(--yellow-90);
        --text-warning-inverse: var(--yellow-10);

        --text-error: var(--red-90);
        --text-error-inverse: var(--red-10);

        --text-info: var(--blue-90);
        --text-info-inverse: var(--blue-10);

        --text-calendar: #0964d9;
        --text-calendar-inverse: var(--blue-10);

        /* = Borders = */
        --border-neutral-primary: var(--greyscale-90);
        --border-neutral-secondary: var(--greyscale-20);
        --border-neutral-tertiary: var(--greyscale-10);

        --border-neutral-inverse-primary: var(--white);
        --border-neutral-inverse-secondary: var(--greyscale-80);
        --border-neutral-inverse-tertiary: var(--greyscale-70);

        --border-brand-y-primary: var(--brand-yellow-60);
        --border-brand-y-inverse: var(--brand-yellow-70);

        --border-brand-b-primary: var(--brand-blue-60);
        --border-brand-b-inverse: var(--brand-blue-80);

        --border-success: var(--green-90);
        --border-success-inverse: var(--green-10);

        --border-warning: var(--yellow-90);
        --border-warning-inverse: var(--yellow-10);

        --border-error: var(--red-90);
        --border-error-inverse: var(--red-10);

        --border-info: var(--blue-90);
        --border-info-inverse: var(--blue-10);

        /* = Focus outline = */
        --focus: var(--brand-yellow-80);
        --focus-inverse: var(--brand-yellow-60);


        /* Base font */
        --font-sans-serif: Lato, Arial, sans-serif;

        /* Display and h1-h3 font */
        --font-headline: Literata, sans-serif;

        /* Material Symbols */
        --font-material-icon-outlined: 'Material Symbols Outlined';

        /* = Font sizing = */
        --font-base-size: 14px;
        --font-base-line-height: 140%;
        --font-base-letter-spacing: 0;

        /* = Layout = */
        --width-base-sm: 673px;
        --width-base-md: 896px;
        --width-base-lg: 1360px;
        --width-base-xl: 1520px;

        --mobile-margin-vertical: 5%;
        --mobile-margin-horizontal: 2.5%;

        --radius-base-0: 0;
        --radius-base-4: 4px;
        --radius-base-8: 8px;
        --radius-base-12: 12px;

        --shadow-base-1: 0px 10px 33px -4px #0000000f;
        --shadow-base-2: 0px 10px 22px -4px #00000008;


        /* = Buttons = */
        --btn-padding-top: 10px;
        --btn-padding-right: 16px;
        --btn-padding-bottom: 10px;
        --btn-padding-left: 16px;

        --btn-border-width: 1px;
        --btn-border-radius: 8px;

        --outline-width: 2px;
        --outline-offset: 4px;
        --outline-radius: 12px;

        --btn-cursor: pointer;

        /* Default gap size */
        --gap: 12px;
    }
}

@layer base {
    html {
        font-family: var(--font-sans-serif);
        font-size: var(--font-base-size);
        line-height: var(--font-base-line-height);
        letter-spacing: var(--font-base-letter-spacing);
        color: var(--text-neutral-primary);
    }

    body {
        padding: 0;
        margin: 0;
        background-color: var(--bg-neutral-primary);
    }

    .font-headline {
        font-family: var(--font-headline);
    }

    .font-regular {
        font-family: var(--font-sans-serif);
    }

    h1, .h1, h2, .h2, .display-1 {
        font-family: var(--font-headline);
    }

    h3, .h3, h4, .h4, h5, .h5, h6, .h6,
    .quote-1, .quote-2,
    .section-lead, .custom-1,
    .body-l, .body-m-bold, .body-m-medium, .body-s-bold, .body-s-medium,
    .eyebrow-l, .eyebrow-m,
    .caption-bold, .caption-medium,
    .label, .badge {
        font-family: var(--font-sans-serif);
    }

    .display-1 {
        font-weight: 300;
        font-size: clamp(60px, calc(56px + 1.13vw), 72px);
        line-height: 110%;
        letter-spacing: -0.03em;
        margin-block-start: 0;
        margin-block-end: 0;
    }

    h1, .h1 {
        font-weight: 300;
        font-size: clamp(32px, calc(27px + 1.31vw), 46px);
        line-height: 130%;
        letter-spacing: -0.02em;
    }

    h2, .h2 {
        font-weight: 300;
        font-size: clamp(28px, calc(25px + 0.75vw), 36px);
        line-height: 130%;
        letter-spacing: -0.02em;
    }

    h3, .h3 {
        font-weight: 400;
        font-size: clamp(20px, calc(17px + 0.75vw), 28px);
        line-height: 140%;
        letter-spacing: -0.01em;
    }

    h4, .h4 {
        font-weight: 500;
        font-size: clamp(20px, calc(19px + 0.38vw), 24px);
        line-height: 130%;
        letter-spacing: -0.01em;
    }

    h5, .h5 {
        font-weight: 500;
        font-size: clamp(18px, calc(17px + 0.19vw), 20px);
        line-height: 130%;
        letter-spacing: -0.01em;
    }

    h6, .h6 {
        font-weight: 600;
        font-size: clamp(16px, calc(15px + 0.19vw), 18px);
        line-height: 130%;
        letter-spacing: -0.01em;
    }

    .quote-1 {
        font-weight: 400;
        font-style: italic;
        font-size: clamp(16px, calc(15px + 0.38vw), 20px);
        line-height: 130%;
        letter-spacing: 0;
    }

    .quote-2 {
        font-weight: 300;
        font-style: italic;
        font-size: clamp(14px, calc(13px + 0.19vw), 16px);
        line-height: 130%;
        letter-spacing: 0;
    }

    .section-lead {
        font-weight: 500;
        font-size: clamp(24px, calc(21px + 0.75vw), 32px);
        line-height: 140%;
        letter-spacing: -0.01em;
    }

    .custom-1 {
        font-weight: 500;
        font-size: clamp(16px, calc(15px + 0.38vw), 20px);
        line-height: 140%;
        letter-spacing: -0.01em;
    }

    .body-l {
        font-weight: 700;
        font-size: 18px;
        line-height: 150%;
        letter-spacing: 0.02em;
    }

    .body-m-bold {
        font-weight: 700;
        font-size: 16px;
        line-height: 140%;
        letter-spacing: 0;
    }

    .body-m-medium {
        font-weight: 500;
        font-size: 16px;
        line-height: 150%;
        letter-spacing: -0.01em;
    }

    .body-s-bold {
        font-weight: 700;
        font-size: 14px;
        line-height: 140%;
        letter-spacing: 0.01em;
    }

    .body-s-medium {
        font-weight: 500;
        font-size: 14px;
        line-height: 140%;
        letter-spacing: 0;
    }

    .eyebrow-l {
        font-style: normal;
        font-weight: 700;
        font-size: 11px;
        line-height: 120%;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .eyebrow-m {
        font-weight: 900;
        font-size: 10px;
        line-height: 160%;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

    .caption-bold {
        font-weight: 700;
        font-size: 12px;
        line-height: 150%;
        letter-spacing: 0.01em;
    }

    .caption-medium {
        font-weight: 500;
        font-size: 12px;
        line-height: 140%;
        letter-spacing: -0.01em;
    }

    .label {
        font-weight: 400;
        font-size: 14px;
        line-height: 120%;
    }

    .badge {
        font-weight: 400;
        font-size: 12px;
        line-height: 140%;
        letter-spacing: -0.01em;
    }

    .input-text {
        font-weight: 400;
        font-size: 16px;
        line-height: 130%;
    }

    ul, ol {
        margin-top: 1rem; 
        margin-bottom: 1rem;
    }

    li {
        margin-top: 0.5rem; 
        margin-bottom: 0.5rem;
    }

    a:not(.btn) {
        text-decoration: underline;

        &:hover {
            color: var(--text-neutral-teritary);
            text-decoration: underline;
            text-decoration-skip-ink: auto;
            text-decoration-inset: -2px;
        }

        &:focus {
            outline: 2px solid var(--focus);
            border-radius: var(--radius-base-4);
            outline-offset: 1px;
        }

        &.strong {
            color: inherit;
            text-decoration: none !important;
            border-bottom: 2px solid var(--border-brand-y-primary);
            padding-bottom: 3px;
        }

        &.strong:hover {
            color: var(--text-neutral-teritary);
            text-decoration: none;
            border-bottom: 2px solid var(--border-brand-y-primary);
        }

        &.strong:focus {
            outline: 2px solid var(--focus);
            border-radius: var(--radius-base-4);
            outline-offset: 1px;
        }
    }
}

@layer layout {
    .flex {
        --gap: 0;
        display: flex;
        gap: var(--gap);
    }

    .flex-col {
        display: flex;
        flex-direction: column;
    }

    .flex-wrap {
        flex-wrap: wrap;
    }

    .items-center {
        align-items: center;
    }

    .justify-center {
        justify-content: center;
    }

    .justify-between {
        justify-content: space-between;
    }

    .justify-around {
        justify-content: space-around;
    }

    .justify-start {
        justify-content: flex-start;
    }

    .grow {
        flex-grow: 1;
    }
}

@layer utility {
    .gap-12 {
        --gap: 12px;
    }

    .gap-24 {
        --gap: 24px;
    }

    .gap-48 {
        --gap: 48px;
    }

    .m-0 {
        margin: 0;
        margin-block: 0;
    }

    .p-0 {
        padding: 0 !important;
    }

    .mt-0{
        margin-top: 0;
    }
    .mt-2{
        margin-top: 2rem;
    }
    .mt-4{
        margin-top: 4rem;
    }

    .mb-0{
        margin-bottom: 0 !important;
    }

    .mb-2{
        margin-bottom: 2rem;
    }
    .mb-4{
        margin-bottom: 4rem;
    }

    .cover {
        object-fit: cover;
    }

    .contain {
        object-fit: contain;
    }

    .w-full {
        width: 100%;
    }

    .fill-current {
        fill: currentColor;
    }
    .w-\[20\] {
        width: 20px;
    }
    .h-\[20\] {
        height: 20px;
    }

    .anchor {
        display: block;
        margin-top: -74px;
        margin-bottom: 100px;
    }

}

@layer components {
    /* Buttons */
    .btn-group {
        display: flex;
        gap: var(--gap, 10px);
        flex-wrap: wrap;
        flex: 0 1 auto;
    }

    a:where(.btn) {
        text-decoration: none!important;
    }

    .btn {
        --btn-bg-color: transparent;
        --btn-text-color: var(--black);
        display: inline-block;
        padding: var(--btn-padding-top) var(--btn-padding-right) var(--btn-padding-bottom) var(--btn-padding-left);
        border-radius: var(--btn-border-radius);
        font-weight: 700;
        font-size: 14px;
        line-height: 140%;
        letter-spacing: 0.01em;
        color: var(--btn-text-color);
        background-color: var(--btn-bg-color);
        transition: all 0.2s ease-in-out;
        cursor: var(--btn-cursor);
    }

    .btn-success {
        --btn-bg-color: var(--bg-success);
        --btn-text-color: var(--text-success-inverse);
    }

    .btn-disabled {
        --btn-bg-color: var(--bg-neutral-disabled);
        --btn-text-color: var(--text-neutral-disabled);
    }

    .btn:focus-visible {
        outline: 2px solid var(--focus);
        outline-offset: 2px;
    }

    .btn-y-primary {
        --btn-bg-color: var(--bg-brand-y-primary);
        --btn-text-color: var(--text-neutral-primary);
    }

    .btn-y-primary:hover {
        --btn-bg-color: var(--bg-brand-y-secondary);
        --btn-text-color: var(--text-neutral-primary);
    }

    .btn-y-primary:active {
        --btn-bg-color: var(--bg-brand-y-secondary);
        --btn-text-color: var(--text-neutral-secondary);
    }


    .btn-b-primary {
        --btn-bg-color: var(--bg-brand-b-primary);
        --btn-text-color: var(--text-neutral-inverse-primary);
    }

    .btn-b-primary:hover {
        --btn-bg-color: var(--bg-brand-b-secondary);
        --btn-text-color: var(--text-neutral-inverse-primary);
    }

    .btn-b-primary:active {
        --btn-bg-color: var(--bg-brand-b-secondary);
        --btn-text-color: var(--text-neutral-inverse-secondary);
    }

    .btn-secondary {
        --btn-bg-color: var(--bg-neutral-inverse-primary);
        --btn-text-color: var(--text-neutral-inverse-primary);
    }

    .btn-secondary:hover {
        --btn-bg-color: var(--bg-neutral-inverse-secondary);
        --btn-text-color: var(--text-neutral-inverse-primary);
    }

    .btn-secondary:active {
        --btn-bg-color: var(--bg-neutral-inverse-secondary);
        --btn-text-color: var(--text-neutral-inverse-primary);
    }

    .btn-tertiary {
        --btn-text-color: var(--text-neutral-primary);
        border: 1px solid var(--border-neutral-primary);
    }

    .btn-tertiary:hover {
        --btn-bg-color: var(--bg-neutral-inverse-secondary);
        --btn-text-color: var(--text-neutral-inverse-primary);
    }

    .btn-tertiary:active {
        --btn-bg-color: var(--bg-neutral-inverse-secondary);
        --btn-text-color: var(--text-neutral-inverse-primary);
    }

    .btn-tertiary.btn-disabled {
        --btn-bg-color: var(--bg-neutral-primary);
        --btn-text-color: var(--text-neutral-disabled);
        border: 1px solid var(--border-neutral-secondary);
    }
    .btn-ghost {
        --btn-text-color: var(--text-neutral-primary);
        border: 0;
    }

    .btn-ghost:hover {
        --btn-bg-color: var(--bg-neutral-inverse-secondary);
        --btn-text-color: var(--text-neutral-inverse-primary);
    }

    .btn-ghost:active {
        --btn-bg-color: var(--bg-neutral-inverse-secondary);
        --btn-text-color: var(--text-neutral-inverse-primary);
    }

    .btn-ghost.btn-disabled {
        --btn-bg-color: var(--bg-neutral-primary);
        --btn-text-color: var(--text-neutral-disabled);
    }

    .btn-logo {
        --btn-padding-top: 8px;
        --btn-padding-right: 12px;
        --btn-padding-bottom: 8px;
        --btn-padding-left: 12px;
        filter: grayscale(100%);
    }

    .btn-logo:hover {
        filter: grayscale(0%);
    }

    .btn-logo:active {
        filter: grayscale(0%);
    }

    .btn-logo.btn-disabled {
        opacity: 20%;
    }
}
/* Navbar */
@layer components {
    .nav {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--gap, 0);
    }

    .nav :is(a).nav-link {
        text-decoration: none!important;
    }

    .nav .nav-link {
        --border-color: var(--border-brand-y-primary, transparent);
        border-bottom: 2px solid var(--border-color);

        &:hover {
        }

        &:active {
        }

        &:not(:disabled, :has(:disabled)):is(:focus-within) {
            outline: 2px solid var(--focus);
            border-radius: var(--radius-base-4);
        }
    }
}
/* ICONS */
@layer components {
    .icon {
        font-family: var(--font-material-icon-outlined) !important;
        font-weight: normal;
        font-style: normal;
        font-size: 24px; /* Preferred icon size */
        display: inline-block;
        line-height: 1;
        text-transform: none;
        letter-spacing: normal;
        word-wrap: normal;
        white-space: nowrap;
        direction: ltr;
    }

    .icon-margin-right {
        margin-right:6px;
    }
}
@layer utilities {

    .icon-size-10 {
        font-size: 10px;
        font-variation-settings: 'OPSZ' 10;
    }

    .icon-size-14 {
        font-size: 14px;
        font-variation-settings: 'OPSZ' 14;
    }

    .icon-size-16 {
        font-size: 16px;
        font-variation-settings: 'OPSZ' 16;
    }

    .icon-size-36 {
        font-size: 36px;
        font-variation-settings: 'OPSZ' 36;
    }

    .icon-size-48 {
        font-size: 48px;
        font-variation-settings: 'OPSZ' 48;
    }

    .icon-fill {
        font-variation-settings: 'FILL' 1;
    }

    .icon-disabled {
        color: var(--text-neutral-disabled);
    }
}
@layer base {
    a {
        color: inherit;
        text-decoration: underline;
        text-decoration-skip-ink: auto;
    }

    a:hover {
        color: var(--text-neutral-teritary);
        text-decoration: underline;
        text-decoration-skip-ink: auto;
        text-decoration-inset: -2px;
    }

    a:focus {
        outline: 2px solid var(--focus);
        border-radius: var(--radius-base-4);
        outline-offset: 1px;
    }

    a.strong {
        color: inherit;
        text-decoration: none !important;
        border-bottom: 2px solid var(--border-brand-y-primary);
        padding-bottom: 3px;
    }

    a.strong:hover {
        color: var(--text-neutral-teritary);
        text-decoration: none;
        border-bottom: 2px solid var(--border-brand-y-primary);
    }

    a.strong:focus {
        outline: 2px solid var(--focus);
        border-radius: var(--radius-base-4);
        outline-offset: 1px;
    }
}

@layer utilities {
    /* Background Colors - Stripped */
    /*.bg-stripped {*/
    /*    --bg-stripped-width: 1px;*/
    /*    --bg-stripped-count: 11;*/
    /*    --color: var(--border-neutral-secondary);*/
    /*    --background-color: #0000;*/
    /*    background: linear-gradient(90deg, var(--background-color) calc(100% - var(--bg-stripped-width)), var(--color) 0);*/
    /*    background-size: calc((1440px - var(--bg-stripped-count) * var(--bg-stripped-width)) / (var(--bg-stripped-count) + 1) + var(--bg-stripped-width)) 100%;*/
    /*}*/
    .bg-stripped{

        background-position-x: left;
        background-position-y: top;
        background-repeat: repeat;
    }

    .bg-white-stripped{
        background-image: url("../img/bg-white-stripe.png");
        background-color: var(--bg-neutral-primary);
    }
    .bg-gray-stripped{
        background-image: url("../img/bg-gray-stripe.png");
        background-color: var(--bg-neutral-secondary);
    }

    @media all and (max-width: 576px) {
        .bg-stripped {
            background-image: none;
        }
    }

    @media all and (min-width: 1440px) {
        .bg-stripped {
            background-position-x: 50%;
        }
    }

    /* Background Colors - Neutral */
    .bg-neutral-primary {
        background-color: var(--bg-neutral-primary);
    }

    .bg-neutral-secondary {
        background-color: var(--bg-neutral-secondary);
    }

    .bg-neutral-tertiary {
        background-color: var(--bg-neutral-tertiary);
    }

    .bg-neutral-disabled {
        background-color: var(--bg-neutral-disabled);
    }

    .bg-neutral-inverse-primary {
        background-color: var(--bg-neutral-inverse-primary);
    }

    .bg-neutral-inverse-secondary {
        background-color: var(--bg-neutral-inverse-secondary);
    }

    .bg-neutral-inverse-tertiary {
        background-color: var(--bg-neutral-inverse-tertiary);
    }

    /* Background Colors - Brand Yellow */
    .bg-brand-y-primary {
        background-color: var(--bg-brand-y-primary);
    }

    .bg-brand-y-secondary {
        background-color: var(--bg-brand-y-secondary);
    }

    .bg-brand-y-tertiary {
        background-color: var(--bg-brand-y-tertiary);
    }

    /* Background Colors - Brand Blue */
    .bg-brand-b-primary {
        background-color: var(--bg-brand-b-primary);
    }

    .bg-brand-b-secondary {
        background-color: var(--bg-brand-b-secondary);
    }

    .bg-brand-b-tertiary {
        background-color: var(--bg-brand-b-tertiary);
    }

    /* Background Colors - Status */
    .bg-success {
        background-color: var(--bg-success);
    }

    .bg-success-subtle {
        background-color: var(--bg-success-subtle);
    }

    .bg-warning {
        background-color: var(--bg-warning);
    }

    .bg-warning-subtle {
        background-color: var(--bg-warning-subtle);
    }

    .bg-error {
        background-color: var(--bg-error);
    }

    .bg-error-subtle {
        background-color: var(--bg-error-subtle);
    }

    .bg-info {
        background-color: var(--bg-info);
    }

    .bg-info-subtle {
        background-color: var(--bg-info-subtle);
    }

    /* Text Colors - Neutral */
    .text-neutral-primary {
        color: var(--text-neutral-primary);
    }

    .text-neutral-secondary {
        color: var(--text-neutral-secondary);
    }

    .text-neutral-tertiary {
        color: var(--text-neutral-teritary);
    }

    .text-neutral-disabled {
        color: var(--text-neutral-disabled);
    }

    .text-neutral-inverse-primary {
        color: var(--text-neutral-inverse-primary);
    }

    .text-neutral-inverse-secondary {
        color: var(--text-neutral-inverse-secondary);
    }

    .text-neutral-inverse-tertiary {
        color: var(--text-neutral-inverse-teritary);
    }

    /* Text Colors - Status */
    .text-success {
        color: var(--text-success);
    }

    .text-success-inverse {
        color: var(--text-success-inverse);
    }

    .text-warning {
        color: var(--text-warning);
    }

    .text-warning-inverse {
        color: var(--text-warning-inverse);
    }

    .text-error {
        color: var(--text-error);
    }

    .text-error-inverse {
        color: var(--text-error-inverse);
    }

    .text-info {
        color: var(--text-info);
    }

    .text-info-inverse {
        color: var(--text-info-inverse);
    }

    .border {
        border: 1px solid var(--border-neutral-primary);
    }
    /* Border Colors - Neutral */
    .border-neutral-primary {
        border-color: var(--border-neutral-primary);
    }

    .border-neutral-secondary {
        border-color: var(--border-neutral-secondary);
    }

    .border-neutral-tertiary {
        border-color: var(--border-neutral-tertiary);
    }

    .border-neutral-inverse-primary {
        border-color: var(--border-neutral-inverse-primary);
    }

    .border-neutral-inverse-secondary {
        border-color: var(--border-neutral-inverse-secondary);
    }

    .border-neutral-inverse-tertiary {
        border-color: var(--border-neutral-inverse-tertiary);
    }

    /* Border Colors - Brand Yellow */
    .border-brand-y-primary {
        border-color: var(--border-brand-y-primary);
    }

    .border-brand-y-inverse {
        border-color: var(--border-brand-y-inverse);
    }

    /* Border Colors - Brand Blue */
    .border-brand-b-primary {
        border-color: var(--border-brand-b-primary);
    }

    .border-brand-b-inverse {
        border-color: var(--border-brand-b-inverse);
    }

    /* Border Colors - Status */
    .border-success {
        border-color: var(--border-success);
    }

    .border-success-inverse {
        border-color: var(--border-success-inverse);
    }

    .border-warning {
        border-color: var(--border-warning);
    }

    .border-warning-inverse {
        border-color: var(--border-warning-inverse);
    }

    .border-error {
        border-color: var(--border-error);
    }

    .border-error-inverse {
        border-color: var(--border-error-inverse);
    }

    .border-info {
        border-color: var(--border-info);
    }

    .border-info-inverse {
        border-color: var(--border-info-inverse);
    }

    /* Border Radius */
    .rounded-0 {
        border-radius: 0;
    }

    .rounded-4 {
        border-radius: 4px;
    }

    .rounded-8 {
        border-radius: 8px;
    }

    .rounded-12 {
        border-radius: 12px;
    }

    /* Shadow */
    .shadow-1 {
        box-shadow: var(--shadow-base-1);
    }

    .shadow-2 {
        box-shadow: var(--shadow-base-2);
    }

    /* Focus Outline */
    .outline-focus {
        outline: 2px solid var(--focus);
        outline-offset: 1px;
    }

    .outline-focus-inverse {
        outline: 2px solid var(--focus-inverse);
        outline-offset: 1px;
    }

    .ratio-1-1 {
        aspect-ratio: 1/1;
    }

    .ratio-16-9 {
        aspect-ratio: 16/9;
    }

    .ratio-3-2 {
        aspect-ratio: 3/2;
    }

    .ratio-4-3 {
        aspect-ratio: 4/3;
    }

    .ratio-4-5 {
        aspect-ratio: 4/5;
    }
}

@layer components {
    /* ANIMATIONS */
    @media (prefers-reduced-motion: reduce) {
        .animation {
            animation: none !important;
        }

        .animation-controls, .animation-controls-toggle {
            display: none !important;
        }
    }

    .animation-controls-toggle {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        height: 0;
        opacity: 0;
        width: 0;
    }

    .animation-controls-toggle:focus-visible ~ .animation-controls {
        border-radius: 8px;
        outline: 2px solid var(--focus);
        outline-offset: 1px;
    }

    .animation-controls, .animation-controls-toggle {
        position: absolute;
        bottom: 15px;
        right: 15px;
    }

    .animation-controls {
        align-items: center;
        background: var(--bg-neutral-secondary);
        border-radius: 8px;
        cursor: pointer;
        display: flex;
        gap: 8px;
        padding: 8px 12px 8px 8px;

        width: 137px;
        z-index: 1;
    }

    .animation-controls-label {
        color: var(--text-neutral-secondary);
        z-index: 1;
        text-align: start;

        cursor: pointer;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        user-select: none !important;
    }

    .animation-controls-label:after {
        bottom: 0;
        content: "";
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
    }

    .animation-controls-icon-wrapper {
        align-items: center;
        aspect-ratio: 1/1;
        border: 1px solid var(--border-neutral-secondary);
        background-color: var(--bg-neutral-primary);
        border-radius: 4px;
        display: flex;
        order: 0;
        padding: 8px;
        color: var(--text-neutral-primary);
    }

    .animation-controls-icon-wrapper .icon[data-state="play"] {
        display: none;
    }

    .animation-controls-text-play {
        display: none;
        visibility: hidden;
    }

    :has(> .animation-controls-toggle:checked) .animation {
        animation-play-state: paused !important;
    }

    :is(.animation-controls-toggle:checked~.animation-controls) .icon[data-state="pause"] {
        display: none;
    }

    :is(.animation-controls-toggle:checked~.animation-controls) .icon[data-state="play"] {
        display: inline-block;
    }

    :is(.animation-controls-toggle:checked~.animation-controls) .animation-controls-text-pause {
        display: none;
        visibility: hidden;
    }

    :is(.animation-controls-toggle:checked~.animation-controls) .animation-controls-text-play {
        display: block;
        visibility: visible;
    }
}

@layer components {
    .top-menu-btn {
        color: var(--text-neutral-primary);
        text-decoration: none;
        padding: 0 1rem;
        background-color: unset;
        border: 0;
        height: 28px;
        > .icon {
            font-size: 20px;
        }
        cursor: var(--btn-cursor);
    }

    .top-menu-btn:hover {
        color: var(--text-neutral-primary);
        background-color: var(--bg-brand-y-secondary);
        border-radius: var(--radius-base-4);
        text-decoration: none;
    }

    .top-menu-btn:active {
        color: var(--text-neutral-primary);
        background-color: var(--bg-brand-y-tertiary);
        border-radius: var(--radius-base-4);
        text-decoration: none;
    }

    .top-menu-btn:focus {
        color: var(--text-neutral-primary);
        background-color: var(--bg-brand-y-primary);
        outline: 2px solid var(--focus);
        outline-offset: 2px;
        border-radius: var(--radius-base-4);
        text-decoration: none;
    }
}

@layer utilities {
    .uppercase {
        text-transform: uppercase;
    }

    .lowercase {
        text-transform: lowercase;
    }

    .capitalize {
        text-transform: capitalize;
    }

    .text-wrap {
        text-wrap: wrap;
    }

    .text-nowrap {
        text-wrap: nowrap;
    }

    .text-balance {
        text-wrap: balance;
    }

    .text-pretty {
        text-wrap: pretty;
    }
}

@layer utilities {
    .absolute {
        position: absolute;
    }

    .relative {
        position: relative;
    }

    .sticky {
        position: sticky;
    }

    .m-0 {
        margin: 0 !important;
    }

    .text-decoration-none {
        text-decoration: none;
    }
}


/* Webfont: Lato-Black */
@font-face {
    font-family: "Lato";
    src: url('../fonts/Lato-Black.eot'); /* IE9 Compat Modes */
    src: url('../fonts/Lato-Black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/Lato-Black.woff2') format('woff2'), /* Modern Browsers */ url('../fonts/Lato-Black.woff') format('woff'), /* Modern Browsers */ url('../fonts/Lato-Black.ttf') format('truetype');
    font-display: swap;
    font-style: normal;
    font-weight: 900;
    font-stretch: normal;
}

/* Webfont: Lato-Bold */
@font-face {
    font-family: "Lato";
    src: url('../fonts/Lato-Bold.eot'); /* IE9 Compat Modes */
    src: url('../fonts/Lato-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/Lato-Bold.woff2') format('woff2'), /* Modern Browsers */ url('../fonts/Lato-Bold.woff') format('woff'), /* Modern Browsers */ url('../fonts/Lato-Bold.ttf') format('truetype');
    font-display: swap;
    font-style: normal;
    font-weight: 700;
    font-stretch: normal;
}

/* Webfont: Lato-Regular */
@font-face {
    font-family: "Lato";
    src: url('../fonts/Lato-Regular.eot'); /* IE9 Compat Modes */
    src: url('../fonts/Lato-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/Lato-Regular.woff2') format('woff2'), /* Modern Browsers */ url('../fonts/Lato-Regular.woff') format('woff'), /* Modern Browsers */ url('../fonts/Lato-Regular.ttf') format('truetype');
    font-display: swap;
    font-style: normal;
    font-weight: 400;
    font-stretch: normal;
}

/* Webfont: Lato-Medium */
@font-face {
    font-family: "Lato";
    src: url('../fonts/Lato-Medium.eot'); /* IE9 Compat Modes */
    src: url('../fonts/Lato-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/Lato-Medium.woff2') format('woff2'), /* Modern Browsers */ url('../fonts/Lato-Medium.woff') format('woff'), /* Modern Browsers */ url('../fonts/Lato-Medium.ttf') format('truetype');
    font-display: swap;
    font-style: normal;
    font-weight: 500;
    font-stretch: normal;
}

/* Webfont: Lato-Semibold */
@font-face {
    font-family: "Lato";
    src: url('../fonts/Lato-Semibold.eot'); /* IE9 Compat Modes */
    src: url('../fonts/Lato-Semibold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/Lato-Semibold.woff2') format('woff2'), /* Modern Browsers */ url('../fonts/Lato-Semibold.woff') format('woff'), /* Modern Browsers */ url('../fonts/Lato-Semibold.ttf') format('truetype');
    font-display: swap;
    font-style: normal;
    font-weight: 600;
    font-stretch: normal;
}

/* Webfont: Lato-Italic */
@font-face {
    font-family: "Lato";
    src: url('../fonts/Lato-Italic.eot'); /* IE9 Compat Modes */
    src: url('../fonts/Lato-Italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/Lato-Italic.woff2') format('woff2'), /* Modern Browsers */ url('../fonts/Lato-Italic.woff') format('woff'), /* Modern Browsers */ url('../fonts/Lato-Italic.ttf') format('truetype');
    font-display: swap;
    font-style: italic;
    font-weight: 400;
    font-stretch: normal;
}

/* Webfont: Lato-BoldItalic */
@font-face {
    font-family: "Lato";
    src: url('../fonts/Lato-BoldItalic.eot'); /* IE9 Compat Modes */
    src: url('../fonts/Lato-BoldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/Lato-BoldItalic.woff2') format('woff2'), /* Modern Browsers */ url('../fonts/Lato-BoldItalic.woff') format('woff'), /* Modern Browsers */ url('../fonts/Lato-BoldItalic.ttf') format('truetype');
    font-display: swap;
    font-style: italic;
    font-weight: 700;
    font-stretch: normal;
}

/* Webfont: Literata-Regular */
@font-face {
    font-family: 'Literata';
    src: url('../fonts/Literata-Variable.woff2') format('woff2-variations'),
    url('../fonts/Literata-Variable.ttf') format('truetype');
    font-display: swap;
    font-style: normal;
}

/* Webfont: Literata-Italic */
@font-face {
    font-family: 'Literata';
    src: url('../fonts/Literata-Italic-Variable.woff2') format('woff2-variations'),
    url('../fonts/Literata-Italic-Variable.ttf') format('truetype');
    font-display: swap;
    font-style: italic;
}

/* Webfont: Material Symbols Outlined */
@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url('../fonts/MaterialSymbolsOutlined-VariableFont.woff2') format('woff2-variations');
}

[hidden] {
    display: none !important;
}

.sr-only {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden;
    white-space: nowrap;
}

.clear {
    clear: both;
}

.clear-block::after {
    content: "";
    display: table;
    clear: both;
}


.center-block {
    display: block;
    max-width: var(--width-base-xl);
    margin: 0 auto;
    position: relative;
    padding: 1px 0;
}

.block-sm, .center-block.block-sm {
    display: block;
    max-width: var(--width-base-sm);
}

.block-md, .center-block.block-md {
    display: block;
    max-width: var(--width-base-md);
}

.block-lg, .center-block.block-lg {
    display: block;
    max-width: var(--width-base-lg);
}

.block-xl, .center-block.block-xl {
    display: block;
    max-width: var(--width-base-xl);
}

.text-right {
    text-align: right;
}

.top-menu-bar {
    display: flex;
    justify-content: right;
    min-height: 44px;
    position: relative;
}

nav.top-menu {
    display: flex;
    flex-flow: row wrap;
    justify-content: right;
    align-items: center;
    min-height: 2.5rem;
    margin-left: 170px;
    font-size: 11px;
    line-height: 28px;
    font-weight: 700;
    letter-spacing: 6%;
    text-align: right;
    text-transform: uppercase;
}

nav.top-menu button {
    display: flex;
    flex-flow: row wrap;
    justify-content: right;
    align-items: center;
    min-height: 2rem;
    font-size: 11px;
    font-family: inherit;
    line-height: 28px;
    font-weight: 700;
    letter-spacing: 6%;
    text-align: right;
    text-transform: uppercase;
    cursor: var(--btn-cursor);
}

nav.top-menu a, nav.top-menu button {
    color: var(--text-neutral-primary);
    text-decoration: none;
    padding: 0 1rem;
}

nav.top-menu a:hover, nav.top-menu button:hover {
    color: var(--text-neutral-primary);
    background-color: var(--bg-brand-y-secondary);
    border-radius: var(--radius-base-4);
    text-decoration: none;
}

/*nav.top-menu a:active {
    color: var(--text-neutral-primary);
    background-color: var(--bg-brand-y-tertiary);
    border-radius: var(--radius-base-4);
    text-decoration: none;
}*/

nav.top-menu a:focus, nav.top-menu button:focus {
    color: var(--text-neutral-primary);
    background-color: var(--bg-brand-y-primary);
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-radius: var(--radius-base-4);
    text-decoration: none;
}

nav.top-menu a.go-to-left, nav.top-menu button.go-to-left {
    position: absolute;
    left: 0;
    top: auto;
}

nav.top-menu .with-separator {
    border-right: 1px solid var(--border-brand-y-inverse);
}

nav.top-menu .with-separator:hover {
    border-right: 1px solid var(--border-brand-y-primary);
}

nav.top-menu .with-separator:focus {
    border-right: 1px solid var(--border-brand-y-primary);
}

nav.top-menu a.bordered, nav.top-menu button.bordered {
    border: 1px solid var(--border-brand-y-inverse);
    border-radius: var(--radius-base-4);
    padding: 0 10px;
    line-height: 26px;
}

nav.top-menu a.inset, nav.top-menu button.inset {
    border: none;
    border-radius: var(--radius-base-4);
    padding: 0 10px;
    line-height: 26px;
    background-color: var(--bg-neutral-primary);
}

nav.top-menu a.inset:hover, nav.top-menu button.inset:hover {
    background-color: var(--bg-neutral-secondary);
}

nav.top-menu a.inset.login, nav.top-menu a.inset.logout {
    /*font-family: var(--font-base-normal);
    font-size: 130%;
    font-weight: 500;
    letter-spacing: 1%;

    text-transform: none;*/
    padding-left: 32px;
    background-position-x: 5px;
    padding-right: 6px;
    margin-left: 12px;
}

nav.top-menu a:first-child, nav.top-menu button:first-child {
    margin-left: -1rem;
}

nav.top-menu a:last-child, nav.top-menu button:last-child {
    margin-right: -1rem;
}

nav.top-menu a.external, nav.top-menu button.external {
    background-image: url("../img/external-icon.png");
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center left 12px;
    padding-left: 38px;
}

nav.top-menu a.login {
    background-image: url("../img/login-icon.png");
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center left 12px;
    padding-left: 38px;
}

nav.top-menu a.logout {
    background-image: url("../img/logout-icon.png");
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center left 12px;
    padding-left: 38px;
}

nav.top-menu a.search {
    background-image: url("../img/search-icon.png");
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center left 12px;
    padding-left: 38px;
}

nav.top-menu a.mall {
    background-image: url("../img/mall-icon.png");
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center left 12px;
    padding-left: 38px;
}

nav.top-menu button:nth-last-child(2) {
    padding-right: 0.5rem;
}

nav.top-menu button:last-child {
    padding-left: 0.5rem;
}


nav.top-menu a.arrow-drop-down, nav.top-menu button.arrow-drop-down {
    background-image: url("../img/arrow-drop-down-icon.png");
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center left 3px;
    padding-left: 24px;
    background-color: inherit;
}


.drop-down-container {
    display: flex;
    position: relative;
}

nav.floating-featured-menu {
    display: flex;
    flex-flow: column wrap;
    justify-content: left;
    position: absolute;
    left: -18px;
    top: 44px;
    margin: 0;
    padding: 0.5rem 0.5rem;
    z-index: 1001;
    text-align: left;
    width: 160px;
    border-radius: var(--radius-base-8);
    border: 1px solid var(--border-neutral-secondary);
    background: var(--bg-neutral-primary);
    box-shadow: var(--shadow-base-1);
}

nav.floating-featured-menu a, nav.floating-featured-menu button {
    text-align: left;
    margin: 3px 0 !important;
    padding: calc(0.5rem - 3px) 0.5rem !important;
    font-weight: 700;
    font-size: 12px;
    line-height: 150%;
    letter-spacing: 1%;
    text-transform: none;
    background-color: inherit;
    cursor: var(--btn-cursor);
}

nav.floating-featured-menu a:first-child, nav.floating-featured-menu button:first-child {
    margin-top: 0 !important;
}

nav.floating-featured-menu a:last-child, nav.floating-featured-menu button:last-child {
    margin-bottom: 0 !important;
}

nav.floating-featured-menu a:hover, nav.floating-featured-menu button:hover {
    background-color: var(--bg-neutral-secondary);
}

nav.floating-featured-menu a:focus, nav.floating-featured-menu button:focus  {
    background-color: unset;
    outline-color: var(--focus);
}


header {
    position: sticky;
    top: 0;
    z-index: 3;
}


.main-bar {
    display: block;
    border-bottom: 1px solid var(--border-neutral-secondary);
}

.main-menu-bar {
    display: flex;
    justify-content: right;
    min-height: 73px;
    position: relative;
}

a.main-logo {
    display: inline-block;
    margin-left: -1rem;
    position: absolute;
    left: 0;
    top: 0;
}

a.main-logo:focus {
    outline: 2px solid var(--focus);
    border-radius: var(--radius-base-8);
    outline-offset: -3px;
}

a.main-logo img {
    display: block;
    height: 73px;
    width: auto;
}

a.main-logo img.logo-umk-darkmode {
    display: none;
}

a.en-link {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 1rem 0 1rem 12px;
    background: none;
    border-radius: var(--radius-base-4);
    font-weight: 700;
    font-size: 12px;
    line-height: 150%;
    letter-spacing: 1%;
    color: var(--text-neutral-primary);
    cursor: pointer;
    text-decoration: none !important;
}

a.en-link:hover {
    background: var(--bg-neutral-secondary);
}

a.en-link span {
    display: block;
    width: 17px;
    height: 22px;
    border-bottom: 3px solid var(--border-brand-y-primary);
}

a.en-link:hover span {
    border-bottom: 3px solid var(--border-brand-y-primary);
}


.search-button {
    display: inline-block;
    width: 40px;
    height: 40px;
    margin: 1rem 0 1rem 12px;
    background-color: var(--bg-neutral-secondary);
    border: none;
    border-radius: var(--radius-base-4);
    font-weight: 700;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 1%;
    color: var(--text-neutral-primary);
    cursor: var(--btn-cursor);
    background-image: url("../img/search-icon.png");
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position: center;
}

a.search-button:hover {
    filter: invert(92%);
}

a.search-button:focus {
    outline: 2px solid var(--focus);
    border-radius: var(--radius-base-4);
    outline-offset: 1px;
}


.hamburger {
    display: inline-block;
    width: 40px;
    height: 40px;
    margin: 1rem 0 1rem 12px;
    background-color: var(--bg-brand-y-primary);
    border: none;
    border-radius: var(--radius-base-4);
    font-weight: 700;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 1%;
    color: var(--text-neutral-primary);
    cursor: pointer;
    background-image: url("../img/hamburger.png");
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position: center;
}

a.hamburger:hover {
    background-color: var(--bg-brand-y-secondary);
}

a.hamburger:focus {
    outline: 2px solid var(--focus);
    border-radius: var(--radius-base-4);
    outline-offset: 1px;
}

nav.main-menu {
    display: flex;
    flex-flow: row wrap;
    justify-content: right;
    align-items: center;
    min-height: 2.5rem;
    margin-left: 10rem;
    font-weight: 700;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 1%;
    text-align: right;
}

nav.main-menu a {
    color: var(--text-neutral-primary);
    text-decoration: none;
    margin: 0 2px;
    background-image: url("../img/arrow-drop-down-icon.png");
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: top 3px left 5px;
    padding: 4px 13px 6px 27px;

}

nav.main-menu a:hover {
    color: var(--text-neutral-primary);
    background-color: var(--bg-neutral-secondary);
    border-radius: var(--radius-base-4);
    text-decoration: none;
}

/*nav.main-menu a:active {
    color: var(--text-neutral-primary);
    background-color: var(--bg-brand-y-secondary);
    border-radius: var(--radius-base-4);
    text-decoration: none;
}*/

nav.main-menu a:focus {
    color: var(--text-neutral-primary);
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-radius: var(--radius-base-4);
    text-decoration: none;
}

nav.main-menu a:last-child {
    margin-right: -13px;
}


/* = menu mobilne = */
.menu-mobile {
    position: absolute;
    display: none;
    width: 100%;
    z-index: 100;
    box-shadow: 0 5px 10px -10px #000;
    margin: 0;
    padding: 0;
}

.menu-mobile .bg-neutral-primary {
    padding: 1.5rem 0;
}

.menu-mobile .menu-mobile-container {
    display: flex;
    flex-flow: row wrap;
    gap: 20px;
}

.menu-mobile .menu-mobile-container .btn {
    display: inline-flex;
    width: calc(50% - 10px);
    margin: 0 0 0 0;
    justify-content: center;
    align-items: center;
}

.menu-mobile .menu-mobile-container .btn:last-of-type:nth-child(odd) {
    width: 100%;
}

.menu-mobile nav {
    display: flex;
    flex-flow: column wrap;
    padding: 1rem 0;
    width: auto;
}

.menu-mobile nav .menu-mobile-element {
    display: block;
    border-bottom: 1px solid var(--border-neutral-tertiary);
    margin: 0;
    padding: 0;
}

.menu-mobile nav a {
    display: flex;
    height: 50px;
    margin: 0;
    align-items: center;
    border-radius: var(--radius-base-8);

    font-weight: 700;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 1%;
    text-decoration: none;

    background-image: url("../img/keyboard-arrow-down-icon.png");
    background-size: 28px 28px;
    background-repeat: no-repeat;
    background-position: center right 5px;
    padding: 0 0 0 5px;
}

.menu-mobile nav .menu-mobile-element > a:last-of-type {
    border-bottom: none;
}

.menu-mobile nav a:hover {
    /*text-decoration: underline 3px solid var(--border-brand-y-primary);
    text-decoration-skip-ink: none;*/
    color: var(--text-neutral-primary);
    background-color: var(--bg-neutral-tertiary);
}


.menu-mobile nav .submenu {
    border-radius: var(--radius-base-8);
    margin: 2px 0 2rem 0;
    padding: 0.5rem 1.5rem;
}

.menu-mobile nav .submenu a {
    background-image: none;
}

.menu-mobile nav .submenu a:hover {
    background-color: var(--bg-neutral-tertiary);
}

.menu-mobile nav .submenu a.show-all {
    display: inline-block;
    height: auto;

    font-weight: 700;
    font-size: 12px;
    line-height: 150%;
    letter-spacing: 1%;
    color: var(--text-neutral-primary);
    margin: 12px 0;
    padding: 3px 3px 0 3px;

    text-decoration: none !important;
    border-bottom: 2px solid var(--border-brand-y-primary);
    padding-bottom: 1px;
    border-radius: var(--radius-base-0);
}

.menu-mobile nav .submenu a.show-all:focus {
    border-radius: var(--radius-base-4);
}


.mobile-menu-footer {
    padding: 1rem 0 1rem 0;
}

.mobile-menu-footer .menu-mobile-container {
    gap: 10%;
}

.mobile-menu-footer .a11y-utilities {
    display: flex;
    margin-top: 10px;
}

.mobile-menu-footer .a11y-utilities .btn {
    width: auto;
    padding-left: 10px;
    padding-right: 10px;
}

.mobile-menu-footer .a11y-utilities button:first-child {
    margin-left: -10px;
}

.mobile-menu-footer nav {
    width: 45%;
}

.mobile-menu-footer nav span {
    font-weight: 900;
    font-size: 10px;
    line-height: 160%;
    letter-spacing: 5%;
    text-transform: uppercase;
    margin: 0.5rem 0;
}

.mobile-menu-footer nav a {
    display: inline-block;
    height: auto;
    width: fit-content;
    margin: 0.5rem 0;
    border-bottom: none;

    font-weight: 700;
    font-size: 12px;
    line-height: 150%;
    letter-spacing: 1%;
    text-decoration: none;
    border-radius: var(--radius-base-4);

    background-image: url("../img/arrow-drop-right-icon.png");
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center left -7px;
    padding-left: 12px;
    padding-right: 12px;
}

.mobile-menu-footer nav a:hover {
    text-decoration: underline 1px solid var(--border-neutral-primary);
    /*border-radius: 0;
    border-bottom: 1px solid var(--border-neutral-primary);
    margin-bottom: calc(0.5rem - 1px);*/
    background-color: unset;
}


.menu-mobile .copyright {
    font-weight: 500;
    font-size: 12px;
    line-height: 140%;
    letter-spacing: -1%;
    margin: 0;
    background-color: unset;
}


/* = megamenu = */
.megamenu {
    position: absolute;
    display: none;
    width: 100%;
    z-index: 100;
    border-bottom: 1px solid var(--border-neutral-secondary);
    box-shadow: 0 5px 10px -10px #000;
    padding: 1.5rem 0 3rem 0;
}

.megamenu article {
    display: flex;
    flex-flow: row nowrap;
    gap: 20px;
}

.megamenu article div, .megamenu article nav {
    display: block;
    width: calc((100% - 3 * 20px) / 4);
    /*border: 1px solid red;*/
}

.megamenu h2 {
    font-family: var(--font-headline);
    font-weight: 300;
    font-size: 36px;
    line-height: 130%;
    letter-spacing: -2%;
    color: var(--text-neutral-primary);
    margin: 0 0 1rem 0;
}

.megamenu p {
    font-weight: 500;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 0;
    color: var(--text-neutral-primary);
    margin: 1rem 0;
}

.megamenu article nav {
    display: flex;
    flex-flow: column wrap;
}

.megamenu article nav a {
    display: flex;
    height: 46px;
    margin: 0;
    padding: 0 0 0 8px;
    align-items: center;
    border-bottom: 1px solid var(--border-neutral-tertiary);

    font-weight: 700;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 1%;
    text-decoration: none;
}

.megamenu article nav a:last-of-type {
    border-bottom: none;
}

.megamenu article nav a:hover {
    color: var(--text-neutral-primary);
    background-color: var(--bg-neutral-secondary);
    border-radius: var(--radius-base-8);
    text-decoration: none;
}

.megamenu article nav a:focus {
    border-radius: var(--radius-base-8);
}

.megamenu img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-base-4);
}

.megamenu h3 {
    font-weight: 700;
    font-size: 18px;
    line-height: 150%;
    letter-spacing: 2%;
    color: var(--text-neutral-primary);
    margin: 0.7rem 0 0.5rem 0;
}

.megamenu p.right-description {

    font-weight: 500;
    font-size: 12px;
    line-height: 140%;
    letter-spacing: -1%;
    color: var(--text-neutral-primary);
    margin: 0.5rem 0 1rem 0;
}

main {
    position: relative;
}


nav.breadcrumbs {
    /*
    display: flex;
    flex-flow: row wrap;
    justify-content: left;
    */
    display: block;
    color: var(--text-neutral-primary);
    font-weight: 900;
    font-size: 10px;
    line-height: 160%;
    letter-spacing: 5%;
    text-transform: uppercase;
    margin-top: -5px;
    padding-left: 2px;
    max-width: 40%;
}

nav.breadcrumbs span {
    display: inline;
    color: var(--text-neutral-primary);
    padding: 3px 3px 3px 0;
    text-transform: uppercase;
    vertical-align: middle;
}

nav.breadcrumbs a {
    display: inline;
    color: var(--text-neutral-teritary);
    padding: 3px 3px 3px 3px;
    text-decoration: none;
    text-transform: uppercase;
    margin-left: -3px;
    vertical-align: middle;
}

nav.breadcrumbs a::after {
    display: inline-block;
    content: "";
    width: 1px;
    height: 16px;
    background: var(--text-neutral-teritary);
    vertical-align: middle;
    margin: 0 6px 3px 8px;
}


nav.breadcrumbs a:hover {
    color: var(--text-neutral-teritary);
    text-decoration: underline;
    /*text-decoration: none;
    border-bottom: 1px solid var(--text-neutral-teritary);*/
}

nav.breadcrumbs a:active {
    color: var(--text-neutral-primary);
    text-decoration: none;
}

nav.breadcrumbs a:focus {
    outline: 2px solid var(--focus);
    border-radius: var(--radius-base-4);
}


@layer components {
    .button {
        display: inline-block;
        padding: 0.7rem 1rem 0.7rem 1rem;
        margin: 1rem 1rem 0 0;
        background-color: var(--bg-brand-y-primary);
        border: none;
        border-radius: var(--radius-base-8);
        font-weight: 700;
        font-size: 14px;
        line-height: 140%;
        letter-spacing: 1%;
        color: var(--text-neutral-primary);
        text-decoration: none;
        cursor: var(--btn-cursor);
        text-align: center;
    }

    .button:hover {
        background-color: var(--bg-brand-y-secondary);
        text-decoration: none;
    }

    .button:focus {
        outline: 2px solid var(--focus);
        border-radius: var(--radius-base-4);
        outline-offset: 2px;
        text-decoration: none;
    }

    .button.fibered {
        border: 1px solid var(--text-neutral-primary);
        background-color: unset;
        color: var(--text-neutral-primary);
        padding: 0.65rem 0.9rem 0.6rem 0.9rem;
    }

    .button.fibered:hover {
        border: 1px solid var(--border-neutral-primary);
        background-color: var(--bg-neutral-inverse-tertiary);
        color: var(--text-neutral-inverse-primary);
        padding: 0.65rem 0.9rem 0.6rem 0.9rem;
    }
}


hr {
    margin: 4rem 0 0 0;
    border: none;
    height: 1px;
    background-color: var(--bg-neutral-tertiary);
}


footer {
    display: block;
    background-color: var(--bg-neutral-secondary);
    color: var(--text-neutral-secondary);
    padding: 3rem 0 2rem 0;
    font-weight: 500;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 0;
}

footer .center-block {
    display: block;
    position: relative;
}

footer nav {
    display: inline-block;
    vertical-align: top;
    margin: 0 8% 20px 0;
    min-width: 150px;
}

footer nav a {
    color: var(--text-neutral-secondary);
    text-decoration: none;
    /*border-bottom: 1px solid var(--border-neutral-secondary);*/
    padding: 3px 0 4px 0;
    font-weight: 700;
    font-size: 12px;
    line-height: 150%;
    letter-spacing: 1%;
}

footer nav a:hover {
    color: var(--text-neutral-secondary);
    text-decoration: none;
    border-bottom: 1px solid var(--text-neutral-primary);
}

footer a:focus {
    outline: 2px solid var(--focus);
    border-radius: var(--radius-base-4);
    outline-offset: 2px;
}

.footer-logo-block {
    display: flex !important;
    flex-flow: row wrap;
}

.black-logo-umk, .black-logo-umk:hover {
    display: inline-block;
    text-decoration: none;
    margin: 0 32px 20px 0;
}

.footer-umk-logo {
    display: inline-block;
    max-height: 46px;
    width: auto;
    vertical-align: middle;
}

.partnership-block {
    --gap: 10px;
    display: inline-flex;
    flex-flow: row wrap;
    gap: var(--gap);
    padding: 0 !important;
    border-bottom: none;
}

.partnership-block h2 {
    flex-basis: 100%;
    margin-top: 30px !important;
    display: none;
}

.partnership-block a {
    --padding-x: 12px;
    --padding-y: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    text-decoration: none;
    padding: var(--padding-y) var(--padding-x);
    background: var(--bg-neutral-primary);
    border: 1px solid var(--border-neutral-secondary);
    border-radius: var(--radius-base-8);
}

.partnership-block a:hover {
    border: 1px solid var(--border-neutral-secondary);
}

.partnership-block a:active {
    border: 1px solid var(--border-neutral-primary);
}

.partnership-block a:focus {
    outline-color: var(--focus);
    border-radius: var(--radius-base-8);
    outline-offset: 2px;
}

.partnership-block a img {
    display: block;
    max-height: unset;
    height: 30px;
    filter: grayscale(100%);
}

.partnership-block a:hover img {
    filter: grayscale(0%);
}

.media-block {
    display: flex;
    flex-flow: row wrap;
    flex-grow: 100;
    gap: 12px;
    justify-content: end;
    align-content: flex-start;
    margin: 0 !important;
    padding: 6px 0 0 0 !important;
    border-bottom: none;
}

.media-block a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    aspect-ratio: 1;
    text-decoration: none;
    padding: 0;
    background: var(--bg-neutral-primary);
    border: 1px solid var(--border-neutral-secondary);
    border-radius: var(--radius-base-4);
    margin: 0;
}

.media-block a:hover {
    border: 1px solid var(--border-neutral-primary);
}

.media-block a img {
    display: block;
    max-height: unset;
    height: 24px;
    width: 24px;
}

.media-block-top {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    width: calc(50% - 5px);
}

.media-block-bottom {
    display: flex;
}

.footer-copyright-block {
    text-align: right;
    padding-top: 12px;
}

p img{
    width: 100%;
}

iframe, p iframe{
    width: 100%;
    height: 53vw;
    border: 0;
}

.block-sm iframe, block-sm p iframe{
    max-height: 380px;
}

.block-md iframe, block-md p iframe{
    max-height: 503px;
}

.block-lg iframe, block-lg p iframe{
    max-height: 765px;
}

.block-lg iframe, block-lg p iframe{
    max-height: 855px;
}

@media all and (min-width: 0px) {

    .center-block {
        max-width: none;
        margin: 0 var(--mobile-margin-vertical);
    }


    .block-sm:not(.first-block-base-container)>*:last-child,
    .block-md:not(.first-block-base-container)>*:last-child,
    .block-lg:not(.first-block-base-container)>*:last-child,
    .block-xl:not(.first-block-base-container, .hero-discover-links)>*:last-child{
        margin-bottom: 4rem;
    }

    .block-sm:has(> h2:first-child) {
        border-top: 1px solid var(--border-neutral-secondary);
    }


    .top-bar {
        display: none;
    }

    a.search-button {
        display: inline-block;
    }

    a.hamburger {
        display: inline-block;
    }

    nav.main-menu {
        display: none;
    }


    nav.breadcrumbs {
        max-width: 100%;
    }


    footer {
        padding: 2rem 0 1rem 0;
    }

    footer nav {
        display: block;
        margin: 0 0;
        padding: 20px 0;
        border-bottom: 1px solid var(--border-neutral-inverse-tertiary);
    }

    footer nav:first-child {
        padding-top: 0;
    }

    footer nav:last-child {
        border-top: none;
    }

    .black-logo-umk {
        display: none;
    }

    .partnership-block h2 {
        display: block;
    }

    .partnership-block a {
        height: 64px;
        width: calc(50% - var(--gap)/2);
    }

    .media-block-top {
        display: flex;
    }

    .media-block-bottom {
        display: none;
    }


}


@media all and (min-width: 576px) {

    .center-block {
        max-width: none;
        margin: 0 var(--mobile-margin-horizontal);
    }


    nav.breadcrumbs {
        max-width: 100%;
    }


    footer nav {
        display: inline-block;
        margin: 0 8% 20px 0;
        padding: 0;
        border-bottom: none;
    }

    .black-logo-umk {
        display: inline-block;
    }

    .partnership-block h2 {
        display: none;
    }

    .partnership-block a {
        height: 46px;
        width: auto;
    }

    .media-block-top {
        display: none;
    }

    .media-block-bottom {
        display: flex;
    }

}

@media all and (min-width: 720px) {

    .block-sm, .center-block.block-sm {
        margin: 0 auto;
    }

    .block-sm:has(> h2:first-child) {
        border-top: 1px solid var(--border-neutral-secondary);
    }
}

@media all and (min-width: 946px) {

    .block-md, .center-block.block-md {
        margin: 0 auto;
    }

}


@media all and (min-width: 1024px) {
    .top-bar {
        display: block;
    }

    nav.top-menu a, nav.top-menu button {
        padding: 0 0.5rem;
    }

    nav.top-menu a:first-child, nav.top-menu button:first-child {
        margin-left: -0.5rem;
    }

    nav.top-menu a:last-child, nav.top-menu button:last-child {
        margin-right: -0.5rem;
    }

    nav.top-menu a.bordered {
        padding: 0 6px;
    }

    nav.top-menu a.external, nav.top-menu a.login, nav.top-menu a.search, nav.top-menu a.mall {
        background-position-x: 6px;
        padding-left: 28px;
    }

    nav.top-menu a.arrow-drop-down {
        background-position-x: 0;
        padding-left: 20px;
    }

    nav.floating-featured-menu {
        left: -14px;
    }

    a.en-link {
        display: none;
    }

    a.search-button {
        display: none;
    }

    a.hamburger {
        display: none;
    }

    nav.main-menu {
        display: flex;
    }

    nav.main-menu a {
        padding: 4px 6px 6px 20px;
        background-position-x: 0;
    }

    nav.main-menu a:last-child {
        margin-right: -6px;
    }


    .menu-mobile {
        display: none !important;
    }


    main {
        display: block !important;
    }


    footer {
        display: block !important;
    }

}


@media all and (min-width: 1440px) {

    .center-block {
        max-width: var(--width-base-lg);
        margin: 0 auto;
    }

    .block-lg, .center-block.block-lg {
        margin: 0 auto;
    }

    .block-xl, .center-block.block-xl {
        max-width: var(--width-base-lg);
    }


    .top-bar {
        display: block;
    }

    nav.top-menu a, nav.top-menu button {
        padding: 0 1rem;
    }

    nav.top-menu a:first-child, nav.top-menu button:first-child {
        margin-left: -1rem;
    }

    nav.top-menu a:last-child, nav.top-menu button:last-child {
        margin-right: -1rem;
    }

    nav.top-menu a.bordered {
        padding: 0 10px;
    }

    nav.top-menu a.external, nav.top-menu a.login, nav.top-menu a.search, nav.top-menu a.mall {
        background-position-x: 12px;
        padding-left: 38px;
    }

    nav.top-menu a.arrow-drop-down {
        background-position-x: 3px;
        padding-left: 24px;
    }

    nav.floating-featured-menu {
        left: -14px;
    }

    a.search-button {
        display: none;
    }

    a.hamburger {
        display: none;
    }

    nav.main-menu {
        display: flex;
    }

    nav.main-menu a {
        padding: 4px 13px 6px 27px;
        background-position-x: 5px;
    }

    nav.main-menu a:last-child {
        margin-right: -13px;
    }


    .footer {
        padding: 3rem 0 2rem 0;
    }
}


@media all and (min-width: 1600px) {

    .center-block {
        max-width: var(--width-base-xl);
        margin: 0 auto;
    }

    .block-xl, .center-block.block-xl {
        max-width: var(--width-base-xl);
        margin: 0 auto;
    }

    nav.top-menu a, nav.top-menu button {
        padding: 0 18px;
    }

    nav.top-menu a:first-child, nav.top-menu button:first-child {
        margin-left: -18px;
    }

    nav.top-menu a:last-child, nav.top-menu button:last-child {
        margin-right: -18px;
    }
    
    nav.top-menu a.bordered {
        padding: 0 14px;
    }

    nav.top-menu a.external, nav.top-menu a.login, nav.top-menu a.search, nav.top-menu a.mall {
        background-position-x: 16px;
        padding-left: 42px;
        padding-right: 18px;
    }

    nav.top-menu a.arrow-drop-down {
        background-position-x: 5px;
        padding-left: 26px;
        padding-right: 12px;
    }

    nav.top-menu a.inset.login, nav.top-menu a.inset.logout {
        padding-left: 36px;
        background-position-x: 9px;
        padding-right: 12px;
    }

    nav.floating-featured-menu {
        left: -18px;
    }


    nav.main-menu a {
        padding: 4px 18px 6px 27px;
        background-position-x: 5px;
    }

    nav.main-menu a:last-child {
        margin-right: -18px;
    }

}


@media all and (max-width: 1024px) {

    .megamenu {
        display: none !important;
    }
}

#theme-swap {
    padding-inline: 18px;
}