/* Start:/local/frontend/styles/vars/index.css?1788273766714*/
:root {
    --container-padding-x: 8px;
    --container-max: 100%;

    /* Переменные, которые переписывает js */
    --stories-duration: 6000ms;
    --stories-count: 0;
    --header-height: 96px;
    --header-topbar-height: 40px;
    --header-top: 40px;
}

@media (min-width: 768px) {
    :root {
        --container-padding-x: 12px;
    }
}

@media (min-width: 1024px) {
    :root {
    }
}

@media (min-width: 1024px) {
    :root {
    }
}

@media (min-width: 1536px) {
    :root {
        --container-padding-x: 20px;
    }
}

@media (min-width: 1920px) {
    :root {
        --container-padding-x: 24px;
        --container-max: calc(1552px + var(--container-padding-x));
    }
}

/* End */


/* Start:/local/frontend/styles/vars/figma/foregroung.css?1786365206804*/
/* foregroung
 * Figma: foregroung/*  ->  CSS: --foregroung-*
 * Коллекции Figma: app-colors
 * Сгенерировано из figma-variables/project.resolved.tokens.json */

:root {
    /* foregroung */
    --foregroung-grey-900: #353735;
    --foregroung-grey-800: #4D5357;
    --foregroung-grey-600: #747F81;
    --foregroung-grey-400: #949D9E;
    --foregroung-orange-red-500: #E84934;
    --foregroung-white: #FFFFFF;
    --foregroung-red-500: #FF2626;
    --foregroung-yellow-500: #FCCF07;
    --foregroung-green-500: #13D44A;
    --foregroung-orange-red-600: #D73F2B;
    --foregroung-orange-red-800: #B53120;
    --foregroung-grey-300: #BEC5C2;
    --foregroung-green-700: #4BA44B;
    --foregroung-orange-red-100: #FAB1A7;
    --foregroung-white-alpha-30: rgba(255, 255, 255, 0.3);
}

/* End */


/* Start:/local/frontend/styles/vars/figma/background.css?17918944964499*/
/* background
 * Figma: background/*  ->  CSS: --background-*
 * Коллекции Figma: app-colors, web-colors
 * Сгенерировано из figma-variables/project.resolved.tokens.json */

:root {
    /* background  ·  app-colors */
    --background-white: #FFFFFF;
    --background-light-grey-100: #F2F3F3;
    --background-orange-red-500: #E84934;
    --background-grey-900: #353735;
    --background-black-alpha-60: rgba(0, 0, 0, 0.6);
    --background-red-100: #FFDDDD;
    --background-yellow-100: #FFFAC2;
    --background-green-100: #D9FFE3;
    --background-light-grey-300: #DBDFDF;
    --background-grey-800: #4D5357;
    --background-orange-red-600: #D73F2B;
    --background-orange-red-800: #B53120;
    --background-black-alpha-30: rgba(0, 0, 0, 0.3);
    --background-grey-alpha-30: rgba(53, 55, 53, 0.3);
    --background-beige-400: #FAF2E3;
    --background-grey-600: #747F81;
    --background-white-alpha-8: rgba(255, 255, 255, 0.08);
    --background-dark-grey-900: #181818;
    --background-grey-alpha-70: rgba(53, 55, 53, 0.7);
    --background-beige-600: #F2E4C9;
    --background-light-grey-200: #E7EAE9;
    --background-green-700: #4BA44B;
    --background-grey-300: #BEC5C2;
    --background-orange-red-100: #FAB1A7;
    --background-white-alpha-12: rgba(255, 255, 255, 0.12);
    --background-black-alpha-80: rgba(0, 0, 0, 0.8);
    --background-orange-red-950: #461610;
    --background-white-alpha-4: rgba(255, 255, 255, 0.04);
    --background-white-alpha-2: rgba(255, 255, 255, 0.02);
    --background-green-200: #D9F1D1;
    --background-green-500: #7DB57D;
    --background-yellow-500: #F6CA83;
    --background-black-alpha-20: rgba(0, 0, 0, 0.2);
    --background-white-alpha-90: rgba(255, 255, 255, 0.9);

    /* background  ·  web-colors */
    --background-black: #000000;
    --background-pr: #FFFFFF;
    --background-inver-add: #4D5357;
    --background-inver: #353735;
    --background-ter: #E7EAE9;
    --background-ba-1: rgba(0, 0, 0, 0.52);
    --background-wa-1: rgba(255, 255, 255, 0.12);
    --background-sec: #F2F3F3;
    --background-acc: #D73F2B;
    --background-wa-2: rgba(255, 255, 255, 0.6);
    --background-add: #747F81;
    --background-acc-add: #B53120;
    --background-quat: #DCE1DF;
    --background-mute: #D1D8D5;
    --background-over-1: #000000;
    --background-error: #FFDDDD;
    --background-success: #D9F1D1;

    /* component  ·  web-colors */
    --background-component-action-1-pr-hover: #F2F3F3;
    --background-component-action-1-pr-pres: #D7DDDA;
    --background-component-action-1-pr-def: #FFFFFF;
    --background-component-action-1-disabled: #DCE1DF;
    --background-component-action-1-sec-def: #F2F3F3;
    --background-component-action-1-ter-def: #E7EAE9;
    --background-component-action-1-sec-hover: #E2E6E4;
    --background-component-action-1-sec-pres: #CCD4D0;
    --background-component-action-1-acc-def: #D73F2B;
    --background-component-action-1-acc-hover: #C93926;
    --background-component-action-1-acc-pressed: #B53120;
    --background-component-action-1-wa-1-def: rgba(255, 255, 255, 0.12);
    --background-component-action-1-wa-1-hover: rgba(255, 255, 255, 0.24);
    --background-component-action-1-wa-1-pres: rgba(255, 255, 255, 0.36);
    --background-component-action-1-inver-def: #353735;
    --background-component-action-1-inver-hover: #414542;
    --background-component-action-1-inver-pres: #353735;
    --background-component-action-1-ter-hover: #DCE1DF;
    --background-component-action-1-ter-pres: #D1D8D5;
    --background-component-action-1-wa-1-activ: #D73F2B;
    --background-component-action-1-acc-activ: #C93926;
    --background-component-action-1-ter-activ: #D73F2B;
    --background-component-action-1-sec-activ: #D73F2B;
    --background-component-action-1-pr-activ: #D73F2B;
    --background-component-action-1-add-active: #FFFFFF;
    --background-component-action-1-add-hover: #C93926;
    --background-component-action-1-add-pres: #B53120;
    --background-component-action-1-add-def: #D73F2B;
    --background-component-action-1-wa-1-dsb: rgba(255, 255, 255, 0.12);
    --background-component-action-2-sec-def: #F2F3F3;
    --background-component-action-2-sec-hover: #D73F2B;
    --background-component-action-2-sec-pres: #C93926;
    --background-component-action-2-acc-pressed: #C93926;
    --background-component-action-2-acc-hover: #D03D29;
    --background-component-action-2-acc-def: #FFFFFF;
    --background-component-action-2-sec-active: #D73F2B;
}

/* End */


/* Start:/local/frontend/styles/vars/figma/stroke.css?17891132161054*/
/* stroke
 * Figma: stroke/*  ->  CSS: --stroke-*
 * Коллекции Figma: app-colors, web-colors
 * Сгенерировано из figma-variables/project.resolved.tokens.json */

:root {
    /* stroke  ·  app-colors */
    --stroke-grey-300: #BEC5C2;
    --stroke-light-grey-100: #F2F3F3;
    --stroke-orange-red-500: #E84934;
    --stroke-white: #FFFFFF;
    --stroke-grey-600: #747F81;
    --stroke-grey-800: #4D5357;
    --stroke-grey-alpha-30: rgba(53, 55, 53, 0.3);
    --stroke-white-alpha-30: rgba(255, 255, 255, 0.3);
    --stroke-grey-400: #949D9E;
    --stroke-white-alpha-12: rgba(255, 255, 255, 0.12);

    /* stroke  ·  web-colors */
    --stroke-pr: #EDEFEE;
    --stroke-sec: #DCE1DF;
    --stroke-inver: #414542;
    --stroke-ter: #C6CFCB;
    --stroke-inver-add: #98A19F;
    --stroke-over: rgba(255, 255, 255, 0.12);
    --stroke-acc: #BF3523;
    --stroke-error: #FF2626;
    --stroke-success: #13D44A;

    /* component  ·  web-colors */
    --stroke-component-sec-hover: #4D5357;
    --stroke-component-sec-def: #ECEEEE;
}

/* End */


/* Start:/local/frontend/styles/vars/figma/map.css?1786365206410*/
/* map
 * Figma: map/*  ->  CSS: --map-*
 * Коллекции Figma: web-colors
 * Сгенерировано из figma-variables/project.resolved.tokens.json */

:root {
    /* map */
    --map-aluminium-grey-200: #CBCDD5;
    --map-aluminium-grey-100: #D8DCE1;
    --map-white: #FFFFFF;
    --map-aluminium-grey-400: #B8BAC0;
    --map-aluminium-grey-600: #AAAEB8;
    --map-aluminium-grey-800: #899099;
}

/* End */


/* Start:/local/frontend/styles/vars/figma/breakpoints.css?17918944962136*/
/* breakpoints
 * Figma: breakpoints/*  ->  CSS: --breakpoints-*
 * Справочные значения брейкпоинтов из Figma. Реальные @media ниже во всех файлах строятся по min-width.
 * Коллекции Figma: web
 * Сгенерировано из figma/mzdr-13-10-26/project.resolved.tokens.json */

:root {
    /* breakpoints */
    --breakpoints-width: 440px;
    --breakpoints-max-width: 767px;
    --breakpoints-min-width: 360px;
    --breakpoints-name: 440;
    --breakpoints-min-hight: 760px;
    --breakpoints-max-hight: 760px;
}

@media (min-width: 768px) {
    :root {
        /* breakpoints */
        --breakpoints-width: 768px;
        --breakpoints-max-width: 1023px;
        --breakpoints-min-width: 768px;
        --breakpoints-name: 768;
        --breakpoints-min-hight: 900px;
        --breakpoints-max-hight: 900px;
    }
}

@media (min-width: 1024px) {
    :root {
        /* breakpoints */
        --breakpoints-width: 1024px;
        --breakpoints-max-width: 1199px;
        --breakpoints-min-width: 1024px;
        --breakpoints-name: 1024;
        --breakpoints-min-hight: 600px;
        --breakpoints-max-hight: 600px;
    }
}

@media (min-width: 1200px) {
    :root {
        /* breakpoints */
        --breakpoints-width: 1200px;
        --breakpoints-max-width: 1535px;
        --breakpoints-min-width: 1200px;
        --breakpoints-name: 1200;
        --breakpoints-min-hight: 800px;
        --breakpoints-max-hight: 800px;
    }
}

@media (min-width: 1536px) {
    :root {
        /* breakpoints */
        --breakpoints-width: 1536px;
        --breakpoints-max-width: 1919px;
        --breakpoints-min-width: 1536px;
        --breakpoints-name: 1536;
        --breakpoints-min-hight: 864px;
        --breakpoints-max-hight: 864px;
    }
}

@media (min-width: 1920px) {
    :root {
        /* breakpoints */
        --breakpoints-width: 1920px;
        --breakpoints-max-width: 2560px;
        --breakpoints-min-width: 1920px;
        --breakpoints-name: 1920;
        --breakpoints-min-hight: 960px;
        --breakpoints-max-hight: 1280px;
    }
}

/* End */


/* Start:/local/frontend/styles/vars/figma/grid.css?17918944962033*/
/* grid
 * Figma: grid/*  ->  CSS: --grid-*
 * Коллекции Figma: web
 * Сгенерировано из figma/mzdr-13-10-26/project.resolved.tokens.json */

:root {
    /* grid-1 */
    --grid-grid-1-container-max-width: 768px;
    --grid-grid-1-columns: 4;
    --grid-grid-1-gutter: 16px;
    --grid-grid-1-margin: 8px;

    /* grid-2 */
    --grid-grid-2-container-max-width: 768px;
    --grid-grid-2-columns: 4;
    --grid-grid-2-gutter: 32px;
    --grid-grid-2-margin: 16px;
}

@media (min-width: 768px) {
    :root {
        /* grid-1 */
        --grid-grid-1-container-max-width: 1024px;
        --grid-grid-1-columns: 8;
        --grid-grid-1-gutter: 24px;
        --grid-grid-1-margin: 12px;

        /* grid-2 */
        --grid-grid-2-container-max-width: 1024px;
        --grid-grid-2-columns: 8;
        --grid-grid-2-gutter: 48px;
        --grid-grid-2-margin: 24px;
    }
}

@media (min-width: 1024px) {
    :root {
        /* grid-1 */
        --grid-grid-1-container-max-width: 1200px;

        /* grid-2 */
        --grid-grid-2-container-max-width: 1200px;
    }
}

@media (min-width: 1200px) {
    :root {
        /* grid-1 */
        --grid-grid-1-container-max-width: 1536px;
        --grid-grid-1-columns: 12;

        /* grid-2 */
        --grid-grid-2-container-max-width: 1536px;
        --grid-grid-2-columns: 12;
    }
}

@media (min-width: 1536px) {
    :root {
        /* grid-1 */
        --grid-grid-1-container-max-width: 1920px;
        --grid-grid-1-gutter: 40px;
        --grid-grid-1-margin: 20px;

        /* grid-2 */
        --grid-grid-2-container-max-width: 1920px;
        --grid-grid-2-gutter: 80px;
        --grid-grid-2-margin: 40px;
    }
}

@media (min-width: 1920px) {
    :root {
        /* grid-1 */
        --grid-grid-1-container-max-width: 2560px;
        --grid-grid-1-gutter: 48px;
        --grid-grid-1-margin: 24px;

        /* grid-2 */
        --grid-grid-2-container-max-width: 2560px;
        --grid-grid-2-gutter: 96px;
        --grid-grid-2-margin: 48px;
    }
}

/* End */


/* Start:/local/frontend/styles/vars/figma/spacing.css?17918944967866*/
/* spacing
 * Figma: spacing/*  ->  CSS: --spacing-*
 * Коллекции Figma: web
 * Сгенерировано из figma/mzdr-13-10-26/project.resolved.tokens.json */

:root {
    /* content */
    --spacing-content-gap-none: 0px;
    --spacing-content-gap-min: 4px;
    --spacing-content-gap-xs: 8px;
    --spacing-content-gap-sm: 12px;
    --spacing-content-gap-md: 24px;
    --spacing-content-gap-lg: 32px;
    --spacing-content-gap-xl: 32px;
    --spacing-content-gap-xxl: 48px;
    --spacing-content-gap-add: 64px;
    --spacing-content-gap-grid-1: 16px;
    --spacing-content-gap-grid-2: 32px;
    --spacing-content-gap-min-grid: 12px;
    --spacing-content-padding-none: 0px;
    --spacing-content-padding-min: 8px;
    --spacing-content-padding-xs: 8px;
    --spacing-content-padding-sm: 16px;
    --spacing-content-padding-md: 32px;
    --spacing-content-padding-grid-2: 16px;
    --spacing-content-padding-xl: 48px;
    --spacing-content-padding-xxl: 56px;
    --spacing-content-padding-lg: 20px;
    --spacing-content-padding-modal: 4px;
    --spacing-content-padding-grid-1: 8px;
    --spacing-content-padding-grid-3: 8px;
    --spacing-content-padding-grid-4: 16px;
    --spacing-content-gap-xxxl: 48px;
    --spacing-content-padding-xxxl: 160px;
    --spacing-content-padding-add-1: 64px;
    --spacing-content-padding-add-2: 128px;
    --spacing-content-gap-add-1: 112px;
    --spacing-content-gap-xxxl-2: 64px;
    --spacing-content-gap-add-2: 80px;

    /* component */
    --spacing-component-gap-min: 2px;
    --spacing-component-gap-xs: 4px;
    --spacing-component-gap-sm: 8px;
    --spacing-component-gap-md: 12px;
    --spacing-component-gap-xl: 20px;
    --spacing-component-gap-none: 0px;
    --spacing-component-gap-min-grid: 4px;
    --spacing-component-gap-lg: 20px;
    --spacing-component-gap-add: 24px;
    --spacing-component-padding-x-min: 4px;
    --spacing-component-padding-x-xs: 8px;
    --spacing-component-padding-x-sm: 12px;
    --spacing-component-padding-x-xl: 16px;
    --spacing-component-padding-x-xxl: 24px;
    --spacing-component-padding-x-md: 12px;
    --spacing-component-padding-x-none: 0px;
    --spacing-component-padding-x-add: 24px;
    --spacing-component-padding-y-min: 4px;
    --spacing-component-padding-y-xs: 8px;
    --spacing-component-padding-y-sm: 12px;
    --spacing-component-padding-y-xl: 16px;
    --spacing-component-padding-y-xxl: 20px;
    --spacing-component-padding-y-md: 12px;
    --spacing-component-padding-y-none: 0px;
    --spacing-component-padding-y-add: 24px;
    --spacing-component-padding-btn-button-icon-l: 12px;
    --spacing-component-padding-btn-button-icon-m: 12px;
    --spacing-component-padding-btn-button-icon-s: 8px;
    --spacing-component-padding-btn-button-share: 8px;
    --spacing-component-padding-x-add-3: 56px;
    --spacing-component-padding-x-add-2: 24px;
    --spacing-component-padding-y-add-2: 24px;
    --spacing-component-padding-y-add-3: 56px;
    --spacing-component-padding-x-add-4: 16px;
    --spacing-component-padding-y-add-4: 16px;

    --spacing-scale-4-5: 20px;
}

@media (min-width: 768px) {
    :root {
        /* content */
        --spacing-content-gap-xs: 12px;
        --spacing-content-gap-sm: 16px;
        --spacing-content-gap-xxl: 40px;
        --spacing-content-gap-grid-1: 24px;
        --spacing-content-gap-grid-2: 48px;
        --spacing-content-padding-xs: 16px;
        --spacing-content-padding-grid-2: 24px;
        --spacing-content-padding-lg: 40px;
        --spacing-content-padding-grid-1: 12px;
        --spacing-content-padding-grid-3: 12px;
        --spacing-content-padding-grid-4: 24px;
        --spacing-content-padding-add-2: 112px;
        --spacing-content-gap-xxxl: 44px;
        --spacing-content-gap-add-2: 64px;

        /* component */
        --spacing-component-gap-min: 4px;
        --spacing-component-gap-xs: 8px;
        --spacing-component-gap-sm: 12px;
        --spacing-component-gap-md: 16px;
        --spacing-component-gap-xl: 24px;
        --spacing-component-padding-x-xl: 20px;
        --spacing-component-padding-x-xxl: 16px;
        --spacing-component-padding-x-md: 16px;
        --spacing-component-padding-y-xl: 20px;
        --spacing-component-padding-y-xxl: 24px;
        --spacing-component-padding-y-md: 16px;
        --spacing-component-padding-btn-button-share: 12px;
        --spacing-component-padding-x-add-4: 64px;
        --spacing-component-padding-y-add-4: 64px;
    }
}

@media (min-width: 1024px) {
    :root {
        /* content */
        --spacing-content-gap-md: 20px;
        --spacing-content-padding-sm: 12px;
        --spacing-content-padding-md: 24px;
        --spacing-content-gap-xxxl: 48px;
        --spacing-content-padding-add-1: 80px;
        --spacing-content-padding-add-2: 80px;
        --spacing-content-gap-xxxl-2: 48px;
        --spacing-content-gap-add: 48px;

        /* component */
        --spacing-component-padding-btn-button-icon-m: 8px;
        --spacing-component-padding-x-add-4: 48px;
        --spacing-component-padding-y-add-4: 48px;
    }
}

@media (min-width: 1200px) {
    :root {
        /* content */
        --spacing-content-gap-md: 24px;
        --spacing-content-gap-lg: 28px;
        --spacing-content-padding-md: 32px;
        --spacing-content-padding-modal: 8px;
        --spacing-content-padding-add-2: 128px;
        --spacing-content-gap-add-2: 80px;
        --spacing-content-gap-add: 80px;

        /* component */
        --spacing-component-gap-xl: 20px;
        --spacing-component-padding-x-md: 12px;
        --spacing-component-padding-y-md: 12px;
        --spacing-component-padding-btn-button-icon-m: 12px;
        --spacing-component-padding-btn-button-share: 16px;
        --spacing-component-padding-x-add-4: 96px;
        --spacing-component-padding-y-add-4: 96px;
    }
}

@media (min-width: 1536px) {
    :root {
        /* content */
        --spacing-content-gap-lg: 32px;
        --spacing-content-gap-xl: 40px;
        --spacing-content-gap-xxl: 48px;
        --spacing-content-gap-grid-1: 40px;
        --spacing-content-gap-grid-2: 80px;
        --spacing-content-gap-min-grid: 20px;
        --spacing-content-padding-sm: 20px;
        --spacing-content-padding-grid-2: 40px;
        --spacing-content-padding-grid-1: 20px;
        --spacing-content-padding-grid-3: 20px;
        --spacing-content-padding-grid-4: 40px;
        --spacing-content-gap-xxxl: 56px;
        --spacing-content-gap-xxxl-2: 80px;
        --spacing-content-gap-add-1: 160px;

        /* component */
        --spacing-component-gap-xl: 24px;
        --spacing-component-padding-x-xxl: 20px;
        --spacing-component-padding-x-md: 16px;
        --spacing-component-padding-y-md: 16px;
        --spacing-component-padding-btn-button-icon-l: 16px;
        --spacing-component-padding-x-add-2: 40px;
        --spacing-component-padding-y-add-2: 40px;
        --spacing-component-padding-x-add-4: 80px;
        --spacing-component-padding-y-add-4: 80px;
    }
}

@media (min-width: 1920px) {
    :root {
        /* content */
        --spacing-content-gap-grid-1: 48px;
        --spacing-content-gap-grid-2: 96px;
        --spacing-content-padding-grid-2: 48px;
        --spacing-content-padding-grid-1: 24px;
        --spacing-content-padding-grid-3: 184px;
        --spacing-content-padding-grid-4: 208px;
        --spacing-content-gap-xxxl-2: 96px;
        --spacing-content-gap-add-2: 96px;

        /* component */
        --spacing-component-gap-add: 32px;
        --spacing-component-padding-x-xxl: 24px;
        --spacing-component-padding-x-add: 32px;
        --spacing-component-padding-y-add: 32px;
        --spacing-component-padding-x-add-2: 48px;
        --spacing-component-padding-y-add-2: 48px;
        --spacing-component-padding-x-add-4: 96px;
        --spacing-component-padding-y-add-4: 96px;
    }
}

/* End */


/* Start:/local/frontend/styles/vars/figma/opacity.css?1791894496431*/
/* opacity
 * Figma: opacity/*  ->  CSS: --opacity-*
 * Значения — проценты, как в Figma (20 = 20%). В CSS: opacity: calc(var(--opacity-overlay-light) * 1%)
 * Коллекции Figma: web
 * Сгенерировано из figma/mzdr-13-10-26/project.resolved.tokens.json */

:root {
    /* overlay */
    --opacity-overlay-light: 20;
    --opacity-overlay-default: 40;
    --opacity-overlay-strong: 60;
}

/* End */


/* Start:/local/frontend/styles/vars/figma/stroke-width.css?1791894496333*/
/* stroke-width
 * Figma: stroke-width/*  ->  CSS: --stroke-width-*
 * Коллекции Figma: web
 * Сгенерировано из figma/mzdr-13-10-26/project.resolved.tokens.json */

:root {
    /* stroke-width */
    --stroke-width-none: 0px;
    --stroke-width-s: 1px;
    --stroke-width-m: 2px;
    --stroke-width-l: 4px;
}

/* End */


/* Start:/local/frontend/styles/vars/figma/text.css?17914546061958*/
/* text
 * Figma: text/*  ->  CSS: --text-*
 * Коллекции Figma: web-colors
 * Сгенерировано из figma-variables/project.resolved.tokens.json */

:root {
    /* text */
    --text-inver: #FFFFFF;
    --text-pr: #353735;
    --text-sec: #87918F;
    --text-inver-add: #98A19F;
    --text-ter: #4D5357;
    --text-acc: #C93926;
    --text-success: #13D44A;
    --text-error: #FF2626;

    /* component */
    --text-component-action-1-pr-hover: #87918F;
    --text-component-action-1-sec-hover: #4D5357;
    --text-component-action-1-inver-def: #FFFFFF;
    --text-component-action-1-dsb: #BEC5C2;
    --text-component-action-1-pr-def: #353735;
    --text-component-action-1-sec-def: #87918F;
    --text-component-action-1-inver-hover: #F5F6F6;
    --text-component-action-1-pr-pressed: #4D5357;
    --text-component-action-1-inver-pres: #E1E4E3;
    --text-component-action-1-sec-pres: #353735;
    --text-component-action-1-inver-add-def: #98A19F;
    --text-component-action-1-inver-add-hover: #AAB2B0;
    --text-component-action-1-inver-add-pres: #98A19F;
    --text-component-action-1-sec-active: #4D5357;
    --text-component-action-1-over-def: rgba(255, 255, 255, 0.52);
    --text-component-action-1-over-hover: rgba(255, 255, 255, 0.76);
    --text-component-action-1-over-pres: rgba(255, 255, 255, 0.88);
    --text-component-action-1-over-active: #FFFFFF;
    --text-component-action-1-inver-add-active: #FFFFFF;
    --text-component-action-1-pr-active: #353735;
    --text-component-action-1-acc-def: #D73F2B;
    --text-component-action-1-acc-hover: #C93926;
    --text-component-action-1-acc-pres: #B53120;
    --text-component-action-1-acc-activ: #C93926;
    --text-component-action-1-over-dsb: rgba(255, 255, 255, 0.28);
    --text-component-action-2-pr-def: #353735;
    --text-component-action-2-pr-hover: #87918F;
    --text-component-action-2-pr-pressed: #4D5357;
    --text-component-action-2-pr-active: #FFFFFF;
}

/* End */


/* Start:/local/frontend/styles/vars/figma/effects.css?1791894496976*/
/* effects
 * Figma: effects/*  ->  CSS: --effects-*
 * Коллекции Figma: web-colors
 * Сгенерировано из figma-variables/project.resolved.tokens.json */

:root {
    /* shadow */
    --effects-shadow-default-x: 0px;
    --effects-shadow-default-y: 2px;
    --effects-shadow-default-blur: 4px;
    --effects-shadow-default-spread: 0px;
    --effects-shadow-default-color: rgba(0, 0, 0, 0.15);
    --effects-shadow-pin-x: 0px;
    --effects-shadow-pin-y: 3px;
    --effects-shadow-pin-blur: 8px;
    --effects-shadow-pin-spread: 0px;
    --effects-shadow-pin-color: rgba(0, 0, 0, 0.1);
    --effects-shadow-btn-x: 0px;
    --effects-shadow-btn-y: 0px;
    --effects-shadow-btn-blur: 6px;
    --effects-shadow-btn-spread: 0px;
    --effects-shadow-btn-color: rgba(0, 0, 0, 0.15);

    /* background-blur */
    --effects-background-blur-default-blur: 14px;
    --effects-background-blur-add-blur: 20px;
    --effects-background-blur-add-max-blur: 160px;
}

/* End */


/* Start:/local/frontend/styles/vars/figma/typography.css?179206868220828*/
/* typography
 * Figma: typography/*  ->  CSS: --typography-*
 * font-weight есть не у всех стилей — в Figma переменная font-width задана лишь для части токенов.
 * Коллекции Figma: web
 * Сгенерировано из figma/mzdr-13-10-26/project.resolved.tokens.json */

:root {
    /* heading */
    --typography-heading-headline-1-font-size: 32px;
    --typography-heading-headline-1-line-height: 36px;
    --typography-heading-headline-1-letter-spacing: 0px;
    --typography-heading-headline-1-paragraph-spacing: 0px;
    --typography-heading-headline-1-font-family: "RussianRail G Pro";
    --typography-heading-headline-1-font-width: 700;
    --typography-heading-headline-2-font-size: 24px;
    --typography-heading-headline-2-line-height: 30px;
    --typography-heading-headline-2-letter-spacing: 0px;
    --typography-heading-headline-2-paragraph-spacing: 0px;
    --typography-heading-headline-2-font-family: "RussianRail G Pro";
    --typography-heading-headline-2-font-width: 700;
    --typography-heading-headline-3-font-size: 20px;
    --typography-heading-headline-3-line-height: 24px;
    --typography-heading-headline-3-letter-spacing: 0px;
    --typography-heading-headline-3-paragraph-spacing: 0px;
    --typography-heading-headline-3-font-family: "RussianRail G Pro";
    --typography-heading-headline-3-font-width: 500;

    /* subheadline */
    --typography-subheadline-subheadline-1-font-size: 28px;
    --typography-subheadline-subheadline-1-line-height: 32px;
    --typography-subheadline-subheadline-1-letter-spacing: 0px;
    --typography-subheadline-subheadline-1-paragraph-spacing: 0px;
    --typography-subheadline-subheadline-1-font-family: "Roboto Flex";
    --typography-subheadline-subheadline-2-font-size: 20px;
    --typography-subheadline-subheadline-2-line-height: 24px;
    --typography-subheadline-subheadline-2-letter-spacing: 0px;
    --typography-subheadline-subheadline-2-paragraph-spacing: 0px;
    --typography-subheadline-subheadline-2-font-family: "Roboto Flex";
    --typography-subheadline-subheadline-3-font-size: 18px;
    --typography-subheadline-subheadline-3-line-height: 18px;
    --typography-subheadline-subheadline-3-letter-spacing: 0px;
    --typography-subheadline-subheadline-3-paragraph-spacing: 0px;
    --typography-subheadline-subheadline-3-font-family: "Roboto Flex";
    --typography-subheadline-subheadline-3-acc-font-size: 18px;
    --typography-subheadline-subheadline-3-acc-line-height: 18px;
    --typography-subheadline-subheadline-3-acc-letter-spacing: 0px;
    --typography-subheadline-subheadline-3-acc-paragraph-spacing: 0px;
    --typography-subheadline-subheadline-3-acc-font-family: "Roboto Flex";

    /* title */
    --typography-title-title-1-font-size: 20px;
    --typography-title-title-1-line-height: 24px;
    --typography-title-title-1-letter-spacing: 0px;
    --typography-title-title-1-paragraph-spacing: 0px;
    --typography-title-title-1-font-family: "Roboto Flex";
    --typography-title-title-2-font-size: 16px;
    --typography-title-title-2-line-height: 18px;
    --typography-title-title-2-letter-spacing: 0px;
    --typography-title-title-2-paragraph-spacing: 0px;
    --typography-title-title-2-font-family: "Roboto Flex";
    --typography-title-title-3-font-size: 14px;
    --typography-title-title-3-line-height: 16px;
    --typography-title-title-3-letter-spacing: 0px;
    --typography-title-title-3-paragraph-spacing: 0px;
    --typography-title-title-3-font-family: "Roboto Flex";

    /* body */
    --typography-body-body-1-acc-font-size: 14px;
    --typography-body-body-1-acc-line-height: 22px;
    --typography-body-body-1-acc-letter-spacing: 0px;
    --typography-body-body-1-acc-paragraph-spacing: 18px;
    --typography-body-body-1-acc-font-family: "Roboto Flex";
    --typography-body-body-1-font-size: 14px;
    --typography-body-body-1-line-height: 18px;
    --typography-body-body-1-letter-spacing: 0px;
    --typography-body-body-1-paragraph-spacing: 18px;
    --typography-body-body-1-font-family: "Roboto Flex";
    --typography-body-body-2-acc-font-size: 14px;
    --typography-body-body-2-acc-line-height: 18px;
    --typography-body-body-2-acc-letter-spacing: 0px;
    --typography-body-body-2-acc-paragraph-spacing: 0px;
    --typography-body-body-2-acc-font-family: "Roboto Flex";
    --typography-body-body-2-font-size: 14px;
    --typography-body-body-2-line-height: 18px;
    --typography-body-body-2-letter-spacing: 0px;
    --typography-body-body-2-paragraph-spacing: 0px;
    --typography-body-body-2-font-family: "Roboto Flex";
    --typography-body-body-1-acc-bold-font-size: 14px;
    --typography-body-body-1-acc-bold-line-height: 22px;
    --typography-body-body-1-acc-bold-letter-spacing: 0px;
    --typography-body-body-1-acc-bold-paragraph-spacing: 18px;
    --typography-body-body-1-acc-bold-font-family: "Roboto Flex";
    --typography-body-body-1-acc-bold-font-width: 700;
    --typography-body-body-1-acc-link-font-size: 14px;
    --typography-body-body-1-acc-link-line-height: 22px;
    --typography-body-body-1-acc-link-letter-spacing: 0px;
    --typography-body-body-1-acc-link-paragraph-spacing: 18px;
    --typography-body-body-1-acc-link-font-family: "Roboto Flex";
    --typography-body-body-2-link-font-size: 14px;
    --typography-body-body-2-link-line-height: 18px;
    --typography-body-body-2-link-letter-spacing: 0px;
    --typography-body-body-2-link-paragraph-spacing: 0px;
    --typography-body-body-2-link-font-family: "Roboto Flex";

    /* caption */
    --typography-caption-caption-1-acc-font-size: 14px;
    --typography-caption-caption-1-acc-line-height: 16px;
    --typography-caption-caption-1-acc-letter-spacing: 0px;
    --typography-caption-caption-1-acc-paragraph-spacing: 0px;
    --typography-caption-caption-1-acc-font-family: "Roboto Flex";
    --typography-caption-caption-1-font-size: 14px;
    --typography-caption-caption-1-line-height: 16px;
    --typography-caption-caption-1-letter-spacing: 0px;
    --typography-caption-caption-1-paragraph-spacing: 0px;
    --typography-caption-caption-1-font-family: "Roboto Flex";
    --typography-caption-caption-2-acc-font-size: 12px;
    --typography-caption-caption-2-acc-line-height: 13.2px;
    --typography-caption-caption-2-acc-letter-spacing: 0px;
    --typography-caption-caption-2-acc-paragraph-spacing: 0px;
    --typography-caption-caption-2-acc-font-family: "Roboto Flex";
    --typography-caption-caption-2-font-size: 12px;
    --typography-caption-caption-2-line-height: 14px;
    --typography-caption-caption-2-letter-spacing: 0px;
    --typography-caption-caption-2-paragraph-spacing: 0px;
    --typography-caption-caption-2-font-family: "Roboto Flex";
    --typography-caption-caption-2-link-font-size: 12px;
    --typography-caption-caption-2-link-line-height: 14px;
    --typography-caption-caption-2-link-letter-spacing: 0px;
    --typography-caption-caption-2-link-paragraph-spacing: 0px;
    --typography-caption-caption-2-link-font-family: "Roboto Flex";

    /* component */
    --typography-component-button-btn-1-font-size: 16px;
    --typography-component-button-btn-1-line-height: 16px;
    --typography-component-button-btn-1-letter-spacing: 0px;
    --typography-component-button-btn-1-paragraph-spacing: 0px;
    --typography-component-button-btn-1-font-family: "Roboto Flex";
    --typography-component-button-btn-2-font-size: 14px;
    --typography-component-button-btn-2-line-height: 14px;
    --typography-component-button-btn-2-letter-spacing: 0px;
    --typography-component-button-btn-2-paragraph-spacing: 0px;
    --typography-component-button-btn-2-font-family: "Roboto Flex";
    --typography-component-button-btn-3-font-size: 12px;
    --typography-component-button-btn-3-line-height: 12px;
    --typography-component-button-btn-3-letter-spacing: 0px;
    --typography-component-button-btn-3-paragraph-spacing: 0px;
    --typography-component-button-btn-3-font-family: "Roboto Flex";
    --typography-component-button-btn-acc-font-size: 28px;
    --typography-component-button-btn-acc-line-height: 28px;
    --typography-component-button-btn-acc-letter-spacing: 0px;
    --typography-component-button-btn-acc-paragraph-spacing: 0px;
    --typography-component-button-btn-acc-font-family: "Roboto Flex";
    --typography-component-tab-tab-1-font-size: 20px;
    --typography-component-tab-tab-1-line-height: 20px;
    --typography-component-tab-tab-1-letter-spacing: 0px;
    --typography-component-tab-tab-1-paragraph-spacing: 0px;
    --typography-component-tab-tab-1-font-family: "Roboto Flex";
    --typography-component-tab-tab-2-font-size: 16px;
    --typography-component-tab-tab-2-line-height: 18px;
    --typography-component-tab-tab-2-letter-spacing: 0px;
    --typography-component-tab-tab-2-paragraph-spacing: 0px;
    --typography-component-tab-tab-2-font-family: "Roboto Flex";
    --typography-component-tab-tab-3-font-size: 14px;
    --typography-component-tab-tab-3-line-height: 16px;
    --typography-component-tab-tab-3-letter-spacing: 0px;
    --typography-component-tab-tab-3-paragraph-spacing: 0px;
    --typography-component-tab-tab-3-font-family: "Roboto Flex";
    --typography-component-input-input-1-font-size: 18px;
    --typography-component-input-input-1-line-height: 18px;
    --typography-component-input-input-1-letter-spacing: 0px;
    --typography-component-input-input-1-paragraph-spacing: 18px;
    --typography-component-input-input-1-font-family: "Roboto Flex";
    --typography-component-input-input-1-font-width: 400;
    --typography-component-input-input-2-font-size: 18px;
    --typography-component-input-input-2-line-height: 18px;
    --typography-component-input-input-2-letter-spacing: 0px;
    --typography-component-input-input-2-paragraph-spacing: 0px;
    --typography-component-input-input-2-font-family: "Roboto Flex";
    --typography-component-counter-counter-1-paragraph-spacing: 0px;
    --typography-component-counter-counter-1-letter-spacing: 0px;
    --typography-component-counter-counter-1-font-family: "Roboto Flex";
    --typography-component-counter-counter-1-line-height: 12px;
    --typography-component-counter-counter-1-font-size: 12px;
    --typography-component-counter-counter-2-font-size: 12px;
    --typography-component-counter-counter-2-line-height: 12px;
    --typography-component-counter-counter-2-letter-spacing: 0px;
    --typography-component-counter-counter-2-paragraph-spacing: 0px;
    --typography-component-counter-counter-2-font-family: "Roboto Flex";
    --typography-component-tab-tab-btn-font-size: 14px;
    --typography-component-tab-tab-btn-line-height: 14px;
    --typography-component-tab-tab-btn-letter-spacing: 0px;
    --typography-component-tab-tab-btn-paragraph-spacing: 0px;
    --typography-component-tab-tab-btn-font-family: "Roboto Flex";
    --typography-component-search-font-size: 18px;
    --typography-component-search-line-height: 18px;
    --typography-component-search-letter-spacing: -1px;
    --typography-component-search-paragraph-spacing: 0px;
    --typography-component-search-font-family: "Roboto Flex";
    --typography-component-search-font-width: 500;

    /* display */
    --typography-display-display-1-font-size: 200px;
    --typography-display-display-1-line-height: 200px;
    --typography-display-display-1-letter-spacing: 1px;
    --typography-display-display-1-paragraph-spacing: 0px;
    --typography-display-display-1-font-family: "Roboto Flex";
    --typography-display-display-2-font-size: 44px;
    --typography-display-display-2-line-height: 44px;
    --typography-display-display-2-letter-spacing: 0px;
    --typography-display-display-2-paragraph-spacing: 0px;
    --typography-display-display-2-font-family: "Roboto Flex";
    --typography-display-display-3-font-size: 80px;
    --typography-display-display-3-line-height: 80px;
    --typography-display-display-3-letter-spacing: 1px;
    --typography-display-display-3-paragraph-spacing: 0px;
    --typography-display-display-3-font-family: "Roboto Flex";
    --typography-display-display-4-font-size: 60px;
    --typography-display-display-4-line-height: 60px;
    --typography-display-display-4-letter-spacing: 1px;
    --typography-display-display-4-paragraph-spacing: 0px;
    --typography-display-display-4-font-family: "Roboto Flex";

    /* additional */
    --typography-additional-add-1-font-size: 18px;
    --typography-additional-add-1-line-height: 18px;
    --typography-additional-add-1-letter-spacing: 0px;
    --typography-additional-add-1-paragraph-spacing: 0px;
    --typography-additional-add-1-font-family: "RussianRail G Pro";
    --typography-additional-add-1-font-family-2: "Roboto Flex";
    --typography-additional-add-2-font-size: 12px;
    --typography-additional-add-2-line-height: 12px;
    --typography-additional-add-2-letter-spacing: 0px;
    --typography-additional-add-2-paragraph-spacing: 0px;
    --typography-additional-add-2-font-family: "RussianRail G Pro";
    --typography-additional-add-2-font-width: 500;
}

@media (min-width: 768px) {
    :root {
        /* heading */
        --typography-heading-headline-1-font-size: 44px;
        --typography-heading-headline-1-line-height: 48px;
        --typography-heading-headline-2-font-size: 26px;
        --typography-heading-headline-2-line-height: 32px;

        /* subheadline */
        --typography-subheadline-subheadline-1-font-size: 34px;
        --typography-subheadline-subheadline-1-line-height: 38px;

        /* body */
        --typography-body-body-1-acc-line-height: 18px;
        --typography-body-body-1-acc-bold-line-height: 18px;
        --typography-body-body-1-acc-link-line-height: 18px;

        /* caption */
        --typography-caption-caption-2-acc-line-height: 14px;

        /* component */
        --typography-component-tab-tab-1-font-size: 24px;
        --typography-component-tab-tab-1-line-height: 24px;
        --typography-component-search-font-size: 24px;
        --typography-component-search-line-height: 24px;

        /* display */
        --typography-display-display-3-font-size: 100px;
        --typography-display-display-3-line-height: 100px;
        --typography-display-display-4-font-size: 80px;
        --typography-display-display-4-line-height: 80px;
    }
}

@media (min-width: 1200px) {
    :root {
        /* heading */
        --typography-heading-headline-2-font-size: 34px;
        --typography-heading-headline-2-line-height: 40px;
        --typography-heading-headline-3-font-size: 24px;
        --typography-heading-headline-3-line-height: 28px;

        /* subheadline */
        --typography-subheadline-subheadline-2-font-size: 18px;
        --typography-subheadline-subheadline-3-font-size: 16px;
        --typography-subheadline-subheadline-3-line-height: 16px;
        --typography-subheadline-subheadline-3-acc-font-size: 16px;
        --typography-subheadline-subheadline-3-acc-line-height: 16px;

        /* title */
        --typography-title-title-3-font-size: 16px;
        --typography-title-title-3-line-height: 18px;

        /* caption */
        --typography-caption-caption-1-acc-font-size: 16px;
        --typography-caption-caption-1-acc-line-height: 18px;

        /* component */
        --typography-component-button-btn-2-line-height: 16px;
        --typography-component-counter-counter-1-line-height: 14px;
        --typography-component-counter-counter-1-font-size: 14px;
        --typography-component-tab-tab-btn-font-size: 12px;
        --typography-component-tab-tab-btn-line-height: 12px;
    }
}

@media (min-width: 1536px) {
    :root {
        /* heading */
        --typography-heading-headline-1-font-size: 64px;
        --typography-heading-headline-1-line-height: 68px;
        --typography-heading-headline-3-font-size: 28px;
        --typography-heading-headline-3-line-height: 32px;

        /* subheadline */
        --typography-subheadline-subheadline-1-font-size: 44px;
        --typography-subheadline-subheadline-1-line-height: 52px;
        --typography-subheadline-subheadline-2-font-size: 20px;
        --typography-subheadline-subheadline-3-font-size: 18px;
        --typography-subheadline-subheadline-3-line-height: 18px;
        --typography-subheadline-subheadline-3-acc-font-size: 18px;
        --typography-subheadline-subheadline-3-acc-line-height: 18px;

        /* title */
        --typography-title-title-1-font-size: 24px;
        --typography-title-title-1-line-height: 28px;
        --typography-title-title-3-font-size: 14px;

        /* body */
        --typography-body-body-1-acc-font-size: 16px;
        --typography-body-body-1-acc-line-height: 20px;
        --typography-body-body-1-font-size: 16px;
        --typography-body-body-1-line-height: 20px;
        --typography-body-body-1-acc-bold-font-size: 16px;
        --typography-body-body-1-acc-bold-line-height: 20px;
        --typography-body-body-1-acc-link-font-size: 16px;
        --typography-body-body-1-acc-link-line-height: 20px;

        /* component */
        --typography-component-button-btn-1-font-size: 18px;
        --typography-component-button-btn-1-line-height: 18px;
        --typography-component-button-btn-2-font-size: 16px;
        --typography-component-button-btn-3-font-size: 14px;
        --typography-component-button-btn-3-line-height: 14px;
        --typography-component-tab-tab-1-font-size: 28px;
        --typography-component-tab-tab-1-line-height: 28px;
        --typography-component-counter-counter-1-line-height: 16px;
        --typography-component-counter-counter-1-font-size: 16px;
        --typography-component-search-font-size: 28px;
        --typography-component-search-line-height: 28px;

        /* display */
        --typography-display-display-1-font-size: 240px;
        --typography-display-display-1-line-height: 240px;
        --typography-display-display-3-font-size: 120px;
        --typography-display-display-3-line-height: 120px;
        --typography-display-display-4-font-size: 100px;
        --typography-display-display-4-line-height: 100px;
    }
}

@media (min-width: 1920px) {
    :root {
        /* heading */
        --typography-heading-headline-2-font-size: 40px;

        /* subheadline */
        --typography-subheadline-subheadline-1-line-height: 54px;

        /* title */
        --typography-title-title-2-font-size: 18px;
        --typography-title-title-2-line-height: 20px;

        /* body */
        --typography-body-body-1-acc-font-size: 18px;
        --typography-body-body-1-acc-line-height: 24px;
        --typography-body-body-1-font-size: 18px;
        --typography-body-body-1-line-height: 22px;
        --typography-body-body-2-acc-font-size: 16px;
        --typography-body-body-2-acc-line-height: 22px;
        --typography-body-body-2-font-size: 16px;
        --typography-body-body-2-line-height: 22px;
        --typography-body-body-1-acc-bold-font-size: 18px;
        --typography-body-body-1-acc-bold-line-height: 24px;
        --typography-body-body-1-acc-link-font-size: 18px;
        --typography-body-body-1-acc-link-line-height: 24px;
        --typography-body-body-2-link-font-size: 16px;
        --typography-body-body-2-link-line-height: 22px;

        /* caption */
        --typography-caption-caption-1-font-size: 16px;
        --typography-caption-caption-1-line-height: 18px;
        --typography-caption-caption-2-acc-font-size: 14px;
        --typography-caption-caption-2-acc-line-height: 16px;
        --typography-caption-caption-2-font-size: 14px;
        --typography-caption-caption-2-line-height: 16px;
        --typography-caption-caption-2-link-font-size: 14px;
        --typography-caption-caption-2-link-line-height: 16px;

        /* component */
        --typography-component-tab-tab-3-font-size: 16px;
        --typography-component-tab-tab-3-line-height: 18px;
        --typography-component-input-input-1-font-width: 500;
        --typography-component-search-font-size: 32px;
        --typography-component-search-line-height: 32px;
        --typography-component-input-input-1-font-size: 20px;
        --typography-component-input-input-1-line-height: 24px;

        /* display */
        --typography-display-display-1-font-size: 280px;
        --typography-display-display-1-line-height: 280px;
        --typography-display-display-2-font-size: 100px;
        --typography-display-display-2-line-height: 100px;
        --typography-display-display-3-font-size: 140px;
        --typography-display-display-3-line-height: 140px;
        --typography-display-display-4-font-size: 120px;
        --typography-display-display-4-line-height: 120px;

        /* additional */
        --typography-additional-add-1-font-size: 28px;
        --typography-additional-add-1-line-height: 28px;
    }
}

/* End */


/* Start:/local/frontend/styles/vars/figma/icon.css?1791894496487*/
/* icon
 * Figma: icon/*  ->  CSS: --icon-*
 * Коллекции Figma: web-colors
 * Сгенерировано из figma-variables/project.resolved.tokens.json */

:root {
    /* icon */
    --icon-pr: #353735;
    --icon-sec: #87918F;
    --icon-inver-acc: #CCD2D0;
    --icon-inver: #FFFFFF;
    --icon-acc: #D73F2B;
    --icon-dsb: #BEC5C2;
    --icon-success: #13D44A;
    --icon-error: #FF2626;
    --icon-over-dsb: rgba(255, 255, 255, 0.28);
    --icon-success-add: #4BA44B;
}

/* End */


/* Start:/local/frontend/styles/vars/figma/radius.css?17918944961652*/
/* radius
 * Figma: radius/*  ->  CSS: --radius-*
 * Коллекции Figma: web
 * Сгенерировано из figma/mzdr-13-10-26/project.resolved.tokens.json */

:root {
    /* radius */
    --radius-none: 0px;
    --radius-2xs: 2px;
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-3xl: 20px;
    --radius-4xl: 24px;
    --radius-5xl: 32px;
    --radius-6xl: 40px;
    --radius-7xl: 40px;
    --radius-8xl: 40px;
    --radius-9xl: 72px;
    --radius-10xl: 80px;
    --radius-full: 999px;

    /* Component */
    --radius-component-button: 8px;
    --radius-component-input: 8px;
    --radius-component-card: 16px;
    --radius-component-modal: 24px;
    --radius-component-badge: 999px;
}

@media (min-width: 768px) {
    :root {
        /* radius */
        --radius-xl: 16px;
        --radius-7xl: 48px;
        --radius-8xl: 48px;
    }
}

@media (min-width: 1024px) {
    :root {
        /* radius */
        --radius-2xl: 20px;
        --radius-3xl: 24px;
        --radius-4xl: 28px;
    }
}

@media (min-width: 1200px) {
    :root {
        /* radius */
        --radius-sm: 8px;
    }
}

@media (min-width: 1536px) {
    :root {
        /* radius */
        --radius-md: 12px;
        --radius-lg: 16px;
        --radius-xl: 20px;
        --radius-2xl: 24px;
        --radius-3xl: 28px;
        --radius-4xl: 32px;
        --radius-5xl: 40px;
        --radius-6xl: 48px;
        --radius-7xl: 56px;
        --radius-8xl: 56px;
    }
}

@media (min-width: 1920px) {
    :root {
        /* radius */
        --radius-8xl: 64px;
    }
}

/* End */


/* Start:/local/frontend/styles/vars/figma/size.css?179189449627567*/
/* size
 * Figma: size/*  ->  CSS: --size-*
 * Коллекции Figma: web
 * Сгенерировано из figma/mzdr-13-10-26/project.resolved.tokens.json */

:root {
    /* component */
    --size-component-card-media-center-pr-img-height: 194px;
    --size-component-card-media-center-pr-img-height-hover: 194px;
    --size-component-card-media-center-sec-img-height: 64px;
    --size-component-card-media-center-sec-img-height-hover: 64px;
    --size-component-dropdown-accent-height: 44px;
    --size-component-news-card-width: 416px;
    --size-component-news-card-height: 320px;
    --size-component-partners-card-width: 424px;
    --size-component-partners-card-height: 444px;
    --size-component-media-card-width: 424px;
    --size-component-media-card-height-text: 308px;
    --size-component-media-card-height-text-2: 140px;
    --size-component-job-card-width: 424px;
    --size-component-job-card-height: 292px;
    --size-component-achievement-card-width: 424px;
    --size-component-achievement-card-height: 363px;
    --size-component-exhibit-card-width: 206px;
    --size-component-exhibit-card-height: 392px;
    --size-component-table-block-container-width: 206px;
    --size-component-table-block-container-height: 392px;
    --size-component-program-card-width: 424px;
    --size-component-accordion-max-width: 440px;
    --size-component-media-block-content-area-width: 440px;
    --size-component-card-media-height-text: 72px;
    --size-component-card-media-img-height-hover: 190px;
    --size-component-card-media-img-height: 212px;
    --size-component-media-video-player-video-max-height: 200px;
    --size-component-review-card-height: 480px;
    --size-component-card-media-img-max-width: 280px;
    --size-component-card-media-img-max-width-hover: 280px;
    --size-component-tab-btn-acc-width: 64px;
    --size-component-tab-btn-def-default: 44px;
    --size-component-btn-width: 44px;
    --size-component-pin-card-width: 320px;
    --size-component-pin-card-hieght: 420px;
    --size-component-doc-text-area-width: 320px;
    --size-component-doc-title-width: 320px;
    --size-component-map-card-pr-width: 320px;
    --size-component-map-card-pr-hieght: 470px;
    --size-component-map-card-sec-max-width: 320px;
    --size-component-icon-me-width: 32px;
    --size-component-content-museum-360-maps-naviagtion-width: 424px;
    --size-component-input-search-height: 52px;
    --size-component-card-search-height-text: 72px;
    --size-component-card-search-img-max-width: 280px;
    --size-component-card-search-img-max-width-hover: 280px;
    --size-component-card-search-img-height: 180px;
    --size-component-card-search-img-height-hover: 180px;
    --size-component-collection-card-width: 200px;
    --size-component-collection-card-height: 292px;
    --size-component-error-txt-search-width: 320px;
    --size-component-card-ck-height-text: 72px;
    --size-component-ck-video-slider-gap: -60px;
    --size-component-ck-video-slider-width-txt-block: 408px;
    --size-component-ck-video-slider-pd-dis-slide: 16px;
    --size-component-ck-video-slider-pd-top: 80px;
    --size-component-ck-video-slider-pd-bottom: 216px;
    --size-component-ck-cell-width: 180px;
    --size-component-ck-card-dw-width: 320px;
    --size-component-ck-card-dw-hight: 120px;
    --size-component-ck-block-caption-detail-width: 384px;
    --size-component-ck-img-fragment-detail-width: 320px;
    --size-component-ck-detail-cover-width-text-block: 320px;
    --size-component-ck-detail-cover-width-text-dscr: 320px;
    --size-component-slider-width-description: 320px;
    --size-component-img-history-card-height: 360px;
    --size-component-img-history-card-img-height-hover: 220px;
    --size-component-img-history-card-img-height: 220px;
    --size-component-img-history-card-height-text: 32px;
    --size-component-history-card-width: 320px;
    --size-component-history-card-date-width: 280px;
    --size-component-card-area-cards-width: 424px;
    --size-component-card-museum-1-height-card: 440px;
    --size-component-card-museum-1-img-width: 280px;
    --size-component-card-museum-1-height-img-area: 180px;
    --size-component-card-museum-2-height: 240px;
    --size-component-input-height: 58px;
    --size-component-input-height-text-area: 200px;
    --size-component-card-media-card-height: 415px;
    --size-component-card-form-width: 320px;
    --size-component-program-card-height-card: 354px;
    --size-component-program-card-height-img-area: 220px;
    --size-component-program-card-img-width: 335px;
    --size-component-archive-card-card-height: 415px;
    --size-component-archive-card-img-height: 212px;
    --size-component-magnification-lens-width: 240px;
    --size-component-achievement-card-img-height: 140px;
    --size-component-btn-l-height: 52px;
    --size-component-btn-m-height: 40px;
    --size-component-btn-s-height: 28px;
    --size-component-ck-card-height-text: 72px;
    --size-component-app-download-width: 424px;
    --size-component-ck-cover-width: 148px;
    --size-component-modal-video-img-img-max-height: 400px;
    --size-component-maps-point-point-width: 44px;
    --size-component-maps-point-claster-width: 64px;

    /* icons */
    --size-icons-s-width: 12px;
    --size-icons-s-height: 12px;
    --size-icons-l-width: 20px;
    --size-icons-l-height: 20px;
    --size-icons-m-width: 16px;
    --size-icons-m-height: 16px;
    --size-icons-xl-width: 36px;
    --size-icons-xl-height: 36px;

    /* layout */
    --size-layout-grid-3-width: 424px;
    --size-layout-grid-4-width: 408px;
    --size-layout-block-article-content-width: 408px;
    --size-layout-block-article-share-width: 408px;
}

@media (min-width: 768px) {
    :root {
        /* component */
        --size-component-card-media-center-pr-img-height: 378px;
        --size-component-card-media-center-pr-img-height-hover: 378px;
        --size-component-card-media-center-sec-img-height: 314px;
        --size-component-card-media-center-sec-img-height-hover: 314px;
        --size-component-news-card-width: 364px;
        --size-component-partners-card-width: 366px;
        --size-component-partners-card-height: 449px;
        --size-component-media-card-width: 744px;
        --size-component-media-card-height-text: 208px;
        --size-component-media-card-height-text-2: 126px;
        --size-component-job-card-width: 366px;
        --size-component-job-card-height: 308px;
        --size-component-achievement-card-width: 366px;
        --size-component-achievement-card-height: 381px;
        --size-component-exhibit-card-width: 240px;
        --size-component-exhibit-card-height: 314px;
        --size-component-table-block-container-width: 240px;
        --size-component-table-block-container-height: 314px;
        --size-component-program-card-width: 366px;
        --size-component-accordion-max-width: 768px;
        --size-component-media-block-content-area-width: 768px;
        --size-component-media-video-player-video-max-height: 360px;
        --size-component-review-card-height: 340px;
        --size-component-card-media-img-max-width: 240px;
        --size-component-card-media-img-max-width-hover: 240px;
        --size-component-pin-card-hieght: 430px;
        --size-component-doc-text-area-width: 720px;
        --size-component-doc-title-width: 720px;
        --size-component-map-card-pr-hieght: 490px;
        --size-component-content-museum-360-maps-naviagtion-width: 744px;
        --size-component-card-search-img-max-width: 240px;
        --size-component-card-search-img-max-width-hover: 240px;
        --size-component-collection-card-width: 283px;
        --size-component-collection-card-height: 308px;
        --size-component-error-txt-search-width: 460px;
        --size-component-ck-video-slider-gap: -90px;
        --size-component-ck-video-slider-width-txt-block: 520px;
        --size-component-ck-video-slider-pd-dis-slide: 32px;
        --size-component-ck-video-slider-pd-bottom: 164px;
        --size-component-ck-cell-width: 142px;
        --size-component-ck-card-dw-width: 520px;
        --size-component-ck-card-dw-hight: 160px;
        --size-component-ck-img-fragment-detail-width: 440px;
        --size-component-ck-detail-cover-width-text-block: 620px;
        --size-component-ck-detail-cover-width-text-dscr: 440px;
        --size-component-slider-width-description: 480px;
        --size-component-img-history-card-height: 340px;
        --size-component-img-history-card-img-height-hover: 190px;
        --size-component-img-history-card-img-height: 190px;
        --size-component-history-card-width: 744px;
        --size-component-history-card-date-width: 120px;
        --size-component-card-area-cards-width: 704px;
        --size-component-card-museum-1-img-width: 300px;
        --size-component-card-museum-2-height: 260px;
        --size-component-card-media-img-height: 176px;
        --size-component-card-media-card-height: 379px;
        --size-component-card-form-width: 600px;
        --size-component-program-card-height-card: 314px;
        --size-component-program-card-height-img-area: 180px;
        --size-component-program-card-img-width: 280px;
        --size-component-archive-card-card-height: 379px;
        --size-component-archive-card-img-height: 176px;
        --size-component-app-download-width: 600px;
        --size-component-ck-cover-width: 268px;
        --size-component-modal-video-img-img-max-height: 520px;
        --size-component-maps-point-point-width: 48px;
        --size-component-maps-point-claster-width: 70px;

        /* icons */
        --size-icons-l-width: 24px;
        --size-icons-l-height: 24px;

        /* layout */
        --size-layout-grid-3-width: 744px;
        --size-layout-grid-4-width: 720px;
        --size-layout-block-article-content-width: 720px;
        --size-layout-block-article-share-width: 252px;
    }
}

@media (min-width: 1024px) {
    :root {
        /* component */
        --size-component-card-media-center-pr-img-height: 180px;
        --size-component-card-media-center-pr-img-height-hover: 180px;
        --size-component-card-media-center-sec-img-height: 100px;
        --size-component-card-media-center-sec-img-height-hover: 100px;
        --size-component-news-card-width: 494px;
        --size-component-news-card-height: 348px;
        --size-component-partners-card-width: 494px;
        --size-component-partners-card-height: 444px;
        --size-component-media-card-width: 494px;
        --size-component-media-card-height-text: 256px;
        --size-component-job-card-width: 494px;
        --size-component-job-card-height: 290px;
        --size-component-achievement-card-width: 424px;
        --size-component-achievement-card-height: 383px;
        --size-component-exhibit-card-width: 241px;
        --size-component-exhibit-card-height: 396px;
        --size-component-table-block-container-width: 241px;
        --size-component-table-block-container-height: 396px;
        --size-component-program-card-width: 494px;
        --size-component-accordion-max-width: 1024px;
        --size-component-media-block-content-area-width: 724px;
        --size-component-card-media-img-height-hover: 160px;
        --size-component-card-media-img-height: 248px;
        --size-component-media-video-player-video-max-height: 400px;
        --size-component-review-card-height: 400px;
        --size-component-card-media-img-max-width: 220px;
        --size-component-card-media-img-max-width-hover: 220px;
        --size-component-pin-card-width: 640px;
        --size-component-pin-card-hieght: 242px;
        --size-component-map-card-pr-width: 722px;
        --size-component-map-card-pr-hieght: 274px;
        --size-component-content-museum-360-maps-naviagtion-width: 240px;
        --size-component-card-search-img-max-width: 220px;
        --size-component-card-search-img-max-width-hover: 220px;
        --size-component-card-search-img-height: 160px;
        --size-component-card-search-img-height-hover: 160px;
        --size-component-collection-card-height: 290px;
        --size-component-error-txt-search-width: 488px;
        --size-component-ck-video-slider-width-txt-block: 520px;
        --size-component-ck-video-slider-pd-top: 20px;
        --size-component-ck-video-slider-pd-bottom: 64px;
        --size-component-ck-cell-width: 148px;
        --size-component-ck-card-dw-width: 620px;
        --size-component-ck-card-dw-hight: 200px;
        --size-component-ck-block-caption-detail-width: 976px;
        --size-component-ck-detail-cover-width-text-block: 600px;
        --size-component-ck-detail-cover-width-text-dscr: 400px;
        --size-component-img-history-card-height: 360px;
        --size-component-img-history-card-img-height-hover: 200px;
        --size-component-img-history-card-img-height: 200px;
        --size-component-history-card-width: 860px;
        --size-component-history-card-date-width: 160px;
        --size-component-card-area-cards-width: 960px;
        --size-component-card-museum-1-img-width: 280px;
        --size-component-card-media-card-height: 434px;
        --size-component-program-card-height-card: 389px;
        --size-component-program-card-height-img-area: 255px;
        --size-component-program-card-img-width: 380px;
        --size-component-archive-card-card-height: 434px;
        --size-component-archive-card-img-height: 248px;
        --size-component-achievement-card-img-height: 160px;
        --size-component-app-download-width: 504px;
        --size-component-ck-cover-width: 300px;
        --size-component-modal-video-img-img-max-height: 360px;
        --size-component-maps-point-point-width: 44px;

        /* icons */
        --size-icons-l-width: 20px;
        --size-icons-l-height: 20px;

        /* layout */
        --size-layout-grid-3-width: 1000px;
        --size-layout-grid-4-width: 976px;
        --size-layout-block-article-content-width: 604px;
        --size-layout-block-article-share-width: 348px;
    }
}

@media (min-width: 1200px) {
    :root {
        /* component */
        --size-component-card-media-center-pr-img-height-hover: 220px;
        --size-component-card-media-center-sec-img-height-hover: 120px;
        --size-component-news-card-width: 384px;
        --size-component-news-card-height: 304px;
        --size-component-partners-card-width: 384px;
        --size-component-partners-card-height: 449px;
        --size-component-media-card-width: 582px;
        --size-component-media-card-height-text-2: 132px;
        --size-component-job-card-width: 384px;
        --size-component-job-card-height: 300px;
        --size-component-achievement-card-width: 526px;
        --size-component-achievement-card-height: 395px;
        --size-component-exhibit-card-width: 285px;
        --size-component-exhibit-card-height: 366px;
        --size-component-table-block-container-width: 285px;
        --size-component-table-block-container-height: 366px;
        --size-component-program-card-width: 582px;
        --size-component-accordion-max-width: 1200px;
        --size-component-media-block-content-area-width: 800px;
        --size-component-card-media-img-height: 149px;
        --size-component-review-card-height: 340px;
        --size-component-card-media-img-max-width: 260px;
        --size-component-card-media-img-max-width-hover: 280px;
        --size-component-pin-card-width: 320px;
        --size-component-pin-card-hieght: 430px;
        --size-component-doc-text-area-width: 552px;
        --size-component-doc-title-width: 552px;
        --size-component-map-card-pr-width: 320px;
        --size-component-map-card-pr-hieght: 480px;
        --size-component-content-museum-360-maps-naviagtion-width: 320px;
        --size-component-input-search-height: 60px;
        --size-component-card-search-img-max-width: 260px;
        --size-component-card-search-img-max-width-hover: 280px;
        --size-component-card-search-img-height: 140px;
        --size-component-collection-card-height: 300px;
        --size-component-error-txt-search-width: 376px;
        --size-component-ck-video-slider-gap: -100px;
        --size-component-ck-video-slider-width-txt-block: 448px;
        --size-component-ck-video-slider-pd-dis-slide: 40px;
        --size-component-ck-video-slider-pd-top: 56px;
        --size-component-ck-cell-width: 154px;
        --size-component-ck-card-dw-width: 302px;
        --size-component-ck-card-dw-hight: 752px;
        --size-component-ck-block-caption-detail-width: 752px;
        --size-component-ck-detail-cover-width-text-dscr: 440px;
        --size-component-img-history-card-height: 400px;
        --size-component-img-history-card-img-height-hover: 240px;
        --size-component-img-history-card-img-height: 220px;
        --size-component-history-card-width: 1064px;
        --size-component-history-card-date-width: 200px;
        --size-component-card-area-cards-width: 1152px;
        --size-component-card-museum-1-height-card: 460px;
        --size-component-card-museum-1-img-width: 320px;
        --size-component-card-media-card-height: 197px;
        --size-component-icon-me-width: 40px;
        --size-component-card-form-width: 640px;
        --size-component-program-card-height-card: 329px;
        --size-component-program-card-height-img-area: 195px;
        --size-component-program-card-img-width: 290px;
        --size-component-archive-card-card-height: 197px;
        --size-component-archive-card-img-height: 149px;
        --size-component-magnification-lens-width: 220px;
        --size-component-achievement-card-img-height: 190px;
        --size-component-app-download-width: 480px;
        --size-component-ck-cover-width: 302px;
        --size-component-modal-video-img-img-max-height: 540px;
        --size-component-maps-point-claster-width: 64px;

        /* layout */
        --size-layout-grid-3-width: 1176px;
        --size-layout-grid-4-width: 1152px;
        --size-layout-block-article-content-width: 764px;
        --size-layout-block-article-share-width: 356px;
    }
}

@media (min-width: 1536px) {
    :root {
        /* component */
        --size-component-card-media-center-pr-img-height: 200px;
        --size-component-card-media-center-pr-img-height-hover: 240px;
        --size-component-news-card-width: 485px;
        --size-component-news-card-height: 350px;
        --size-component-partners-card-width: 485px;
        --size-component-partners-card-height: 533px;
        --size-component-media-card-width: 738px;
        --size-component-media-card-height-text-2: 140px;
        --size-component-job-card-width: 485px;
        --size-component-job-card-height: 294px;
        --size-component-achievement-card-width: 664px;
        --size-component-achievement-card-height: 403px;
        --size-component-exhibit-card-width: 283px;
        --size-component-exhibit-card-height: 369px;
        --size-component-table-block-container-width: 283px;
        --size-component-table-block-container-height: 369px;
        --size-component-program-card-width: 738px;
        --size-component-media-block-content-area-width: 1112px;
        --size-component-card-media-img-height-hover: 180px;
        --size-component-card-media-img-height: 194px;
        --size-component-media-video-player-video-max-height: 520px;
        --size-component-card-media-img-max-width: 280px;
        --size-component-card-media-img-max-width-hover: 300px;
        --size-component-tab-btn-def-default: 56px;
        --size-component-btn-width: 56px;
        --size-component-pin-card-width: 340px;
        --size-component-pin-card-hieght: 440px;
        --size-component-doc-text-area-width: 688px;
        --size-component-doc-title-width: 688px;
        --size-component-map-card-pr-width: 340px;
        --size-component-map-card-pr-hieght: 500px;
        --size-component-map-card-sec-max-width: 340px;
        --size-component-content-museum-360-maps-naviagtion-width: 344px;
        --size-component-input-search-height: 64px;
        --size-component-card-search-img-max-width: 280px;
        --size-component-card-search-img-max-width-hover: 300px;
        --size-component-card-search-img-height: 160px;
        --size-component-card-search-img-height-hover: 180px;
        --size-component-collection-card-height: 294px;
        --size-component-error-txt-search-width: 472px;
        --size-component-ck-video-slider-gap: -110px;
        --size-component-ck-video-slider-width-txt-block: 484px;
        --size-component-ck-video-slider-pd-dis-slide: 52px;
        --size-component-ck-video-slider-pd-bottom: 80px;
        --size-component-ck-cell-width: 164px;
        --size-component-ck-card-dw-width: 384px;
        --size-component-ck-card-dw-hight: 816px;
        --size-component-ck-block-caption-detail-width: 816px;
        --size-component-ck-img-fragment-detail-width: 564px;
        --size-component-ck-detail-cover-width-text-block: 860px;
        --size-component-ck-detail-cover-width-text-dscr: 564px;
        --size-component-img-history-card-height: 420px;
        --size-component-img-history-card-img-height-hover: 260px;
        --size-component-img-history-card-img-height: 240px;
        --size-component-img-history-card-height-text: 36px;
        --size-component-history-card-width: 1348px;
        --size-component-history-card-date-width: 260px;
        --size-component-card-area-cards-width: 1456px;
        --size-component-card-museum-1-height-card: 500px;
        --size-component-card-museum-1-img-width: 340px;
        --size-component-card-museum-1-height-img-area: 200px;
        --size-component-card-museum-2-height: 300px;
        --size-component-card-media-card-height: 242px;
        --size-component-card-form-width: 700px;
        --size-component-program-card-height-card: 341px;
        --size-component-program-card-height-img-area: 205px;
        --size-component-program-card-img-width: 340px;
        --size-component-archive-card-card-height: 242px;
        --size-component-archive-card-img-height: 194px;
        --size-component-magnification-lens-width: 260px;
        --size-component-achievement-card-img-height: 220px;
        --size-component-btn-l-height: 56px;
        --size-component-app-download-width: 560px;
        --size-component-ck-cover-width: 384px;
        --size-component-modal-video-img-img-max-height: 600px;
        --size-component-maps-point-point-width: 48px;
        --size-component-maps-point-claster-width: 70px;

        /* icons */
        --size-icons-l-width: 24px;
        --size-icons-l-height: 24px;
        --size-icons-xl-width: 40px;
        --size-icons-xl-height: 40px;

        /* layout */
        --size-layout-grid-3-width: 1496px;
        --size-layout-grid-4-width: 1456px;
        --size-layout-block-article-content-width: 964px;
        --size-layout-block-article-share-width: 452px;
    }
}

@media (min-width: 1920px) {
    :root {
        /* component */
        --size-component-card-media-center-pr-img-height: 260px;
        --size-component-card-media-center-pr-img-height-hover: 300px;
        --size-component-card-media-center-sec-img-height: 120px;
        --size-component-card-media-center-sec-img-height-hover: 130px;
        --size-component-news-card-width: 504px;
        --size-component-news-card-height: 368px;
        --size-component-partners-card-width: 504px;
        --size-component-partners-card-height: 568px;
        --size-component-media-card-width: 766px;
        --size-component-media-card-height-text: 288px;
        --size-component-media-card-height-text-2: 172px;
        --size-component-job-card-width: 504px;
        --size-component-job-card-height: 334px;
        --size-component-achievement-card-width: 674px;
        --size-component-achievement-card-height: 449px;
        --size-component-exhibit-card-width: 287px;
        --size-component-exhibit-card-height: 419px;
        --size-component-table-block-container-width: 287px;
        --size-component-table-block-container-height: 419px;
        --size-component-program-card-width: 766px;
        --size-component-media-block-content-area-width: 1392px;
        --size-component-card-media-height-text: 80px;
        --size-component-card-media-img-height-hover: 200px;
        --size-component-card-media-img-height: 197px;
        --size-component-media-video-player-video-max-height: 640px;
        --size-component-review-card-height: 400px;
        --size-component-card-media-img-max-width: 300px;
        --size-component-card-media-img-max-width-hover: 320px;
        --size-component-pin-card-width: 360px;
        --size-component-pin-card-hieght: 480px;
        --size-component-doc-text-area-width: 864px;
        --size-component-doc-title-width: 860px;
        --size-component-map-card-pr-width: 360px;
        --size-component-map-card-pr-hieght: 550px;
        --size-component-map-card-sec-max-width: 360px;
        --size-component-icon-me-width: 44px;
        --size-component-content-museum-360-maps-naviagtion-width: 432px;
        --size-component-card-search-height-text: 80px;
        --size-component-card-search-img-max-width: 300px;
        --size-component-card-search-img-max-width-hover: 320px;
        --size-component-card-search-img-height: 180px;
        --size-component-card-search-img-height-hover: 200px;
        --size-component-collection-card-height: 334px;
        --size-component-error-txt-search-width: 592px;
        --size-component-ck-video-slider-gap: -120px;
        --size-component-ck-video-slider-width-txt-block: 544px;
        --size-component-ck-video-slider-pd-dis-slide: 56px;
        --size-component-ck-video-slider-pd-bottom: 96px;
        --size-component-ck-cell-width: 180px;
        --size-component-ck-card-dw-hight: 864px;
        --size-component-ck-block-caption-detail-width: 864px;
        --size-component-ck-img-fragment-detail-width: 640px;
        --size-component-ck-detail-cover-width-text-dscr: 544px;
        --size-component-slider-width-description: 500px;
        --size-component-img-history-card-height: 460px;
        --size-component-img-history-card-img-height-hover: 300px;
        --size-component-img-history-card-img-height: 280px;
        --size-component-history-card-width: 1368px;
        --size-component-history-card-date-width: 280px;
        --size-component-card-area-cards-width: 1552px;
        --size-component-card-museum-1-height-card: 540px;
        --size-component-card-museum-1-img-width: 360px;
        --size-component-card-museum-1-height-img-area: 220px;
        --size-component-card-museum-2-height: 320px;
        --size-component-card-media-card-height: 261px;
        --size-component-input-height: 64px;
        --size-component-input-height-text-area: 220px;
        --size-component-card-form-width: 740px;
        --size-component-program-card-height-card: 374px;
        --size-component-program-card-height-img-area: 220px;
        --size-component-program-card-img-width: 360px;
        --size-component-archive-card-card-height: 261px;
        --size-component-archive-card-img-height: 197px;
        --size-component-magnification-lens-width: 300px;
        --size-component-app-download-width: 600px;
        --size-component-modal-video-img-img-max-height: 700px;

        /* layout */
        --size-layout-grid-3-width: 1552px;
        --size-layout-grid-4-width: 1504px;
        --size-layout-block-article-content-width: 1048px;
        --size-layout-block-article-share-width: 408px;
    }
}

/* End */


/* Start:/local/frontend/styles/reset.css?17885077421237*/
*,
::before,
::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Настройки для плавного скролла и корректного отображения высоты */
html {
    -moz-tab-size: 4;
    tab-size: 4;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%; /* Запрет изменения размера шрифта при смене ориентации в iOS */
    scroll-behavior: smooth;
}

/* Убираем стандартные отступы у body и настраиваем базовое сглаживание шрифтов */
body {
    min-height: 100vh;
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

ul {
    margin: 0;
    padding-inline-start: 20px;
}

ol {
    margin: 0;
    padding-inline-start: 20px;
}

a {
    text-decoration: none;
    color: inherit;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
    background: transparent;
    border: none;
}

input {
    outline: none;
}

button {
    cursor: pointer;
}

textarea {
    resize: vertical;
}

/* End */


/* Start:/local/frontend/styles/style.css?17889458864132*/
html {
    background-color: var(--background-light-grey-200);
}

body {
    font-size: var(--typography-body-body-1-font-size);
    line-height: var(--typography-body-body-1-line-height);
    letter-spacing: var(--typography-body-body-1-letter-spacing);
    font-weight: 400;
    font-family: var(--typography-body-body-1-font-family), sans-serif;
    font-variation-settings: var(--rf-w50);
    color: var(--text-pr);

    background-color: var(--background-light-grey-200);
}

.block-bg-image {
    background-image: url('/local/frontend/images/images/section-bg-image.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
}

.container {
    width: var(--container-max);
    padding-right: var(--container-padding-x);
    padding-left: var(--container-padding-x);
}

.divider {
    width: 100%;
    height: var(--stroke-width-s);
}

.divider-vertical {
    height: 100%;
    width: var(--stroke-width-s);
}

.divider-dark {
    background-color: var(--stroke-inver);
}

.divider-light {
    background-color: var(--stroke-over);
}

.divider-primary {
    background-color: var(--stroke-pr);
}

.block-bg-image {
    background-image: url('/local/frontend/images/images/section-bg-image.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.island-2xs {
    border-radius: var(--radius-2xs);
}

.island-xs {
    border-radius: var(--radius-xs);
}

.island-sm {
    border-radius: var(--radius-sm);
}

.island-md {
    border-radius: var(--radius-md);
}

.island-lg {
    border-radius: var(--radius-lg);
}

.island-xl {
    border-radius: var(--radius-xl);
}

.island-2xl {
    border-radius: var(--radius-2xl);
}

.island-3xl {
    border-radius: var(--radius-3xl);
}

.island-4xl {
    border-radius: var(--radius-4xl);
}

.island-5xl {
    border-radius: var(--radius-5xl);
}

.island-6xl {
    border-radius: var(--radius-6xl);
}

.island-7xl {
    border-radius: var(--radius-7xl);
}

.island-8xl {
    border-radius: var(--radius-8xl);
}

.island-full {
    border-radius: var(--radius-full);
}

.transform-90 {
    transform: rotate(90deg);
}

.transform-180 {
    transform: rotate(180deg);
}

.transform-270 {
    transform: rotate(270deg);
}

.uppercase {
    text-transform: uppercase;
}

.underline {
    text-decoration: underline;
 }

.classic-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    width: 100%;
    background-color: var(--background-light-grey-200);
}

/* Тут специально наоборот, не как везде */
@media (max-width: 767px) {
    .min-width-768 {
        display: none !important;
    }
}

@media (max-width: 1023px) {
    .min-width-1024 {
        display: none !important;
    }
}

@media (max-width: 1199px) {
    .min-width-1200 {
        display: none !important;
    }
}

@media (max-width: 1535px) {
    .min-width-1536 {
        display: none !important;
    }
}

.share {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-content-gap-sm);
    border-top: var(--stroke-width-s) solid var(--stroke-sec);
    padding-top: var(--spacing-component-gap-add);
    padding-bottom: var(--spacing-component-padding-y-xl);
}

.share-title {
    margin: 0;
    text-transform: uppercase;
}

.share-list {
    display: flex;
    gap: var(--spacing-content-gap-min);
}

.share-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-lg);
    color: var(--icon-pr);
    background: var(--stroke-pr);
}

@media (min-width: 768px) {
    .share {
        padding-bottom: var(--spacing-component-gap-xs);
    }

    .share-button {
        width: 40px;
        height: 40px;
    }
}

@media (min-width: 1024px) {
    .share {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        border-top: none;
        padding-top: 0;
        padding-bottom: 0;
        gap: var(--spacing-content-gap-sm);
    }
}

/* End */


/* Start:/local/frontend/styles/animations.css?17921339665663*/
:root {
    --default-timing-standard: cubic-bezier(0.65, 0.05, 0.36, 1);

    --default-delay: 500ms;
    --medium-delay: 700ms;
    --long-delay: 1000ms;

    --short-duration: 300ms;
    --default-duration: 500ms;
    --long-duration: 1000ms;

    --popover-shadow-outset: calc(
        var(--effects-shadow-default-blur) * 2
        + max(0px, var(--effects-shadow-default-spread))
        + max(
            var(--effects-shadow-default-x), calc(-1 * var(--effects-shadow-default-x)),
            var(--effects-shadow-default-y), calc(-1 * var(--effects-shadow-default-y))
        )
    );
    --popover-appear-duration: 600ms;
    --popover-appear-easing: cubic-bezier(0.44, 0, 0.21, 1);

    --default-shift: 64px;
    --long-shift: 200px;

    --page-fade-duration-fast: 500ms;
    --page-fade-duration: 1000ms;
}

/*
 * Затухание страницы перед переходом на другую.
 *
 * Класс .page-is-leaving вешает main.js, он же берёт отсюда длительность
 * (--page-fade-duration), чтобы не дублировать число в двух местах, —
 * менять только здесь.
 */
@keyframes page-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

.page-is-leaving body {
    animation: page-out var(--page-fade-duration) var(--default-timing-standard) both;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        /* Не только для CSS: JS читает эту переменную и на столько же
           откладывает переход — иначе ссылка «залипала» бы на 300 мс */
        --page-fade-duration: 1ms;
        --popover-appear-duration: 1ms;
    }
}

/*
 * Появление снизу. Общая длительность — 1000ms по смещению; прозрачность
 * должна успеть за 500ms, поэтому её конечное значение стоит на 50%.
 * Дистанцию можно переопределить на элементе через --animation-shift.
 */
@keyframes appear-from-bottom {
    from {
        opacity: 0;
        transform: translateY(var(--animation-shift, var(--default-shift)));
    }

    50% {
        opacity: 1;
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.animation-appear-from-bottom {
    animation: appear-from-bottom var(--long-duration) var(--default-timing-standard) var(--default-delay) both;
}

/* Появление заголовка: то же самое, но дистанция больше — 200px вместо 64px */
.animation-appear-title {
    --animation-shift: var(--long-shift);

    animation: appear-from-bottom var(--long-duration) var(--default-timing-standard) var(--default-delay) both;
}

/* Блок под заголовком: то же, что заголовок, но выходит на 200ms позже */
.animation-appear-under-title {
    --animation-shift: var(--long-shift);

    animation: appear-from-bottom var(--long-duration) var(--default-timing-standard) var(--medium-delay) both;
}

/* Появление справа (виджеты): только смещение, без прозрачности */
@keyframes appear-from-right {
    from { transform: translateX(var(--animation-shift, calc(125%))); }
    to { transform: none; }
}

.animation-appear-from-right {
    animation: appear-from-right var(--long-duration) var(--default-timing-standard) var(--default-delay) both;
}

/* Появление сверху (шапка): только смещение, без прозрачности */
@keyframes appear-from-top {
    from { transform: translate3d(0, calc(var(--animation-shift, 100%) * -1), 0); }
    to { transform: translate3d(0, 0, 0); }
}

/* backwards, а не both: после анимации transform должен освободиться —
   его покадрово занимает header.js, когда шапка упирается в подвал */
.animation-appear-from-top {
    animation: appear-from-top var(--long-duration) var(--default-timing-standard) backwards;
}

/* Плавное появление без смещения */
@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.animation-fade-in {
    animation: fade-in var(--long-duration) var(--default-timing-standard) var(--default-delay) both;
}

/*
 * Появление поповеров и меню через маску: панель открывается сверху вниз.
 * Маска захватывает тень сверху и по бокам уже при раскрытии, а в конце — снизу.
 * backwards снимает clip-path после анимации, не оставляя лишний stacking context.
 */
@keyframes appear-through-mask {
    from {
        clip-path: inset(
            calc(-1 * var(--popover-shadow-outset))
            calc(-1 * var(--popover-shadow-outset))
            calc(100% + var(--popover-shadow-outset))
            calc(-1 * var(--popover-shadow-outset))
        );
    }

    to {
        clip-path: inset(
            calc(-1 * var(--popover-shadow-outset))
            calc(-1 * var(--popover-shadow-outset))
            calc(0% - var(--popover-shadow-outset))
            calc(-1 * var(--popover-shadow-outset))
        );
    }
}

.header-app-popover:not([hidden]),
.header-topbar-popovers:not([hidden]),
.tickets-modal:not([hidden]) .tickets-modal-window,
.header-menu.is-open .header-menu-window {
    animation: appear-through-mask var(--popover-appear-duration) var(--popover-appear-easing) backwards;
}

/* End */


/* Start:/local/frontend/styles/fonts.css?17919021011930*/
/* RussianRail G Pro */
@font-face {
    font-family: 'RussianRail G Pro';
    src: url('/local/frontend/styles/../fonts/RussianRailGRegular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'RussianRail G Pro';
    src: url('/local/frontend/styles/../fonts/RussianRailGProMedium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'RussianRail G Pro';
    src: url('/local/frontend/styles/../fonts/RussianRailGProBold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* RussianRail G Pro Extended — отдельное семейство (широкое начертание) */
@font-face {
    font-family: 'RussianRail G Pro Extended';
    src: url('/local/frontend/styles/../fonts/RussianRailGProExtend.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'RussianRail G Pro Extended';
    src: url('/local/frontend/styles/../fonts/RussianRailGProExtendedBold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Roboto Flex — вариативный шрифт */
@font-face {
    font-family: 'Roboto Flex';
    src: url('/local/frontend/styles/../fonts/RobotoFlex.woff2') format('woff2-variations');
    font-weight: 100 1000;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-russianrail: 'RussianRail G Pro', 'Arial', sans-serif;
    --font-russianrail-extended: 'RussianRail G Pro Extended', 'RussianRail G Pro', 'Arial', sans-serif;

    --font-roboto: 'Roboto Flex', 'Roboto', 'Arial', sans-serif;
    --rf-w25:      "wdth" 25, "GRAD" 0;
    --rf-w25-alt:  "wdth" 25, "GRAD" 0, "YOPQ" 80, "YTFI" 740;
    --rf-w30-g20:  "wdth" 30, "GRAD" 20;
    --rf-w50:      "wdth" 50, "GRAD" 0;
    --rf-w30-g60:  "wdth" 30, "GRAD" 60;
    --rf-w40-g100: "wdth" 40, "GRAD" 100;
    --rf-w40-g60: "wdth" 40, "GRAD" 60;
}

/* End */


/* Start:/local/frontend/styles/icons.css?1787671986708*/
.icon {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    vertical-align: middle;
}

/* Размеры. Без модификатора иконка равна размеру текста рядом (1em). */
.icon--12 { width: 12px; height: 12px; }
.icon--14 { width: 14px; height: 14px; }
.icon--16 { width: 16px; height: 16px; }
.icon--18 { width: 18px; height: 18px; }
.icon--20 { width: 20px; height: 20px; }
.icon--22 { width: 22px; height: 22px; }
.icon--24 { width: 24px; height: 24px; }
.icon--26 { width: 26px; height: 26px; }
.icon--28 { width: 28px; height: 28px; }
.icon--30 { width: 30px; height: 30px; }
.icon--32 { width: 32px; height: 32px; }
.icon--40 { width: 40px; height: 40px; }

/* End */


/* Start:/local/frontend/styles/typography.css?178912364611058*/
.display-1 {
    font-size: var(--typography-display-display-1-font-size);
    line-height: var(--typography-display-display-1-line-height);
    letter-spacing: var(--typography-display-display-1-letter-spacing);
    font-weight: 600;
    font-family: var(--typography-display-display-1-font-family), sans-serif;
    font-variation-settings: var(--rf-w25);
}

.display-2 {
    font-size: var(--typography-display-display-2-font-size);
    line-height: var(--typography-display-display-2-line-height);
    letter-spacing: var(--typography-display-display-2-letter-spacing);
    font-weight: 600;
    font-family: var(--typography-display-display-2-font-family), sans-serif;
}

.display-3 {
    font-size: var(--typography-display-display-3-font-size);
    line-height: var(--typography-display-display-3-line-height);
    letter-spacing: var(--typography-display-display-3-letter-spacing);
    font-weight: 600;
    font-family: var(--typography-display-display-3-font-family), sans-serif;
}

.display-4 {
    font-size: var(--typography-display-display-4-font-size);
    line-height: var(--typography-display-display-4-line-height);
    letter-spacing: var(--typography-display-display-4-letter-spacing);
    font-weight: 600;
    font-family: var(--typography-display-display-4-font-family), sans-serif;
}

h1, .headline-1 {
    font-size: var(--typography-heading-headline-1-font-size);
    line-height: var(--typography-heading-headline-1-line-height);
    letter-spacing: var(--typography-heading-headline-1-letter-spacing);
    font-weight: var(--typography-heading-headline-1-font-width);
    font-family: var(--typography-heading-headline-1-font-family), sans-serif;
}

h2, .headline-2 {
    font-size: var(--typography-heading-headline-2-font-size);
    line-height: var(--typography-heading-headline-2-line-height);
    letter-spacing: var(--typography-heading-headline-2-letter-spacing);
    font-weight: var(--typography-heading-headline-2-font-width);
    font-family: var(--typography-heading-headline-2-font-family), sans-serif;
}

h3, .headline-3 {
    font-size: var(--typography-heading-headline-3-font-size);
    line-height: var(--typography-heading-headline-3-line-height);
    letter-spacing: var(--typography-heading-headline-3-letter-spacing);
    font-weight: var(--typography-heading-headline-3-font-width);
    font-family: var(--typography-heading-headline-3-font-family), sans-serif;
}

.subheadline-1 {
    font-size: var(--typography-subheadline-subheadline-1-font-size);
    line-height: var(--typography-subheadline-subheadline-1-line-height);
    letter-spacing: var(--typography-subheadline-subheadline-1-letter-spacing);
    font-family: var(--typography-subheadline-subheadline-1-font-family), sans-serif;
    font-weight: 700;
    font-variation-settings: var(--rf-w25-alt);
}

.subheadline-2 {
    font-size: var(--typography-subheadline-subheadline-2-font-size);
    line-height: var(--typography-subheadline-subheadline-2-line-height);
    letter-spacing: var(--typography-subheadline-subheadline-2-letter-spacing);
    font-family: var(--typography-subheadline-subheadline-2-font-family), sans-serif;
    font-weight: 700;
    font-variation-settings: var(--rf-w25);
}

.subheadline-3 {
    font-size: var(--typography-subheadline-subheadline-3-font-size);
    line-height: var(--typography-subheadline-subheadline-3-line-height);
    letter-spacing: var(--typography-subheadline-subheadline-3-letter-spacing);
    font-family: var(--typography-subheadline-subheadline-3-font-family), sans-serif;
    font-weight: 500;
    font-variation-settings: var(--rf-w30-g20);
}

.subheadline-3-acc {
    font-size: var(--typography-subheadline-subheadline-3-acc-font-size);
    line-height: var(--typography-subheadline-subheadline-3-acc-line-height);
    letter-spacing: var(--typography-subheadline-subheadline-3-acc-letter-spacing);
    font-family: var(--typography-subheadline-subheadline-3-acc-font-family), sans-serif;
    font-weight: 700;
    font-variation-settings: var(--rf-w25);
}

.title-1 {
    font-size: var(--typography-title-title-1-font-size);
    line-height: var(--typography-title-title-1-line-height);
    letter-spacing: var(--typography-title-title-1-letter-spacing);
    font-family: var(--typography-title-title-1-font-family), sans-serif;
    font-weight: 700;
    font-variation-settings: var(--rf-w25);
}

.title-2 {
    font-size: var(--typography-title-title-2-font-size);
    line-height: var(--typography-title-title-2-line-height);
    letter-spacing: var(--typography-title-title-2-letter-spacing);
    font-family: var(--typography-title-title-2-font-family), sans-serif;
    font-weight: 700;
    font-variation-settings: var(--rf-w25);
}

.title-3 {
    font-size: var(--typography-title-title-3-font-size);
    line-height: var(--typography-title-title-3-line-height);
    letter-spacing: var(--typography-title-title-3-letter-spacing);
    font-family: var(--typography-title-title-3-font-family), sans-serif;
    font-weight: 700;
    font-variation-settings: var(--rf-w25);
}

.body-1 {
    font-size: var(--typography-body-body-1-font-size);
    line-height: var(--typography-body-body-1-line-height);
    letter-spacing: var(--typography-body-body-1-letter-spacing);
    font-family: var(--typography-body-body-1-font-family), sans-serif;
    font-weight: 400;
    font-variation-settings: var(--rf-w50);
}

.body-2 {
    font-size: var(--typography-body-body-2-font-size);
    line-height: var(--typography-body-body-2-line-height);
    letter-spacing: var(--typography-body-body-2-letter-spacing);
    font-family: var(--typography-body-body-2-font-family), sans-serif;
    font-weight: 400;
    font-variation-settings: var(--rf-w30-g20);
}

.body-1-acc {
    font-size: var(--typography-body-body-1-acc-font-size);
    line-height: var(--typography-body-body-1-acc-line-height);
    letter-spacing: var(--typography-body-body-1-acc-letter-spacing);
    font-family: var(--typography-body-body-1-acc-font-family), sans-serif;
    font-weight: 400;
}

.body-1-acc-bold {
    font-size: var(--typography-body-body-1-acc-font-size);
    line-height: var(--typography-body-body-1-acc-line-height);
    letter-spacing: var(--typography-body-body-1-acc-letter-spacing);
    font-family: var(--typography-body-body-1-acc-font-family), sans-serif;
    font-weight: 700;
}

.body-1-acc-link {
    font-size: var(--typography-body-body-1-acc-font-size);
    line-height: var(--typography-body-body-1-acc-line-height);
    letter-spacing: var(--typography-body-body-1-acc-letter-spacing);
    font-family: var(--typography-body-body-1-acc-font-family), sans-serif;
    text-decoration: underline;
    font-weight: 400;
}

.body-2-acc {
    font-size: var(--typography-body-body-2-acc-font-size);
    line-height: var(--typography-body-body-2-acc-line-height);
    letter-spacing: var(--typography-body-body-2-acc-letter-spacing);
    font-family: var(--typography-body-body-2-acc-font-family), sans-serif;
    font-weight: 500;
    font-variation-settings: var(--rf-w30-g20);
}

.body-2-link {
    font-size: var(--typography-body-body-2-acc-font-size);
    line-height: var(--typography-body-body-2-acc-line-height);
    letter-spacing: var(--typography-body-body-2-acc-letter-spacing);
    font-family: var(--typography-body-body-2-acc-font-family), sans-serif;
    font-weight: 400;
    font-variation-settings: var(--rf-w30-g20);
    text-decoration: underline;
}

.caption-1 {
    font-size: var(--typography-caption-caption-1-font-size);
    line-height: var(--typography-caption-caption-1-line-height);
    letter-spacing: var(--typography-caption-caption-1-letter-spacing);
    font-family: var(--typography-caption-caption-1-font-family), sans-serif;
}

.caption-2 {
    font-size: var(--typography-caption-caption-2-font-size);
    line-height: var(--typography-caption-caption-2-line-height);
    letter-spacing: var(--typography-caption-caption-2-letter-spacing);
    font-family: var(--typography-caption-caption-2-font-family), sans-serif;
    font-weight: 300;
    font-variation-settings: var(--rf-w30-g60);
}

.caption-1-acc {
    font-size: var(--typography-caption-caption-1-acc-font-size);
    line-height: var(--typography-caption-caption-1-acc-line-height);
    letter-spacing: var(--typography-caption-caption-1-acc-letter-spacing);
    font-family: var(--typography-caption-caption-1-acc-font-family), sans-serif;
    font-weight: 400;
    font-variation-settings: var(--rf-w30-g20);
}

.caption-2-acc {
    font-size: var(--typography-caption-caption-2-acc-font-size);
    line-height: var(--typography-caption-caption-2-acc-line-height);
    letter-spacing: var(--typography-caption-caption-2-acc-letter-spacing);
    font-family: var(--typography-caption-caption-2-acc-font-family), sans-serif;
    font-weight: 400;
}

.caption-2-link {
    font-size: var(--typography-caption-caption-2-acc-font-size);
    line-height: var(--typography-caption-caption-2-acc-line-height);
    letter-spacing: var(--typography-caption-caption-2-acc-letter-spacing);
    font-family: var(--typography-caption-caption-2-acc-font-family), sans-serif;
    font-weight: 300;
    font-variation-settings: var(--rf-w30-g20);
}

.additional-add-1 {
    font-size: var(--typography-additional-add-1-font-size);
    line-height: var(--typography-additional-add-1-line-height);
    letter-spacing: var(--typography-additional-add-1-letter-spacing);
    font-family: var(--typography-additional-add-1-font-family), sans-serif;
}

.additional-add-2 {
    font-size: var(--typography-additional-add-2-font-size);
    line-height: var(--typography-additional-add-2-line-height);
    letter-spacing: var(--typography-additional-add-2-letter-spacing);
    font-family: var(--typography-additional-add-2-font-family), sans-serif;
}

.typography-button-1 {
    font-family: var(--typography-component-button-btn-1-font-family), sans-serif;
    font-size: var(--typography-component-button-btn-1-font-size);
    line-height: var(--typography-component-button-btn-1-line-height);
    letter-spacing: var(--typography-component-button-btn-1-letter-spacing);
    text-transform: uppercase;
    font-weight: 700;
    font-variation-settings: var(--rf-w25);
}

.typography-button-2 {
    font-family: var(--typography-component-button-btn-2-font-family), sans-serif;
    font-size: var(--typography-component-button-btn-2-font-size);
    line-height: var(--typography-component-button-btn-2-line-height);
    letter-spacing: var(--typography-component-button-btn-2-letter-spacing);
    font-weight: 600;
    text-transform: uppercase;
    font-variation-settings: var(--rf-w25);
}

.typography-button-3 {
    font-family: var(--typography-component-button-btn-3-font-family), sans-serif;
    font-size: var(--typography-component-button-btn-3-font-size);
    line-height: var(--typography-component-button-btn-3-line-height);
    letter-spacing: var(--typography-component-button-btn-3-letter-spacing);
    font-weight: 600;
    text-transform: uppercase;
    font-variation-settings: var(--rf-w25);
}

/* End */


/* Start:/local/frontend/styles/buttons.css?17921392238919*/
.link-button {
    font-weight: 600;
    text-transform: uppercase;
    padding-bottom: 4px;
    border-bottom: 1px solid currentColor;
    font-variation-settings: var(--rf-w25);
    transition: color var(--short-duration);
}

.link-button[disabled] {
    color: var(--text-component-action-1-dsb) !important;
    cursor: not-allowed;
}

.link-button.button-size-s {
    font-family: var(--typography-component-button-btn-3-font-family), sans-serif;
    font-size: var(--typography-component-button-btn-3-font-size);
    line-height: var(--typography-component-button-btn-3-line-height);
    letter-spacing: var(--typography-component-button-btn-3-letter-spacing);
}

.link-button.button-size-m {
    font-family: var(--typography-component-button-btn-2-font-family), sans-serif;
    font-size: var(--typography-component-button-btn-2-font-size);
    line-height: var(--typography-component-button-btn-2-line-height);
    letter-spacing: var(--typography-component-button-btn-2-letter-spacing);
}

.link-button.button-size-l {
    font-family: var(--typography-component-button-btn-1-font-family), sans-serif;
    font-size: var(--typography-component-button-btn-1-font-size);
    line-height: var(--typography-component-button-btn-1-line-height);
    letter-spacing: var(--typography-component-button-btn-1-letter-spacing);
}

.link-button-primary {
    color: var(--text-component-action-1-pr-def);
}

.link-button-primary:hover {
    color: var(--text-component-action-1-pr-hover);
}

.link-button-primary:active {
    color: var(--text-component-action-1-pr-pressed);
}

.link-button-secondary {
    color: var(--text-component-action-1-sec-def);
}

.link-button-secondary:hover {
    color: var(--text-component-action-1-sec-hover);
}

.link-button-secondary:active {
    color: var(--text-component-action-1-sec-pres);
}

.link-button-inverse {
    color: var(--text-component-action-1-inver-def);
}

.link-button-inverse:hover {
    color: var(--text-component-action-1-inver-hover);
}

.link-button-inverse:active {
    color: var(--text-component-action-1-inver-pres);
}

.link-button-inverse-add {
    color: var(--text-component-action-1-inver-add-def);
}

.link-button-inverse-add:hover {
    color: var(--text-component-action-1-inver-add-hover);
}

.link-button-inverse-add:active {
    color: var(--text-component-action-1-inver-add-pres);
}

.link-button-acc {
    color: var(--text-component-action-1-acc-def);
}

.link-button-acc:hover {
    color: var(--text-component-action-1-acc-hover);
}

.link-button-acc:active {
    color: var(--text-component-action-1-acc-pres);
}

.button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-component-gap-xs);
    border-radius: var(--radius-lg);
    padding: var(--spacing-component-padding-y-xl) var(--spacing-component-padding-x-xl);
    text-transform: uppercase;
    white-space: nowrap;
    font-weight: 600;
    font-family: var(--typography-component-button-btn-3-font-family), sans-serif;
    font-size: var(--typography-component-button-btn-3-font-size);
    line-height: var(--typography-component-button-btn-3-line-height);
    letter-spacing: var(--typography-component-button-btn-3-letter-spacing);
    font-variation-settings: var(--rf-w25);
    transition: var(--default-duration) ease;
}

.button-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    min-width: 52px;
    gap: var(--spacing-component-gap-xs);
    border-radius: var(--radius-lg);
    padding: var(--spacing-component-padding-x-sm);
    text-transform: uppercase;
    white-space: nowrap;
    font-weight: 700;
    font-family: var(--typography-component-button-btn-3-font-family), sans-serif;
    font-size: var(--typography-component-button-btn-3-font-size);
    line-height: var(--typography-component-button-btn-3-line-height);
    letter-spacing: var(--typography-component-button-btn-3-letter-spacing);
    transition: var(--default-duration) ease;
}

.button[disabled], .button-menu[disabled] {
    color: var(--text-component-action-1-dsb) !important;
    background-color: var(--background-component-action-1-disabled) !important;
    cursor: not-allowed;
}

.button-primary {
    color: var(--text-pr);
    background-color: var(--background-component-action-1-pr-def);
}

.button-primary:hover {
    background-color: var(--background-component-action-1-pr-hover);
}

.button-primary:active {
    background-color: var(--background-component-action-1-pr-pres);
}

.button-secondary {
    color: var(--text-pr);
    background-color: var(--background-component-action-1-sec-def);
}

.button-secondary:hover {
    background-color: var(--background-component-action-1-sec-hover);
}

.button-secondary:active {
    background-color: var(--background-component-action-1-sec-pres);
}

.button-overlay {
    color: var(--text-inver);
    background-color: var(--background-component-action-1-wa-1-def);
}

.button-overlay:hover {
    background-color: var(--background-component-action-1-wa-1-hover);
}

.button-overlay:active {
    background-color: var(--background-component-action-1-wa-1-pres);
}

.button-accent {
    color: var(--text-inver);
    background-color: var(--background-component-action-1-acc-def);
}

.button-accent:hover {
    background-color: var(--background-component-action-1-acc-hover);
}

.button-accent:active {
    background-color: var(--background-component-action-1-acc-pressed);
}

.button-inver {
    color: var(--text-inver);
    background-color: var(--background-component-action-1-inver-def);
}

.button-inver:hover {
    background-color: var(--background-component-action-1-inver-hover);
}

.button-inver:active {
    background-color: var(--background-component-action-1-inver-pres);
}

@media (min-width: 1536px) {
    .button-menu {
        height: 56px;
        min-width: 56px;
    }
}

.icon-button {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--default-duration) ease;
}

.icon-button[disabled] {
    background-color: var(--background-component-action-1-disabled) !important;
    color: var(--icon-dsb) !important;
    cursor: not-allowed;
}

.icon-button--l {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
}

.icon-button--m {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
}

.icon-button--s {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
}

.icon-button--primary {
    background-color: var(--background-component-action-1-pr-def);
    color: var(--icon-pr);
}

.icon-button--primary:hover {
    background-color: var(--background-component-action-1-pr-hover);
}

.icon-button--primary:active {
    background-color: var(--background-component-action-1-pr-pres);
}

.icon-button--secondary {
    background-color: var(--background-component-action-2-sec-def);
    color: var(--icon-pr);
}

.icon-button--secondary:hover {
    background-color: var(--background-component-action-2-sec-hover);
    color: var(--icon-inver);
}

.icon-button--secondary:active {
    background-color: var(--background-component-action-2-sec-pres);
    color: var(--icon-inver);
}

.icon-button--overlay {
    background-color: var(--background-component-action-1-wa-1-def);
    color: var(--icon-inver);
}

.slide-to-next {
    -webkit-backdrop-filter: blur(var(--effects-background-blur-default-blur));
    backdrop-filter: blur(var(--effects-background-blur-default-blur));
}

.icon-button--overlay:hover {
    background-color: var(--background-component-action-1-wa-1-hover);
}

.icon-button--overlay:active {
    background-color: var(--background-component-action-1-wa-1-pres);
}

.icon-button--accent {
    background-color: var(--background-component-action-2-acc-def);
    color: var(--icon-acc);
}

.icon-button--accent:hover {
    background-color: var(--background-component-action-2-acc-hover);
    color: var(--icon-inver);
}

.icon-button--accent:active {
    background-color: var(--background-component-action-2-acc-pressed);
    color: var(--icon-inver);
}

.icon-button--inver {
    background-color: var(--background-component-action-1-inver-def);
    color: var(--text-inver);
}

.icon-button--inver:hover {
    background-color: var(--background-component-action-1-inver-hover);
}

.icon-button--inver:active {
    background-color: var(--background-component-action-1-inver-pres);
}

@media (min-width: 768px) {
    .icon-button--l {
        width: 48px;
        height: 48px;
    }
}
@media (min-width: 1024px) {
    .icon-button--l {
        width: 44px;
        height: 44px;
    }

    .icon-button--m {
        width: 32px;
        height: 32px;
    }
}
@media (min-width: 1200px) {
    .icon-button--m {
        width: 40px;
        height: 40px;
    }
}
@media (min-width: 1536px) {
    .icon-button--l {
        width: 56px;
        height: 56px;
    }
}
@media (min-width: 1920px) {}

/* End */


/* Start:/local/frontend/styles/forms.css?179240388218559*/
/*
 * Shared form primitives.
 * The classes are intentionally data-free: concrete Bitrix components keep their
 * own field names and AJAX logic, while visual states stay reusable.
 */

:root {
    --form-modal-viewport-gap: 24px;
    --form-modal-close-gap: 12px;
    --form-ui-select-list-max-height: 244px;
    --form-modal-close-space: calc(
        var(--size-icons-l-height) + var(--spacing-component-padding-btn-button-icon-l) + var(--spacing-component-padding-btn-button-icon-l)
    );
    --form-modal-window-offset: calc(
        var(--form-modal-viewport-gap) + var(--form-modal-viewport-gap) + var(--form-modal-close-space) + var(--form-modal-close-gap) + env(safe-area-inset-bottom, 0px)
    );
}

.form-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:
        var(--form-modal-viewport-gap)
        var(--spacing-content-padding-modal)
        calc(var(--form-modal-viewport-gap) + var(--form-modal-close-space) + var(--form-modal-close-gap) + env(safe-area-inset-bottom, 0px));
    overflow: hidden;
    overscroll-behavior: contain;
}

.form-modal[hidden] {
    display: none;
}

.form-modal__overlay {
    position: fixed;
    inset: 0;
    background-color: var(--background-black-alpha-60);
}

.form-modal__window {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: var(--size-component-card-form-width);
    min-height: 0;
    max-height: calc(100dvh - var(--form-modal-window-offset));
    overflow: visible;
    border-radius: var(--radius-4xl);
    background-color: var(--background-pr);
    color: var(--text-pr);
}

.form-modal__clip {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    border-radius: inherit;
}

.form-modal__clip[hidden] {
    display: none;
}

.form-modal__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: inherit;
    scrollbar-color: var(--background-mute) transparent;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.form-modal__scroll::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.form-modal__scroll::-webkit-scrollbar-track {
    background-color: transparent;
}

.form-modal__scroll::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: var(--radius-full);
    background-color: var(--background-mute);
    background-clip: content-box;
}

.form-modal__close {
    position: absolute;
    top: calc(100% + var(--form-modal-close-gap));
    left: 50%;
    padding: var(--spacing-component-padding-btn-button-icon-l);
    gap: var(--spacing-component-gap-none);
    border-radius: var(--radius-lg);
    transform: translateX(-50%);
}

.form-modal__close-icon {
    display: block;
    width: var(--size-icons-l-width);
    height: var(--size-icons-l-height);
    pointer-events: none;
}

.form-ui {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-content-gap-lg);
    padding: var(--spacing-content-padding-md);
}

.form-ui__title {
    margin: 0;
    text-align: center;
}

.form-ui__content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-content-gap-lg);
    min-width: 0;
}

.form-ui__group {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.form-ui__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.form-ui__field-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.form-ui__label {
    margin: 0;
    color: var(--text-ter);
}

.form-ui__counter,
.form-ui__hint {
    color: var(--text-sec);
}

.form-ui__control-wrap {
    position: relative;
    display: block;
}

.form-ui__control {
    display: flex;
    align-items: center;
    width: 100%;
    height: var(--size-component-input-height);
    min-height: 0;
    padding: var(--spacing-component-padding-y-xl) var(--spacing-component-padding-x-xl);
    border: 0;
    border-radius: var(--radius-md);
    background-color: var(--background-sec);
    gap: var(--spacing-base, 8px);
    color: var(--text-pr);
    font-family: var(--typography-component-input-input-1-font-family), sans-serif;
    font-size: var(--typography-component-input-input-1-font-size);
    line-height: var(--typography-component-input-input-1-line-height);
    letter-spacing: var(--typography-component-input-input-1-letter-spacing);
    font-weight: var(--typography-component-input-input-1-font-width);
    transition: box-shadow var(--short-duration), background-color var(--short-duration);
}

.form-ui__control::placeholder {
    color: var(--text-component-action-1-dsb);
    font-family: var(--typography-component-input-input-1-font-family), sans-serif;
    font-size: var(--typography-component-input-input-1-font-size);
    line-height: var(--typography-component-input-input-1-line-height);
    letter-spacing: var(--typography-component-input-input-1-letter-spacing);
    font-weight: var(--typography-component-input-input-1-font-width);
    opacity: 1;
}

.form-ui__control:focus-visible {
    outline: none;
}

.form-ui__control[disabled],
.form-ui__control:disabled {
    background-color: var(--background-quat);
    color: var(--text-component-action-1-dsb);
    cursor: not-allowed;
}

.form-ui__textarea {
    height: var(--size-component-input-height-text-area);
    min-height: var(--size-component-input-height-text-area);
    resize: vertical;
}

.form-ui__select {
    padding-right: 52px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.form-ui__select-icon {
    position: absolute;
    top: 50%;
    right: 18px;
    color: var(--text-sec);
    transform: translateY(-50%);
    transition: transform var(--short-duration);
    pointer-events: none;
}

.form-ui__select-box {
    position: relative;
}

.form-ui__select-toggle {
    justify-content: space-between;
    gap: var(--spacing-component-gap-sm);
    padding-right: 52px;
    text-align: left;
    cursor: pointer;
}

.form-ui__select-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.form-ui__select-value.is-placeholder {
    color: var(--text-component-action-1-dsb);
}

.form-ui__select-box.is-open .form-ui__select-value.is-placeholder {
    color: var(--text-pr);
}

.form-ui__select-box.is-open .form-ui__select-toggle {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    box-shadow: inset 0 calc(-1 * var(--stroke-width-hairline, 1px)) 0 var(--stroke-sec);
}

.form-ui__select-box.is-open .form-ui__select-icon {
    transform: translateY(-50%) rotate(180deg);
}

.form-ui__select-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-component-gap-min);
    margin: 0;
    max-height: var(--form-ui-select-list-max-height);
    padding:
        var(--spacing-component-padding-y-min)
        var(--spacing-component-gap-xs);
    list-style: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    background-color: var(--background-sec);
    outline: none;
    scrollbar-color: var(--stroke-grey-300) transparent;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.form-ui__select-list::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.form-ui__select-list::-webkit-scrollbar-track {
    background-color: transparent;
}

.form-ui__select-list::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: var(--radius-full);
    background-color: var(--stroke-grey-300);
    background-clip: content-box;
}

.form-ui__select-list[hidden] {
    display: none;
}

.form-ui__select-option {
    display: flex;
    align-items: center;
    min-height: var(--size-component-dropdown-accent-height);
    padding:
        var(--spacing-component-padding-y-sm)
        var(--spacing-component-padding-x-sm);
    border: var(--stroke-width-hairline, 1px) solid transparent;
    border-radius: var(--radius-md);
    color: var(--text-pr);
    font-family: var(--typography-component-input-input-1-font-family), sans-serif;
    font-size: var(--typography-component-input-input-1-font-size);
    line-height: var(--typography-component-input-input-1-line-height);
    letter-spacing: var(--typography-component-input-input-1-letter-spacing);
    font-weight: var(--typography-component-input-input-1-font-width);
    cursor: pointer;
}

.form-ui__select-option.is-active {
    background-color: var(--background-component-action-1-sec-hover);
}

.form-ui__select-option:active {
    background-color: var(--background-component-action-1-sec-pres);
}

.form-ui__select-option[aria-selected="true"] {
    background-color: var(--background-component-action-1-sec-activ);
    color: var(--text-inver);
}

.form-ui__error {
    display: none;
    color: var(--text-error);
}

.form-ui__field.is-error .form-ui__control {
    background-color: var(--background-pr);
    box-shadow: inset 0 0 0 var(--stroke-width-s) var(--stroke-orange-red-500);
}

.form-ui__field.is-error .form-ui__error,
.form-ui__error:not(:empty) {
    display: block;
}

.form-ui__invalid-icon {
    position: absolute;
    top: 50%;
    right: var(--spacing-component-padding-x-xl);
    display: none;
    width: var(--size-icons-l-width);
    height: var(--size-icons-l-height);
    color: var(--text-error);
    transform: translateY(-50%);
    pointer-events: none;
}

.form-ui__textarea + .form-ui__invalid-icon {
    top: var(--spacing-component-padding-y-xl);
    transform: none;
}

.form-ui__field.is-error .form-ui__invalid-icon {
    display: block;
}

.form-ui__field.is-error .form-ui__control-wrap .form-ui__control {
    padding-right: calc(var(--spacing-component-padding-x-xl) * 2 + var(--size-icons-l-width));
}

.form-ui__tags-head,
.form-ui__tags-legend {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    width: 100%;
    margin-bottom: var(--spacing-component-gap-md);
    gap: 16px;
}

.form-ui__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    min-width: 0;
}

.form-ui__tag {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background-color: var(--background-sec);
    color: var(--text-pr);
    cursor: pointer;
    transition: background-color var(--default-duration) ease, color var(--default-duration) ease;
}

.form-ui__tag:hover {
    background-color: var(--background-component-action-1-sec-hover);
}

.form-ui__tag:has(input:checked) {
    background-color: var(--background-acc);
    color: var(--text-inver);
}

.form-ui__tag.is-disabled {
    background-color: var(--background-quat);
    color: var(--text-component-action-1-dsb);
    cursor: not-allowed;
}

.form-ui__tag input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.form-ui__actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-content-gap-sm);
}

.form-ui__actions .button {
    flex: 0 0 auto;
    min-width: 100px;
    min-height: 44px;
    padding: var(--spacing-component-padding-y-xl) var(--spacing-component-padding-x-xl);
    border-radius: var(--radius-lg);
}

.form-ui__consent {
    flex: 1 1 auto;
    max-width: none;
    margin: 0;
    color: var(--text-sec);
}

.form-ui__consent a,
.form-ui__link {
    color: var(--text-acc);
    text-decoration: underline;
    transition: color var(--short-duration);
}

.form-ui__consent a:hover,
.form-ui__link:hover {
    color: var(--text-component-action-1-acc-hover);
}

.form-ui__note {
    margin: 0;
    color: var(--text-sec);
}

.form-ui__required {
    width: 100%;
    font-weight: 400;
}

.form-ui__errors {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-component-gap-xs);
    padding: var(--spacing-component-padding-y-xs) var(--spacing-component-padding-x-md);
    border-radius: var(--radius-component-input);
    background-color: var(--background-red-100);
    color: var(--text-error);
}

.form-ui__errors[hidden] {
    display: none;
}

.form-files-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 168px;
    padding: var(--spacing-component-padding-y-add) var(--spacing-component-padding-x-xl);
    border: var(--stroke-width-s) dashed var(--stroke-ter);
    border-radius: var(--radius-md);
    background-color: var(--background-pr);
    gap: var(--spacing-component-gap-md);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--short-duration), background-color var(--short-duration);
}

.form-files-dropzone:hover,
.form-files-dropzone.is-dragover {
    border-color: var(--text-sec);
    background-color: var(--background-component-action-1-sec-hover);
}

.form-files-dropzone:focus-within {
    border-color: var(--text-pr);
}

.form-files-dropzone.is-error {
    border-color: var(--stroke-error);
}

.form-files-dropzone.is-disabled {
    opacity: 0.5;
    pointer-events: none;
}

.form-files-dropzone__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.form-files-dropzone__plus,
.form-files-dropzone__limits {
    color: var(--text-sec);
}

.form-files-dropzone__plus {
    width: var(--size-icons-m-width);
    height: var(--size-icons-m-height);
}

.form-files-dropzone__title {
    color: var(--text-component-action-1-sec-active);
    font-family: var(--typography-component-input-input-1-font-family), sans-serif;
    font-size: var(--typography-component-input-input-1-font-size);
    font-weight: var(--typography-component-input-input-1-font-width);
    line-height: var(--typography-component-input-input-1-line-height);
    letter-spacing: var(--typography-component-input-input-1-letter-spacing);
}

.form-files {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-component-gap-xs);
    margin: var(--spacing-component-gap-md) 0 0;
    padding: 0;
    list-style: none;
}

.form-files[hidden] {
    display: none;
}

.form-file {
    display: flex;
    align-items: stretch;
    gap: var(--spacing-component-gap-xs);
    min-height: 100px;
}

.form-file.is-dragging {
    opacity: 0.5;
}

.form-file__handle,
.form-file__icon,
.form-file__info {
    border-radius: var(--radius-md);
    background-color: var(--background-sec);
}

.form-file__handle {
    flex: 0 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    border: none;
    color: var(--text-sec);
    cursor: grab;
}

.form-file__handle:active {
    cursor: grabbing;
}

.form-file__handle-icon {
    width: var(--size-icons-m-width);
    height: var(--size-icons-m-height);
    object-fit: contain;
}

.form-file__handle:focus-visible,
.form-file__remove:focus-visible {
    outline: var(--stroke-width-m) solid var(--stroke-grey-800);
    outline-offset: -2px;
}

.form-file__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-component-gap-add) var(--spacing-component-padding-x-add);
    color: var(--text-sec);
}

.form-file__doc {
    width: var(--size-icons-l-width);
    height: var(--size-icons-l-height);
}

.form-file__spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--stroke-grey-300);
    border-top-color: var(--text-sec);
    border-radius: var(--radius-full);
    animation: form-file-spin 0.8s linear infinite;
}

.form-file.is-uploading .form-file__spinner {
    display: block;
}

.form-file.is-uploading .form-file__doc {
    display: none;
}

@keyframes form-file-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .form-file__spinner {
        animation-duration: 2.4s;
    }
}

.form-file__info {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--spacing-component-gap-md);
    min-width: 0;
    padding:
        var(--spacing-component-padding-y-md)
        calc(var(--spacing-component-padding-x-md) + var(--size-icons-m-width) + var(--spacing-component-gap-md))
        var(--spacing-component-padding-y-md)
        var(--spacing-component-padding-x-md);
}

.form-file__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-pr);
}

.form-file__meta {
    display: flex;
    gap: var(--spacing-component-gap-sm);
    color: var(--text-sec);
}

.form-file__remove {
    position: absolute;
    top: var(--spacing-component-padding-y-md);
    right: var(--spacing-component-padding-x-md);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--size-icons-m-width);
    height: var(--size-icons-m-height);
    padding: 0;
    border: none;
    border-radius: var(--radius-full);
    background: none;
    color: var(--text-sec);
    cursor: pointer;
}

.form-file__remove-icon {
    display: block;
    width: var(--size-icons-m-width);
    height: var(--size-icons-m-height);
}

.form-file__remove:hover {
    color: var(--text-pr);
}

.form-file.is-error .form-file__icon,
.form-file.is-error .form-file__meta,
.form-file.is-error .form-file__remove {
    color: var(--text-error);
}

.form-files-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.form-ui__success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: var(--spacing-content-padding-md);
    text-align: center;
}

.form-ui__success p {
    margin: 0;
}

.form-ui__hidden {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.is-form-modal-open,
.is-form-modal-open body {
    overflow: hidden;
}

@media (max-width: 767px) {
    .form-modal {
        --form-modal-viewport-gap: 8px;
        align-items: stretch;
    }

    .form-modal__window {
        width: 100%;
        margin: 0;
    }

    .form-ui__actions {
        flex-direction: column;
        align-items: center;
    }

    .form-ui__consent {
        max-width: none;
        text-align: center;
    }

    .form-ui__consent a {
        display: block;
    }
}

/* End */


/* Start:/local/frontend/styles/tabs.css?17889458864878*/
.tabs {
    display: flex;
    flex-direction: column;
}

.tabs-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-content-gap-md);
}

.tabs--size-1 .tabs-list {
    gap: var(--spacing-component-gap-md);
}

.tabs--size-2 .tabs-list {
    gap: var(--spacing-component-gap-md);
}

.tabs--size-3 .tabs-list {
    gap: var(--spacing-component-gap-sm);
}

.tabs--size-1 .tabs-tab {
    font-family: var(--typography-component-tab-tab-1-font-family), sans-serif;
    font-size: var(--typography-component-tab-tab-1-font-size);
    line-height: var(--typography-component-tab-tab-1-line-height);
    letter-spacing: var(--typography-component-tab-tab-1-letter-spacing);
    font-variation-settings: var(--rf-w25);
    color: var(--text-component-action-1-pr-def);
    font-weight: 700;
    background-color: transparent;
    border-radius: var(--radius-lg);
    padding: var(--spacing-component-padding-x-xs) var(--spacing-component-padding-x-sm);
}

.tabs--size-1 .tabs-tab .tabs-tab-count {
    font-family: var(--typography-component-counter-counter-1-font-family), sans-serif;
    font-size: var(--typography-component-counter-counter-1-font-size);
    line-height: var(--typography-component-counter-counter-1-line-height);
    letter-spacing: var(--typography-component-counter-counter-1-letter-spacing);
    font-weight: 600;
}

.tabs--size-1 .tabs-tab:hover {
    color: var(--text-component-action-1-pr-hover);
}

.tabs--size-1 .tabs-tab:active {
    color: var(--text-component-action-1-pr-pressed);
}

.tabs--size-1 .tabs-tab.is-active {
    color: var(--text-component-action-1-pr-active);
    background-color: var(--background-pr);
}

.tabs--size-2 .tabs-tab {
    font-family: var(--typography-component-tab-tab-2-font-family), sans-serif;
    font-size: var(--typography-component-tab-tab-2-font-size);
    line-height: var(--typography-component-tab-tab-2-line-height);
    letter-spacing: var(--typography-component-tab-tab-2-letter-spacing);
    font-variation-settings: var(--rf-w25);
    color: var(--text-component-action-2-pr-def);
    font-weight: 700;
}

.tabs--size-2 .tabs-tab .tabs-tab-count {
    font-family: var(--typography-component-counter-counter-2-font-family), sans-serif;
    font-size: var(--typography-component-counter-counter-2-font-size);
    line-height: var(--typography-component-counter-counter-2-line-height);
    letter-spacing: var(--typography-component-counter-counter-2-letter-spacing);
    font-weight: 600;
}

.tabs--size-2 .tabs-tab:hover {
    color: var(--text-component-action-2-pr-hover);
}

.tabs--size-2 .tabs-tab:active {
    color: var(--text-component-action-2-pr-pressed);
}

.tabs--size-2 .tabs-tab.is-active {
    color: var(--text-component-action-2-pr-active);
}

.tabs--size-3 .tabs-tab {
    font-family: var(--typography-component-tab-tab-3-font-family), sans-serif;
    font-size: var(--typography-component-tab-tab-3-font-size);
    line-height: var(--typography-component-tab-tab-3-line-height);
    letter-spacing: var(--typography-component-tab-tab-3-letter-spacing);
    font-variation-settings: var(--rf-w25);
    color: var(--text-component-action-1-sec-def);
    font-weight: 700;
}

.tabs--size-3 .tabs-tab .tabs-tab-count {
    font-family: var(--typography-component-counter-counter-2-font-family), sans-serif;
    font-size: var(--typography-component-counter-counter-2-font-size);
    line-height: var(--typography-component-counter-counter-2-line-height);
    letter-spacing: var(--typography-component-counter-counter-2-letter-spacing);
    font-weight: 600;
}

.tabs--size-3 .tabs-tab:hover {
    color: var(--text-component-action-1-sec-hover);
}

.tabs--size-3 .tabs-tab:active {
    color: var(--text-component-action-1-sec-pres);
}

.tabs--size-3 .tabs-tab.is-active {
    color: var(--text-component-action-1-sec-active);
}

.tabs--overlay.tabs--size-3 .tabs-tab {
    color: var(--text-component-action-1-over-def);
}

.tabs--overlay.tabs--size-3 .tabs-tab:hover {
    color: var(--text-component-action-1-over-hover);
}

.tabs--overlay.tabs--size-3 .tabs-tab:active {
    color: var(--text-component-action-1-over-pres);
}

.tabs--overlay.tabs--size-3 .tabs-tab.is-active {
    color: var(--text-component-action-1-over-active);
}

.tabs-tab {
    display: flex;
    gap: var(--spacing-component-gap-min);
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    transition: color 0.2s ease;
    text-transform: uppercase;
}

.tabs-panel[hidden] {
    display: none;
}

.tabs-tab-count {
    padding-bottom: 6px;
}

.tab-btn {
    font-family: var(--typography-component-tab-tab-btn-font-family), sans-serif;
    font-size: var(--typography-component-tab-tab-btn-font-size);
    line-height: var(--typography-component-tab-tab-btn-line-height);
    letter-spacing: var(--typography-component-tab-tab-btn-letter-spacing);
    font-weight: 400;
}

/* End */


/* Start:/local/frontend/styles/header.css?17919551736169*/
:root {
    --transition-speed: 0.2s;
}

.header-slot {
    height: 0;
    position: fixed;
    top: var(--header-top, var(--header-topbar-height, 36px));
    right: 0;
    left: 0;
    z-index: 50;
}

.header {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    background-color: var(--header-bg);
    /* Стартуем выше вьюпорта вместе с топбаром, иначе шапка на миг занимает его место */
    --animation-shift: calc(100% + var(--header-top, var(--header-topbar-height, 40px)));
    padding: var(--spacing-content-padding-sm) var(--spacing-content-padding-grid-1);
    gap: var(--spacing-component-gap-min);
    /* сдвиг при упоре в подвал ставит JS, покадрово — своего перехода не нужно */
    will-change: transform;
    transition: var(--transition-speed);

    --header-bg: var(--background-ter);
    --header-blocks-bg: var(--background-pr);
    --header-color: var(--text-pr);
    --header-divider-color: var(--stroke-sec);
}

.header.header--white {
    --header-bg: var(--background-pr);
    --header-blocks-bg: var(--background-sec);
    --header-color: var(--text-pr);
    --header-divider-color: var(--stroke-pr);
}

.header.header--transparent {
    --header-bg: transparent;
    --header-blocks-bg: transparent;
    --header-color: var(--text-inver);
    --header-divider-color: var(--stroke-over);
}

/* Нижний бордер именно так, потому что его нужно плавно показывать */
.header::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: var(--stroke-width-m);
    background-color: var(--header-divider-color);
    transform-origin: left center;
    transition: var(--transition-speed);
}

.header-block {
    display: contents;
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacing-component-gap-min);
    overflow: hidden;
}

.header-logo {
    display: flex;
    align-items: center;
}

.header-logo-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    height: 52px;
    padding: 0 4px;
    background-color: var(--header-blocks-bg);
    border-radius: var(--radius-xl);
    color: var(--header-color);
    transition: var(--transition-speed);
}

.header-navigations {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 2;
}

.header-button-tickets {
    min-width: 80px;
}

.header-button-map {
    min-width: 80px;
}

/* Ниже 1200 кнопки из разных блоков шапки встают в одну сетку: Карта → Билеты → Меню */
@media (max-width: 1199px) {
    .header-button-map {
        order: 1;
    }

    .header-button-tickets {
        order: 2;
    }

    .header-button-menu {
        order: 3;
    }
}

.header-button-map .icon {
    color: var(--icon-pr);
}

.header-button-app-icon {
    display: block;
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}

.header-logo svg {
    height: 40px;
    width: 98.2px;
}

.header-button {
    color: var(--text-pr);
    background-color: var(--background-component-action-1-pr-def);
}

.header-button:hover {
    background-color: var(--background-component-action-1-pr-hover);
}

.header-button:active {
    background-color: var(--background-component-action-1-pr-pres);
}

.header.header--white .header-button {
    color: var(--text-pr);
    background-color: var(--background-component-action-1-sec-def);
}

.header.header--white .header-button:hover {
    background-color: var(--background-component-action-1-sec-hover);
}

.header.header--white .header-button:active {
    background-color: var(--background-component-action-1-sec-pres);
}

.header.header--transparent .header-button:not(.header-button-map):not(.header-button-app) {
    color: var(--text-inver);
    background-color: var(--background-component-action-1-wa-1-def);
}

.header.header--transparent .header-button:not(.header-button-map):not(.header-button-app):hover {
    background-color: var(--background-component-action-1-wa-1-hover);
}

.header.header--transparent .header-button:not(.header-button-map):not(.header-button-app):active {
    background-color: var(--background-component-action-1-wa-1-pres);
}

@media (min-width: 768px) {
    .header-logo-wrapper {
        width: 118px;
    }
}

@media (min-width: 1200px) {
    .header-block {
        display: flex;
    }

    .header-logo-wrapper {
        width: 222px;
        height: 56px;
    }

    .header-button-tickets {
        min-width: 134px;
    }

    .header-button-map {
        min-width: 90px;
    }

    .header-button-menu {
        min-width: 114px;
    }
}

@media (min-width: 1536px) {
    .header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    }

    .header-buttons {
        justify-self: end;
    }

    .header-block:has(.header-navigations) {
        align-self: stretch;
        align-items: stretch;
        overflow: visible;
    }

    .header-navigations {
        align-self: stretch;
        flex: 0 1 auto;
        width: max-content;
        max-width: 100%;
        margin-inline: auto;
    }

    .header-navigation-popover {
        display: flex;
        align-items: center;
        padding: var(--spacing-component-padding-y-xs) var(--spacing-component-padding-x-min);
        color: var(--header-color);
        text-transform: uppercase;
        transition: var(--transition-speed);
    }

    .header-navigation-popover svg {
        color: var(--icon-sec);
        transition: transform var(--transition-speed);
    }

    .header-button-tickets {
        min-width: 139px;
    }

    .header-button-app {
        width: 219px;
        min-width: 219px;
        flex-shrink: 0;
        padding: 12px 16px 12px 12px;
    }

    .header-button-map {
        min-width: 96px;
    }

    .header-button-menu {
        min-width: 124px;
    }

    .header-logo svg {
        height: 51px;
        width: 125.2px;
    }
}

/* End */


/* Start:/local/frontend/styles/header-top-bar.css?17919551738163*/
.header-topbar {
    position: relative;
    z-index: 51;
    display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--spacing-component-gap-sm);
    min-height: 40px;
    padding: 0 var(--spacing-content-padding-grid-1);
    color: var(--text-inver);
    background-color: var(--background-inver);
    transition:
        top var(--slide-duration, 700ms) cubic-bezier(0.22, 0.61, 0.36, 1),
        margin-top var(--slide-duration, 700ms) cubic-bezier(0.22, 0.61, 0.36, 1);
}

.header-topbar--overlay {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
}

.header-topbar--transparent {
    background-color: var(--background-wa-1);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

.header-topbar.is-away:not(.header-topbar--overlay) {
    margin-top: calc(-1 * var(--header-topbar-height, 36px));
    pointer-events: none;
}

.header-topbar--overlay.is-away {
    top: calc(-1 * var(--header-topbar-height, 36px));
}

.header-topbar--overlay + .header-slot {
    transition: top var(--slide-duration, 700ms) cubic-bezier(0.22, 0.61, 0.36, 1);
}

.header-topbar-start {
    justify-self: start;
    min-width: 0;
}

.header-topbar-trigger {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    color: var(--text-component-action-1-inver-def);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--transition-speed);
}

.header-topbar-trigger:hover,
.header-topbar-trigger:focus-visible,
.header-topbar.is-open .header-topbar-trigger {
    color: var(--text-component-action-1-inver-hover);
}

.header-topbar-status {
    display: none;
}

.header-topbar-end {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: var(--spacing-component-gap-min-grid);
}
.topbar-divider{
    height: 14px;
}

.header-topbar-special {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    color: var(--icon-inver);
    transition: color var(--transition-speed);
}

.header-topbar-special-icon {
    width: 24px;
    height: 24px;
    overflow: visible;
}

.header-topbar-special:hover,
.header-topbar-special:focus-visible {
    color: var(--text-component-action-1-inver-hover);
}

.header-topbar-langs {
    display: flex;
    align-items: center;
    gap: var(--spacing-component-gap-min-grid);
    white-space: nowrap;
    padding: var(--spacing-component-padding-y-xs) var(--spacing-component-padding-x-xs);
}

.header-topbar-langs-sep,
.header-topbar-lang:not(.is-active) {
    color: var(--text-inver-add);
}

.header-topbar-lang {
    text-transform: uppercase;
    transition: color var(--transition-speed);
}

.header-topbar-lang:not(.is-active):hover,
.header-topbar-lang:not(.is-active):focus-visible {
    color: var(--text-component-action-1-inver-hover);
}

.header-topbar-lang.is-active {
    color: var(--text-inver);
}

.header-topbar-popovers {
    position: absolute;
    top: 100%;
    left: var(--spacing-content-padding-grid-1);
    right: var(--spacing-content-padding-grid-1);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    /* grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); */
    align-items: start;
    gap: var(--spacing-component-gap-min);
    max-width: 920px;
    padding-top: var(--spacing-component-gap-xs);
}

.header-topbar-popovers[hidden] {
    display: none;
}

.is-header-topbar-popovers-open body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 48;
    pointer-events: none;
    -webkit-backdrop-filter: blur(var(--effects-background-blur-default-blur));
    backdrop-filter: blur(var(--effects-background-blur-default-blur));
}

.header-topbar-popovers-side {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-component-gap-min);
    min-width: 0;
}

.header-topbar-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-component-gap-xl);
    min-width: 0;
    padding: var(--spacing-component-padding-y-xl) var(--spacing-component-padding-x-xl);
    border-radius: var(--radius-lg);
    background-color: var(--background-pr);
    color: var(--text-pr);
    box-shadow:
        var(--effects-shadow-default-x)
        var(--effects-shadow-default-y)
        var(--effects-shadow-default-blur)
        var(--effects-shadow-default-spread)
        var(--effects-shadow-default-color);
}

.header-topbar-card-title,
.header-topbar-schedule-row,
.header-topbar-transport-values,
.header-topbar-alert {
    text-transform: uppercase;
}

.header-topbar-transport-values, 
.header-topbar-card-text{
font-weight: 500;
}

.header-topbar-card-title {
    margin: 0;
}

.header-topbar-close {
    display: none;
}

@media (max-width: 440px) {
    .header-topbar-card--with-close {
        position: relative;
    }

    .header-topbar-close {
        position: absolute;
        top: 10px;
        right: 10px;
        display: flex;
        color: var(--icon-pr);
    }

    .header-topbar-card--with-close .header-topbar-card-title {
        padding-right: calc(28px + var(--spacing-component-gap-sm));
    }
}

.header-topbar-card-text {
    margin: 0;
}

.header-topbar-card-hint {
    margin: 0;
    color: var(--text-sec);
    padding-top: var(--spacing-content-gap-min);
}

.header-topbar-card-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-component-gap-xl);
}

.header-topbar-transport {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-component-gap-xl);
}

.header-topbar-transport-row {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-component-gap-min);
}

.header-topbar-transport-label {
    color: var(--text-sec);
}

.header-topbar-schedule {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-component-gap-sm);
}

.header-topbar-schedule-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-component-gap-xs);
}

.header-topbar-alert {
    margin: 0;
    padding: var(--spacing-component-padding-y-xl) var(--spacing-component-padding-x-xl);
    border-radius: var(--radius-lg);
    background-color: var(--background-acc);
    color: var(--text-inver);
    height: 140px;
    min-width: 0;
    overflow: hidden;
}

.header-topbar-alert > span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: anywhere;
    max-height: 100%;
}



@media (min-width: 768px) {
    .header-topbar {
            grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);

    }
     .header-topbar-status {
   justify-self: center;
   display: block;
    margin: 0;
    min-width: 0;
    color: var(--text-inver);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
     }

    .header-topbar-popovers {
        right: auto;
        width: max-content;
        max-width: calc(100% - var(--spacing-content-padding-grid-1) * 2);
        grid-template-columns: minmax(0, 350px) minmax(0, 350px);
        grid-template-rows: minmax(0, 1fr) auto;
        justify-content: start;
        align-items: stretch;
    }

    .header-topbar-popovers > .header-topbar-card {
        grid-column: 1;
        grid-row: 1 / -1;
        height: 100%;
    }

    .header-topbar-popovers-side {
        display: contents;
    }

    .header-topbar-popovers-side > .header-topbar-card {
        grid-column: 2;
        grid-row: 1;
        min-height: 100%;
    }

    .header-topbar-alert {
        grid-column: 2;
        grid-row: 2;
        max-width: 350px;
        width: 100%;
    }

    .header-topbar-card {
        max-width: 350px;
        width: 100%;
    }
} 


@media (min-width: 1024px) {
    

    
}

/* @media (max-width: 767px) {
    .header-topbar-popovers {
        grid-template-columns: minmax(0, 1fr);
        max-width: none;
        max-height: min(70dvh, 640px);
        overflow: auto;
        overscroll-behavior: contain;
    }
} */

/* End */


/* Start:/local/frontend/styles/header-app-popover.css?17919021013444*/
.header-app-popover {
    position: absolute;
    top: var(--header-height, 96px);
    right: var(--spacing-content-padding-grid-1);
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-content-gap-md);
    width: 600px;
    max-width: calc(100vw - var(--spacing-content-padding-grid-1) * 2);
    max-height: calc(100dvh - var(--header-height, 88px) - var(--header-top, 40px) - var(--spacing-content-gap-md));
    margin-top: var(--spacing-component-gap-xs);
    padding: 4px;
    overflow: auto;
    overscroll-behavior: contain;
    border-radius: var(--radius-4xl);
    background-color: var(--background-pr);
    color: var(--text-pr);
    box-shadow:
        var(--effects-shadow-default-x)
        var(--effects-shadow-default-y)
        var(--effects-shadow-default-blur)
        var(--effects-shadow-default-spread)
        var(--effects-shadow-default-color);
}

.header-app-popover[hidden] {
    display: none;
}

.is-header-app-popover-open body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 48;
    pointer-events: none;
    -webkit-backdrop-filter: blur(var(--effects-background-blur-add-blur));
    backdrop-filter: blur(var(--effects-background-blur-add-blur));
}

.header-app-popover-preview {
    overflow: hidden;
    border-radius: var(--radius-3xl);
    background-color: var(--background-sec);
    aspect-ratio: 600 / 452;
}

.header-app-popover-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.header-app-popover-qr-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-component-gap-md);
    text-align: center;
}

.header-app-popover-qr-frame {
    width: 120px;
    height: 120px;
}

.header-app-popover-qr {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-app-popover-qr[hidden] {
    display: none;
}

.header-app-popover-qr-hint {
    margin: 0;
    width: 238px;
    font-weight: 400;
    text-align: center;
    font-size: 16px;
    line-height: 22px;
    color: var(--text-pr);
}

.header-app-popover-stores {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-component-gap-min-grid);
}

.header-app-popover-store {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 80px;
    padding: var(--spacing-component-padding-y-md) var(--spacing-component-padding-x-md);
    border-radius: 28px;
    background-color: var(--background-sec);
    color: var(--text-pr);
    text-align: center;
    transition: background-color var(--transition-speed);
}

.header-app-popover-store .icon {
    flex-shrink: 0;
}

.header-app-popover-store:hover,
.header-app-popover-store:focus-visible {
    background-color: var(--background-component-action-1-sec-hover);
}

.header-app-popover-store:active {
    background-color: var(--background-component-action-1-sec-pres);
}

.header-app-popover-store-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-component-gap-min);
}

.header-app-popover-store-name {
    text-transform: none;
    font-size: 18px;
    font-family: "Roboto Flex", sans-serif;
    line-height: 120%;
    letter-spacing: -1%;
    font-variation-settings: var(--rf-w40-g60);
}

@media (max-width: 1199px) {
    .header-app-popover {
        display: none;
    }
}

/* End */


/* Start:/local/frontend/styles/header-navigation.css?17891132163489*/
.header-navigation-item {
    display: flex;
    align-items: center;
    align-self: stretch;
}

.header-navigation-panel {
    position: absolute;
    top: var(--header-height, 96px);
    left: 0;
    z-index: 2;
    width: max-content;
    max-width: min(920px, calc(100vw - var(--spacing-content-padding-grid-1) * 2));
    margin-top: var(--spacing-component-gap-xs);
}

.header-navigation-panel[hidden] {
    display: none;
}

.header-navigation-panel.is-open {
    z-index: 3;
}

/* Первое открытие — маска; смена пункта при уже открытой плашке — fade содержимого */

.header-navigation-panel.is-appear-mask .header-navigation-panel-card {
    animation: appear-through-mask var(--default-duration) var(--popover-appear-easing) backwards;
}

.header-navigation-panel.is-appear-fade .header-navigation-panel-links,
.header-navigation-panel.is-appear-fade .header-navigation-panel-media {
    animation: fade-in var(--short-duration) var(--popover-appear-easing) backwards;
}

@media (prefers-reduced-motion: reduce) {
    .header-navigation-panel.is-appear-mask .header-navigation-panel-card,
    .header-navigation-panel.is-appear-fade .header-navigation-panel-links,
    .header-navigation-panel.is-appear-fade .header-navigation-panel-media {
        animation: none;
    }
}

.header-navigation-item:hover .header-navigation-popover svg,
.header-navigation-item:focus-within .header-navigation-popover svg,
.header-navigation-item.is-open .header-navigation-popover svg {
    transform: rotate(180deg);
}

.header-navigation-panel-card {
    display: grid;
    grid-template-columns: 331px 331px;
    align-items: stretch;
    gap: var(--spacing-content-gap-xl);
    width: max-content;
    min-height: 316px;
    border-radius: var(--radius-xl);
    background-color: var(--background-pr);
    color: var(--text-pr);
    box-shadow:
        var(--effects-shadow-default-x)
        var(--effects-shadow-default-y)
        var(--effects-shadow-default-blur)
        var(--effects-shadow-default-spread)
        var(--effects-shadow-default-color);
}

.header-navigation-panel-card:not(:has(.header-navigation-panel-links)) {
    grid-template-columns: 331px;
}

.header-navigation-panel-links {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--spacing-component-gap-sm);
    padding: var(--spacing-component-padding-y-add) var(--spacing-component-padding-x-add);
    width: 331px;
    min-width: 331px;
    min-height: 0;
    overflow: auto;
    list-style: none;
}

.header-navigation-panel-link {
    display: inline-block;
    color: var(--text-component-action-1-pr-def);
    white-space: nowrap;
    transition: color var(--transition-speed);
}

.header-navigation-panel-link:hover,
.header-navigation-panel-link:focus-visible {
    color: var(--text-component-action-1-pr-hover);
}

.header-navigation-panel-link:active {
    color: var(--text-component-action-1-pr-pressed);
}

.header-navigation-panel-media {
    overflow: hidden;
    width: 100%;

    min-height: 0;
    height: 100%;
    border-radius: var(--radius-lg);
    background-color: var(--background-sec);
    padding: var(--spacing-content-gap-min);
}

.header-navigation-panel-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-lg)
}

@media (max-width: 1535px) {
    .header-navigation-panel {
        display: none;
    }
}

/* End */


/* Start:/local/frontend/styles/header-menu.css?179241521334143*/
/*
 * Полноэкранное меню шапки.
 * До 1200px — список с drill-down на весь экран, с 1200px — трёхколоночная сетка.
 */

.header-menu {
    position: fixed;
    --header-menu-top: calc(
        var(--header-top, var(--header-topbar-height, 36px)) + var(--header-height, 72px)
        + var(--stroke-width-m)
    );
    top: var(--header-menu-top);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 49;
    align-items: flex-start;
    justify-content: center;
    padding: var(--spacing-content-padding-modal);
    max-height: calc(100dvh - var(--header-menu-top));
    box-sizing: border-box;
}

.header-menu[hidden],
.header-menu:not(.is-open) {
    display: none;
}

.header-menu.is-open {
    display: flex;
}

.header-menu-backdrop {
    position: absolute;
    inset: 0;
}

.header-menu-window {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-content-gap-md);
    width: 100%;
    min-height: 0;
    max-height: 100%;
    height: 100%;
    padding: var(--spacing-content-padding-sm);
    overflow: auto;
    overscroll-behavior: contain;
    border-radius: var(--radius-5xl);
    background-color: var(--background-pr);
    color: var(--text-pr);
    box-shadow:
        0
        1px
        var(--effects-shadow-default-blur)
        var(--effects-shadow-default-spread)
        var(--effects-shadow-default-color);
    scrollbar-width: thin;
    scrollbar-color: var(--stroke-pr) transparent;
}

/*
 * Блюр нельзя вешать на .header-menu-backdrop: меню лежит в .header-slot
 * (position: fixed), и backdrop-filter не захватывает страницу под слотом.
 */
.is-header-menu-open {
    scroll-behavior: auto;
}

.is-header-menu-open body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 48;
    pointer-events: none;

    -webkit-backdrop-filter: blur(var(--effects-background-blur-default-blur));
    backdrop-filter: blur(var(--effects-background-blur-default-blur));
}

.header-button-menu.is-open,
.header.header--white .header-button-menu.is-open,
.header.header--transparent .header-button:not(.header-button-map):not(.header-button-app).is-open {
    color: var(--text-inver);
    background-color: var(--background-component-action-1-acc-def);
}

.header-button-menu.is-open:hover,
.header.header--white .header-button-menu.is-open:hover,
.header.header--transparent .header-button:not(.header-button-map):not(.header-button-app).is-open:hover {
    background-color: var(--background-component-action-1-acc-hover);
}

.header-button-menu.is-open:active,
.header.header--white .header-button-menu.is-open:active,
.header.header--transparent .header-button:not(.header-button-map):not(.header-button-app).is-open:active {
    background-color: var(--background-component-action-1-acc-pressed);
}

@media (min-width: 1200px) {
    .header-button-menu [data-header-menu-icon="close"] {
        display: none;
    }
}

/* Compact drill-down */

.header-menu-panels {
    display: grid;
}

.header-menu-panel {
    grid-area: 1 / 1;
    min-width: 0;
}

.header-menu-panel[hidden] {
    display: none;
}

.header-menu-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-component-gap-xl);
}

.header-menu-compact {
    min-width: 0;
}

.header-menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-component-gap-sm);
    width: 100%;
    padding: 0;
    color: var(--text-pr);
    text-align: left;
    background: none;
    transition: color var(--transition-speed);
}

.header-menu-link:hover,
.header-menu-link:focus-visible {
    color: var(--text-component-action-1-pr-hover);
}

.header-menu-link:active {
    color: var(--text-component-action-1-pr-pressed);
}

.header-menu-link--muted {
    color: var(--text-sec);
}

.header-menu-link--back {
    color: var(--text-sec);
}

.header-menu-chevron {
    flex-shrink: 0;
    color: var(--icon-sec);
    transform: rotate(-90deg);
}

.header-menu-chevron--back {
    transform: rotate(90deg);
}

@media (max-width: 1199px) {
    .header-menu.is-submenu .header-menu-promos,
    .header-menu.is-submenu .header-menu-info,
    .header-menu.is-submenu .header-menu-socials,
    .header-menu.is-submenu .header-menu-aside-hours,
    .header-menu.is-submenu .header-menu-aside-app-block,
    .header-menu.is-submenu .header-menu-aside-app,
    .header-menu.is-submenu .header-menu-aside-stores,
    .header-menu.is-submenu .header-menu-tree {
        display: none;
    }
}

/* Desktop-only blocks stay off until 1200 */

.header-menu-aside-app-block,
.header-menu-main {
    display: contents;
}

.header-menu-aside-hours,
.header-menu-aside-app,
.header-menu-aside-stores,
.header-menu-tree {
    display: none;
}

/* Promo cards */

.header-menu-promos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-component-gap-xs);
}

.header-menu-promo {
    display: flex;
    flex-direction: column;
    height: 210px;
    overflow: hidden;
    border-radius: var(--radius-3xl);
    background-color: var(--background-sec);
    color: var(--text-pr);
    transition: background-color var(--transition-speed);
}

a.header-menu-promo:focus-visible {
    background-color: var(--background-component-action-1-sec-hover);
}

.header-menu-promo--app {
    grid-column: 1 / -1;
    min-height: 168px;
}

.header-menu-promo-title {
    height: 25%;
    display: block;
    padding: var(--spacing-component-padding-y-add) var(--spacing-component-padding-x-add) 0;
}

.header-menu-promo-media {
    display: flex;
    flex: 1;
    height: 75%;
}

.header-menu-promo-media img {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    object-fit: cover;
    object-position: bottom;
    transition: var(--default-duration) ease;
}

.header-menu-promo--digital .header-menu-promo-media img {
    margin: 0 auto;
}

.header-menu-promo-app-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--spacing-component-gap-sm);
    align-items: end;
    flex: 1;
    padding: var(--spacing-component-padding-y-add) var(--spacing-component-padding-x-add);
}

.header-menu-promo-stores {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-component-gap-xs);
}

.header-menu-store-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-component-gap-xs);
    min-height: 32px;
    padding: var(--spacing-component-padding-y-xs) var(--spacing-component-padding-x-sm);
    border-radius: var(--radius-md);
    background-color: var(--background-component-action-1-pr-def);
    color: var(--text-pr);
    font-size: var(--typography-component-button-btn-3-font-size);
    line-height: var(--typography-component-button-btn-3-line-height);
    font-weight: 700;
    text-transform: none;
}

.header-menu-promo-app-preview {
    display: block;
    width: 92px;
    height: 120px;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--background-pr);
}

.header-menu-promo-app-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Address / hours (compact) */

.header-menu-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-content-gap-md);
    padding: var(--spacing-component-padding-y-xl) var(--spacing-component-padding-x-xl);
    border-radius: var(--radius-3xl);
    background-color: var(--background-sec);
}

.header-menu-info-col {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-component-gap-sm);
    min-width: 0;
}

.header-menu-info-label {
    margin: 0;
    color: var(--text-sec);
}

.header-menu-address-text {
    margin: 0;
    text-transform: uppercase;
}

.header-menu-address-hint {
    margin: 0;
    color: var(--text-sec);
}

.header-menu-schedule {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-component-gap-sm);
}

.header-menu-schedule-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-component-gap-xs);
    text-transform: uppercase;
}

/* Socials */

.header-menu-socials {
    display: flex;
    gap: var(--spacing-component-gap-xs);
}

.header-menu-social {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 103px;
    height: 103px;
    border-radius: var(--radius-3xl);
     background-color: var(--background-sec);
    color: var(--icon-pr);
    transition: background-color var(--transition-speed);
}

a.header-menu-social:hover,
a.header-menu-social:focus-visible {
    background-color: var(--background-component-action-1-sec-hover);
}

/* Compact menu proportions follow the design-system layout. */
@media (max-width: 1199px) {
    .header-menu-window {
        height: 100%;
        gap: 4px;
        padding: 4px;
        border-radius: 24px;
        overflow-x: hidden;
    }

    .header-menu-window > *,
    .header-menu-main > * {
        flex-shrink: 0;
    }

    .header-menu-compact {
        padding: 20px 20px 28px;
    }

    .header-menu-list {
        gap: 24px;
    }

    .header-menu-link {
        justify-content: flex-start;
        gap: 8px;
        font-size: 28px;
        line-height: 1;
    }

    .header-menu-link--branch {
        color: var(--text-sec);
    }

    .header-menu-panel:not([data-menu-panel="root"]) .header-menu-link {
        color: var(--text-sec);
    }

    .header-menu-link:hover,
    .header-menu-link:focus-visible,
    .header-menu-panel:not([data-menu-panel="root"]) .header-menu-link:hover,
    .header-menu-panel:not([data-menu-panel="root"]) .header-menu-link:focus-visible {
        color: var(--text-component-action-1-pr-hover);
    }

    .header-menu-chevron {
        width: 12px;
        height: 12px;
    }

    .header-menu-promos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
    }

    .header-menu-promo {
        min-width: 0;
        height: auto;
        aspect-ratio: 1;
        border-radius: 24px;
    }

    .header-menu-promo-title {
        position: relative;
        z-index: 1;
        height: auto;
        padding: 24px 24px 0;
        font-size: 16px;
        line-height: 1;
    }

    .header-menu-promo-media {
        min-height: 0;
        height: auto;
        margin-top: 12px;
    }

    .header-menu-promo-media img {
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    .header-menu-promo--app {
        position: relative;
        aspect-ratio: 2 / 1;
        min-height: 0;
    }

    .header-menu-promo--app .header-menu-promo-title {
        max-width: 50%;
        font-size: 16px;
    }

    .header-menu-promo-app-body {
        display: flex;
        align-items: flex-end;
        padding: 24px 20px 20px;
    }

    .header-menu-promo-stores {
        position: relative;
        z-index: 1;
        flex-direction: row;
        gap: 16px;
    }

    .header-menu-store-badge {
        gap: 8px;
        min-height: 24px;
        padding: 0;
        background: none;
        font-size: 18px;
        line-height: 24px;
        font-weight: 500;
        white-space: nowrap;
        font-variation-settings: var(--rf-w25);
    }

    .header-menu-store-badge .icon {
        width: 24px;
        height: 24px;
    }

    .header-menu-promo-app-preview {
        position: absolute;
        inset: 0 0 0 auto;
        width: 50%;
        height: 100%;
        border-radius: 0;
        background: none;
    }

    .header-menu-promo-app-preview img {
        object-position: center top;
    }

    .header-menu-info {
        gap: 20px;
        padding: 20px 16px;
        border-radius: 24px;
    }

    .header-menu-info-col {
        gap: 12px;
    }

    .header-menu-info-col + .header-menu-info-col {
        border-top: 1px solid var(--stroke-pr);
        padding-top: 20px;
    }

    .header-menu-info-label {
        margin-bottom: 8px;
        color: var(--text-pr);
        font-size: 14px;
        line-height: 18px;
    }

    .header-menu-address-text,
    .header-menu-schedule-row {
        font-size: 16px;
        line-height: 18px;
    }

    .header-menu-address-hint {
        font-size: 14px;
        line-height: 16px;
    }

    .header-menu-schedule {
        gap: 8px;
    }

    .header-menu-socials {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px;
    }

    .header-menu-social {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        border-radius: 24px;
    }
}

@media (width < 440px) {
    .header-menu-promo-stores {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .header-menu.is-submenu .header-menu-window {
        height: 100%;
    }

    .header-menu-compact {
        padding: 24px 20px 32px;
    }

    .header-menu-list {
        gap: 28px;
    }

    .header-menu-promos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .header-menu-promo--app {
        grid-column: auto;
        aspect-ratio: 1;
    }

    .header-menu-promo--app .header-menu-promo-title {
        max-width: 100%;
    }

    .header-menu-promo-app-body {
        padding: 20px 16px;
    }

    .header-menu-promo-stores {
        flex-direction: column;
        gap: 20px;
    }

    .header-menu-promo-app-preview {
        top: 64px;
        width: 60%;
        height: calc(100% - 64px);
    }

    .header-menu-info {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
        min-height: 240px;
        padding: 24px 20px;
    }

    .header-menu-info-col + .header-menu-info-col {
        border-top: 0;
        border-left: 1px solid var(--stroke-pr);
        padding-top: 0;
        padding-left: 24px;
    }

    .header-menu-info-label {
        margin-bottom: auto;
    }

    .header-menu-schedule {
        gap: 14px;
    }

    .header-menu-social {
        height: 100px;
        aspect-ratio: auto;
    }
}

@media (min-width: 1024px) and (max-width: 1199px) {
    .header-menu {
        justify-content: flex-end;
    }

    .header-menu .header-menu-window {
        width: 700px;
        max-width: 100%;
        height: 100%;
    }

    .header-menu.is-submenu .header-menu-window {
        height: 100%;
    }

    .header-menu:not(.is-submenu) .header-menu-info {
        flex-grow: 0;
        min-height: 240px;
    }

    .header-menu-promo-title {
        width: 200px;
        max-width: 100%;
    }

    .header-menu-promo-app-preview {
        width: 68%;
    }

    .header-menu-info-label {
        font-size: 14px;
        line-height: 18px;
    }

    .header-menu-schedule .divider {
        flex-shrink: 0;
        min-height: 1px;
    }
}

@media (min-width: 1200px) {
    .header-menu {
        justify-content: flex-end;
    }

    .header-menu-window {
        display: grid;
        grid-template-columns: 300px 300px 300px;
        grid-template-rows: auto minmax(0, 1fr) auto;
        align-items: stretch;
        gap: var(--spacing-component-gap-xs);
        width: max-content;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        overflow: hidden;
        padding: var(--spacing-component-padding-y-add) var(--spacing-component-padding-x-add);
        box-shadow: none;
        background: none;
    }

    .header-menu-compact,
    .header-menu-info,
    .header-menu-promo--app {
        display: none;
    }

    .header-menu-promos {
        display: flex;
        flex-direction: column;
        grid-column: 2;
        grid-row: 1 / 3;
        min-height: 0;
        gap: var(--spacing-component-gap-xs);
    }

    .header-menu-promo {
        height: 228px;
    }

    .header-menu-aside-hours,
    .header-menu-aside-app,
    .header-menu-tree {
        display: flex;
        flex-direction: column;
        min-width: 0;
        min-height: 0;
        padding: var(--spacing-component-padding-y-add) var(--spacing-component-padding-x-add);
        overflow: hidden;
        border-radius: var(--radius-3xl);
        background-color: var(--background-pr);
        box-shadow:
            0
            1px
            var(--effects-shadow-default-blur)
            var(--effects-shadow-default-spread)
            var(--effects-shadow-default-color);
    }

    .header-menu-aside-stores {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--spacing-component-gap-xs);
        grid-column: 1;
        grid-row: 3;
    }

    .header-menu-aside-hours {
        grid-column: 1;
        grid-row: 1;
        gap: var(--spacing-component-gap-xl);
        justify-content: space-between;
        padding: var(--spacing-component-padding-y-xl) var(--spacing-component-padding-x-xl);
    }

    .header-menu-aside-app {
        grid-column: 1;
        grid-row: 2;
        gap: var(--spacing-component-gap-md);
        justify-content: center;
    }

    .header-menu-promo--digital,
    .header-menu-promo--archive {
        flex: 1 1 0;
        min-height: 0;
        background-color: var(--background-sec);
        box-shadow:
            0
            1px
            var(--effects-shadow-default-blur)
            var(--effects-shadow-default-spread)
            var(--effects-shadow-default-color);
    }

    .header-menu-promo-media {
        flex: 1 1 auto;
        min-height: 0;
    }

    .header-menu-promo-media img,
    .header-menu-promo--archive .header-menu-promo-media img {
        max-height: 100%;
        max-width: 100%;
        height: 100%;
        width: 100%;
    }

    .header-menu-promo:hover img {
        top: -18px;
        left: -25px;
        max-height: calc(100% + 36px);
        max-width: calc(100% + 50px);
        height: calc(100% + 36px);
        width: calc(100% + 50px);
    }

    .header-menu-socials {
        grid-column: 2;
        grid-row: 3;
        justify-content: space-between;
        gap: var(--spacing-component-gap-xs);
    }

    .header-menu-social {
        width: 70px;
        height: 70px;
        border-radius: var(--radius-3xl);
         background-color: var(--background-sec);
    }

    .header-menu-tree {
        grid-column: 3;
        grid-row: 1 / -1;
        width: 300px;
        min-width: 300px;
        max-width: 300px;
        gap: var(--spacing-content-gap-xl);
        overflow: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: var(--stroke-pr) transparent;
    }

    .header-menu-tree-group {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-component-gap-xl);
    }

    .header-menu-tree-title {
        margin: 0;
        color: var(--text-sec);
        text-transform: uppercase;
    }

    .header-menu-tree-links {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-component-gap-md);
        list-style: none;
        padding-inline-start: 0;
    }

    .header-menu-tree-link {
        transition: color var(--transition-speed);
        font-weight: 600;
    }

    .header-menu-tree-link:hover,
    .header-menu-tree-link:focus-visible {
        color: var(--text-component-action-1-pr-hover);
    }

    .header-menu-info-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-component-gap-md);
    }

    .header-menu-info-tab {
        padding: 0;
        color: var(--text-component-action-1-sec-def);
        background: none;
        transition: color var(--transition-speed);
    }

    .header-menu-info-tab.is-active,
    .header-menu-info-tab[aria-selected='true'] {
        color: var(--text-component-action-1-sec-active);
    }

    .header-menu-info-panel[hidden] {
        display: none;
    }

    .header-menu-aside-app-preview {
        overflow: hidden;
        flex: 0 1 auto;
        width: 100%;
        min-height: 0;
        aspect-ratio: 4 / 3;
        border-radius: var(--radius-2xl);
        background-color: var(--background-sec);
    }

    .header-menu-aside-app-preview img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .header-menu-aside-app-qr {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-component-gap-sm);
        text-align: center;
    }

    .header-menu-qr-frame {
        width: 80px;
        height: 80px; 
    }

    .header-menu-qr {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .header-menu-qr[hidden] {
        display: none;
    }

    .header-menu-qr-hint {
        margin: 0;
        max-width: 16em;
        color: var(--text-pr);
    }

    .header-menu-aside-stores .header-app-popover-store {
        background-color: var(--background-sec);
    }
}

@media (min-width: 1200px) {
    .header-menu-window {
        grid-template-rows: auto minmax(0, 1fr);
        grid-template-columns: 300px 298px 298px;
        gap: var(--spacing-component-gap-min);
        height: 100%;
        padding: 0;
    }

    .header-menu-aside-hours{
        height: 180px;
    }

    .header-menu-aside-app-block {
        display: flex;
        flex-direction: column;
        grid-column: 1;
        grid-row: 2 / -1;
        min-width: 0;
        min-height: 0;
        padding: var(--spacing-component-padding-y-min) var(--spacing-component-padding-x-min);
        overflow: hidden;
        border-radius: var(--radius-3xl);
        background-color: var(--background-pr);
        gap: var(--spacing-component-gap-md);
        box-shadow:
            0
            1px
            var(--effects-shadow-default-blur)
            var(--effects-shadow-default-spread)
            var(--effects-shadow-default-color);
    }

    .header-menu-aside-app {
        flex: 1 1 auto;
        padding: 0;
        overflow: hidden;
        border-radius: 0;
        background: none;
        box-shadow: none;
        justify-content: space-between;
    }

    .header-menu-promo {
        height: auto;
    }

    .header-menu-aside-stores {
        flex: none;
        width: 100%;
    }

    .header-menu-aside-stores .header-app-popover-store {
        background-color: var(--background-component-action-1-sec-def);
        border-radius: var(--radius-3xl);
        height: 70px;
        padding: 0;
    }

    .header-menu-aside-stores .header-app-popover-store:hover {
        background-color: var(--background-component-action-1-sec-hover);
    }

    .header-menu-main {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: minmax(0, 1fr) auto;
        grid-column: 2 / -1;
        grid-row: 1 / -1;
        min-width: 0;
        min-height: 0;
        /* padding: var(--spacing-component-padding-y-min) var(--spacing-component-padding-x-add); */
        overflow: clip;
        border-radius: var(--radius-3xl);
        background-color: var(--background-pr);
        column-gap: 0;
        row-gap: var(--spacing-content-gap-min);
        box-shadow:
            0
            1px
            var(--effects-shadow-default-blur)
            var(--effects-shadow-default-spread)
            var(--effects-shadow-default-color);
    }

    .header-menu-promos {
        grid-column: 1;
        grid-row: 1;
        min-height: 0;
        padding: var(--spacing-component-padding-y-min) var(--spacing-component-padding-x-min) ;
        overflow: hidden;
        border-radius: 0;
        background: none;
    }

    .header-menu-promo--digital,
    .header-menu-promo--archive {
        padding: 0;
        overflow: hidden;
        border-radius: 0;
        border-radius: var(--radius-3xl);
        box-shadow: none;
    }

    /* a.header-menu-promo:hover,
    a.header-menu-promo:focus-visible {
        background-color: transparent;
        color: var(--text-component-action-1-pr-hover);
    } */
    .header-menu-promo-title {
        padding: var(--spacing-component-padding-y-add) var(--spacing-component-padding-x-add);
    }

    .header-menu-tree {
        grid-column: 2;
        grid-row: 1 / -1;
        width: auto;
        min-width: 0;
        max-width: none;
        padding: 0;
        overflow: auto;
        overflow-x: hidden;
        border-radius: 0;
        background: none;
        box-shadow: none;
        overscroll-behavior: contain;
        padding: var(--spacing-component-padding-y-xl) var(--spacing-component-padding-x-md);
    }

    .header-menu-socials {
        grid-column: 1;
        grid-row: 2;
        z-index: 1;
        align-self: stretch;
        justify-content: flex-start;
        gap: var(--spacing-component-gap-min);
        margin: 0;
        padding: var(--spacing-content-gap-min)
    }

    .header-menu-social {
        flex: none;
        width: 70px;
        height: 70px;
        background-color: var(--background-component-action-1-sec-def);
    }
}


@media (min-width: 1200px) {
    .header-menu-aside-hours,
    .header-menu-aside-app-block,
    .header-menu-main {
        box-shadow:
            var(--effects-shadow-default-x)
            calc(-1 * var(--effects-shadow-default-y))
            var(--effects-shadow-default-blur)
            var(--effects-shadow-default-spread)
            var(--effects-shadow-default-color),
            var(--effects-shadow-default-x)
            var(--effects-shadow-default-y)
            var(--effects-shadow-default-blur)
            var(--effects-shadow-default-spread)
            var(--effects-shadow-default-color);
    }

    .header-menu-window {
        grid-template-columns: 300px 298px 298px;
        gap: 4px;
        width: 904px;
        height: 100%;
        overflow: visible;
    }

    .header-menu-aside-hours {
        height: 180px;
        padding: 20px;
        gap: 20px;
        border-radius: 28px;
    }

    .header-menu-info-tabs {
        gap: 12px;
    }

    .header-menu-info-tab {
        font-size: 14px;
        line-height: 18px;
    }

    .header-menu-aside-hours .header-menu-schedule {
        gap: 14px;
    }

    .header-menu-aside-hours .header-menu-schedule-row {
        font-size: 16px;
        line-height: 18px;
    }

    .header-menu-aside-app-block {
        padding: 4px;
        gap: 24px;
        border-radius: 28px;
    }

    .header-menu-aside-app {
        gap: 24px;
        justify-content: flex-start;
    }

    .header-menu-aside-app-preview {
        flex: 0 0 auto;
        height: 252px;
        aspect-ratio: auto;
        border-radius: 24px;
    }

    .header-menu-aside-app-preview img {
        object-position: center top;
    }

    .header-menu-qr-frame {
        width: 80px;
        height: 80px;
    }

    .header-menu-aside-app-qr {
        gap: 12px;
    }

    .header-menu-qr-hint {
        max-width: 240px;
        font-size: 12px;
        line-height: 14px;
    }

    .header-menu-aside-stores {
        gap: 4px;
    }

    .header-menu-aside-stores .header-app-popover-store {
        height: 70px;
        padding: 12px;
        gap: 8px;
        border-radius: 24px;
    }

    .header-menu-main {
        gap: 0;
        border-radius: 28px;
        height: 100%;
        max-height: 100%;
        overflow: hidden;
    }

    .header-menu-promos {
        gap: 4px;
        padding: 4px;
    }

    .header-menu-promo-title {
        height: 25%;
        padding: 24px 24px 0;
        font-size: 16px;
        line-height: 18px;
    }

    .header-menu-tree {
        padding: 20px 16px;
        gap: 40px;
        height: 100%;
        min-height: 0;
        scroll-padding-block: 20px;
    }

    .header-menu-tree-group {
        flex-shrink: 0;
        gap: 24px;
    }

    .header-menu-tree-title {
        font-size: 16px;
        line-height: 18px;
    }

    .header-menu-tree-links {
        margin: 0;
        gap: 16px;
    }

    .header-menu-tree-link {
        font-size: 14px;
        line-height: 16px;
        font-weight: 600;
    }

    .header-menu-socials {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px;
        padding: 0 4px 4px;
    }

    .header-menu-social {
        width: 100%;
        height: 70px;
        border-radius: 24px;
    }
}

@media (min-width: 1536px) {
    .header-menu-window {
        height: 100%;
    }
    .header-menu-aside-hours {
        height: 210px;
    }
}

@media (min-width: 1536px) {
    .header-menu-aside-app-preview {
        height: 232px;
    }

    .header-menu-qr-frame {
        width: 90px;
        height: 90px;
    }

    .header-menu-tree-group {
        gap: 28px;
    }

    .header-menu-tree-title {
        font-size: 18px;
        line-height: 20px;
    }

    .header-menu-tree-link {
        font-size: 16px;
        line-height: 16px;
    }

    .header-menu-tree {
        padding-inline: 20px 16px;
        gap: 48px;
    }

    .header-menu-promo-title {
        font-size: 18px;
        line-height: 20px;
    }
}

@media (min-width: 1920px) {
    .header-menu-window {
        grid-template-columns: 340px 338px 338px;
        width: 1024px;
        max-width: min(100%, 1024px);
        height: 100%;
    }

    .header-menu-aside-hours {
        height: 228px;
    }

    .header-menu-aside-app-preview {
        height: 296px;
    }

    .header-menu-aside-app {
        gap: 24px;
    }

    .header-menu-qr-hint {
        max-width: 224px;
        font-size: 14px;
        line-height: 16px;
    }

    .header-menu-aside-stores .header-app-popover-store,
    .header-menu-social {
        height: 80px;
    }

    .header-menu-tree {
        padding: 20px 16px;
        gap: 48px;
    }

    .header-menu-tree-group {
        gap: 24px;
    }

    .header-menu-tree-title {
        font-size: 18px;
        line-height: 20px;
    }

    .header-menu-tree-link {
        font-size: 16px;
        line-height: 16px;
    }

    .header-menu-promo-title {
        padding: 32px 32px 0;
        font-size: 18px;
        line-height: 20px;
    }
}

@media (min-width: 1200px) {
    .header-menu-aside-app-block {
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .header-menu-aside-app {
        flex-shrink: 0;
        min-height: min-content;
        overflow: visible;
    }
}

/* Keep list rows at the button token's line height. Inline anchors otherwise
 * inherit the larger body line box through their <li> wrappers. */
@media (min-width: 1200px) {
    .header-menu-tree {
        --typography-subheadline-subheadline-3-line-height: 16px;
        gap: var(--spacing-content-gap-xxl);
        padding: var(--spacing-component-padding-y-xl) var(--spacing-component-padding-x-md);
    }
    .header-menu-tree-group { gap: var(--spacing-component-gap-xl); }
    .header-menu-tree-title {
        line-height: var(--typography-subheadline-subheadline-3-line-height);
    }
    .header-menu-tree-links { gap: var(--spacing-component-gap-md); }
    .header-menu-tree-links > li { display: flex; min-width: 0; }
    .header-menu-tree-link {
        display: block;
        font-size: var(--typography-component-button-btn-2-font-size);
        line-height: var(--typography-component-button-btn-2-line-height);
        font-weight: 700;
    }
}
@media (min-width: 1536px) {
    .header-menu-tree { --typography-subheadline-subheadline-3-line-height: 18px; }
}

/* The preview fills the remaining card height; QR and store rows retain
 * their Figma dimensions instead of distributing free space between them. */
@media (min-width: 1200px) {
    .header-menu-aside-app-block { gap: var(--spacing-component-gap-min); }
    .header-menu-aside-app {
        flex: 1 1 0;
        min-height: 0;
        gap: 0;
        justify-content: flex-start;
    }
    .header-menu-aside-app-preview {
        flex: 1 1 0;
        min-height: 0;
        height: auto;
    }
    .header-menu-aside-app-qr {
        flex: none;
        padding: calc(var(--spacing-component-padding-y-xl) + var(--spacing-component-padding-y-min))
            0 var(--spacing-component-padding-y-xl);
    }
    .header-menu-qr-hint { max-width: 238px; }
}

/* Canvas heights are upper bounds. Short viewports still scroll internally. */
.header-menu-window {
    --header-menu-max-height: 1151px;
    max-height: min(100%, var(--header-menu-max-height));
}
@media (min-width: 768px) {
    .header-menu-window { --header-menu-max-height: 909px; }
}
@media (min-width: 1024px) {
    .header-menu-window { --header-menu-max-height: 901px; }
}
@media (min-width: 1200px) {
    .header-menu-window { --header-menu-max-height: 666px; }
    .header-menu-info-tab {
        font-family: var(--typography-component-tab-tab-3-font-family), sans-serif;
        font-size: var(--typography-component-tab-tab-3-font-size);
        line-height: var(--typography-component-tab-tab-3-line-height);
        font-weight: 300;
        font-variation-settings: var(--rf-w30-g60);
    }
    .header-menu-aside-hours .header-menu-schedule { gap: var(--spacing-component-gap-sm); }
    .header-menu-aside-hours .header-menu-schedule-row {
        font-size: var(--typography-title-title-2-font-size);
        line-height: var(--typography-title-title-2-line-height);
    }
}
@media (min-width: 1536px) {
    .header-menu-window { --header-menu-max-height: 710px; }
}
@media (min-width: 1920px) {
    .header-menu-window { --header-menu-max-height: 806px; }
}
.header-menu-info-panel[data-menu-info-panel='address']:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-component-gap-sm);
}

@media (max-width: 1199px) {
    .header-menu-compact { padding: var(--spacing-component-padding-y-add); }
    .header-menu-list { gap: var(--spacing-component-gap-xl); }
    .header-menu-list > .divider {
        margin-block: calc(20px - var(--spacing-component-gap-xl));
    }
}
@media (max-width: 1199px) {
    .header-menu-compact {
        margin: -4px -4px var(--spacing-component-gap-min);
    }
}

/* End */


/* Start:/local/frontend/styles/tickets-modal.css?179213396614589*/
/*
 * Модалка билетов: на 440/768 — на весь экран, с 1024 — панель справа,
 * с 1200 — слева. Цвета, отступы и радиусы — токенами дизайн-системы.
 */

.tickets-modal {
    --tickets-modal-top: calc(
        var(--header-top, var(--header-topbar-height, 36px)) + var(--header-height, 96px)
        + var(--stroke-width-m)
    );
    position: fixed;
    top: var(--tickets-modal-top);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: var(--spacing-content-padding-modal);
    max-height: calc(100dvh - var(--tickets-modal-top));
    box-sizing: border-box;
}

.tickets-modal[hidden] {
    display: none;
}

.tickets-modal-overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
}

.tickets-modal-window {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
    height: auto;
    max-height: 100%;
    padding: var(--spacing-content-padding-sm) var(--spacing-content-padding-sm) 0;
    padding-bottom: calc(var(--spacing-content-padding-sm) + env(safe-area-inset-bottom, 0px));
    border-radius: var(--radius-component-modal) var(--radius-component-modal) 0 0;
    background-color: var(--background-pr);
    color: var(--text-pr);
    box-shadow:
        0
        1px
        var(--effects-shadow-default-blur)
        var(--effects-shadow-default-spread)
        var(--effects-shadow-default-color);
}

.tickets-modal-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.tickets-modal-tabs {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.tickets-modal-tabs-list {
    flex-shrink: 0;
    flex-wrap: nowrap;
    gap: var(--spacing-content-gap-sm);
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 calc(var(--spacing-content-padding-sm) * -1);
    padding: 0 var(--spacing-content-padding-sm) var(--spacing-component-padding-y-xs);
}

.tickets-modal-tabs-list::-webkit-scrollbar {
    display: none;
}

.tickets-modal-tabs .tabs-tab {
    position: relative;
    flex-shrink: 0;
    padding: 0 0 var(--spacing-component-padding-y-xs);
    font-weight: 700;
    color: var(--text-pr);
    text-transform: uppercase;
    white-space: nowrap;
}

.tickets-modal-tabs .tabs-tab::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: var(--stroke-width-m);
    background-color: var(--background-component-action-1-acc-def);
    opacity: 0;
}

.tickets-modal-tabs .tabs-tab[aria-selected='true']::after {
    opacity: 1;
}

.tickets-modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(var(--spacing-content-padding-sm) * -1);
    padding: 0 var(--spacing-content-padding-sm) var(--spacing-content-padding-sm);
}

.tickets-modal-group {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    column-gap: var(--spacing-content-gap-sm);
    align-items: start;
}

.tickets-modal-group + .tickets-modal-group {
    margin-top: var(--spacing-content-gap-xs);
}

.tickets-modal-group--plain {
    grid-template-columns: minmax(0, 1fr);
}

.tickets-modal-group-label {
    margin: 0;
    padding-top: var(--spacing-content-gap-sm);
    color: var(--text-sec);
    font-weight: 400;
}

.tickets-modal-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--spacing-content-gap-sm);
    padding: var(--spacing-content-gap-sm) 0;
    border-top: var(--stroke-width-s) solid var(--stroke-pr);
}

.tickets-modal-row-info {
    display: grid;
    gap: var(--spacing-component-gap-xs);
}

.tickets-modal-row-hint {
    margin: 0;
    color: var(--text-sec);
}

.tickets-modal-row-price {
    white-space: nowrap;
}

.tickets-modal-offer {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: var(--spacing-content-gap-sm);
    padding: var(--spacing-content-gap-sm) 0;
    border-top: var(--stroke-width-s) solid var(--stroke-pr);
}

.tickets-modal-offer-media {
    position: relative;
    width: 88px;
    height: 72px;
    overflow: hidden;
    border-radius: var(--radius-md);
    background-color: var(--background-ter);
}

.tickets-modal-offer-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tickets-modal-offer-age {
    position: absolute;
    left: var(--spacing-component-gap-xs);
    bottom: var(--spacing-component-gap-xs);
    padding: 2px var(--spacing-component-padding-x-min);
    border-radius: var(--radius-xs);
    background-color: var(--background-component-action-1-acc-def);
    color: var(--text-inver);
    font-weight: 700;
}

.tickets-modal-offer-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--spacing-content-gap-sm);
    align-items: start;
}

.tickets-modal-offer-copy {
    display: grid;
    gap: var(--spacing-component-gap-xs);
    justify-items: start;
}

.tickets-modal-offer-more {
    color: var(--text-sec);
    text-decoration: underline;
}

.tickets-modal-offer-price {
    white-space: nowrap;
}

.tickets-modal-note {
    margin: var(--spacing-content-gap-sm) 0 0;
    color: var(--text-sec);
}

.tickets-modal-footer {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--spacing-content-gap-sm);
    padding-top: var(--spacing-content-padding-sm);
    border-top: var(--stroke-width-s) solid var(--stroke-pr);
}

.tickets-modal-buy {
    flex-shrink: 0;
    min-height: 52px;
}

.tickets-modal-links {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-component-gap-xs);
    min-width: 0;
}

.tickets-modal-link {
    color: var(--text-sec);
    text-decoration: underline;
}

/*
 * Блюр нельзя вешать на .tickets-modal-overlay: окно само position: fixed,
 * и backdrop-filter не захватывает страницу под этим слоем.
 * overflow: hidden на html/body тоже нельзя — пропадает скроллбар и контент
 * сдвигается. Страницу держит tickets-modal.js, как меню шапки.
 */
.is-tickets-modal-open {
    scroll-behavior: auto;
}

.is-tickets-modal-open body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 48;
    pointer-events: none;
    -webkit-backdrop-filter: blur(var(--effects-background-blur-default-blur));
    backdrop-filter: blur(var(--effects-background-blur-default-blur));
}

@media (min-width: 768px) {
    .tickets-modal-window {
        padding: var(--spacing-content-padding-md) var(--spacing-content-padding-md) 0;
        padding-bottom: calc(var(--spacing-content-padding-sm) + env(safe-area-inset-bottom, 0px));
    }

    .tickets-modal-tabs-list,
    .tickets-modal-body {
        margin-right: calc(var(--spacing-content-padding-md) * -1);
        margin-left: calc(var(--spacing-content-padding-md) * -1);
        padding-right: var(--spacing-content-padding-md);
        padding-left: var(--spacing-content-padding-md);
    }

    .tickets-modal-tabs-list {
        padding-bottom: var(--spacing-component-padding-y-xs);
    }
}

@media (min-width: 1024px) {
    .tickets-modal {
        justify-content: flex-end;
        padding: var(--spacing-content-padding-modal);
    }

    .tickets-modal-window {
        max-width: 720px;
        border-radius: var(--radius-component-modal);
    }
}

@media (min-width: 1200px) {
    .tickets-modal {
        justify-content: flex-start;
    }
}

/* Figma 2844:23053 / 2844:32496. Local token overrides retain the
 * design-system roles where the current token export differs from the mockup. */
.tickets-modal-window {
    --spacing-component-padding-x-xl: 20px;
    --radius-lg: 16px;
    --typography-component-button-btn-3-font-size: 14px;
    --typography-component-button-btn-3-line-height: 14px;
    --typography-subheadline-subheadline-2-font-size: 20px;
    --typography-subheadline-subheadline-2-line-height: 24px;
    padding: 0;
    overflow: hidden;
    border-radius: var(--radius-4xl);
}

.tickets-modal-tabs { min-width: 0; }

.tickets-modal-tabs .tickets-modal-tabs-list {
    display: flex;
    gap: var(--spacing-component-gap-xl);
    margin: 0;
    padding: var(--spacing-content-padding-md) var(--spacing-content-padding-lg) 0;
    border-bottom: 0;
    box-shadow: inset 0 calc(-1 * var(--stroke-width-s)) var(--stroke-light-grey-100);
    overscroll-behavior-x: contain;
    touch-action: pan-x;
}

.tickets-modal-tabs .tabs-tab {
    padding-bottom: 8px; /* 6px gap + 2px active indicator */
    font-family: var(--typography-component-tab-tab-2-font-family), sans-serif;
    font-size: var(--typography-component-tab-tab-2-font-size);
    line-height: var(--typography-component-tab-tab-2-line-height);
    letter-spacing: var(--typography-component-tab-tab-2-letter-spacing);
}

.tickets-modal-tabs .tabs-tab::after { background: var(--stroke-acc); }

.tickets-modal-body {
    margin: 0;
    padding: var(--spacing-content-padding-lg);
}

.tickets-modal-group { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-component-gap-xl); }
.tickets-modal-group-label { padding: 0; }
.tickets-modal-group + .tickets-modal-group {
    margin-top: var(--spacing-content-padding-xl);
}
.tickets-modal-row { padding: 0; gap: var(--spacing-component-gap-xs); border: 0; }
.tickets-modal-row + .tickets-modal-row {
    margin-top: var(--spacing-component-gap-xl);
    padding-top: var(--spacing-component-gap-xl);
    border-top: var(--stroke-width-s) solid var(--stroke-sec);
}
.tickets-modal-row-info { gap: var(--spacing-component-gap-min); }
.tickets-modal-row-name, .tickets-modal-offer-name,
.tickets-modal-row-price, .tickets-modal-offer-price { text-transform: uppercase; }

.tickets-modal-offer {
    position: relative;
    grid-template-columns: minmax(0, 1fr) 120px;
    grid-template-rows: auto 1fr;
    gap: var(--spacing-component-gap-md);
    min-height: 140px;
    padding: 0;
    border: 0;
}
.tickets-modal-offer + .tickets-modal-offer { margin-top: var(--spacing-component-gap-xl); }
.tickets-modal-offer-body { display: contents; }
.tickets-modal-offer-copy {
    grid-column: 1;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    min-width: 0;
}
.tickets-modal-offer-media {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    width: 120px;
    height: 90px;
    border-radius: var(--radius-xs);
}
.tickets-modal-offer-heading { display: grid; gap: var(--spacing-component-gap-min); }
.tickets-modal-offer-date { text-transform: uppercase; }
.tickets-modal-offer-price { grid-column: 2; grid-row: 1; text-align: right; }
.tickets-modal-offer-more {
    padding-bottom: var(--spacing-component-gap-xs);
    border-bottom: var(--stroke-width-s) solid var(--stroke-component-sec-def);
    text-decoration: none;
}
.tickets-modal-offer-age {
    left: auto;
    right: var(--spacing-component-padding-x-min);
    bottom: var(--spacing-component-padding-y-min);
    padding: var(--spacing-component-padding-y-min) var(--spacing-component-padding-x-xs);
    border-radius: var(--radius-full);
    font-weight: 400;
}
.tickets-modal-note { margin-top: var(--spacing-component-gap-xl); }
.tickets-modal-footer {
    flex-direction: column;
    gap: 12px;
    padding: var(--spacing-component-padding-y-md) var(--spacing-content-padding-lg)
        calc(var(--spacing-content-padding-md) + env(safe-area-inset-bottom, 0px));
    border-top: 0;
    box-shadow: inset 0 var(--stroke-width-s) var(--stroke-sec);
}
.tickets-modal-buy {
    width: 100%;
    min-height: 56px;
    padding: 0 var(--spacing-component-padding-x-xl);
    border-radius: var(--radius-lg);
    font-size: var(--typography-component-button-btn-3-font-size);
    line-height: var(--typography-component-button-btn-3-line-height);
}
.tickets-modal-links {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 24px;
}
.tickets-modal-link {
    font-size: var(--typography-caption-caption-2-link-font-size);
    line-height: var(--typography-caption-caption-2-link-line-height);
    white-space: nowrap;
    text-underline-position: from-font;
}

@media (min-width: 768px) {
    .tickets-modal-window { --spacing-component-gap-xl: 24px; }
    .tickets-modal-offer {
        grid-template-columns: 160px minmax(0, 400px);
        grid-template-rows: auto;
        justify-content: space-between;
        gap: var(--spacing-component-gap-xl);
        min-height: 120px;
    }
    .tickets-modal-offer-media {
        grid-column: 1;
        grid-row: 1;
        align-self: start;
        width: 160px;
        height: 120px;
    }
    .tickets-modal-offer-body {
        grid-column: 2;
        grid-row: 1;
        display: grid;
        grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
        grid-template-rows: 1fr auto;
        column-gap: var(--spacing-component-gap-xs);
        row-gap: var(--spacing-component-gap-xl);
        min-height: 120px;
        height: 100%;
    }
    .tickets-modal-offer-copy { display: contents; }
    .tickets-modal-offer-heading { grid-column: 1; grid-row: 1; align-content: start; }
    .tickets-modal-offer-price { grid-column: 2; grid-row: 1; }
    .tickets-modal-offer-more { grid-column: 1 / -1; grid-row: 2; }
    .tickets-modal-offer-age {
        left: var(--spacing-component-padding-x-min);
        right: auto;
    }
    .tickets-modal-note { width: 400px; max-width: 100%; margin-left: auto; }

    .tickets-modal-group { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); }
    .tickets-modal-group--plain { grid-template-columns: minmax(0, 1fr); }
    .tickets-modal-group + .tickets-modal-group {
        margin-top: var(--spacing-component-gap-xl);
        padding-top: var(--spacing-component-gap-xl);
        border-top: var(--stroke-width-s) solid var(--stroke-sec);
    }
    .tickets-modal-footer { flex-direction: row; justify-content: space-between; }
    .tickets-modal-buy { width: auto; }
    .tickets-modal-links { width: 400px; max-width: 100%; justify-content: flex-start; gap: 16px 24px; }
}
@media (min-width: 1024px) {
    .tickets-modal-window { max-width: 691px; }
}

/* End */


/* Start:/local/frontend/styles/footer.css?17921567348594*/
.footer {
    background-color: var(--background-inver);
}

.footer-main {
    display: flex;
    flex-direction: column;
}

.footer-main-logo {
    display: flex;
    align-items: center;
    height: 130px;
    padding: 0 var(--spacing-content-padding-grid-2);
    color: var(--foregroung-white);
}

.footer-main-logo a {
    display: flex;
    width: max-content;
}

.footer-main-logo svg {
    width: 122px;
    height: 50px;
}

.footer-main-blocks {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-scale-4-4, 16px);
    padding: var(--spacing-content-padding-sm) var(--spacing-content-padding-grid-2);
}

.footer-main-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-component-gap-xl);
    border-radius: var(--radius-2xl);
    border: var(--stroke-width-hairline, 1px) solid var(--stroke-inver);
    padding: var(--spacing-component-padding-y-xl);
    text-transform: uppercase;
}

.footer-main-card-label {
    color: #949D9E;
}

.footer-main-card-title {
    color: var(--foregroung-white);
}

.footer-main-route {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.footer-main-route-block {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-component-gap-md);
    color: var(--text-inver-add);
    text-transform: none;
}

.footer-main-route-block button {
    font-weight: 700;
    width: 100%;
}

.footer-main-route-block .button {
    box-sizing: border-box;
    height: 56px;
    min-height: 56px;
    padding-block: 0;
}

.footer-main-card-worktime {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-component-gap-sm);
}

.footer-main-card-worktime-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-component-gap-xs);
    color: var(--foregroung-white);
    font-weight: 700;
}

.footer-main-card-hint {
    text-transform: none;
    color: var(--text-inver-add);
}

.footer-main-navigation {
    padding: var(--spacing-content-padding-sm);
}

.footer-main-navigation > div {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-content-gap-xxl);
    padding: var(--spacing-content-padding-sm);
}

.footer-navigation-block {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-content-gap-xxl);
}

.footer-navigation-block-column {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-component-gap-xl);
    text-transform: uppercase;
}

.footer-column-title {
    color: var(--text-inver-add);
}

.footer-column-link {
    display: block;
    font-weight: 700;
    color: var(--text-component-action-1-inver-def);
}

.footer-center {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: var(--spacing-content-gap-lg);
    padding: var(--spacing-content-padding-sm) var(--spacing-content-padding-grid-2);
}

.footer-center-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 202px));
    gap: var(--spacing-component-gap-min);
}

.footer-card {
    display: flex;
    flex-direction: column;
    height: 136px;
    border-radius: var(--radius-2xl);
    background-color: var(--background-inver-add);
}

.footer-card-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 76px;
    margin: var(--spacing-component-padding-y-min) var(--spacing-component-padding-x-min);
    background-color: var(--background-grey-alpha-30);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.footer-card-logo img {
    width: 114px;
    height: 76px;
    object-fit: scale-down;
}

.footer-card-label {
    padding: var(--spacing-component-padding-y-md) var(--spacing-component-padding-x-xs) var(--spacing-component-padding-y-md) var(--spacing-component-padding-x-md);
    text-align: center;
    color: var(--text-inver);
}

.footer-center-socials {
    display: flex;
    justify-content: center;
    gap: var(--spacing-content-gap-xxl);
    color: var(--background-white);
    font-size: 28px; /* Размер иконки */
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap: var(--spacing-content-gap-md);
    padding: var(--spacing-content-padding-sm) var(--spacing-content-padding-grid-2);
}

.footer-bottom-block {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-content-gap-sm);
    color: var(--text-component-action-1-inver-add-def);
    text-align: center;
}

.footer-section {
    height: 600px;
    background-color: var(--background-acc-add);
}

.footer-section-padding {
    height: 100px;
}

.footer-divider {
    padding-left: var(--spacing-content-gap-grid-1);
    padding-right: var(--spacing-content-gap-grid-1);
}

.footer-section-backblock {
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-section-main {
    position: relative;
    display: flex;
    align-items: center;
    height: 398px;
    overflow: hidden;
}

.footer-section-main-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.marquee {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    overflow: visible;
}

.marquee-track {
    display: flex;
    width: max-content;
    flex-shrink: 0;
    gap: var(--spacing-content-gap-add);           /* расстояние между копиями */
    padding-right: var(--spacing-content-gap-add); /* = gap, чтобы стык был ровным */
    will-change: transform;
    animation: marquee-scroll 40s linear infinite;
}

.footer-section-main-text {
    color: var(--text-inver);
    text-transform: uppercase;
}

@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .marquee-track {
        animation: none;
    }
}

@media (min-width: 768px) {
    .footer-main-blocks {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        flex-direction: row;
    }

    .footer-main-card-title {
        max-width: 280px;
    }

    .footer-center-cards {
        grid-template-columns: repeat(2, 220px);
    }

    .footer-main-route-block button {
        width: auto;
    }

    .footer-card-logo {
        width: 212px;
        height: 68px;
    }

    .footer-card-logo img {
        width: 124px;
        height: 82px;
    }

    .footer-main-navigation > div {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        flex-direction: row;
    }

    .footer-bottom {
        padding: var(--spacing-content-padding-md) var(--spacing-content-padding-grid-2);
    }
}

@media (min-width: 1024px) {
    .footer-main-card-title {
        max-width: 280px;
    }

    .footer-main-card-hint {
        max-width: 280px;
    }

    .footer-center-cards {
        display: flex;
    }

    .footer-main-route-block {
        flex-direction: row;
        align-items: center;
    }

    .footer-card {
        flex-direction: row-reverse;
        justify-content: space-between;
        width: 220px;
        height: 90px;
    }

    .footer-card-logo {
        flex: 0 0 82px;
        width: 82px;
        height: 82px;
    }

    .footer-card-logo img {
        width: 82px;
        height: 82px;
    }

    .footer-card-label {
        display: flex;
        align-items: center;
        text-align: start;
    }

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

    .footer-bottom-block {
        align-items: center;
        flex-direction: row;
    }

    .footer-bottom .divider-vertical {
        height: 14px;
    }
}

@media (min-width: 1200px) {
    .footer-main {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        flex-direction: row;
    }

    .footer-main-blocks {
        display: flex;
        flex-direction: column;
    }

    .footer-main-card {
        max-width: 544px;
    }

    .footer-main-navigation > div {
        display: flex;
        justify-content: space-between;
    }

    .footer-navigation-block {
        flex: 0 0 252px;
    }

    .footer-center {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        gap: 28px;
    }
}

@media (min-width: 1536px) {
    .footer-center {
        gap: var(--spacing-content-gap-lg);
    }

    .footer-card {
        width: 250px;
    }

    .footer-navigation-block {
        flex: 0 0 304px;
    }

    .footer-bottom {
        flex-direction: row-reverse;
    }
}

@media (min-width: 1920px) {
    .footer-navigation-block {
        flex: 0 0 392px;
    }
}

/* End */


/* Start:/local/frontend/styles/pages/events.css?179242236622702*/
.events-page {
    overflow-x: clip;
    padding: calc(var(--header-height) + var(--spacing-content-padding-xl)) 0
        var(--spacing-content-padding-xl) 0;
    color: var(--text-pr);
    background: var(--background-light-grey-200, #E7EAE9);
}

.events-feed-shell {
    border-radius: var(--radius-5xl);
    background: var(--background-pr);
    padding: var(--spacing-content-padding-xxl) 0;
    min-width: 0;
}

.events-section {
    display: grid;
    gap: calc(
        var(--spacing-content-padding-xs) +
        min(var(--spacing-content-padding-grid-3), 20px)
    );
    width: var(--size-layout-grid-3-width);
    max-width: 100%;
    margin-inline: auto;
    min-width: 0;
}

.events-feed-shell > .events-section:not(.events-catalog) {
    padding-bottom: min(var(--spacing-content-padding-grid-3), 20px);
}

.events-section__title {
    display: block;
    margin: 0;
    padding-left: var(--spacing-content-padding-grid-1);
    color: var(--text-pr);
    text-transform: uppercase;
}

.events-catalog {
    padding-top: var(--spacing-content-padding-xxl);
    min-width: 0;
}

.events-feed-shell > .events-catalog:first-child {
    padding-top: 0;
}

.events-catalog__toolbar {
    min-width: 0;
    max-width: 100%;
    padding-left: var(--spacing-component-gap-sm);
}

.events-catalog__board {
    min-width: 0;
}

.events-page .page-toolbar-tabs {
    cursor: grab;
    user-select: none;
}

.events-page .page-toolbar-tabs.is-dragging,
.events-page .page-toolbar-tabs.is-dragging .tabs-tab {
    cursor: grabbing;
}

.events-catalog__empty {
    margin: 0;
    padding-left: var(--spacing-component-gap-sm);
    color: var(--text-sec);
    line-height: var(--typography-body-body-2-line-height);
}

.events-page .events-grid {
    gap: var(--spacing-content-gap-min-grid);
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
}

.events-page .event-card {
    width: 100%;
}

.events-page .event-card__date {
    color: var(--text-acc);
    gap: var(--spacing-component-gap-xs);
    text-transform: uppercase;
}

.events-page .event-card__type {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-component-gap-xs);
    margin-bottom: 0;
    font-weight: 500;
}

.events-page .event-card__title {
    padding-top: var(--spacing-component-gap-add);
}

.events-page .event-card__image {
    flex-shrink: 0;
}

.events-page .event-card__image--placeholder {
    display: block;
    background: var(--background-light-grey-200, #E7EAE9);
}

.events-page .event-card__date .additional-add-1 {
    font-family: var(--font-russianrail-extended);
    font-weight: 700;
}

.events-page .event-card-body {
    padding-bottom: var(--spacing-component-gap-add);
}

/* The mobile trigger is moved to body by page.toolbar. */
body:has(.events-page) .page-toolbar-sort-trigger {
    border-radius: 8px;
}

@media (max-width: 1024px) {
    body:has(.events-page) .page-toolbar-sort-trigger {
        width: 157px;
        height: 48px;
        font-size: 14px;
        line-height: 18px;
    }
}

@media (min-width: 1025px) {
    .events-page .page-toolbar-sort-trigger {
        width: 137px;
        height: 34px;
    }
}

.page-next {
    display: grid;
    gap: var(--spacing-content-gap-md);
    margin: var(--spacing-content-gap-xxl) 0;
}

.page-next__title {
    margin: 0;
    text-align: center;
    font-size: var(--typography-subheadline-subheadline-2-font-size);
    line-height: var(--typography-heading-headline-2-line-height);
    letter-spacing: var(--typography-heading-headline-2-letter-spacing);
}

.page-next__grid {
    display: grid;
    grid-template-columns: repeat(2, 154px);
    justify-content: center;
    gap: var(--spacing-content-gap-min);
}

.page-next__card {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 186px;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: var(--background-white, #FFFFFF);
    color: inherit;
    text-decoration: none;
    padding: var(--spacing-component-gap-xs);
}

.page-next__media {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.page-next__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-next__label {
    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;
}

@media (max-width: 767px) {
.events-page {
        padding-bottom: 0;
    }

.events-page .events-grid {
        justify-content: start;
    }

.events-catalog__empty.body-2 {

        line-height: 18px;
    }

.events-feed-shell {
        padding-bottom: 0;
        padding-inline: var(--spacing-content-padding-xs);
    }

.events-feed-shell > .events-section:not(.events-catalog) {
        gap: calc(var(--spacing-content-padding-xs) + var(--spacing-content-padding-sm));
        padding-bottom: var(--spacing-content-padding-sm);
    }

.events-catalog {
        gap: var(--spacing-content-gap-sm);
    }

.events-catalog__board {
        padding-top: var(--spacing-content-padding-xs);
    }

.events-catalog__toolbar {
        width: calc(100% + var(--spacing-content-padding-xs) * 2);
        max-width: none;
        margin-inline: calc(var(--spacing-content-padding-xs) * -1);
        padding-left: 0;
    }

.events-page .events-catalog .events-grid {
        margin-bottom: var(--spacing-content-padding-xxl);
    }

.events-page .events-catalog .page-toolbar {
        padding-block: var(--spacing-component-padding-y-min);
    }

.events-page .page-toolbar-tabs.tabs {
        padding-inline: var(--spacing-content-padding-grid-4);
        scroll-padding-inline: var(--spacing-content-padding-grid-4);
    }

.events-page .page-toolbar-tabs.tabs--size-2 .tabs-tab.is-active {
        padding: var(--spacing-component-padding-y-md) var(--spacing-component-padding-x-md);
        border-radius: var(--radius-md);
    }

.events-page .page-toolbar-tabs.tabs--size-2 .tabs-tab.is-active {

        padding: 16px;
        border-radius: 12px;
    }

.events-page .event-card__image {
        width: 100%;
        max-width: 213.333px;
        max-height: 160px;
        aspect-ratio: 4 / 3;
    }

.events-page .list-preloader {
        box-sizing: border-box;
        height: 164px;
        padding: var(--spacing-content-padding-xxl) 0 var(--spacing-content-gap-xxxl-2);
    }

.events-page .list-preloader-spinner {
        width: 44px;
        height: 44px;
    }

.events-page .continue-cards {
        gap: var(--spacing-content-gap-md);
        padding: var(--spacing-content-gap-xxxl-2) var(--spacing-content-padding-grid-3);
    }

.events-page .continue-cards-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--spacing-content-gap-min);
        max-width: calc(206px * 2 + var(--spacing-content-gap-min));
    }

.events-page .continue-card {
        width: auto;
        max-width: none;
        height: 186px;
    }

.page-next {
        gap: var(--spacing-content-gap-md);
        margin: 0;
        padding: var(--spacing-content-gap-xxxl-2) var(--spacing-content-padding-grid-3);
    }

.page-next__title {
        font-size: var(--typography-heading-headline-2-font-size);
        line-height: var(--typography-heading-headline-2-line-height);
        letter-spacing: var(--typography-heading-headline-2-letter-spacing);
    }

.page-next__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: var(--spacing-content-gap-min);
    }

.page-next__card {
        height: 186px;
        padding: var(--spacing-component-padding-y-min) var(--spacing-component-padding-x-min);
        border-radius: var(--radius-2xl);
    }

}

@media (min-width: 441px) and (max-width: 767px) {
.events-featured__slider.swiper {
        max-width: 600px;
        margin-inline: auto;
    }

.events-section {
        width: min(100%, 600px);
    }

.events-page .events-grid,
.events-page .event-card {
        width: 100%;
    }

.events-page .events-grid {
        grid-template-columns: minmax(0, 1fr);
    }

}

@media (min-width: 768px) {
.events-feed-shell {
        /* Keep the catalogue grid aligned to the viewport, including its scrollbar. */
        box-sizing: border-box;
        width: 100vw;
    }

.events-section {
        width: calc(100% - var(--spacing-content-padding-grid-3) * 2);
        max-width: 1552px;
    }

.events-feed-shell:has(.list-preloader:not([hidden])) {
        padding-bottom: 0;
    }

.events-page .list-preloader:not([hidden]) {
        margin-top: var(--spacing-content-padding-xxl);
    }

.events-catalog {
        gap: 0;
    }

.events-catalog > .events-section__title {
        padding-left: calc(var(--spacing-content-padding-grid-4) - var(--spacing-content-padding-grid-3));
        margin-bottom: var(--spacing-content-padding-xs);
    }

.events-catalog__toolbar {
        box-sizing: border-box;
        width: 100%;
        margin-bottom: min(var(--spacing-content-padding-grid-3), 20px);
        padding: var(--spacing-content-padding-xs) calc(var(--spacing-content-padding-grid-4) - var(--spacing-content-padding-grid-3));
    }

.events-page .continue-cards {
        padding-block: var(--spacing-content-gap-xxxl-2);
    }

}

@media (min-width: 768px) and (max-width: 1023px) {
.events-feed-shell > .events-section:not(.events-catalog) {
        gap: calc(var(--spacing-content-padding-xs) + var(--spacing-component-gap-md));
        padding-bottom: var(--spacing-content-padding-xs);
    }

.events-catalog__toolbar {
        margin-bottom: var(--spacing-content-padding-xs);
    }

.events-page .list-preloader {
        box-sizing: border-box;
        height: 164px;
        padding: var(--spacing-content-padding-xxl) 0 var(--spacing-content-gap-xxxl-2);
    }

.events-page .list-preloader-spinner {
        width: 44px;
        height: 44px;
    }

}

@media (min-width: 768px) {
.events-page .events-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

.events-page .event-card {
        width: 100%;
    }

}

@media (min-width: 1024px) {
    .events-section {
        max-width: var(--size-layout-grid-3-width);
    }

.events-page .list-preloader {
        box-sizing: border-box;
        height: 180px;
        padding: var(--spacing-content-padding-xxl) 0 80px;
    }

.events-page .list-preloader-spinner {
        width: 44px;
        height: 44px;
    }

.events-catalog__toolbar {
        margin-bottom: min(var(--spacing-content-padding-grid-3), 20px);
    }

}

@media (min-width: 1200px) {
.events-page .events-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

.page-next__grid {
         grid-template-columns: repeat(4, 280px);
    }

.page-next__card {
        height: 240px;
    }

}

@media (min-width: 1536px) {
.events-page .list-preloader {
        height: 192px;
    }

.events-page .list-preloader-spinner {
        width: 56px;
        height: 56px;
    }

}

@media (min-width: 2560px) {
.events-page .list-preloader {
        height: 156px;
        padding: var(--spacing-content-padding-sm) 0 80px;
    }

}

@media (min-width: 1920px) {
.events-section {
        width: 100%;
    }

.events-catalog__empty {
        line-height: var(--typography-body-body-2-line-height);
    }

.events-feed-shell {
        padding: var(--spacing-content-padding-xxl) max(
            var(--spacing-content-padding-xl),
            calc((100% - 1920px) / 2 + var(--spacing-content-padding-xl))
        );
    }

}

.events-featured {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-content-gap-xxl);
    padding: 0 var(--spacing-content-padding-grid-3) var(--spacing-content-padding-xl);
}

.events-featured__title {
    margin: 0;
    text-align: center;
    color: var(--text-pr);
    animation:
        events-appear-opacity var(--default-duration) linear var(--default-delay) backwards,
        events-appear-position var(--long-duration) var(--default-timing-standard) var(--default-delay) backwards;
}

.events-featured__slider.swiper {
    width: 100%;
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius-5xl);
    background: var(--background-pr);
}

.events-featured.events-featured--title {
    padding-bottom: var(--spacing-content-gap-xxl);
}

.events-page__content {
    animation:
        events-appear-opacity var(--default-duration) linear var(--medium-delay) backwards,
        events-appear-position var(--long-duration) var(--default-timing-standard) var(--medium-delay) backwards;
}

@keyframes events-appear-opacity {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes events-appear-position {
    from { transform: translateY(var(--long-shift)); }
    to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .events-featured__title,
    .events-page__content,
    body:has(.events-page) .animation-appear-from-top {
        animation: none;
    }
}

.events-featured__slide {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, calc((100% - var(--stroke-width-s)) / 2)) minmax(0, 1fr);
    grid-template-areas: "aside aside" "main main" "visual controls";
    grid-template-rows: 77px 349px 174px;
    height: 648px;
    padding: var(--spacing-component-padding-y-add) var(--spacing-component-padding-x-add);
}

.events-featured__sidebar,
.events-featured__content {
    display: contents;
}

.events-featured__aside {
    grid-area: aside;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: var(--spacing-component-gap-add);
    border-bottom: var(--stroke-width-s) solid var(--stroke-pr);
}

.events-featured__date {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-component-gap-min);
    color: var(--text-acc);
}

.events-featured__date .headline-2 {
    font-size: 48px;
    font-weight: 500;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}

.events-featured__date small {
    font-family: var(--font-roboto);
    font-size: 12px;
    font-weight: 1000;
    font-variation-settings: var(--rf-w25);
    line-height: 1.2;
    text-transform: uppercase;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}

.events-featured__category {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-component-gap-min);
    color: var(--text-sec);
    text-align: left;
}

.events-featured__category.body-2,
.events-featured__media .body-2 {
    line-height: 18px;
}

.events-featured__main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    gap: var(--spacing-component-gap-add);
    padding-block: var(--spacing-component-gap-add);
    border-bottom: var(--stroke-width-s) solid var(--stroke-pr);
}

.events-featured__heading {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    margin: 0;
    overflow-wrap: anywhere;
}

.events-featured__heading-text,
.events-featured__description-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    overflow: hidden;
}

.events-featured__text {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    margin: 0;
    overflow-wrap: anywhere;
}

.events-featured__description-text {
    -webkit-line-clamp: 4;
    line-clamp: 4;
}

.events-featured__link {
    display: inline-flex;
    flex-direction: column;
    align-self: flex-start;
    flex-shrink: 0;
    gap: 4px;
    color: var(--text-component-action-1-pr-def);
    text-decoration: none;
    transition: color var(--short-duration);
}

.events-featured__link::after {
    content: "";
    height: var(--stroke-width-s);
    background: currentColor;
}

.events-featured__visual {
    grid-area: visual;
    min-width: 0;
    min-height: 0;
    margin-top: var(--spacing-component-gap-add);
    padding-right: var(--spacing-component-gap-add);
}

.events-featured__media {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    min-width: 0;
    margin: 0;
}

.events-featured__media img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 165.333333px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-4xl);
}

.events-featured__media figcaption {
    color: var(--text-component-action-1-inver-add-def);
}

.events-featured__controls {
    grid-area: controls;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    min-width: 0;
    margin-top: var(--spacing-component-gap-add);
    padding-left: var(--spacing-component-gap-add);
    border-left: var(--stroke-width-s) solid var(--stroke-pr);
}

.events-featured__fraction {
    display: flex;
    gap: var(--spacing-content-gap-min);
    color: var(--text-pr);
    font-family: var(--font-roboto);
    font-size: 16px;
    line-height: 1.1;
    font-weight: 500;
    font-variation-settings: var(--rf-w30-g20);
}

.events-featured__nav {
    display: flex;
    gap: var(--spacing-component-gap-min);
}

.events-featured__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
}

.events-featured__arrow-icon {
    display: block;
    width: var(--size-icons-l-width);
    height: var(--size-icons-l-height);
    background-color: currentColor;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.events-featured__arrow-icon--prev {
    mask-image: url('/local/frontend/images/icons/arrow-left_outline.svg');
}

.events-featured__arrow-icon--next {
    mask-image: url('/local/frontend/images/icons/arrow-right_outline.svg');
}

.events-featured__arrow .events-featured__arrow-icon {
    width: 20px;
    height: 20px;
}

@media (min-width: 1536px) {
    .events-featured__arrow {
        width: 56px;
        height: 56px;
        border-radius: 16px;
    }

    .events-featured__arrow .events-featured__arrow-icon {
        width: 24px;
        height: 24px;
    }
}

@media (max-width: 439px) {
    .events-featured__description-text {
        -webkit-line-clamp: 4;
        line-clamp: 4;
    }
}

@media (min-width: 768px) {
    .events-featured__slide {
        grid-template-columns: max-content minmax(0, 1fr);
        grid-template-areas: "sidebar content";
        grid-template-rows: minmax(0, 1fr);
        column-gap: calc(var(--spacing-component-gap-add) * 2 + var(--stroke-width-s));
        height: 622px;
    }

    .events-featured__sidebar {
        grid-area: sidebar;
        position: relative;
        display: grid;
        grid-template-rows: minmax(0, calc((100% + var(--stroke-width-s)) / 2)) minmax(0, 1fr);
        width: calc(var(--size-component-btn-l-height) * 2 + var(--spacing-component-gap-min));
        min-height: 0;
    }

    .events-featured__sidebar::after,
    .events-featured__main::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: calc((var(--spacing-component-gap-add) + var(--stroke-width-s)) * -1);
        width: var(--stroke-width-s);
        background: var(--stroke-pr);
    }

    .events-featured__aside {
        grid-area: auto;
        min-width: 0;
        width: 100%;
        flex-direction: column;
        justify-content: space-between;
        min-height: 0;
    }

    .events-featured__controls {
        grid-area: auto;
        align-items: flex-start;
        margin-top: 0;
        padding: var(--spacing-component-gap-add) 0 0;
        border: 0;
    }

    .events-featured__content {
        grid-area: content;
        display: grid;
        grid-template-rows: minmax(0, 1fr) 279px;
        min-width: 0;
        min-height: 0;
    }

    .events-featured__main {
        grid-area: auto;
        padding-top: 0;
    }

    .events-featured__visual {
        grid-area: auto;
        margin: 0;
        padding: var(--spacing-component-gap-add) 0 0;
    }

    .events-featured__media {
        flex-direction: row;
        align-items: flex-start;
    }

    .events-featured__media img {
        width: 340px;
        max-width: 340px;
        height: 255px;
    }

    .events-featured__media figcaption {
        max-width: 136px;
    }
}

@media (min-width: 1024px) {
    .events-featured__slider.swiper {
        max-width: var(--size-layout-grid-3-width);
        margin-inline: auto;
    }

    .events-featured__slide {
        grid-template-columns: max-content repeat(2, minmax(0, 1fr));
        grid-template-areas: "sidebar main visual";
        height: 500px;
    }

    .events-featured__content {
        display: contents;
    }

    .events-featured__main {
        grid-area: main;
        position: relative;
        display: grid;
        grid-template-rows: minmax(0, calc((100% + var(--stroke-width-s)) / 2)) minmax(0, 1fr);
        gap: 0;
        padding: 0;
        border: 0;
    }

    .events-featured__heading {
        padding-bottom: var(--spacing-component-gap-add);
        border-bottom: var(--stroke-width-s) solid var(--stroke-pr);
    }

    .events-featured__text {
        grid-row: 2;
        grid-column: 1;
        padding-top: var(--spacing-component-gap-add);
        padding-bottom: calc(var(--typography-component-button-btn-1-line-height) + var(--spacing-component-gap-min) + var(--stroke-width-s) + var(--spacing-component-gap-add));
    }

    .events-featured__description-text {
        -webkit-line-clamp: 8;
        line-clamp: 8;
    }

    .events-featured__link {
        grid-row: 2;
        grid-column: 1;
        align-self: end;
        justify-self: start;
    }

    .events-featured__visual {
        grid-area: visual;
        padding: 0;
    }

    .events-featured__media {
        flex-direction: column;
    }

    .events-featured__media img {
        width: 100%;
        max-width: none;
        height: auto;
    }
}

@media (min-width: 1200px) {
    .events-featured__slide {
        height: 591px;
    }
}

@media (min-width: 1920px) {
    .events-featured {
        padding-inline: max(var(--spacing-content-padding-xl), calc((100% - 1920px) / 2 + var(--spacing-content-padding-xl)));
    }

    .events-featured__slider.swiper {
        width: var(--size-layout-grid-3-width);
        max-width: 100%;
        margin-inline: auto;
    }

    .events-featured__slide {
        height: 607px;
    }

    .events-featured__category.body-2,
    .events-featured__media .body-2 {
        line-height: var(--typography-body-body-2-line-height);
    }
}

/* End */


/* Start:/local/frontend/styles/pages/event-detail.css?179239641015350*/
.event-detail {
    min-height: 100%;
    padding-top: calc(var(--header-height) + var(--spacing-content-padding-xl));
    padding-bottom: var(--spacing-content-padding-xl);
    color: var(--foregroung-grey-900, #353735);
    background: var(--background-light-grey-200, #E7EAE9);
    overflow-x: clip;
}

.event-detail__container {
    display: grid;
    gap: var(--spacing-content-padding-xl);
    /* padding: 0 var(--spacing-content-gap-grid-1); */
    min-width: 0;
    max-width: 100%;
    margin: 0 auto;
}

.event-detail__back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-component-gap-sm);
    color: var(--foregroung-grey-900, #353735);
    text-decoration: none;
}

.event-detail__back-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-4xl);
    color: var(--foregroung-white);
    background: var(--background-acc);
}

.event-detail__back-icon svg {
    display: block;
}

.event-detail__intro {
    display: grid;
    gap: var(--spacing-content-padding-xxl);
     padding: 0 var(--spacing-content-gap-grid-1);
}

.event-detail__intro-main {
    display: grid;
    gap: var(--spacing-content-gap-xl);
    align-content: start;
}

.event-detail__aside,
.event-detail__aside .detail-page__meta,
.event-detail__aside .detail-page__meta-item {
    align-content: start;
}

.event-detail__header {
    display: grid;
    gap: var(--spacing-content-gap-xl);
}

.event-detail__category {
    color: var(--text-pr);
    font-weight: 500;
}

.event-detail__panel {
    display: grid;
    gap: var(--spacing-content-gap-lg);
    min-width: 0;
    border-radius: var(--radius-5xl);
    padding: var(--spacing-content-padding-xl) var(--spacing-content-gap-grid-1);
    background: var(--background-white, #FFFFFF);
}

.event-detail .share {
    min-width: 0;
    padding-left: var(--spacing-content-gap-md);
    height: 100%;
    border-left: 1px solid var(--stroke-pr);
}

@media (max-width: 1023px) {
    .event-detail .share {
        padding-left: 0;
        height: auto;
        border-left: 0;
    }
}

.event-detail__content {
    display: grid;
    min-width: 0;
    gap: var(--spacing-content-padding-xl);
}

.event-detail__content.event-detail__content--with-gallery {
    gap: var(--spacing-content-gap-xl);
}

.event-detail__content.event-detail__content--with-gallery {
    gap: var(--spacing-content-gap-xl);
}

.event-detail__lead {
    display: flow-root;
    min-width: 0;
    font-variation-settings: "wdth" 100, "GRAD" 0;
    overflow-wrap: anywhere;
}
.event-detail__lead a {
    text-decoration: underline;
    color: var(--background-component-action-1-acc-activ);

}

.event-detail__lead p,
.event-detail__note {
    margin: 0;
}
.event-detail__lead p:not(:last-child) {
    margin-bottom: var(--typography-body-body-1-paragraph-spacing, 18px);
}

.event-detail__changes + .event-detail__lead {
    padding-top: var(--spacing-content-gap-xl);
    border-top: 1px solid var(--stroke-pr);
}

.event-detail__content--with-gallery .event-detail__lead img {
    display: none;
}

.event-detail__gallery-icon {
    display: block;
    width: var(--size-icons-l-width);
    height: var(--size-icons-l-height);
}

.event-detail__gallery {
    width: 100% !important;
    max-width: 100%;
}

.event-detail__gallery.detail-page__hero,
.event-detail__gallery .detail-page__gallery-slider {
    aspect-ratio: 1048 / 696;
    border-radius: var(--radius-4xl);
}

.event-detail__gallery .detail-page__gallery-slider,
.event-detail__gallery .detail-page__gallery-slider .swiper-wrapper,
.event-detail__gallery .detail-page__gallery-slider .swiper-slide {
    height: 100%;
}

.event-detail__gallery .detail-page__hero-image,
.event-detail__gallery .detail-page__gallery-image {
    height: 100%;
    aspect-ratio: 1048 / 696;
}

.event-detail__gallery .detail-page__gallery-nav {
    bottom: var(--spacing-component-padding-x-add) !important;
    left: var(--spacing-component-padding-x-add) !important;
}

.event-detail__changes {
    display: grid;
}

.event-detail__change {
    display: grid;
    gap: var(--spacing-component-gap-xl);
    padding: var(--spacing-content-gap-xl) 0;
    border-top: 1px solid var(--stroke-pr);
}

.event-detail__change:last-child {
    padding-bottom: 0;
}

.event-detail__change-date,
.event-detail__change-label,
.event-detail__ticket-hint,
.event-detail__note,
.event-card__type {
    color: var(--text-sec, #87918F);
}

.event-detail__change-body {
    display: grid;
}

.event-detail__change-title {
    margin: 0;
    font-weight: 700;
}

.event-detail__change-title:has(+ .event-detail__tickets) {
    padding-bottom: var(--spacing-component-gap-xl);
}
.event-detail__change-label{
padding-bottom: var(--spacing-component-gap-xs);
}

.event-detail__tickets {
    display: grid;
    gap: var(--spacing-component-gap-xl);
}

.event-detail__ticket {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-component-gap-xs);
    padding-top: var(--spacing-content-gap-lg);
    border-top: 1px solid var(--stroke-pr);
}

.event-detail__ticket-name {
    margin-bottom: var(--spacing-component-gap-xs);
    font-weight: 600;
}

.event-detail__ticket-price {
    align-self: start;
    white-space: nowrap;
    font-weight: 600;
}

.related-events {
    display: grid;
    padding-left: max(
        var(--spacing-content-padding-grid-1),
        calc((100% - var(--size-layout-grid-3-width)) / 2)
    );
    padding-right: max(
        var(--spacing-content-padding-grid-1),
        calc((100% - var(--size-layout-grid-3-width)) / 2)
    );
    gap: var(--spacing-content-padding-sm);
    min-width: 0;
}

.related-events__title {
    margin: 0;
    text-transform: uppercase;
    font-weight: 500;

}

.related-events__grid,
.events-grid {
    display: grid;
    justify-content: center;
    gap: var(--spacing-component-gap-sm);
    min-width: 0;
}

.related-events__grid {
    grid-template-columns: min(var(--size-component-news-card-width), 100%);
    width: 100%;
}

.events-grid {
    grid-template-columns: min(var(--size-component-news-card-width), 100%);
    width: min(100%, var(--size-layout-grid-3-width));
    max-width: 100%;
    margin-inline: auto;
}

.event-card {
    min-width: 0;
    width: min(var(--size-component-news-card-width), 100%);
    height: var(--size-component-news-card-height);
    overflow: hidden;
    background: var(--background-sec);
    border-radius: var(--radius-4xl);
    padding: var(--spacing-component-padding-y-add) var(--spacing-component-padding-x-add);
}
.event-detail  .event-card {
    background: var(--background-pr);
}

.event-card a {
    display: flex;
    flex-direction: column;
    container-type: inline-size;
    min-width: 0;
    height: 100%;
    color: inherit;
    text-decoration: none;
}
.event-card-body{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(0, min(160px, calc((100cqw - var(--spacing-component-gap-lg)) * 3 / 8)));
    flex-shrink: 0;
    align-items: stretch;
    gap: var(--spacing-component-gap-lg);
    border-bottom: 1px solid var(--stroke-sec);
    padding-bottom: var(--spacing-content-gap-md);
}
.event-card-content{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    min-width: 0;
    min-height: 0;

}

.event-card-content .event-card__type {
    margin-bottom: 0;
}

.event-card__date {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    color: var(--foregroung-orange-red-600, #D73F2B);
    font-weight: 700;
}

.event-card__date span {

}

.event-card__date small {
    font-weight: 500;
}

.event-card__image {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    max-height: 160px;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    object-fit: cover;
}


.event-card__type {
    grid-column: 1;
    /* align-self: end; */
    margin-bottom: 18px;
}

.event-card__title {
    grid-column: 1 / 3;
    margin: 0;
    margin-top: auto;
    padding-top: 18px;
    text-transform: uppercase;
}

@media (min-width: 768px) {
    .event-detail {
          padding-top: calc(var(--header-height) + var(--spacing-content-padding-md));
    padding-bottom: var(--spacing-content-padding-md);
     }

     .event-detail__intro-main {
         gap: var(--spacing-content-gap-xl);
      }

      .event-detail__header {
         gap: var(--spacing-content-gap-xl);
         padding-bottom: 0;
      }

      .event-detail__container {
        gap: var(--spacing-content-gap-lg);
      }

      .event-detail__panel {
         padding: var(--spacing-content-padding-lg) var(--spacing-content-gap-grid-1);
      }

       .event-detail__change {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: var(--spacing-content-gap-xxxl);
        padding: var(--spacing-content-gap-xl) 0;
    }
    .event-detail__change-date  {
        width: 220px;
    }

    .event-detail__content {
        gap: var(--spacing-content-padding-lg);
    }
    .related-events__grid,
    .events-grid {
        grid-template-columns: repeat(2, var(--size-component-news-card-width));
    }

    .related-events__title {
        padding-top: var(--spacing-component-padding-y-add);
    }
}

@media (min-width: 1024px) {
    .event-detail {
        padding-top: calc(var(--header-height) + var(--spacing-content-padding-xxl));
        padding-bottom: var(--spacing-content-padding-xxl);
    }

    .event-detail__intro {
        padding-left: max(
            var(--spacing-content-gap-grid-1),
            calc((100% - var(--size-layout-grid-4-width)) / 2)
        );
        padding-right: max(
            var(--spacing-content-gap-grid-1),
            calc((100% - var(--size-layout-grid-4-width)) / 2)
        );
    }

    .event-detail__header {
         border-bottom: none;
          gap: var(--spacing-content-gap-xl);
            padding-bottom: 0;
    }
    .event-detail__container {
         gap: var(--spacing-content-padding-xxl);
    }

    .event-detail__back-icon {
        width: 32px;
    height: 32px;
    }

    .event-detail__intro-main {
        gap: var(--spacing-content-gap-xl);
    }
     .event-detail__panel {
        grid-template-columns: var(--size-layout-block-article-content-width) minmax(0, 1fr);
        column-gap: var(--spacing-content-gap-grid-1);
        align-items: start;
        padding: var(--spacing-content-padding-xxl)
            max(var(--spacing-content-gap-grid-1), calc((100% - var(--size-layout-grid-4-width)) / 2));
    }
    .event-detail__content {
        grid-column: 1;
        gap: var(--spacing-content-gap-xl);
    }
    .event-detail .share {
        grid-column: 2;
    }



    .event-detail__intro--with-aside {
        grid-template-columns: var(--size-layout-block-article-content-width) minmax(0, 1fr);
        column-gap: var(--spacing-content-gap-grid-1);
        align-items: stretch;
    }
    .related-events__title {
        padding-top: 0;
    }
    .event-card-body {
        padding-bottom: var(--spacing-content-padding-md);
    }

}

@media (min-width: 1200px) {
    .related-events__grid,
    .events-grid {
        grid-template-columns: repeat(3, var(--size-component-news-card-width));
    }
}

@media (min-width: 1536px) {
 .event-detail__content {
    gap: var(--spacing-content-padding-xxl);
 }
  .event-detail__panel {
        /* gap: var(--spacing-content-gap-grid-1); */
    }

    .related-events__grid,
    .events-grid {
        gap: var(--spacing-component-gap-lg);
    }
}

@media (min-width: 1920px) {
    .related-events {
        /* padding-top: var(--spacing-content-gap-xxl);
        padding-bottom: var(--spacing-content-gap-xxl); */
    }

    .related-events__title{
        font-size: 28px;
        line-height: 32px;
    }
}

/* Detail-only layout: event cards are also used by the events listing. */
.event-detail__intro-main,
.event-detail__header,
.event-detail__aside,
.event-detail__change-body,
.event-detail__ticket-info {
    min-width: 0;
}

.event-detail__title {
    margin: 0;
    overflow-wrap: anywhere;
}

.event-detail__aside .detail-page__meta {
    width: 100%;
    padding: 0;
    border: 0;
}

.event-detail__aside .detail-page__header-note a {
    color: var(--text-acc);
    text-decoration: underline;
}

.event-detail__lead img,
.event-detail__lead video,
.event-detail__lead iframe {
    max-width: 100%;
}

.event-detail__lead img {
    height: auto;
}

.event-detail .event-card__type {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-component-gap-xs);
    margin-bottom: 0;
}

.event-detail .event-card {
    width: 100%;
    height: auto;
    min-height: var(--size-component-news-card-height);
}

.event-detail .event-card__title {
    padding-top: var(--spacing-component-gap-add);
}

@media (min-width: 1024px) {
    .event-detail__intro--with-aside .event-detail__header {
        align-content: space-between;
        flex: 1;
    }

    .event-detail__intro--with-aside .event-detail__intro-main {
        min-height: 216px;
        display: flex;
        flex-direction: column;
    }

    .event-detail__aside {
        padding-left: var(--spacing-content-gap-md);
        border-left: 1px solid var(--stroke-sec);
    }

    .event-detail__content,
    .event-detail__content.event-detail__content--with-gallery {
        gap: var(--spacing-content-gap-xl);
    }

    .event-detail .share {
        position: relative;
        gap: var(--spacing-component-gap-xl);
    }

    .event-detail .share::after {
        content: "";
        align-self: stretch;
        height: 1px;
        background: var(--stroke-pr);
    }
}

.event-detail .event-card-body {
    grid-template-rows: auto;
    min-height: min(160px, calc((100cqw - var(--spacing-component-gap-lg)) * 3 / 8));
}

.event-detail .related-events__grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: var(--size-component-news-card-width);
    margin-inline: auto;
}

.event-detail__aside .detail-page__meta-label {
    text-transform: uppercase;
}

@media (min-width: 768px) {
    .event-detail .related-events__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: none;
    }
}

@media (min-width: 1200px) {
    .event-detail .related-events__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .event-detail .related-events__grid {
        column-gap: var(--spacing-component-gap-md);
    }
}

.event-detail .share-button {
    width: calc(16px + 2 * var(--spacing-component-padding-btn-button-share));
    height: calc(16px + 2 * var(--spacing-component-padding-btn-button-share));
}

.event-detail__gallery .icon-button:is(:hover, :focus-visible):not(:disabled) {
    color: var(--icon-inver);
    background-color: var(--background-component-action-1-acc-def);
}

.event-detail__gallery .icon-button:is(:hover, :focus-visible):not(:disabled) .event-detail__gallery-icon {
    filter: brightness(0) invert(1);
}

@media (max-width: 768px) {
    .event-detail__header {
        padding-bottom: var(--spacing-content-gap-xl);
        border-bottom: 1px solid var(--stroke-sec);
    }
}

/* End */


/* Start:/local/frontend/styles/pages/service.css?17924152136651*/
.service-page {
    min-height: 100%;
    padding-top: calc(var(--header-height) + var(--spacing-content-padding-xl));
    color: var(--text-pr);
    background: var(--background-light-grey-200);
}

.service-page__container {
    display: grid;
    gap: var(--spacing-content-gap-xl);
}

.nav__container{
    padding: 0 var(--spacing-component-padding-x-xl) ;
}


.service-page__back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-content-gap-xs);
}

.service-page__back-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-4xl);
    color: var(--foregroung-white);
    background: var(--background-acc);
}

.service-page__back-icon svg {
   
    transform: rotate(180deg);
}

.service-page__info {
    display: grid;
    gap: var(--spacing-content-gap-grid-2);
    padding: var(--spacing-content-gap-lg) var(--spacing-content-gap-grid-1)
    0 0;
}

.service-page__title {
    margin: 0;
}

.service-page__panel {
    display: grid;
    gap: var(--spacing-content-gap-md);
    padding: var(--spacing-content-padding-md) var(--spacing-content-gap-grid-1);
    border-radius: var(--radius-3xl);
    background: var(--background-pr);
}

.service-page__content {
    display: grid;
    gap: inherit;
    min-width: 0;
}

.service-page__lead {
    margin: 0;
}

.service-page__formats{
    display: grid;
    gap: var(--spacing-component-gap-lg);
    padding-bottom: var(--spacing-content-gap-xs);
}

.service-page__formats-label{
    padding-top: var(--spacing-content-padding-xs);
}

.service-page__facts {
    padding-top: var(--spacing-content-gap-md);
    border-top: var(--stroke-width-s) solid var(--stroke-sec);
}

.service-page__facts-label,
.service-page__formats-label,
.service-page__contact-label,
.service-page__contact-key {
    color: var(--text-sec);
}

.service-page__facts-list {
    display: grid;
}

.service-page__facts-item {
    font-weight: 700;
    padding-top: var(--spacing-content-gap-lg);
    padding-bottom: var(--spacing-content-gap-md);
    border-bottom: var(--stroke-width-s) solid var(--stroke-sec);
}

.service-page__facts-item:first-child {
    padding-top: var(--spacing-component-gap-xl);
}

.service-page__facts-item:last-child {
    padding-bottom: var(--spacing-content-padding-md);
}

.service-page__formats-list {
    display: grid;
    gap: var(--spacing-content-gap-sm);
}

.service-page__format {
    display: grid;
    gap: var(--spacing-content-gap-xl);
    padding: var(--spacing-content-padding-lg) var(--spacing-content-gap-md);
    border-radius: var(--radius-4xl);
    background: var(--background-sec);
}

.service-page__format-title{
    text-transform: uppercase;
    padding-bottom: var(--spacing-content-gap-min);
    margin: 0;
}

.service-page__format-text{
    color: var(--foregroung-grey-600);
}

.service-page__format-cta {
    display: grid;
    justify-items: start;
    justify-self: start;
    width: fit-content;
    max-width: 100%;
}

.service-page__format-action {
    width: fit-content;
    padding-bottom: var(--spacing-content-gap-sm);
}

.service-page__format-note {
    color: var(--text-sec);
     padding-top: var(--spacing-content-gap-sm);
}

.service-page__contacts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--spacing-content-gap-sm);
    border-top: var(--stroke-width-s) solid var(--stroke-sec);
    padding-top: var(--spacing-content-gap-lg);
}

.service-page__contact-body {
    display: grid;
    gap: var(--spacing-component-gap-xl);
}

.service-page__contact-name {
    margin: 0;
    text-transform: uppercase;
}

.service-page__contact-field {
    display: grid;
    gap: var(--spacing-component-gap-xs);
}

.service-page__contact-value {
    overflow-wrap: anywhere;
}

@media (min-width: 768px) {
    .service-page {
    padding-top: calc(var(--header-height) + var(--spacing-content-padding-md));

}

.service-page__container {
    gap: var(--spacing-content-gap-lg);
}

.service-page__info {
 gap: var(--spacing-content-gap-grid-1);  
 padding: var(--spacing-content-gap-xl) var(--spacing-content-gap-grid-1)
    0 0; 
}

.service-page__panel {
     padding: var(--spacing-content-padding-lg) var(--spacing-content-gap-grid-1);
     gap: var(--spacing-content-gap-xl);
}

.service-page__facts {
     padding-top: var(--spacing-content-gap-xl);
     display: flex; 
     align-items: flex-start;
     gap: 60px;
     width: 100%;
     border-bottom: var(--stroke-width-s) solid var(--stroke-sec);
}

.service-page__facts-label {
    flex: 0 0 auto;
}

.service-page__facts-list {
    flex: 1 1 auto;
    min-width: 0;
}

.service-page__facts-label,
.service-page__formats-label,
.service-page__contact-label,
.service-page__contact-key {
    width: 220px;
     padding-top: 0;
}

.service-page__facts-item {
padding-top: 0;
  padding-bottom: var(--spacing-content-gap-md);
  padding-top: var(--spacing-content-padding-md);
}

.service-page__facts-item:first-child {
    padding-top: 0;
}

.service-page__facts-item:last-child {
   border-bottom: none;
   padding-bottom: var( --spacing-content-gap-xl);
}

.service-page__formats{
     display: flex; 
     align-items: flex-start;
     gap: 64px;
     width: 100%;
}

.service-page__format {
     padding: var( --spacing-component-padding-y-xxl) var(--spacing-component-padding-x-xxl);
}

.service-page__formats-list {
    gap: var(--spacing-component-padding-y-xxl);
}

.service-page__format-title {
    padding-bottom: var(--spacing-component-gap-xs);
}

.service-page__contacts {
padding-top: var(--spacing-content-gap-xl);
 display: flex; 
     align-items: flex-start;
     gap: 64px;
     width: 100%;
}

}

@media (min-width: 1024px) {

    .service-page{
        padding-top: calc(var(--header-height) + var(--spacing-content-padding-xxl));
    }
    .service-page__container {
        gap: var(--spacing-content-padding-xxl);
    }
    .service-page__panel {
        grid-template-columns: var(--size-layout-block-article-content-width) auto;
        justify-content: start;
        align-items: start;
        column-gap: var(--spacing-content-gap-xl);
    }

    .service-page__content {
        padding-right: var(--spacing-content-gap-xl);
        border-right: var(--stroke-width-s) solid var(--stroke-sec);
        width: var(--size-layout-block-article-content-width);
    }

    .nav__container{
    padding: 0 var(--spacing-content-gap-md);
        }

    .service-page__info {
         gap: var(--spacing-content-padding-xxl);
         padding: var(--spacing-content-padding-xxl) 0  0 0;
    }
}

/* End */


/* Start:/local/frontend/styles/pages/program-detail.css?179213396613490*/
/* Children programme details; listing pages use their own components. */
.program-page {
    --program-cover-padding: var(--spacing-content-padding-xl);
    --program-panel-padding: var(--spacing-content-padding-xl);
    --program-block-gap: var(--spacing-content-padding-xl);
    min-height: 100%;
    padding-top: calc(var(--header-height) + var(--program-cover-padding));
    color: var(--text-pr);
    background: var(--background-light-grey-200);
    overflow-x: clip;
}
.program-page__container {
    display: grid;
    gap: var(--program-cover-padding);
}
.program-page__header-service {
    display: grid;
    gap: var(--spacing-content-gap-grid-1);
    padding-inline: var(--spacing-content-gap-grid-1);
}
.program-page__header-service-main {
    display: grid;
    gap: var(--spacing-content-padding-md);
    min-width: 0;
    align-content: start;
}
.program-page__header-service--with-aside .program-page__header-service-main {
    padding-bottom: var(--spacing-content-gap-grid-1);
    border-bottom: var(--stroke-width-s) solid var(--stroke-sec);
}
.program-page__title,
.program-page__category {
    margin: 0;
    overflow-wrap: anywhere;
}
.program-page__category {
    text-transform: uppercase;
    font-weight: 400;
    font-variation-settings: "wdth" 100, "GRAD" 0;
}
.program-page__back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-component-gap-sm);
    font-variation-settings: "wdth" 100, "GRAD" 0;
}
.program-page__back-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: calc(16px + 2 * var(--spacing-component-gap-xs));
    height: calc(16px + 2 * var(--spacing-component-gap-xs));
    border-radius: var(--radius-4xl);
    color: var(--foregroung-white);
    background: var(--background-acc);
}
.program-page__header-service-aside {
    display: grid;
    gap: var(--spacing-component-padding-x-xxl);
    min-width: 0;
}
.program-page__meta {
    display: grid;
    gap: var(--spacing-component-gap-xl);
    margin: 0;
    padding: 0;
    min-width: 0;
}
.program-page__meta-item {
    display: grid;
    align-content: start;
    gap: var(--spacing-component-gap-xs);
    min-width: 0;
    overflow-wrap: anywhere;
}
.program-page__meta-label,
.program-page__meta-value {
    margin: 0;
    font-weight: 600;
    text-transform: uppercase;
    font-variation-settings: "wdth" 100, "GRAD" 0;
}
.program-page__header-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-component-gap-xl);
    min-width: 0;
}
.program-page__meta + .program-page__header-actions {
    padding-top: var(--spacing-component-padding-x-xxl);
    border-top: var(--stroke-width-s) solid var(--stroke-sec);
}
.program-page__header-note {
    --typography-body-body-2-font-size: 16px;
    --typography-body-body-2-line-height: 22px;
    margin: 0;
    color: var(--text-sec);
    font-variation-settings: "wdth" 100, "GRAD" 0;
    overflow-wrap: anywhere;
}
.program-page__header-note a,
.program-page__section-body a {
    color: var(--text-acc);
    text-decoration: underline;
}
.program-page__header-action {
    --radius-lg: 16px;
    min-height: 56px;
    height: auto;
    max-width: 100%;
    padding: 20px;
    font-size: var(--typography-component-button-btn-3-font-size);
    line-height: var(--typography-component-button-btn-3-line-height);
    font-variation-settings: "wdth" 100, "GRAD" 0;
    white-space: normal;
    text-align: center;
}
.program-page__panel {
    display: grid;
    gap: var(--spacing-content-gap-lg);
    padding: var(--program-panel-padding) var(--spacing-content-gap-grid-1);
    border-radius: var(--radius-5xl);
    background: var(--background-pr);
}
.program-page__content {
    display: grid;
    gap: var(--program-block-gap);
    min-width: 0;
}
.program-page__hero {
    min-width: 0;
    overflow: hidden;
    border-radius: var(--radius-4xl);
}
.program-page__hero-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1048 / 696;
    object-fit: cover;
}
.program-page__section {
    display: grid;
    gap: var(--spacing-component-gap-lg);
    min-width: 0;
}
.program-page__section + .program-page__section,
.program-page__closing {
    padding-top: var(--program-block-gap);
    border-top: var(--stroke-width-s) solid var(--stroke-pr);
}
.program-page__section-title {
    margin: 0;
    color: var(--text-sec);
    font-variation-settings: "wdth" 100, "GRAD" 0;
}
.program-page__section-body {
    display: flow-root;
    min-width: 0;
    font-variation-settings: "wdth" 100, "GRAD" 0;
    overflow-wrap: anywhere;
}
.program-page__section-body p { margin: 0; }
.program-page__section-body p:not(:last-child) {
    margin-bottom: var(--typography-body-body-1-paragraph-spacing);
}
.program-page__section-body :is(img, video, iframe, table) { max-width: 100%; }
.program-page__section-list {
    display: grid;
    gap: var(--spacing-content-gap-lg);
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.program-page__section-item {
    margin: 0;
    padding-bottom: var(--spacing-content-gap-md);
    border-bottom: var(--stroke-width-s) solid var(--stroke-pr);
    font-variation-settings: "wdth" 100, "GRAD" 0;
    overflow-wrap: anywhere;
}
.program-page__section-item:last-child { padding-bottom: 0; border-bottom: 0; }
.program-page__tickets {
    display: grid;
    gap: var(--spacing-content-gap-lg);
    min-width: 0;
}
.program-page__ticket {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--spacing-component-gap-xs);
    padding-top: var(--spacing-content-gap-lg);
    border-top: var(--stroke-width-s) solid var(--stroke-pr);
}
.program-page__ticket:first-child { padding-top: 0; border-top: 0; }
.program-page__ticket-info {
    display: grid;
    gap: var(--spacing-component-gap-xs);
    min-width: 0;
}
.program-page__ticket-name { text-transform: uppercase; }
.program-page__ticket-name,
.program-page__ticket-price {
    text-transform: uppercase;
    font-weight: 600;
    font-variation-settings: "wdth" 100, "GRAD" 0;
    overflow-wrap: anywhere;
}
.program-page__ticket-hint {
    color: var(--text-sec);
    font-variation-settings: "wdth" 100, "GRAD" 0;
}
.program-page__closing {
    display: grid;
    justify-items: center;
    gap: var(--spacing-content-gap-sm);
    text-align: center;
}
.program-page__closing-text { margin: 0; }
.program-page__closing-phone {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
    font-variation-settings: "wdth" 100, "GRAD" 0;
}
.program-page .share {
    min-width: 0;
    min-height: calc(48px + var(--spacing-component-gap-xl) + 1px);
    padding-top: var(--spacing-component-gap-xl);
    padding-bottom: 0;
    border-color: var(--stroke-pr);
}
.program-page .share-title {
    font-weight: 600;
    font-variation-settings: "wdth" 100, "GRAD" 0;
}
.program-page .share-list { gap: var(--spacing-component-padding-x-min); }
.program-page .share-button {
    width: calc(16px + 2 * var(--spacing-component-padding-btn-button-share));
    height: calc(16px + 2 * var(--spacing-component-padding-btn-button-share));
    flex-shrink: 0;
}
.program-page__related-media {
    --program-related-columns: 1;
    --program-related-gap: var(--spacing-component-gap-sm);
    --program-related-width: calc(var(--size-component-news-card-width) * var(--program-related-columns) + var(--program-related-gap) * (var(--program-related-columns) - 1));
    display: grid;
    gap: var(--spacing-content-padding-sm);
    padding-block: var(--spacing-content-padding-xxl);
    padding-inline: max(var(--spacing-component-padding-x-xs), calc((100% - var(--program-related-width)) / 2));
    min-width: 0;
}
.program-page__related-media-title { margin: 0; text-transform: uppercase; }
.program-page__related-media-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--program-related-gap);
    min-width: 0;
}
.program-page__related-card {
    min-width: 0;
    overflow: hidden;
    border-radius: var(--radius-4xl);
    background: var(--background-pr);
}
.program-page__related-card-link {
    display: grid;
    gap: var(--spacing-component-gap-lg);
    padding: var(--spacing-component-padding-y-min) var(--spacing-component-padding-x-min) calc(var(--spacing-component-padding-y-min) + var(--spacing-component-padding-y-xl));
    color: inherit;
    text-decoration: none;
}
.program-page__related-card-media {
    display: block;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--radius-3xl);
}
.program-page__related-card-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.program-page__related-card-title {
    min-height: calc(2 * var(--typography-title-title-2-line-height));
    margin: 0;
    padding-inline: var(--spacing-component-padding-x-md);
    text-transform: uppercase;
    overflow-wrap: anywhere;
}
.program-page__related-card-more { justify-self: start; margin-inline: var(--spacing-component-padding-x-md); }
.program-page__related-card-title,
.program-page__related-card-more { font-weight: 600; font-variation-settings: "wdth" 100, "GRAD" 0; }
.program-page__related-card-link:is(:hover, :focus-visible) .program-page__related-card-more { color: var(--text-component-action-1-pr-hover); }
.program-page__related-card-link:active .program-page__related-card-more { color: var(--text-component-action-1-pr-pressed); }
/* Related cards have their own vertical section spacing. */
.program-page__related-media { margin-top: calc(-1 * var(--program-cover-padding)); }
@media (min-width: 768px) {
    .program-page {
        --program-cover-padding: var(--spacing-content-padding-md);
        --program-panel-padding: var(--spacing-content-padding-lg);
        --program-block-gap: var(--spacing-content-padding-lg);
    }
    .program-page__header-service { gap: var(--spacing-content-gap-grid-2); }
    .program-page__header-service-main { gap: var(--spacing-content-padding-lg); }
    .program-page__header-service--with-aside .program-page__header-service-main { padding-bottom: 0; border: 0; }
    .program-page__header-service-aside {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        padding-top: var(--spacing-content-gap-grid-2);
        border-top: var(--stroke-width-s) solid var(--stroke-sec);
    }
    .program-page__meta + .program-page__header-actions {
        padding-top: 0;
        padding-left: var(--spacing-component-padding-x-xxl);
        border-top: 0;
        border-left: var(--stroke-width-s) solid var(--stroke-sec);
    }
    .program-page__panel { gap: var(--spacing-content-gap-grid-1); }
    .program-page__section { grid-template-columns: 220px minmax(0, 1fr); gap: var(--spacing-content-gap-xxxl); }
    .program-page__related-media-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .program-page__related-media { --program-related-columns: 2; }
    .program-page__related-card:nth-child(n + 3) { display: none; }
}
@media (min-width: 1024px) {
    .program-page {
        --program-cover-padding: var(--spacing-content-padding-xxl);
        --program-panel-padding: var(--spacing-content-padding-xxl);
        --program-block-gap: var(--spacing-content-gap-xl);
    }
    .program-page__header-service--with-aside,
    .program-page__panel {
        grid-template-columns: var(--size-layout-block-article-content-width) minmax(0, 1fr);
        gap: var(--spacing-content-gap-grid-1);
        padding-inline: max(var(--spacing-content-gap-grid-1), calc((100% - var(--size-layout-grid-4-width)) / 2));
    }
    .program-page__header-service-main {
        grid-template-rows: auto 1fr auto;
        min-height: 216px;
        gap: var(--spacing-content-gap-xl);
    }
    .program-page__header-service-aside {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-component-gap-md);
        padding-top: 0;
        padding-left: var(--spacing-content-gap-md);
        border-top: 0;
        border-left: var(--stroke-width-s) solid var(--stroke-sec);
    }
    .program-page__meta { display: flex; flex-wrap: wrap; gap: var(--spacing-component-gap-md); }
    .program-page__meta-item + .program-page__meta-item { padding-left: var(--spacing-component-gap-md); border-left: var(--stroke-width-s) solid var(--stroke-sec); }
    .program-page__header-actions { flex: 1; justify-content: flex-end; width: 100%; }
    .program-page__meta + .program-page__header-actions { padding: 0; border: 0; }
    .program-page .share {
        align-self: stretch;
        min-height: 0;
        padding-top: 0;
        padding-left: var(--spacing-content-gap-md);
        border-top: 0;
        border-left: var(--stroke-width-s) solid var(--stroke-pr);
        gap: var(--spacing-component-gap-xl);
    }
    .program-page .share::after { content: ""; width: 100%; height: 1px; background: var(--stroke-pr); }
}
@media (min-width: 1200px) {
    .program-page__related-media { --program-related-columns: 3; --program-related-gap: var(--spacing-component-gap-md); }
    .program-page__related-media-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .program-page__related-card:nth-child(n + 3) { display: block; }
}
@media (min-width: 1536px) {
    .program-page__related-media { --program-related-gap: var(--spacing-component-gap-lg); }
}

/* End */


/* Start:/local/frontend/styles/pages/detail-page.css?179145460617934*/
.detail-page {
    min-height: 100%;
    padding-top: calc(var(--header-height) + var(--spacing-content-padding-xl));
    padding-bottom: var(--spacing-content-gap-xl);
    color: var(--text-pr);
    background: var(--background-light-grey-200);
    overflow-x: clip;
}

.detail-page__container {
    display: grid;
    gap: var(--spacing-content-gap-xl);
    /* padding: 0 var(--spacing-component-padding-x-xl) ; */
}

.detail-page__header-service,
.detail-page__header-article {
    display: grid;
    gap: var(--spacing-content-gap-md);
     padding: 0 var(--spacing-content-gap-grid-1)
}

.detail-page__header-service-main {
    display: grid;
    gap: var(--spacing-content-gap-grid-2);
    align-content: start;
}

.detail-page__header-service-aside {
    display: grid;
    gap: var(--spacing-content-gap-md);
    justify-items: start;
}

.detail-page__meta {
    display: grid;
    gap: var(--spacing-content-gap-md);
    margin: 0;
    padding: var(--spacing-content-gap-md) 0;
    border-top: var(--stroke-width-s) solid var(--stroke-sec);
    border-bottom: var(--stroke-width-s) solid var(--stroke-sec);
}

.detail-page__meta-item {
    display: grid;
    gap: var(--spacing-component-gap-xs);
}

.detail-page__meta-label,
.detail-page__meta-value {
    margin: 0;
}



.detail-page__meta-value {
    text-transform: uppercase;
}

.detail-page__header-note {
    margin: 0;
    max-width: 28em;
    color: var(--text-sec);
}

.detail-page__header-note-link {
    color: var(--text-acc);
}

.detail-page__header-action {
    width: fit-content;
    max-width: 100%;
    padding: var(--spacing-component-padding-y-xl) var(--spacing-component-padding-x-xxl);
    font-family: var(--typography-component-button-btn-2-font-family), sans-serif;
    font-size: var(--typography-component-button-btn-2-font-size);
    line-height: var(--typography-component-button-btn-2-line-height);
    letter-spacing: var(--typography-component-button-btn-2-letter-spacing);
}

.detail-page__back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-content-gap-xs);
}

.detail-page__back-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-4xl);
    color: var(--foregroung-white);
    background: var(--background-acc);
}

.detail-page__back-icon svg {
    transform: rotate(180deg);
}

.detail-page__back--article a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-pr);
    text-decoration: none;
}

.detail-page__back--article a::before {
    content: "";
    width: 18px;
    height: 18px;
    border-radius: var(--radius-full);
    background:
        linear-gradient(135deg, transparent 43%, #FFFFFF 43% 57%, transparent 57%) center / 8px 8px no-repeat,
        var(--background-acc);
}

.detail-page__title,
.detail-page__title-article,
.detail-page__category,
.detail-page__category-article {
    margin: 0;
}


.detail-page__panel {
    display: grid;
    gap: var(--spacing-content-gap-md);
    padding: var(--spacing-content-padding-xl) var(--spacing-content-gap-grid-1);
    border-radius: var(--radius-3xl);
    background: var(--background-pr);
}

.detail-page__content {
    display: grid;
    gap: var(--spacing-content-gap-md);
    min-width: 0;
}

.detail-page__hero {
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.detail-page__hero-image,
.detail-page__gallery-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.detail-page__video {
    display: grid;
    justify-items: center;
    gap: var(--spacing-content-gap-sm);
    padding-top: var(--spacing-content-gap-md);
}

.detail-page__video-frame {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 280px;
    aspect-ratio: 9 / 16;
    border-radius: var(--radius-3xl);
    background: var(--background-sec);
    touch-action: pan-y;
}

.detail-page__video-media {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    pointer-events: none;
}

.detail-page__video-frame.is-playing .detail-page__video-media {
    pointer-events: auto;
}

.detail-page__video-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    align-content: center;
    gap: var(--spacing-content-gap-sm);
    padding: var(--spacing-content-gap-md);
    color: var(--foregroung-white);
    background: rgba(53, 55, 53, 0.28);
    pointer-events: none;
}

.detail-page__video-overlay[hidden] {
    display: none;
}

.detail-page__video-heading {
    max-width: 12em;
    text-align: center;
    text-transform: uppercase;
    text-wrap: balance;
}

.detail-page__video-play {
    pointer-events: auto;
}

.detail-page__video-play-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    color: var(--text-pr);
    background: var(--foregroung-white);
}

.detail-page__video-play-icon svg {
    width: 22px;
    height: 22px;
    margin-left: 3px;
}

.detail-page__video-caption {
    margin: 0;
    text-align: center;
    color: var(--text-sec);
}

.detail-page__closing {
    display: grid;
    justify-items: center;
    gap: var(--spacing-content-gap-xs);
    padding-top: var(--spacing-content-gap-md);
    border-top: var(--stroke-width-s) solid var(--stroke-sec);
    text-align: center;
}

.detail-page__closing-text,
.detail-page__closing-hint {
    margin: 0;
    max-width: 36em;
}

.detail-page__closing-phone {
    color: inherit;
    text-decoration: none;
}

.detail-page__section {
    display: grid;
    gap: var(--spacing-content-gap-sm);
    border-bottom: var(--stroke-width-s) solid var(--stroke-sec);
    padding-bottom: var(--spacing-content-gap-sm);
}

.detail-page__section:not(:has(~ .detail-page__section)) {
    border-bottom: none;
}

.detail-page__section-title {
    margin: 0;
    color: var(--text-sec);
}

.detail-page__section-body {
    display: grid;
    gap: var(--spacing-content-gap-sm);
}

.detail-page__section-body p {
    margin: 0;
}

.detail-page__section-list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.detail-page__section-item {
    margin: 0;
    padding: var(--spacing-content-gap-md) 0;
    border-top: var(--stroke-width-s) solid var(--stroke-sec);
}

.detail-page__section-item:first-child {
    padding-top: 0;
    border-top: none;
}

.detail-page__schedule {
    display: grid; 
     border-bottom: var(--stroke-width-s) solid var(--stroke-sec);
}

.detail-page__schedule-item {
    display: grid;
    gap: var(--spacing-content-gap-sm);
    padding: var(--spacing-content-gap-md) 0;
    border-top: var(--stroke-width-s) solid var(--stroke-sec);
}

.detail-page__schedule-date,
.detail-page__schedule-label,
.detail-page__ticket-hint {
    color: var(--text-sec);
}

.detail-page__schedule-body {
    display: grid;
    gap: var(--spacing-content-gap-xs);
}

.detail-page__schedule-title {
    margin: 0;
}

.detail-page__tickets {
    display: grid;
    gap: var(--spacing-content-gap-md);
}

.detail-page__ticket {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--spacing-content-gap-md);
    padding-top: var(--spacing-content-gap-sm);
    border-top: var(--stroke-width-s) solid var(--stroke-sec);
}
.detail-page__ticket:first-child {
     border-top: none;
}
.detail-page__ticket-info{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-component-gap-xs);
}

.detail-page__ticket-price {
    align-self: start;
    white-space: nowrap;
}

.detail-page__cta {
    display: grid;
    gap: var(--spacing-content-gap-xl);
    padding: var(--spacing-content-padding-lg) var(--spacing-content-gap-md);
    border-radius: var(--radius-4xl);
    background: var(--background-sec);
}

.detail-page__cta-text {
    display: grid;
    gap: var(--spacing-content-gap-min);
}

.detail-page__cta-title {
    margin: 0;
    text-transform: uppercase;
}

.detail-page__cta-note {
    margin: 0;
    color: var(--text-sec);
}

.detail-page__cta-action {
    width: fit-content;
    max-width: 100%;
}

.detail-page__gallery {
    display: grid;
    gap: var(--spacing-content-gap-md);
    min-width: 0;
    max-width: 100%;
}

.detail-page__related-media {
    display: grid;
    gap: var(--spacing-content-padding-sm);
    min-width: 0;
    max-width: 100%;
    padding: 0 var(--spacing-content-gap-sm);
}

.detail-page__gallery-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-content-gap-sm);
}

.detail-page__gallery-title,
.detail-page__related-media-title {
    margin: 0;
}

.detail-page__gallery-nav {
    display: flex;
    gap: var(--spacing-content-gap-min);
}

.detail-page__gallery-arrow-prev {
    transform: rotate(180deg);
}

.detail-page__gallery-slider {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.detail-page__gallery-slider .swiper-wrapper {
    min-width: 0;
}

.detail-page__gallery-slider .swiper-slide {
    height: auto;
    max-width: 100%;
    box-sizing: border-box;
}

.detail-page__related-media-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-content-gap-md);
    min-width: 0;
}

.detail-page__related-card {
    min-width: 0;
    overflow: hidden;
    border-radius: var(--radius-4xl);
    background: var(--background-pr);
}

.detail-page__related-card-link {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: var(--spacing-content-gap-grid-1);
    height: 100%;
    min-width: 0;
    padding: var(--spacing-component-padding-y-min) var(--spacing-component-padding-x-min) var(--spacing-component-padding-y-xl) var(--spacing-component-padding-x-min);
    color: inherit;
    text-decoration: none;
}

.detail-page__related-card-media {
    display: block;
    overflow: hidden;
    min-width: 0;
    border-radius: var(--radius-4xl);
}

.detail-page__related-card-media img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.detail-page__related-card-title {
    margin: 0;
    padding: 0 var(--spacing-content-gap-sm);
    text-transform: uppercase;
    overflow-wrap: break-word;
}

.detail-page__related-card-more {
    justify-self: start;
    margin: 0 var(--spacing-content-gap-sm);
}

@media (min-width: 768px) {
    .detail-page {
        padding-top: calc(var(--header-height) + var(--spacing-content-padding-md));
    }

    .detail-page__container {
        gap: var(--spacing-content-gap-lg);
    }

    .detail-page__header-service-main {
        gap: var(--spacing-content-gap-grid-1);
    }

    .detail-page__panel {
        padding: var(--spacing-content-padding-lg) var(--spacing-content-gap-grid-1);
        gap: var(--spacing-content-gap-xl);
    }

    .detail-page__content {
        gap: var(--spacing-content-gap-xl);
    }

    .detail-page__section {
        display: flex;
        align-items: flex-start;
        gap: 60px;
        padding-bottom: var(--spacing-content-gap-xl);
    }

    .detail-page__section-title {
        flex: 0 0 auto;
        width: 220px;
    }

    .detail-page__section-body,
    .detail-page__section-list {
        flex: 1 1 auto;
        min-width: 0;
    }

    .detail-page__schedule-item {
        grid-template-columns: 150px minmax(0, 1fr);
        gap: var(--spacing-content-gap-xl);
        padding: var(--spacing-content-gap-lg) 0;
    }

    .detail-page__cta {
        padding: var(--spacing-component-padding-y-xxl) var(--spacing-component-padding-x-xxl);
    }

    .detail-page__related-media-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--spacing-content-gap-sm);
    }
}

@media (min-width: 1024px) {
    .detail-page {
        padding-top: calc(var(--header-height) + var(--spacing-content-padding-xxl));
    }

    .detail-page__container {
        gap: var(--spacing-content-padding-xxl);
    }

    .detail-page__header-service,
    .detail-page__header-article {
        gap: var(--spacing-content-padding-xxl);
    }

    .detail-page__header-service--with-aside {
        grid-template-columns: minmax(0, 1fr) minmax(240px, 348px);
        align-items: stretch;
        column-gap: var(--spacing-content-gap-xl);
    }

    .detail-page__header-service--with-aside .detail-page__header-service-main {
        grid-template-rows: auto 1fr auto;
        min-height: 100%;
        gap: var(--spacing-content-padding-xxl);
    }

    .detail-page__header-service-aside {
        justify-items: start;
    }

    .detail-page__meta {
        padding: 0;
        border-top: none;
        border-bottom: none;
        gap: var(--spacing-content-gap-md);
    }
    .detail-page__panel{
         padding: var(--spacing-content-padding-xxl) var(--spacing-content-gap-grid-1);
    }
   

    .detail-page__panel--with-share {
        grid-template-columns: var(--size-layout-block-article-content-width) auto;
        justify-content: start;
        align-items: start;
        column-gap: var(--spacing-content-gap-xl);
    }

    .detail-page__panel--with-share .detail-page__content {
        padding-right: var(--spacing-content-gap-xl);
        border-right: var(--stroke-width-s) solid var(--stroke-sec);
        width: var(--size-layout-block-article-content-width);
        max-width: 100%;
        min-width: 0;
    }
}

@media (min-width: 1920px) {
    .detail-page__panel{
         padding: var(--spacing-content-padding-xxl) var(--spacing-content-padding-grid-4);
    }

    .detail-page__related-media {
        padding: 0 var(--spacing-content-padding-grid-4);
    }
}

/*
 * Инлайн-галерея (экскурсии / услуги): слайдер на всю ширину контента,
 * стрелки поверх кадра слева снизу. Одна картинка рендерится как .detail-page__hero.
 */
.detail-page__gallery--inline {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.detail-page__gallery--inline .detail-page__gallery-nav {
    position: absolute;
    bottom: var(--spacing-content-gap-sm);
    left: var(--spacing-content-gap-sm);
    z-index: 2;
}

/*
 * «Другие экскурсии»: две карточки шириной в колонку обычной трёхколоночной сетки,
 * блок вместе с заголовком — по центру.
 */
@media (min-width: 768px) {
    .detail-page__related-media--pair {
        grid-template-columns: minmax(0, calc((100% - 2 * var(--spacing-content-gap-sm)) * 2 / 3 + var(--spacing-content-gap-sm)));
        justify-content: center;
    }

    .detail-page__related-media--pair .detail-page__related-media-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Ссылки в описании экскурсии — акцентные, с подчёркиванием */
.detail-page__section--description .detail-page__section-body a {
    color: var(--text-acc);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.detail-page__section--description .detail-page__section-body a:hover {
    text-decoration: none;
}

/*
 * Шапка экскурсии: мета (продолжительность, стоимость) в один ряд через вертикальные
 * разделители; на десктопе правая колонка отделена линией, примечание и кнопка прижаты к низу.
 */
.detail-page__header-service--divided .detail-page__meta {
    display: flex;
    flex-wrap: wrap;
    justify-self: stretch;
    gap: var(--spacing-content-gap-sm) 0;
}

.detail-page__header-service--divided .detail-page__meta-item {
    padding: 0 var(--spacing-content-gap-sm);
    border-left: var(--stroke-width-s) solid var(--stroke-sec);
}

.detail-page__header-service--divided .detail-page__meta-item:first-child {
    padding-left: 0;
    border-left: none;
}

@media (min-width: 1024px) {
    .detail-page__header-service--divided .detail-page__back-icon {
        width: 32px;
        height: 32px;
    }

    .detail-page__header-service--divided.detail-page__header-service--with-aside {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 408px);
    }

    .detail-page__header-service--divided .detail-page__header-service-aside {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding-left: var(--spacing-content-gap-md);
        border-left: var(--stroke-width-s) solid var(--stroke-sec);
    }

    .detail-page__header-service--divided .detail-page__meta {
        gap: 0;
        margin-bottom: auto;
    }
}

@media (min-width: 1920px) {
    .detail-page__header-service--divided {
        padding: 0 var(--spacing-content-padding-grid-4);
    }
}

/*
 * Тексты под телефоном и e-mail в подвале экскурсии (CONTACT_TEXT, CONTACT_NOTE):
 * основной цвет со ссылками-акцентами и серое примечание.
 */
.detail-page__closing-extra {
    display: grid;
    justify-items: center;
    gap: var(--spacing-content-gap-xs);
    margin-top: var(--spacing-content-gap-lg);
}

.detail-page__closing-extra-text,
.detail-page__closing-extra-note {
    margin: 0;
}

.detail-page__closing-extra-text {
    color: var(--text-pr);
}

.detail-page__closing-extra-note {
    color: var(--text-sec);
}

.detail-page__closing-extra a {
    color: var(--text-acc);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.detail-page__closing-extra a:hover {
    text-decoration: none;
}

/* End */


/* Start:/local/frontend/styles/pages/service-detail.css?179239641024946*/
/* Independent service detail layout; shared typography and design tokens remain reusable. */

.service-detail {
    min-height: 100%;
    color: var(--text-pr);
    background: var(--background-light-grey-200);
    --service-detail-block-gap: var(--spacing-content-padding-xl);
    --service-detail-cover-padding: var(--spacing-content-padding-xl);
    --service-detail-panel-padding: var(--spacing-content-padding-xl);
    --service-detail-label-width: 220px;
    --service-detail-video-width: 540px;
    padding-top: calc(var(--header-height) + var(--service-detail-cover-padding));
    padding-bottom: var(--spacing-content-padding-xxl);
    overflow-x: clip;
}

.service-detail .service-detail__container {
    display: grid;
    gap: var(--service-detail-cover-padding);
}

.service-detail .service-detail__header-service {
    display: grid;
    padding: 0 var(--spacing-content-gap-grid-1);
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-content-gap-grid-1);
    padding-inline: var(--spacing-content-gap-grid-1);
}

.service-detail .service-detail__header-service-main {
    display: grid;
    min-width: 0;
    gap: var(--spacing-content-padding-md);
    align-content: start;
}

.service-detail .service-detail__header-service-aside {
    display: grid;
    min-width: 0;
    gap: var(--spacing-component-padding-x-xxl);
    align-content: start;
    justify-items: stretch;
}

.service-detail .service-detail__meta {
    display: grid;
    margin: 0;
    border-top: var(--stroke-width-s) solid var(--stroke-sec);
    border-bottom: var(--stroke-width-s) solid var(--stroke-sec);
    min-width: 0;
    gap: var(--spacing-component-gap-xl);
    padding: 0;
    border: 0;
}

.service-detail .service-detail__meta-item {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: var(--spacing-component-gap-xs);
    overflow-wrap: anywhere;
}

.service-detail .service-detail__meta-label {
    margin: 0;
    font-weight: 600;
    font-variation-settings: "wdth" 100, "GRAD" 0;
}

.service-detail .service-detail__meta-value {
    margin: 0;
    text-transform: uppercase;
    font-weight: 600;
    font-variation-settings: "wdth" 100, "GRAD" 0;
}

.service-detail .service-detail__header-note {
    margin: 0;
    color: var(--text-sec);
    --typography-body-body-2-font-size: 16px;
    --typography-body-body-2-line-height: 22px;
    max-width: none;
    width: 100%;
    font-variation-settings: "wdth" 100, "GRAD" 0;
    overflow-wrap: anywhere;
}

.service-detail .service-detail__header-action {
    width: fit-content;
    max-width: 100%;
    font-family: var(--typography-component-button-btn-2-font-family), sans-serif;
    letter-spacing: var(--typography-component-button-btn-2-letter-spacing);
    font-weight: 600;
    --size-component-btn-l-height: 56px;
    --spacing-component-padding-x-xl: 20px;
    --radius-lg: 16px;
    min-height: var(--size-component-btn-l-height);
    height: auto;
    padding: var(--spacing-component-padding-y-xl) var(--spacing-component-padding-x-xl);
    font-size: var(--typography-component-button-btn-3-font-size);
    line-height: var(--typography-component-button-btn-3-line-height);
    font-variation-settings: "wdth" 100, "GRAD" 0;
    white-space: normal;
    text-align: center;
    overflow-wrap: anywhere;
}

.service-detail .service-detail__back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-component-gap-sm);
    font-weight: 600;
    font-variation-settings: "wdth" 100, "GRAD" 0;
}

.service-detail .service-detail__back-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-4xl);
    color: var(--foregroung-white);
    background: var(--background-acc);
    flex-shrink: 0;
    width: calc(16px + 2 * var(--spacing-component-gap-xs));
    height: calc(16px + 2 * var(--spacing-component-gap-xs));
}

.service-detail .service-detail__back-icon svg {
    transform: none;
}

.service-detail .service-detail__title {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.service-detail .service-detail__category {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: 400;
    font-variation-settings: "wdth" 100, "GRAD" 0;
}

.service-detail .service-detail__panel {
    display: grid;
    background: var(--background-pr);
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-content-gap-lg);
    padding: var(--service-detail-panel-padding) var(--spacing-content-gap-grid-1);
    border-radius: var(--radius-5xl);
}

.service-detail .service-detail__content {
    display: grid;
    gap: var(--spacing-content-gap-md);
    min-width: 0;
}

.service-detail .service-detail__hero {
    overflow: hidden;
    width: 100%;
    min-width: 0;
    aspect-ratio: 1048 / 696;
    border-radius: var(--radius-4xl);
}

.service-detail .service-detail__hero-image,
.service-detail .service-detail__gallery-image {
    display: block;
    width: 100%;
    max-width: 100%;
    object-fit: cover;
    height: 100%;
    aspect-ratio: 1048 / 696;
}

.service-detail .service-detail__video {
    display: grid;
    justify-items: center;
    gap: var(--spacing-component-gap-xl);
    padding-top: var(--service-detail-block-gap);
    border-top: var(--stroke-width-s) solid var(--stroke-pr);
}

.service-detail .service-detail__video-frame {
    position: relative;
    overflow: hidden;
    background: var(--background-sec);
    touch-action: pan-y;
    width: 100%;
    /* Scale the 540 × 900 design uniformly to fit shorter screens. */
    max-width: min(var(--service-detail-video-width), 42svh);
    aspect-ratio: 540 / 900;
    border-radius: var(--radius-4xl);
}

.service-detail .service-detail__video-media {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-detail .service-detail__video-caption {
    margin: 0;
    text-align: center;
    max-width: 100%;
    color: var(--text-pr);
    font-variation-settings: var(--rf-w50);
    overflow-wrap: anywhere;
}

.service-detail .service-detail__closing {
    display: grid;
    justify-items: center;
    border-top: var(--stroke-width-s) solid var(--stroke-sec);
    text-align: center;
    padding-top: var(--service-detail-block-gap);
    border-color: var(--stroke-pr);
    gap: var(--spacing-content-gap-sm);
}

.service-detail .service-detail__closing-text {
    margin: 0;
    max-width: 100%;
    color: var(--text-pr);
    font-variation-settings: "wdth" 100, "GRAD" 0;
    overflow-wrap: anywhere;
}

.service-detail .service-detail__closing-hint {
    margin: 0;
    max-width: 36em;
    margin-top: var(--spacing-content-gap-lg);
    color: var(--text-sec);
}

.service-detail .service-detail__closing-phone {
    color: inherit;
    text-decoration: none;
}

.service-detail .service-detail__section {
    border-bottom: var(--stroke-width-s) solid var(--stroke-sec);
    padding-bottom: var(--spacing-content-gap-sm);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-component-gap-lg);
    min-width: 0;
    padding: 0;
    border: 0;
}

.service-detail .service-detail__section:not(:has(~ .service-detail__section)) {
    border-bottom: none;
}

.service-detail .service-detail__section-title {
    margin: 0;
    color: var(--text-sec);
    width: auto;
    min-width: 0;
    font-variation-settings: "wdth" 100, "GRAD" 0;
    overflow-wrap: anywhere;
}

.service-detail .service-detail__section-body {
    gap: var(--spacing-content-gap-sm);
    display: flow-root;
    min-width: 0;
    font-variation-settings: "wdth" 100, "GRAD" 0;
    overflow-wrap: anywhere;
}

.service-detail .service-detail__section-body p,
.service-detail .service-detail__related-media-title {
    margin: 0;
}

.service-detail .service-detail__section-list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
    gap: var(--spacing-content-gap-lg);
}

.service-detail .service-detail__section-item {
    margin: 0;
    padding: 0 0 var(--spacing-content-gap-md);
    border-top: 0;
    border-bottom: var(--stroke-width-s) solid var(--stroke-pr);
    font-variation-settings: "wdth" 100, "GRAD" 0;
    overflow-wrap: anywhere;
}

.service-detail .service-detail__section-item:first-child {
    padding-top: 0;
    border-top: none;
}

.service-detail .service-detail__schedule {
    display: grid;
    border-bottom: var(--stroke-width-s) solid var(--stroke-sec);
    gap: var(--service-detail-block-gap);
    border: 0;
}

.service-detail .service-detail__schedule-item {
    display: grid;
    border-top: var(--stroke-width-s) solid var(--stroke-sec);
    min-width: 0;
    gap: var(--spacing-component-gap-lg);
    padding: var(--service-detail-block-gap) 0 0;
    border-color: var(--stroke-pr);
}

.service-detail .service-detail__schedule-date,
.service-detail .service-detail__schedule-label,
.service-detail .service-detail__ticket-hint {
    color: var(--text-sec);
}

.service-detail .service-detail__schedule-body {
    display: grid;
    min-width: 0;
    gap: var(--spacing-component-gap-xs);
}

.service-detail .service-detail__schedule-title {
    margin: 0;
    overflow-wrap: anywhere;
}

.service-detail .service-detail__tickets {
    display: grid;
    gap: var(--spacing-content-gap-lg);
}

.service-detail .service-detail__ticket {
    display: grid;
    padding-top: var(--spacing-content-gap-sm);
    border-top: var(--stroke-width-s) solid var(--stroke-sec);
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--spacing-component-gap-xs);
    padding: var(--spacing-content-gap-lg) 0 0;
    border-color: var(--stroke-pr);
}

.service-detail .service-detail__ticket:first-child {
    border-top: none;
    padding-top: 0;
}

.service-detail .service-detail__ticket-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-component-gap-xs);
    min-width: 0;
    overflow-wrap: anywhere;
}

.service-detail .service-detail__ticket-price {
    align-self: start;
    text-transform: uppercase;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

.service-detail .service-detail__cta {
    display: grid;
    gap: var(--spacing-content-gap-xl);
    padding: var(--spacing-content-padding-lg) var(--spacing-content-gap-md);
    border-radius: var(--radius-4xl);
    background: var(--background-sec);
    min-width: 0;
    overflow-wrap: anywhere;
}

.service-detail .service-detail__cta-text {
    display: grid;
    gap: var(--spacing-content-gap-min);
    min-width: 0;
    overflow-wrap: anywhere;
}

.service-detail .service-detail__cta-title {
    margin: 0;
    text-transform: uppercase;
}

.service-detail .service-detail__cta-note {
    margin: 0;
    color: var(--text-sec);
}

.service-detail .service-detail__cta-note a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
}

.service-detail .service-detail__cta-note a:is(:hover, :focus-visible) {
    color: var(--text-pr);
}

.service-detail .service-detail__cta-action {
    max-width: 100%;
    width: fit-content;
    white-space: normal;
    text-align: center;
}

.service-detail .service-detail__gallery {
    display: grid;
    gap: var(--spacing-content-gap-md);
    min-width: 0;
    max-width: 100%;
}

.service-detail .service-detail__related-media {
    display: grid;
    min-width: 0;
    max-width: 100%;
    padding: 0 var(--spacing-content-gap-sm);
    gap: var(--spacing-content-padding-sm);
    padding-inline: max(var(--spacing-content-padding-grid-1), calc((100% - var(--size-layout-grid-3-width)) / 2));
}

.service-detail .service-detail__gallery-nav {
    display: flex;
    gap: var(--spacing-content-gap-min);
}

.service-detail .service-detail__gallery-slider {
    max-width: 100%;
    overflow: hidden;
    width: 100%;
    min-width: 0;
    aspect-ratio: 1048 / 696;
    border-radius: var(--radius-4xl);
}

.service-detail .service-detail__gallery-slider .swiper-wrapper {
    min-width: 0;
    height: 100%;
}

.service-detail .service-detail__gallery-slider .swiper-slide {
    max-width: 100%;
    box-sizing: border-box;
    height: 100%;
}

.service-detail .service-detail__related-media-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    align-items: start;
    gap: var(--spacing-component-gap-lg);
}

.service-detail .service-detail__related-card {
    min-width: 0;
    overflow: hidden;
    border-radius: var(--radius-4xl);
    background: var(--background-pr);
}

.service-detail .service-detail__related-card-link {
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: 100%;
    min-width: 0;
    color: inherit;
    text-decoration: none;
    gap: var(--spacing-component-gap-lg);
    padding: var(--spacing-component-padding-y-min) var(--spacing-component-padding-x-min) var(--spacing-component-padding-y-xl);
}

.service-detail .service-detail__related-card-media {
    display: block;
    overflow: hidden;
    min-width: 0;
    border-radius: var(--radius-3xl);
}

.service-detail .service-detail__related-card-media img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

.service-detail .service-detail__related-card-title {
    margin: 0;
    padding: 0 var(--spacing-content-gap-sm);
    text-transform: uppercase;
    overflow-wrap: break-word;
    font-weight: 600;
    font-variation-settings: "wdth" 100, "GRAD" 0;
    min-height: calc(2 * var(--typography-title-title-2-line-height));
    padding-inline: var(--spacing-component-padding-x-md);
}

.service-detail .service-detail__related-card-link:is(:hover, :focus-visible) .service-detail__related-card-more {
    color: var(--text-component-action-1-pr-hover);
}

.service-detail .service-detail__related-card-link:active .service-detail__related-card-more {
    color: var(--text-component-action-1-pr-pressed);
}

.service-detail .service-detail__related-card-more {
    justify-self: start;
    margin: 0 var(--spacing-content-gap-sm);
    font-weight: 600;
    font-variation-settings: "wdth" 100, "GRAD" 0;
    margin-inline: var(--spacing-component-padding-x-md);
}

.service-detail .service-detail__gallery--inline {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.service-detail .service-detail__gallery--inline .service-detail__gallery-nav {
    position: absolute;
    z-index: 2;
    left: var(--spacing-component-padding-x-add);
    bottom: var(--spacing-component-padding-y-add);
}

.service-detail .service-detail__header-service--with-aside .service-detail__header-service-main {
    padding-bottom: var(--spacing-content-gap-grid-1);
    border-bottom: var(--stroke-width-s) solid var(--stroke-sec);
}

.service-detail__header-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-component-gap-xl);
    min-width: 0;
    width: 100%;
}

.service-detail .service-detail__meta + .service-detail__header-actions {
    padding-top: var(--spacing-component-padding-x-xxl);
    border-top: var(--stroke-width-s) solid var(--stroke-sec);
}

.service-detail .service-detail__header-note a,
.service-detail .service-detail__section-body a,
.service-detail .service-detail__closing a:not(.service-detail__closing-phone) {
    color: var(--text-acc);
    text-decoration: underline;
}

.service-detail .service-detail__panel--with-share .service-detail__content {
    width: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    gap: var(--service-detail-block-gap);
}

.service-detail .service-detail__content--description-only {
    --service-detail-label-width: 132px;
}

.service-detail__gallery-icon {
    width: var(--size-icons-l-width);
    height: var(--size-icons-l-height);
}

.service-detail .service-detail__gallery-nav .icon-button {
    width: 56px;
    height: var(--size-component-btn-l-height);
}

.service-detail .service-detail__gallery-nav .icon-button:is(:hover, :focus-visible):not(:disabled) {
    color: var(--icon-inver);
    background-color: var(--background-component-action-1-acc-def);
}

.service-detail .service-detail__gallery-nav .icon-button:is(:hover, :focus-visible):not(:disabled) img {
    filter: brightness(0) invert(1);
}

.service-detail .service-detail__section + .service-detail__section {
    padding-top: var(--service-detail-block-gap);
    border-top: var(--stroke-width-s) solid var(--stroke-pr);
}

.service-detail .service-detail__section-body .body-1-acc {
    font-variation-settings: inherit;
}

.service-detail .service-detail__section-body p:not(:last-child) {
    margin-bottom: var(--typography-body-body-1-paragraph-spacing);
}

.service-detail .service-detail__section-body :is(img, video, iframe, table) {
    max-width: 100%;
}

.service-detail .service-detail__section-body img {
    height: auto;
}

.service-detail .service-detail__section-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.service-detail .service-detail__schedule-title + .service-detail__tickets,
.service-detail .service-detail__schedule-label + .service-detail__tickets {
    margin-top: var(--spacing-component-gap-xl);
}

.service-detail .service-detail__ticket-name {
    text-transform: uppercase;
}

.service-detail .service-detail__closing-hint:first-child {
    margin-top: 0;
}

.service-detail .share {
    min-width: 0;
    padding-top: var(--spacing-component-gap-xl);
    padding-bottom: 0;
    border: 0;
    border-top: var(--stroke-width-s) solid var(--stroke-pr);
    min-height: calc(48px + var(--spacing-component-gap-xl) + var(--stroke-width-s));
}

.service-detail .share-title {
    font-weight: 600;
    font-variation-settings: "wdth" 100, "GRAD" 0;
}

.service-detail .share-list {
    gap: var(--spacing-component-padding-x-min);
}

.service-detail .share-button {
    flex-shrink: 0;
    width: calc(16px + 2 * var(--spacing-component-padding-btn-button-share));
    height: calc(16px + 2 * var(--spacing-component-padding-btn-button-share));
}

@media (min-width: 768px) {
    .service-detail {
        --service-detail-block-gap: var(--spacing-content-padding-lg);
        --service-detail-cover-padding: var(--spacing-content-padding-md);
        --service-detail-panel-padding: var(--spacing-content-padding-lg);
    }

    .service-detail .service-detail__header-service {
        gap: var(--spacing-content-gap-grid-2);
    }

    .service-detail .service-detail__header-service-main {
        gap: var(--spacing-content-padding-lg);
    }

    .service-detail .service-detail__header-service:not(.service-detail__header-service--with-aside) .service-detail__header-service-main {
        min-height: 216px;
    }

    .service-detail .service-detail__header-service--with-aside .service-detail__header-service-main {
        padding-bottom: 0;
        border: 0;
    }

    .service-detail .service-detail__header-service-aside:has(.service-detail__meta):has(.service-detail__header-actions) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .service-detail .service-detail__header-service-aside {
        padding-top: var(--spacing-content-gap-grid-2);
        border-top: var(--stroke-width-s) solid var(--stroke-sec);
    }

    .service-detail .service-detail__meta + .service-detail__header-actions {
        padding-top: 0;
        padding-left: var(--spacing-component-padding-x-xxl);
        border-top: 0;
        border-left: var(--stroke-width-s) solid var(--stroke-sec);
    }

    .service-detail .service-detail__panel {
        gap: var(--spacing-content-gap-grid-1);
    }

    .service-detail .service-detail__cta {
        padding: var(--spacing-component-padding-y-xxl) var(--spacing-component-padding-x-xxl);
    }

    .service-detail .service-detail__section,
    .service-detail .service-detail__schedule-item {
        grid-template-columns: var(--service-detail-label-width) minmax(0, 1fr);
        gap: var(--spacing-content-gap-xxxl);
    }

    .service-detail .service-detail__section--unlabelled,
    .service-detail .service-detail__schedule-item--unlabelled {
        grid-template-columns: minmax(0, 1fr);
    }

    .service-detail .service-detail__related-media-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-detail .service-detail__related-card:nth-child(n + 3) {
        display: none;
    }
}

@media (min-width: 1024px) {
    .service-detail {
        --service-detail-block-gap: var(--spacing-content-gap-xl);
        --service-detail-cover-padding: var(--spacing-content-padding-xxl);
        --service-detail-panel-padding: var(--spacing-content-padding-xxl);
    }

    .service-detail .service-detail__header-service,
    .service-detail .service-detail__panel {
        column-gap: var(--spacing-content-gap-grid-1);
        padding-inline: max(var(--spacing-content-gap-grid-1), calc((100% - var(--size-layout-grid-4-width)) / 2));
    }

    .service-detail .service-detail__header-service--with-aside,
    .service-detail .service-detail__panel--with-share {
        grid-template-columns: var(--size-layout-block-article-content-width) minmax(0, 1fr);
        align-items: stretch;
    }

    .service-detail .service-detail__header-service-main,
    .service-detail .service-detail__header-service--with-aside .service-detail__header-service-main {
        min-height: 0;
        grid-template-rows: auto 1fr auto;
        gap: var(--spacing-content-gap-xl);
    }

    .service-detail .service-detail__header-service--with-aside .service-detail__header-service-main {
        min-height: 216px;
    }

    .service-detail .service-detail__header-service:not(.service-detail__header-service--with-aside) .service-detail__header-service-main {
        min-height: 0;
    }

    .service-detail .service-detail__header-service-aside,
    .service-detail .service-detail__header-service-aside:has(.service-detail__meta):has(.service-detail__header-actions) {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-component-gap-md);
        padding-top: 0;
        padding-left: var(--spacing-content-gap-md);
        border-top: 0;
        border-left: var(--stroke-width-s) solid var(--stroke-sec);
    }

    .service-detail .service-detail__meta {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-component-gap-xl) 0;
        max-width: 100%;
        flex-shrink: 0;
    }

    .service-detail .service-detail__meta-item + .service-detail__meta-item {
        margin-left: var(--spacing-component-gap-md);
        padding-left: var(--spacing-component-gap-md);
        border-left: var(--stroke-width-s) solid var(--stroke-sec);
    }

    .service-detail .service-detail__header-actions {
        flex: 1;
        justify-content: flex-end;
    }

    .service-detail .service-detail__meta + .service-detail__header-actions {
        padding: 0;
        border: 0;
    }

    .service-detail .share {
        align-self: stretch;
        gap: var(--spacing-component-gap-xl);
        padding-left: var(--spacing-content-gap-md);
        padding-top: 0;
        min-height: 0;
        border-top: 0;
        border-left: var(--stroke-width-s) solid var(--stroke-pr);
    }

    .service-detail .share::after {
        content: "";
        align-self: stretch;
        height: var(--stroke-width-s);
        background: var(--stroke-pr);
    }
}

/* Two-card rows follow the news-card grid at tablet widths. */
@media (min-width: 768px) and (max-width: 1199px) {
    .service-detail .service-detail__related-media-list {
        column-gap: var(--spacing-component-gap-md);
    }
}

@media (min-width: 1024px) and (max-width: 1199px) {
    .service-detail .service-detail__header-service-aside,
    .service-detail .service-detail__header-service-aside:has(.service-detail__meta):has(.service-detail__header-actions) {
        padding-left: var(--spacing-content-gap-grid-1);
    }

    .service-detail .service-detail__related-media-list {
        column-gap: var(--spacing-component-gap-sm);
    }
}

@media (min-width: 1200px) {
    .service-detail .service-detail__related-media-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .service-detail .service-detail__related-card:nth-child(n + 3) {
        display: block;
    }
}

@media (min-width: 1024px) and (max-width: 1535px) {
    .service-detail .service-detail__meta {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, max-content));
        column-gap: var(--spacing-component-gap-md);
    }

    .service-detail .service-detail__meta-item + .service-detail__meta-item {
        margin-left: 0;
    }

    .service-detail .service-detail__meta-item:nth-child(3) {
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
    }
}

/* End */


/* Start:/local/frontend/styles/pages/legal.css?17881830901520*/
.legal-block {
    padding-top: var(--header-height);
}

.legal-block ul li + li,
.legal-block ol li + li {
    margin-top: 11px;
}

.legal-block h3,
.legal-block h4 {
    text-transform: uppercase;
}

.legal-block a {
    text-decoration: underline;
    color: var(--text-component-action-1-acc-def);
}
.legal-block a:hover {
    color: var(--text-component-action-1-acc-hover);
}
.legal-block a:active {
    color: var(--text-component-action-1-acc-pres);
}

.legal-block--header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-content-gap-md);
    padding: var(--spacing-content-padding-add-1) var(--spacing-content-padding-grid-4);
    text-align: center;
}

.legal-block--header h1 {
    width: 100%;
}

.legal-block--header-subtitle {
    text-transform: uppercase;
}

.legal-block--body {
    padding: var(--spacing-content-padding-lg) var(--spacing-content-padding-grid-4) var(--spacing-content-padding-xxxl);
}

.legal-block--content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-content-gap-xl);
    width: 100%;
}

.legal-block--content-block {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-content-gap-md);
}

.legal-block--description {
    color: var(--text-sec);
}

@media (min-width: 768px) {
    .legal-block--header h1 {
        max-width: var(--size-component-doc-title-width);
        margin: auto;
    }

    .legal-block--content {
        max-width: var(--size-component-doc-text-area-width);
        margin: auto;
    }
}

/* End */


/* Start:/local/frontend/styles/pages/map.css?17882737663749*/
.map-page {
    position: relative;
    width: 100%;
    height: calc(100vh - var(--header-topbar-height));
    height: calc(100dvh - var(--header-topbar-height));
    background: var(--background-inver);
}

.map-page__frames {
    width: 100%;
    height: 100%;
    min-height: 100%;
    padding-top: var(--header-height, 0px);
}

.map-page__frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.map-page__frame[hidden] {
    display: none;
}

/* Панель табов поверх iframe */
.map-page__tabs {
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: var(--spacing-component-padding-y-add);
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: var(--spacing-component-gap-min);
    padding: var(--spacing-component-padding-y-min) var(--spacing-component-padding-x-min);
    border-radius: var(--radius-xl);
    background-color: var(--background-pr);
}

.map-page__tab {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-component-gap-xs);
    padding: var(--spacing-component-padding-y-sm) var(--spacing-component-padding-x-xl) var(--spacing-component-padding-y-sm) var(--spacing-component-padding-x-sm);
    border-radius: var(--radius-lg);
    color: var(--text-pr);
    text-decoration: none;
    white-space: nowrap;
    font-family: var(--typography-component-tab-tab-3-font-family), sans-serif;
    font-size: var(--typography-component-tab-tab-3-font-size);
    line-height: var(--typography-component-tab-tab-3-line-height);
    letter-spacing: var(--typography-component-tab-tab-3-letter-spacing);
    font-weight: 300;
    font-variation-settings: var(--rf-w30-g60);
    /* Фон активного таба рисует .map-page__tabs-thumb, поэтому сам таб прозрачный */
    background-color: transparent;
    position: relative;
    z-index: 1;
    transition: color var(--page-fade-duration-fast) var(--default-timing-standard);
}

.map-page__tab:not(.is-active):hover {
    background-color: var(--background-component-action-1-pr-hover);
}

.map-page__tab:not(.is-active):active {
    background-color: var(--background-component-action-1-pr-pres);
}

.map-page__tab.is-active {
    color: var(--text-inver);
}

.map-page__tabs:not(.is-ready) .map-page__tab.is-active {
    background-color: var(--background-component-action-1-pr-activ);
}

/* Подложка, переезжающая под активный таб */
.map-page__tabs-thumb {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: var(--thumb-w, 0);
    height: var(--thumb-h, 0);
    border-radius: var(--radius-lg);
    background-color: var(--background-component-action-1-pr-activ);
    transform: translate(var(--thumb-x, 0), var(--thumb-y, 0));
    pointer-events: none;
}

.map-page__tabs.is-ready .map-page__tabs-thumb {
    transition:
        transform var(--page-fade-duration-fast) var(--default-timing-standard),
        width var(--page-fade-duration-fast) var(--default-timing-standard);
}

/* Оба варианта иконки лежат в одной ячейке грида и переключаются кроссфейдом */
.map-page__tab-icons {
    display: grid;
    flex-shrink: 0;
}

.map-page__tab-icon {
    grid-area: 1 / 1;
    transition: opacity var(--page-fade-duration-fast) var(--default-timing-standard);
}

.map-page__tab-icon--filled,
.map-page__tab.is-active .map-page__tab-icon--outline {
    opacity: 0;
}

.map-page__tab.is-active .map-page__tab-icon--filled {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .map-page__tab,
    .map-page__tab-icon,
    .map-page__tabs.is-ready .map-page__tabs-thumb {
        transition: none;
    }
}

/* End */


/* Start:/local/frontend/styles/pages/search.css?179179125223157*/
.search-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: var(--background-ter);
    padding-top: var(--header-height);
}

.search-page-sticky {
    position: sticky;
    top: var(--header-height);
    z-index: 5;
    background-color: var(--background-ter);

    /* Граница есть всегда, но прозрачная: иначе в момент прилипания страница
       дёргалась бы на высоту рамки */
    border-bottom: 1px solid transparent;
    transition: border-bottom-color var(--default-duration) var(--default-timing-standard);
}

.search-page-sticky.is-stuck {
    border-bottom-color: var(--stroke-sec);
}

.search-page-top {
    width: 100%;
    padding: var(--spacing-content-padding-lg) var(--spacing-content-padding-grid-3);
}

.search-page-toolbar {
    padding: 0 var(--spacing-content-padding-grid-4) var(--spacing-content-padding-xs);
}

.search-page-toolbar--content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--size-layout-grid-4-width);
    width: 100%;
    margin: auto;
}

.search-page-toolbar--content-text + .page-toolbar {
    width: auto;
}

.search-page-top--search {
    position: relative;
    width: 100%;
    max-width: var(--size-layout-grid-3-width);
    margin: auto;

    /* Место, которое занимает кнопка в поле: лупа слева и стрелка справа
       устроены одинаково, поэтому отступ у обоих краёв считается одной формулой */
    --search-button-space: calc(var(--size-icons-l-width) + var(--spacing-component-padding-x-xs) * 2 + var(--spacing-component-gap-sm));
    /* Ширину надписи «Очистить» проставляет search.js: она зависит от текста и шрифта */
    --search-clear-width: 0px;
}

.search-page-top--search-wrapper {
    position: relative;
    /* Именно clip, а не hidden: hidden оставляет обёртку прокручиваемой, и браузер
       подкручивал её к спрятанным за краем кнопкам — поле после этого так и
       оставалось сдвинутым. clip выключает прокрутку совсем */
    overflow: clip;
    height: var(--size-component-input-search-height);
    border-radius: var(--radius-lg);

    /* Нижние углы срезаются под раскрытым списком — не рывком, а вместе с ним */
    transition: border-radius var(--default-duration) var(--default-timing-standard);
}

.search-page-top--search input {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    padding: var(--spacing-component-padding-y-xs) var(--spacing-component-padding-x-xs);
    padding-left: calc(var(--spacing-component-padding-x-xs) + var(--search-button-space));
    background-color: var(--background-pr);
    font-family: var(--typography-component-search-font-family), sans-serif;
    font-size: var(--typography-component-search-font-size);
    line-height: var(--typography-component-search-line-height);
    letter-spacing: var(--typography-component-search-letter-spacing);
    font-weight: 500;
    color: var(--text-component-action-1-sec-def);
    caret-color: var(--text-pr);
    transition:
        padding var(--default-duration) var(--default-timing-standard),
        background-color var(--default-duration) var(--default-timing-standard),
        color var(--default-duration) var(--default-timing-standard);
}

/* Нативный крестик Safari/Chrome не нужен — очистка своя */
.search-page-top--search input::-webkit-search-cancel-button,
.search-page-top--search input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

/* Состояния вешаем на обёртку, а не на сам input: по ним реагируют
   и лупа, и кнопки, и разделитель */
.search-page-top--search:has(input:hover) input {
    color: var(--text-component-action-1-sec-hover);
}

.search-page-top--search:has(input:active) input {
    color: var(--text-component-action-1-sec-pres);
}

.search-page-top--search:has(input:focus) input {
    color: var(--text-component-action-1-sec-active);
}

/* Лупа живёт только у пустого поля не в фокусе: при фокусе уезжает влево */
.search-page-top--search:has(input:focus) input,
.search-page-top--search[data-search-filled] input {
    padding-left: var(--spacing-content-padding-grid-1);
}

/* Справа освобождаем место под «Очистить», а когда показана стрелка — и под неё */
.search-page-top--search[data-search-clearable] input {
    padding-right: calc(var(--spacing-component-padding-x-xs) + var(--search-clear-width) + var(--spacing-component-gap-sm));
}

.search-page-top--search[data-search-dirty] input {
    padding-right: calc(var(--spacing-component-padding-x-xs) + var(--search-clear-width) + var(--spacing-component-gap-sm) + var(--search-button-space));
}

/* Список висит в разметке всегда, показывает его js — поэтому и углы поля
   срезаем только под раскрытым списком, а не под скрытым */
.search-page-top--search-wrapper:has(+ .search-page-top--search-hints:not([hidden])) {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;

    box-shadow: 0 2px 4px 0 var(--effects-shadow-default-color)
}

/*
 * Список не выезжает, а раскрывается от нулевой высоты. Высота содержимого
 * заранее неизвестна — её задаёт бэкенд, — поэтому тянем строку грида от 0fr
 * к 1fr: это и есть «до auto», но с анимацией. Само display: none переключается
 * дискретно, allow-discrete отдаёт его в конец закрытия, а @starting-style
 * задаёт состояние, из которого список появляется
 */
.search-page-top--search-hints {
    position: absolute;
    top: 100%;
    z-index: 11;
    display: grid;
    grid-template-rows: 1fr;
    width: 100%;
    background-color: var(--background-pr);
    overflow: hidden;
    opacity: 1;

    border-bottom-right-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
    box-shadow: 0 2px 4px 0 var(--effects-shadow-default-color);

    transition:
        grid-template-rows var(--default-duration) var(--default-timing-standard),
        opacity var(--default-duration) var(--default-timing-standard),
        display var(--default-duration) allow-discrete;
}

@starting-style {
    .search-page-top--search-hints {
        grid-template-rows: 0fr;
        opacity: 0;
    }
}

.search-page-top--search-hints[hidden] {
    display: none;
    grid-template-rows: 0fr;
    opacity: 0;
}

/*
 * Строка грида не сожмётся ниже содержимого, пока ему это не разрешить.
 *
 * Высота нужна ещё и затем, чтобы анимировать смену самих подсказок: раскрытие
 * выше тянет строку грида от 0fr к 1fr, но 1fr — это «по содержимому», и подмена
 * списка на другой по длине шла бы скачком. Конкретные значения на оба конца
 * проставляет search.js: из auto перехода нет, а до какой высоты переносящиеся
 * строки развернутся, заранее не знает и css
 */
.search-page-top--search-hints-list {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    transition: height var(--short-duration) var(--default-timing-standard);
}

.search-page-top--search-hints-hint {
    width: 100%;
    padding: var(--spacing-component-padding-y-sm) var(--spacing-content-padding-grid-1);
    border: none;
    background-color: var(--background-component-action-1-pr-def);
    color: var(--text-ter);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.search-page-top--search-hints-hint:hover {
    background-color: var(--background-component-action-1-pr-hover);
}

.search-page-top--search-hints-hint:active {
    background-color: var(--background-component-action-1-pr-pres);
}

/* Стрелка отправки устроена ровно как лупа, только у другого края поля */
.search-page-top--search-icon,
.search-page-top--search-submit {
    position: absolute;
    top: var(--spacing-component-padding-y-xs);
    padding: var(--spacing-component-padding-y-xs) var(--spacing-component-padding-x-xs);
    border-radius: var(--radius-md);
    transition:
        opacity var(--default-duration) var(--default-timing-standard),
        transform var(--default-duration) var(--default-timing-standard),
        background-color var(--default-duration) var(--default-timing-standard),
        visibility var(--default-duration);
}

.search-page-top--search-icon svg,
.search-page-top--search-submit svg {
    width: var(--size-icons-l-width);
    height: var(--size-icons-l-height);
}

.search-page-top--search-icon {
    left: var(--spacing-component-padding-x-xs);
    background-color: var(--background-sec);
    pointer-events: none;
}

.search-page-top--search-submit {
    right: var(--spacing-component-padding-x-xs);
}

.search-page-top--search:has(input:focus) .search-page-top--search-icon,
.search-page-top--search[data-search-filled] .search-page-top--search-icon {
    opacity: 0;
    transform: translateX(calc(-100% - var(--spacing-component-padding-x-xs)));
}

/* Стрелка выезжает справа, когда введённое отличается от текущего запроса.
   Спрятанная кнопка убирается и из tab-порядка: visibility снимает её с фокуса,
   иначе Tab уводил бы на невидимый элемент */
.search-page-top--search-submit {
    opacity: 0;
    transform: translateX(calc(100% + var(--spacing-component-padding-x-xs)));
    visibility: hidden;
}

.search-page-top--search[data-search-dirty] .search-page-top--search-submit {
    opacity: 1;
    transform: none;
    visibility: visible;
}

/* «Очистить» приходит сверху вниз. По горизонтали она стоит там, где рядом
   помещается стрелка, — тогда при появлении она едет строго вниз, без диагонали */
.search-page-top--search-clear {
    position: absolute;
    top: 50%;
    right: calc(var(--spacing-component-padding-x-xs) + var(--search-button-space));
    transform: translateY(-50%);
    transition:
        opacity var(--default-duration) var(--default-timing-standard),
        transform var(--default-duration) var(--default-timing-standard),
        right var(--default-duration) var(--default-timing-standard),
        color var(--default-duration) var(--default-timing-standard),
        visibility var(--default-duration);
    color: var(--text-component-action-1-sec-def);
}

.search-page-top--search-clear:hover {
    color: var(--text-component-action-1-sec-hover);
}

.search-page-top--search-clear:active {
    color: var(--text-component-action-1-sec-pres);
}

/* Без стрелки кнопка уезжает к самому краю поля */
.search-page-top--search:not([data-search-dirty]) .search-page-top--search-clear {
    right: var(--spacing-component-padding-x-xs);
}

/* Правило ниже предыдущего намеренно: скрытая кнопка возвращается на позицию
   «рядом со стрелкой» — именно там она появится, когда в поле начнут печатать,
   и поэтому поедет строго вниз, а не по диагонали */
.search-page-top--search:not([data-search-clearable]) .search-page-top--search-clear {
    right: calc(var(--spacing-component-padding-x-xs) + var(--search-button-space));
    opacity: 0;
    transform: translateY(-150%);
    visibility: hidden;
}

/* complete: введённое совпадает с запросом страницы — поле теряет подложку
   и получает разделитель снизу. При возврате фокуса снова становится «пилюлей» */
.search-page-top--search-divider {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    transition: opacity var(--default-duration) var(--default-timing-standard);
}

.search-page-top--search[data-search-complete]:not(:has(input:focus)) input {
    background-color: transparent;
}

.search-page-top--search-wrapper:has(+ .search-page-top--search-hints:not([hidden])) .search-page-top--search-divider,
.search-page-top--search[data-search-complete]:not(:has(input:focus)) .search-page-top--search-divider {
    opacity: 1;
}

.search-page-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-content-gap-xs);
    padding: var(--spacing-content-padding-sm) var(--spacing-content-padding-grid-3);

    border-top-left-radius: var(--radius-8xl);
    border-top-right-radius: var(--radius-8xl);
}

.search-page-content--header {
    width: 100%;
    max-width: var(--size-layout-grid-4-width);
    margin: auto;
    padding: var(--spacing-content-padding-md) 0;
}

/* Автоисправление: выдача по исправленному запросу, в поле — то, что набрали */
.search-page-content--notice {
    width: 100%;
    max-width: var(--size-layout-grid-3-width);
    margin: 0 auto;
    padding: var(--spacing-content-padding-md) 0 var(--spacing-content-gap-sm);
    color: var(--text-sec);
}

.search-page-content--body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-content-gap-md);
    width: 100%;
    max-width: var(--size-layout-grid-3-width);
    margin: auto;
}

/* Пагинация по макету прижата к левому краю выдачи, а не стоит по центру */
.search-page-content--body > .page-pagination {
    align-self: flex-start;
}

/*
 * Карточки разделов — разметка и стили их собственных страниц (событий, медиа, экспонатов…),
 * здесь только то, чего у них нет вне родного списка. Сетку программ, услуг и экскурсий на
 * странице задаёт обёртка .cards-list-program — у нас её нет, поэтому сетка своя: картинка
 * приподнята над карточкой, отсюда отступ сверху и увеличенный зазор между рядами
 */
.search-cards {
    width: 100%;
}

.search-cards--program {
    --cards-list-program-image-lift: 50px;

    display: grid;
    grid-template-columns: 1fr;
    column-gap: var(--spacing-content-gap-min-grid);
    row-gap: var(--spacing-content-gap-xxxl-2);
    padding-top: var(--cards-list-program-image-lift);
}

/* Вкладка «Другое»: страницы без картинок — строки с рубрикой, названием и стрелкой */
.search-page-content--body-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-content-gap-min-grid);
    width: 100%;
}

/*
 * Строка по макету (кадр 1920): 1552×120 — поля 32 со всех сторон вокруг кнопки 56, между
 * строками 20. Поля и зазор — токены, которые на 1920 дают ровно эти значения, на узких
 * экранах строка ужимается вместе с ними
 */
.search-page-content--row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-component-gap-lg);
    padding: var(--spacing-component-padding-y-add) var(--spacing-component-padding-x-add);
    background-color: var(--background-sec);
    border-radius: var(--radius-5xl);
    transition: background-color var(--default-duration) ease;
}

.search-page-content--row:hover {
    background-color: var(--background-ter);
}

/* Между рубрикой и названием в макете ~10: xs (8) — ближайший токен, при котором текст не выше
   кнопки и строку по высоте задаёт она, как в макете (120 на 1920) */
.search-page-content--row-texts {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-component-gap-xs);
    min-width: 0;
}

.search-page-content--row-category {
    color: var(--foregroung-grey-400);
}

.search-page-content--row-title {
    color: var(--text-pr);
    overflow-wrap: anywhere;
}

/* Белая кнопка на сером фоне строки: стандартная secondary-кнопка с ним сливается */
.search-page-content--row-arrow {
    flex: 0 0 auto;
    background-color: var(--background-pr);
    color: var(--icon-pr);
}

.search-page-content--row-arrow .icon {
    width: var(--size-icons-l-width);
    height: var(--size-icons-l-height);
}

/* Стрелка реагирует на наведение строки целиком, а не только на себя */
.search-page-content--row:hover .search-page-content--row-arrow {
    background-color: var(--background-component-action-2-sec-hover);
    color: var(--icon-inver);
}

@media (min-width: 1024px) {
    .search-page-top--search {
        --search-button-space: calc(var(--size-icons-l-width) + var(--spacing-component-padding-x-sm) * 2 + var(--spacing-component-gap-sm));
    }

    .search-page-top--search-icon,
    .search-page-top--search-submit {
        padding: var(--spacing-component-padding-y-sm) var(--spacing-component-padding-x-sm);
    }
}

/*
 * Экспонаты: на /exhibits/ сетка и карточка фиксированной ширины (токен exhibit-card-width) —
 * там ряд добирается количеством карточек. В поиске их ровно ряд, и по макету они делят ширину
 * блока поровну: колонки тянем, картинку держим квадратной вместо фиксированной высоты
 */
.search-cards.ex-category-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.search-cards .ex-item-card {
    width: auto;
    min-width: 0;
}

.search-cards .ex-item-card img {
    height: auto;
    aspect-ratio: 1;
}

@media (min-width: 1024px) {
    .search-cards.ex-category-items {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .search-cards--program {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .search-cards--program {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Стартовый экран: разделы сайта друг под другом, у каждого шапка «Название · число» и «Все» */
.search-page-overview {
    gap: var(--spacing-content-gap-xxl);
}

.search-page-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-content-gap-sm);
    width: 100%;
    max-width: var(--size-layout-grid-3-width);
    margin: 0 auto;
}

.search-page-section--header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-component-gap-lg);
    padding-bottom: var(--spacing-component-padding-y-sm);
    border-bottom: var(--stroke-width-s) solid var(--stroke-sec);
}

.search-page-section--title {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-component-gap-sm);
    margin: 0;
    color: var(--text-pr);
}

.search-page-section--count {
    display: inline-flex;
    align-items: baseline;
    gap: var(--spacing-component-gap-sm);
    color: var(--text-sec);
}

/* Точка-разделитель между названием и числом, как в счётчиках вкладок */
.search-page-section--count::before {
    content: '·';
}

.search-page-section--all {
    flex: 0 0 auto;
    color: var(--text-component-action-1-acc-def);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--default-duration) var(--default-timing-standard);
}

.search-page-section--all:hover {
    color: var(--text-component-action-1-acc-hover);
}

.search-page-section--all:active {
    color: var(--text-component-action-1-acc-pres);
}

@media (prefers-reduced-motion: reduce) {
    .search-page-top--search input,
    .search-page-top--search-icon,
    .search-page-top--search-clear,
    .search-page-top--search-submit,
    .search-page-top--search-divider,
    .search-page-top--search-wrapper,
    .search-page-top--search-hints,
    .search-page-top--search-hints-list {
        transition: none;
    }
}


/* Пустой блок */
.search-page-empty {
    height: 749px;
    width: 100%;
}

.search-page-empty--content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-content-gap-md);
    max-width: var(--size-layout-grid-4-width);
    margin: auto;
    padding: var(--spacing-content-padding-xxxl) 0;
    text-align: center;
}

.search-page-empty--content-title {
    color: var(--background-acc);
}

.search-page-empty--content-texts {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-content-gap-sm);
}

.search-page-empty--content-texts h3 {
    color: var(--text-pr);
}

.search-page-empty--content-texts span {
    color: var(--text-sec);
}

.search-page-empty--content-suggest,
.search-page-content--notice-link {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    letter-spacing: inherit;
    color: var(--text-component-action-1-sec-def);
    cursor: pointer;
    text-decoration: underline;
}

.search-page-empty--content-suggest:hover,
.search-page-content--notice-link:hover {
    color: var(--text-component-action-1-sec-hover);
}

.search-page-empty--content-suggest:active,
.search-page-content--notice-link:active {
    color: var(--text-component-action-1-sec-pres);
}

/* Пустая вкладка живёт внутри выдачи, под строкой вкладок: высота экрана ей не нужна */
.search-page-empty--tab {
    height: auto;
}

/* End */


/* Start:/local/frontend/modules/section-scroll/section-scroll.css?17920556164436*/
/* ============================================================
   Посекционный скролл
   Структура разметки:
   .slide-sections-container > .slide-sections-track > .slide-section > Любое содержимое
   ============================================================ */

/* Класс вешает JS — без JS страница остаётся обычной прокручиваемой */
:root {
    --slide-index: 0;
    --slide-duration: 700ms;
}

.slide-scroll-ready,
.slide-scroll-ready body {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}

.slide-sections-container {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh; /* убирает прыжки из-за адресной строки на мобильных */
    overflow: hidden;
}

.slide-sections-track {
    position: relative;
    height: 100%;
}

.slide-section {
    width: 100%;
    height: 100%;

    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain; /* внутренний скролл не «протекает» наружу */
    touch-action: pan-y;

    scrollbar-width: none;
    -ms-overflow-style: none;
    outline: none; /* секции фокусируются программно, рамка не нужна */
}

/* Стопка: каждая следующая секция лежит поверх предыдущей и ждёт своей
   очереди за нижней кромкой экрана. Переход вниз — секция наезжает сверху
   на предыдущую, та остаётся на месте; переход вверх — уезжает обратно. */
.slide-scroll-ready .slide-section {
    position: absolute;
    top: 0;
    left: 0;
    z-index: var(--slide-order, 0);
    will-change: transform;
    transform: translate3d(0, var(--slide-shift, 0%), 0);
    transition: transform var(--slide-duration, 700ms) cubic-bezier(0.22, 0.61, 0.36, 1);
}

.slide-section::-webkit-scrollbar {
    display: none;
}

/* Короткая секция занимает свою высоту и прижата к низу экрана, поэтому
   translateY(100%) прячет её ровно за кромкой. Поверх предыдущей она не
   наезжает: JS поднимает стопку на её высоту (см. slidePushHeight).

   .is-tall вешает JS, когда контент такой секции перерос экран (узкий экран,
   крупный шрифт): тогда правила ниже отключаются и секция работает как обычная
   — во всю высоту, со своим скроллом и наездом поверх предыдущей. */
.slide-scroll-ready .slide-section.slide-section-short:not(.is-tall) {
    top: auto;
    bottom: 0;
    height: auto;
}

/* Страницы с большим фото на первом экране: второй слайд наезжает со скруглением. */
.slide-section--hero + .slide-section {
    border-radius: var(--radius-8xl) var(--radius-8xl) 0 0;
}

@media (prefers-reduced-motion: reduce) {
    .slide-scroll-ready .slide-section {
        transition-duration: 1ms;
    }
}

/*
 * Детальная ЦК на узком экране: два слайда склеиваются в обычную прокрутку.
 * Класс вешает страница (SLIDE_MOBILE_FLOW), JS в этом режиме не перехватывает колесо.
 */
@media (max-width: 1023px) {
    .slide-scroll-ready:has(.slide-sections-container--mobile-flow),
    .slide-scroll-ready:has(.slide-sections-container--mobile-flow) body {
        height: auto;
        overflow: auto;
        overscroll-behavior: auto;
    }

    .slide-sections-container--mobile-flow {
        height: auto;
        overflow: visible;
    }

    .slide-sections-container--mobile-flow .slide-sections-track {
        height: auto;
    }

    .slide-scroll-ready .slide-sections-container--mobile-flow .slide-section {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        z-index: auto;
        height: auto;
        overflow: visible;
        transform: none;
        will-change: auto;
        transition: none;
    }
}

/* End */


/* Start:/local/frontend/modules/lazy/lazy.css?17872653545678*/
/* ============================================================
   Ленивая загрузка медиа

   Классы, которые вешает JS:
     is-lazy-loading — загрузка началась
     is-lazy-loaded  — пиксели пришли
     is-lazy-error   — не загрузилось

   Утилиты для вёрстки:
     .lazy-media     — обёртка с зарезервированным местом (защита от прыжков)
     .lazy-fade      — плавное появление
     .lazy-embed     — заглушка под iframe
   ============================================================ */

:root {
    --lazy-fade-duration: 400ms;
    --lazy-placeholder: var(--background-sec, #F2F3F3);
    --lazy-shimmer: var(--background-wa-2, rgba(255, 255, 255, 0.6));
}

/* ============================================================
   1. Резерв места — главное средство против скачков вёрстки (CLS)
   ============================================================ */

/*
   Пропорция задаётся инлайном или в стилях блока:
   <div class="lazy-media" style="--lazy-ratio: 16 / 9">
*/
.lazy-media {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: var(--lazy-ratio, 16 / 9);
    background-color: var(--lazy-placeholder);
}

.lazy-media > img,
.lazy-media > video,
.lazy-media > picture > img,
.lazy-media > iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Если размеры проставлены атрибутами width/height, обёртка не нужна —
   достаточно этого правила, пропорция сохранится сама */
.lazy-img {
    display: block;
    width: 100%;
    height: auto;
}

/* ============================================================
   2. Плейсхолдер и появление
   ============================================================ */

.lazy-fade {
    opacity: 0;
    transition: opacity var(--lazy-fade-duration) ease;
}

.lazy-fade.is-lazy-loaded {
    opacity: 1;
}

/* Не загрузилось — показываем блок, а не дыру */
.lazy-fade.is-lazy-error {
    opacity: 1;
}

/* Бегущий блик, пока идёт загрузка. Вешается на обёртку .lazy-media */
.lazy-media.is-lazy-loading::before,
.lazy-skeleton::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
            90deg,
            transparent 0%,
            var(--lazy-shimmer) 50%,
            transparent 100%
    );
    transform: translateX(-100%);
    animation: lazy-shimmer 1.4s infinite;
}

.lazy-media.is-lazy-loaded::before,
.lazy-media.is-lazy-error::before {
    content: none;
}

@keyframes lazy-shimmer {
    100% {
        transform: translateX(100%);
    }
}

/* ============================================================
   3. Фоновые изображения
   ============================================================ */

[data-lazy-bg],
[data-lazy-bg-mobile] {
    background-color: var(--lazy-placeholder);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* ============================================================
   4. Заглушка под iframe (карта, видео, виджет)
   ============================================================ */

.lazy-embed {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: var(--lazy-ratio, 16 / 9);
    background-color: var(--lazy-placeholder);
    background-position: center;
    background-size: cover;
    cursor: pointer;
}

.lazy-embed > iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Кнопка поверх превью. Убирается, как только внутрь встал iframe */
.lazy-embed__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border: 0;
    border-radius: 50%;
    background-color: var(--background-white-alpha-90, rgba(255, 255, 255, 0.9));
    cursor: pointer;
    transition: transform 200ms ease;
    pointer-events: none; /* клик ловит сам контейнер */
}

.lazy-embed:hover .lazy-embed__play {
    transform: translate(-50%, -50%) scale(1.08);
}

.lazy-embed:focus-visible {
    outline: 2px solid var(--background-orange-red-500, #E84934);
    outline-offset: 2px;
}

/* ============================================================
   5. Анимации появления (data-lazy-class)
   ============================================================ */

.lazy-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 600ms ease, transform 600ms ease;
}

.lazy-reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* ============================================================
   6. Доступность
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .lazy-fade,
    .lazy-reveal {
        transition-duration: 1ms;
    }

    .lazy-media.is-lazy-loading::before,
    .lazy-skeleton::before {
        animation: none;
    }
}

/* Без JS ничего не должно остаться невидимым */
.no-js .lazy-fade,
.no-js .lazy-reveal {
    opacity: 1;
    transform: none;
}

/* End */


/* Start:/local/frontend/modules/overlay/overlay.css?17873041172427*/
/*
 * Окно поверх страницы: затемнение и центрирование.
 * Размеры содержимого задаёт тот, кто открывает окно.
 */

/* Пока окно открыто, страница под ним не прокручивается. */
.is-overlay-open,
.is-overlay-open body {
    overflow: hidden;
}

.overlay {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    overflow: hidden;
}

.overlay:not([open]) {
    display: none;
}

/* Затемнение приходит и уходит теми же анимациями, что и остальные переходы сайта. */
.overlay::backdrop {
    background-color: var(--background-black);
    animation: fade-in var(--page-fade-duration-fast, 400ms) var(--default-timing-standard, ease) both;
}

.overlay.is-closing::backdrop {
    animation: page-out var(--page-fade-duration-fast, 400ms) var(--default-timing-standard, ease) both;
}

/* Крестик самого окна: закрывает его, содержимого не касается. */
.overlay__close {
    position: absolute;
    z-index: 1;
    right: var(--spacing-component-padding-y-md);
    top: var(--spacing-component-padding-x-md);
}

/*
 * Появляется и уходит вместе с затемнением. Условие [open] нужно, чтобы анимация
 * запускалась при каждом открытии: кнопка живёт в окне постоянно, и без смены
 * состояния браузер проиграл бы её только один раз.
 */
.overlay[open] .overlay__close {
    animation: fade-in var(--page-fade-duration-fast, 400ms) var(--default-timing-standard, ease) both;
}

.overlay.is-closing .overlay__close {
    animation: page-out var(--page-fade-duration-fast, 400ms) var(--default-timing-standard, ease) both;
}

/* Готовое содержимое: видео и картинки вписываем в экран. */
.overlay__media {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Метка места, куда вернуть узел: на вёрстку не влияет. */
.overlay-placeholder {
    display: none;
}

/* End */
/* /local/frontend/styles/vars/index.css?1788273766714 */
/* /local/frontend/styles/vars/figma/foregroung.css?1786365206804 */
/* /local/frontend/styles/vars/figma/background.css?17918944964499 */
/* /local/frontend/styles/vars/figma/stroke.css?17891132161054 */
/* /local/frontend/styles/vars/figma/map.css?1786365206410 */
/* /local/frontend/styles/vars/figma/breakpoints.css?17918944962136 */
/* /local/frontend/styles/vars/figma/grid.css?17918944962033 */
/* /local/frontend/styles/vars/figma/spacing.css?17918944967866 */
/* /local/frontend/styles/vars/figma/opacity.css?1791894496431 */
/* /local/frontend/styles/vars/figma/stroke-width.css?1791894496333 */
/* /local/frontend/styles/vars/figma/text.css?17914546061958 */
/* /local/frontend/styles/vars/figma/effects.css?1791894496976 */
/* /local/frontend/styles/vars/figma/typography.css?179206868220828 */
/* /local/frontend/styles/vars/figma/icon.css?1791894496487 */
/* /local/frontend/styles/vars/figma/radius.css?17918944961652 */
/* /local/frontend/styles/vars/figma/size.css?179189449627567 */
/* /local/frontend/styles/reset.css?17885077421237 */
/* /local/frontend/styles/style.css?17889458864132 */
/* /local/frontend/styles/animations.css?17921339665663 */
/* /local/frontend/styles/fonts.css?17919021011930 */
/* /local/frontend/styles/icons.css?1787671986708 */
/* /local/frontend/styles/typography.css?178912364611058 */
/* /local/frontend/styles/buttons.css?17921392238919 */
/* /local/frontend/styles/forms.css?179240388218559 */
/* /local/frontend/styles/tabs.css?17889458864878 */
/* /local/frontend/styles/header.css?17919551736169 */
/* /local/frontend/styles/header-top-bar.css?17919551738163 */
/* /local/frontend/styles/header-app-popover.css?17919021013444 */
/* /local/frontend/styles/header-navigation.css?17891132163489 */
/* /local/frontend/styles/header-menu.css?179241521334143 */
/* /local/frontend/styles/tickets-modal.css?179213396614589 */
/* /local/frontend/styles/footer.css?17921567348594 */
/* /local/frontend/styles/pages/events.css?179242236622702 */
/* /local/frontend/styles/pages/event-detail.css?179239641015350 */
/* /local/frontend/styles/pages/service.css?17924152136651 */
/* /local/frontend/styles/pages/program-detail.css?179213396613490 */
/* /local/frontend/styles/pages/detail-page.css?179145460617934 */
/* /local/frontend/styles/pages/service-detail.css?179239641024946 */
/* /local/frontend/styles/pages/legal.css?17881830901520 */
/* /local/frontend/styles/pages/map.css?17882737663749 */
/* /local/frontend/styles/pages/search.css?179179125223157 */
/* /local/frontend/modules/section-scroll/section-scroll.css?17920556164436 */
/* /local/frontend/modules/lazy/lazy.css?17872653545678 */
/* /local/frontend/modules/overlay/overlay.css?17873041172427 */