/* Start:/local/templates/specialty_v2/fonts.css?17927699592307*/
/* Э0 (T-10): Montserrat self-host. Файлы - те же woff2 (v26, cyrillic+cyrillic-ext+latin+latin-ext в одном файле), что у specialty/specialty_new:
   копия, не новая загрузка. Один файл покрывает все нужные диапазоны, поэтому unicode-range не нужен. Начертание 700 в проекте нет (в паспортах не требуется).
   Лицензия SIL OFL 1.1 - fonts/OFL.txt. */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/local/templates/specialty_v2/fonts/montserrat-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/local/templates/specialty_v2/fonts/montserrat-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/local/templates/specialty_v2/fonts/montserrat-600.woff2') format('woff2');
}

/* Запасное лицо против сдвига вёрстки при подмене шрифта (CLS). size-adjust - отношение ширины текста Montserrat к Arial,
   замер 22.10.2026 в Chromium (canvas measureText, образец: кириллица+латиница+цифры, 100 px): 400 -> 1,113; 500 -> 1,132; 600 (к Arial Bold) -> 1,077.
   ascent/descent Montserrat: 0,968 / 0,251, lineGap 0; значения override = метрика / size-adjust. */
@font-face {
    font-family: 'Montserrat Fallback';
    font-weight: 400;
    src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
    size-adjust: 111.3%;
    ascent-override: 87%;
    descent-override: 22.6%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'Montserrat Fallback';
    font-weight: 500;
    src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
    size-adjust: 113.2%;
    ascent-override: 85.5%;
    descent-override: 22.2%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'Montserrat Fallback';
    font-weight: 600;
    src: local('Arial Bold'), local('Helvetica Neue Bold'), local('Helvetica Bold');
    size-adjust: 107.7%;
    ascent-override: 89.9%;
    descent-override: 23.3%;
    line-gap-override: 0%;
}

/* End */


/* Start:/local/templates/specialty_v2/tokens.css?179276995910969*/
/*
 * tokens.css — ФИНАЛЬНЫЙ файл T-04 ([С] local/templates/specialty_v2/tokens.css; handoff-B со всеми новыми токенами N-1…N-13 и --container-max 1200;
 * спорные позиции утверждены владельцем 22.10.2026: --color-main-grey #FAFAFA, --bg-disabled и --field-text по Figma, --text-validation #FFC329 только для валидации).
 * Источник решений: docs/design/TOKENS-RECONCILIATION.md (Figma «Simbols design» + закрытая палитра владельца).
 * Правила: нет тёмной темы, нет золота/градиента/оранжа, радиусы — закрытый список, z-index — только слои ВНЕ <dialog>.
 * Allowlist палитры для lint-sp / validate-passport ГЕНЕРИРУЕТСЯ из этого файла (scripts/vue-exit/tokens-lib.mjs) — вручную не хранится.
 */
:root {
  /* ===== BRAND ===== */
  --color-main: #6667AB;
  --color-main-hover: #55569B;
  --color-main-focused: #58599D;
  --color-main-click: #4A4A8C;
  --color-main-dark: #4B4C8F;
  --color-main-grey: #FAFAFA;            /* УТВЕРЖДЕНО ВЛАДЕЛЬЦЕМ 22.10.2026: #FAFAFA (закрытая палитра); Figma Main/Grey = #F9F7F6 (тёплый off-white, убран 17.08) */
  --color-main-xlight-blue: #F4F4FF;
  --color-hover: #E8E8FF;                /* Figma Misc/Hover */
  --color-click: #E0E0FF;                /* Figma Misc/Click */
  --color-main-disabled-bg: #F2F3FB;
  --color-main-disabled-text: #B8B8E5;
  --color-cream: #FBF8EE;                /* разрешённый кремовый (решение владельца) */

  /* ===== SECONDARY ===== */
  --color-pink-light: #FF7E7E;           /* цена карточки */
  --color-pink: #FF374F;
  --color-green-light: #A9D97A;
  --color-green-dark: #97C06F;           /* Figma Secondary/Green (dark); #83C83E — это Text/Success */
  --color-secondary-dark-grey: #9C968F;
  --color-grey-normal: #7F7F84;          /* Figma Secondary_New/Grey_Normal */

  /* ===== TEXT ===== */
  --text-black: #212121;
  --text-white: #FFFFFF;
  --text-dark-grey: #777880;             /* Figma; прежний CD #807777 = Head_menu/Fields Description, см. --field-description */
  --text-dark-grey-2: #575555;
  --text-light-grey: #D6D2D2;
  --text-gray: #B8B3B3;
  --text-xlight-gray: #E8E7ED;
  --text-error: #FF122E;
  --text-success: #83C83E;
  --text-validation: #FFC329;            /* УТВЕРЖДЕНО ВЛАДЕЛЬЦЕМ 22.10.2026: оставить ТОЛЬКО для состояния валидации (Figma Text/Validation); применять вне полей запрещено (lint-sp: правило css-validation-color) */

  /* ===== STROKE / BG ===== */
  --stroke-focused: #212121;
  --stroke-grey-light: #EFEEEE;
  --stroke-grey-dark: #D6D2D2;
  --stroke-grey-normal: #ECECEC;
  --bg-white: #FFFFFF;
  --bg-disabled: #EDEAE7;                /* УТВЕРЖДЕНО ВЛАДЕЛЬЦЕМ 22.10.2026: значение Figma #EDEAE7 (тёплый оттенок, только состояние disabled); альтернатива — нейтральный #F6F6F9 */
  --bg-light-grey: #F6F6F9;
  --bg-badge: rgba(255, 255, 255, .8);   /* фон бейджей карточки товара: белый 80 %; утверждено владельцем 23.10 (N-7) */
  --bg-subcategory-hover: #EDEAE7;       /* Subcategory_Card/Secondary BG_Hover/Click */

  /* ===== FIELDS (Symbols Design) ===== */
  --field-title: #B8B3B3;
  --field-text: var(--text-dark-grey);   /* УТВЕРЖДЕНО ВЛАДЕЛЬЦЕМ 22.10.2026: по Figma Fields/Text (#777780 в Figma ≈ #777880 Text/Dark Grey, разница в 1 единицу канала — шум; сведено в один hex); введённый текст — --text-black */
  --field-description: #807777;
  --field-stroke-hover: #6667AB;         /* подтверждено T-06 (22.10): Figma Fields Type=Input State=Hover, обводка Main/Blue #6667AB */
  --field-stroke-focused: #212121;
  --field-stroke-validation: #FFE5A2;
  --field-stroke-error: #FFBAC3;
  --field-stroke-success: #EFEEEE;

  /* ===== TYPOGRAPHY (Montserrat) ===== */
  --font-base: 'Montserrat', 'Montserrat Fallback', system-ui, Arial, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --heading-transform: uppercase;
  /* по умолчанию — Mobile (Figma Typography/Mobile); Tablet и Desktop — в @media ниже */
  --font-h1: 600 24px/1.1 var(--font-base);
  --font-h2: 600 16px/1.2 var(--font-base);
  --font-h3: 600 14px/1.2 var(--font-base);
  --font-h4: 600 12px/1.2 var(--font-base);
  --font-h5: 600 10px/1.2 var(--font-base);
  --font-h6: 600 12px/1.2 var(--font-base);
  --font-sh-m: 500 24px/1.1 var(--font-base);   /* Mobile/Tablet — Medium; Desktop — Regular 400 (Figma) */
  --font-sh-r: 400 24px/1.2 var(--font-base);
  --font-body-1: 400 16px/1.3 var(--font-base);
  --font-body-2: 400 14px/1.3 var(--font-base);
  --font-body-3: 400 12px/1.3 var(--font-base);
  --font-body-4: 400 13px/1.2 var(--font-base);
  --font-caption: 400 12px/1.4 var(--font-base);
  --font-small: 400 12px/14px var(--font-base);
  --font-small-sb: 600 12px/12px var(--font-base);
  --font-xsmall-m: 500 10px/14px var(--font-base);   /* Mobile/Tablet — 10px; Desktop — 12px (Figma Extra Small_Med) */
  /* Button Link (все UPPER) */
  --font-btn-lg: 600 18px/24px var(--font-base);
  --font-btn-md-lg: 600 16px/22px var(--font-base);   /* Normal */
  --font-btn-md: 600 14px/20px var(--font-base);      /* Medium */
  --font-btn-sm: 600 12px/16px var(--font-base);
  --font-btn-xs: 600 10px/14px var(--font-base);
  --font-btn-arrow: 500 12px/16px var(--font-base);   /* Big Arrow */
  /* Точечные стили мелкого кегля как в Figma (утверждено владельцем 23.10, N-12); стили в макете не назначены */
  --font-tab-md: 500 10px/10px var(--font-base);      /* подписи tab 640 */
  --font-tab-sm: 500 8px/10px var(--font-base);       /* подписи tab 321 */
  --font-quick-lg: 500 12px/16.8px var(--font-base);  /* лента быстрых ссылок, десктоп */
  --font-quick-sm: 500 10px/12px var(--font-base);    /* лента быстрых ссылок, планшет/мобайл */
  /* Tag, Fields, цена */
  --font-tag: 600 14px/1.4 var(--font-base);
  --font-field-title: 400 12px/16px var(--font-base);
  --font-field-placeholder: 400 16px/24px var(--font-base);
  --font-field-description: 400 12px/16px var(--font-base);
  --font-price-old: 400 14px/1.4 var(--font-base);    /* зачёркнутая; Cena_staraya_small в Figma набрана Gotham Pro 12/100% — шрифт не из дизайн-системы, здесь Montserrat 12px/1 в --font-price-old-sm */
  --font-price-old-sm: 400 12px/1 var(--font-base);

  /* ===== RADII (факт Figma, DESIGN-TOKENS §4a) — ЗАКРЫТЫЙ СПИСОК ===== */
  --radius-0: 0;                         /* теги/бейджи товара — квадратные */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 28px;
  --radius-full: 999px;

  /* ===== ELEVATION (Figma Effect styles) ===== */
  --elevation-1: 0 4px 4px 0 rgba(142, 141, 208, .16);
  --elevation-2: 0 4px 8px 0 rgba(142, 141, 208, .16);
  --elevation-3: 0 8px 16px 0 rgba(142, 141, 208, .12);
  --elevation-4: 0 16px 24px 0 rgba(142, 141, 208, .12);
  --elevation-menu: 0 8px 25px 0 rgba(65, 52, 101, .15);   /* Figma Category_card/Hover_small, мега-меню; утверждено владельцем 23.10 (N-5) */

  /* ===== SPACING (база 8) ===== */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-16: 64px;
  --space-20: 80px; --space-24: 96px; --space-30: 120px; --space-32: 128px;

  /* ===== BREAKPOINTS (для документации/JS; в @media числа подставляются буквально) ===== */
  --bp-mobile: 320px; --bp-tablet: 640px; --bp-desktop: 1280px; --bp-wide: 1920px;

  /* ===== GRID (Figma Layout guides; мобайл по умолчанию) ===== */
  --grid-base: 8px;
  --grid-columns: 6;
  --grid-gutter: 16px;
  --grid-margin: 24px;
  --container-max: 1200px;               /* решение координатора по правилу приоритета Figma > CD (контейнер 1200 по макету 1920 и шапке), сообщено владельцу 23.10; было 1280 */

  /* ===== Z-INDEX — только для слоёв ВНЕ <dialog> (диалог — top layer; --z-modal/--z-toast не существуют, В-6) ===== */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-header: 300;
  --z-bottom-nav: 1020;
  --z-overlay: 1030;

  /* ===== MOTION (служебный токен, решение без владельца; 23.10.2026) ===== */
  --motion-fast: 160ms;                  /* длительность переходов hover/focus/active блоков; при prefers-reduced-motion - 0.01ms (ниже) */
}

/* пользователь просит меньше движения: переходы блоков выключаются через токен */
@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0.01ms; }
}

/* Планшет 640–1279 */
@media (min-width: 640px) {
  :root {
    --font-h1: 600 28px/1.2 var(--font-base);
    --font-h2: 600 20px/1.2 var(--font-base);
    --font-h3: 600 14px/1.3 var(--font-base);
    --font-h4: 600 12px/1.2 var(--font-base);
    --font-h5: 600 10px/1.2 var(--font-base);
    --font-sh-m: 500 24px/1.1 var(--font-base);
    --font-sh-r: 400 24px/1.2 var(--font-base);
    --font-body-1: 400 16px/1.3 var(--font-base);
    --font-body-2: 400 14px/1.3 var(--font-base);
    --font-body-3: 400 12px/1.3 var(--font-base);
    --grid-gutter: 24px;
    --grid-margin: 32px;
  }
}

/* Десктоп 1280+ возвращает значения Desktop; сетка 12 колонок по центру */
@media (min-width: 1280px) {
  :root {
    --font-h1: 600 40px/1.1 var(--font-base);
    --font-h2: 600 30px/1.1 var(--font-base);
    --font-h3: 600 22px/1.4 var(--font-base);
    --font-h4: 600 16px/1.4 var(--font-base);
    --font-h5: 600 14px/1.2 var(--font-base);
    --font-sh-m: 400 36px/1.1 var(--font-base);
    --font-xsmall-m: 500 12px/14px var(--font-base);
    --font-sh-r: 400 30px/1.1 var(--font-base);
    --font-body-1: 400 18px/1.4 var(--font-base);
    --font-body-2: 400 16px/1.4 var(--font-base);
    --font-body-3: 400 14px/1.4 var(--font-base);
    --grid-columns: 12;
    --grid-margin: 0px;
  }
}

/* 4k */
@media (min-width: 1920px) {
  :root { --grid-gutter: 30px; }
}

/* End */


/* Start:/local/js/sp/core/core.css?17935256561801*/
/* Э0 (T-18): тост sp.core. Цвета и размеры - только токены specialty_v2 (tokens.css должен быть на странице). */
.sp-toast-stack {
    box-sizing: border-box;
    position: fixed;
    right: var(--space-4);
    /* E2-A r2: над нижним меню и закреплённой полосой покупки (--sp-bn-h, --sp-bar-h задаёт оболочка; вне оболочки и на десктопе = 0), с учётом safe-area; круг 2 плашки: и над плашкой cookie (--sp-cookie-top включает меню и полосу, как у FAB) */
    bottom: calc(var(--sp-cookie-top, calc(var(--sp-bn-h, 0px) + var(--sp-bar-h, 0px))) + var(--space-4) + env(safe-area-inset-bottom, 0px));
    left: var(--space-4);
    z-index: var(--z-overlay);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-2);
    pointer-events: none;
}

/* в <dialog> (top layer) нижнего меню под стеком нет: прежний отступ (класс ставит sp.core при монтировании в диалог) */
.sp-toast-stack--dialog {
    bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
}

.sp-toast {
    box-sizing: border-box;
    max-width: 360px;
    padding: var(--space-3) var(--space-4);
    font: var(--font-body-3);
    color: var(--text-white);
    background: var(--text-black);
    border-radius: var(--radius-sm);
    box-shadow: var(--elevation-3);
    pointer-events: auto;
    cursor: pointer;
    opacity: 1;
    transition: opacity var(--motion-fast, 160ms) ease;
}

.sp-toast--success {
    background: var(--color-main);
}

.sp-toast--error {
    background: var(--text-error);
}

.sp-toast.is-hiding {
    opacity: 0;
}

/* End */


/* Start:/local/js/sp/modal/modal.css?17927699591502*/
/* Э0 (T-19): <dialog> sp.modal. Размеры, цвета, радиусы - токены specialty_v2. Подложка - из цвета текста с прозрачностью. */
.sp-modal {
    box-sizing: border-box;
    margin: auto; /* E1: легаси-CSS (specialty_new/main.css: *{margin:0}) обнуляет UA-margin:auto у dialog, окно прижималось влево-вверх */
    width: min(560px, calc(100vw - 2 * var(--space-4)));
    max-height: calc(100dvh - 2 * var(--space-4));
    padding: var(--space-6);
    overflow: auto;
    color: var(--text-black);
    background: var(--bg-white);
    border: 0;
    border-radius: var(--radius-md);
    box-shadow: var(--elevation-4);
    overscroll-behavior: contain;
}

.sp-modal::backdrop {
    background: color-mix(in srgb, var(--text-black) 40%, transparent);
}

.sp-modal[open] {
    animation: sp-modal-in var(--motion-fast, 160ms) ease-out;
}

@keyframes sp-modal-in {
    from {
        opacity: 0;
        transform: translateY(var(--space-2));
    }

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

@media (max-width: 639px) {
    .sp-modal {
        width: 100vw;
        max-width: 100vw;
        max-height: 100dvh;
        margin: auto 0 0;
        padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sp-modal[open] {
        animation: none;
    }
}

/* End */


/* Start:/local/js/sp/cart_toast/cart_toast.css?17935256563797*/
/* Плашка «Товар добавлен» (макет владельца 31.10). Цвета и размеры - токены specialty_v2.
   Телефон и планшет (до 1279 px, где есть нижнее меню): по центру над нижним меню, полосой покупки PDP и плашкой cookie (--sp-cookie-top), с учётом safe-area.
   Компьютер: sp.core ставит .sp-ctoast--anchored и left/top (у блока кнопки), стрелка - var(--sp-ctoast-arrow). */
.sp-ctoast-live {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    pointer-events: none;
}

.sp-ctoast {
    box-sizing: border-box;
    position: fixed;
    right: auto;
    bottom: calc(var(--sp-cookie-top, calc(var(--sp-bn-h, 0px) + var(--sp-bar-h, 0px))) + var(--space-3) + env(safe-area-inset-bottom, 0px));
    left: 50%;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 20px;
    column-gap: var(--space-3);
    align-items: start;
    width: min(calc(100vw - var(--space-8)), 360px);
    padding: var(--space-3);
    font: var(--font-caption);
    color: var(--text-black);
    background: var(--bg-white);
    border-radius: var(--radius-sm);
    box-shadow: var(--elevation-menu);
    transform: translateX(-50%);
    opacity: 1;
    pointer-events: auto;
    transition: opacity var(--motion-fast, 160ms) ease;
}

.sp-ctoast--noimg {
    grid-template-columns: minmax(0, 1fr) 20px;
}

.sp-ctoast.is-hiding {
    opacity: 0;
    pointer-events: none;
}

.sp-ctoast--anchored {
    right: auto;
    bottom: auto;
    width: 300px;
    transform: none;
}

.sp-ctoast__thumb {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    overflow: hidden;
    background: var(--bg-light-grey);
    border-radius: var(--radius-xs);
}

.sp-ctoast__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sp-ctoast__body {
    display: block;
    min-width: 0;
}

.sp-ctoast__title {
    display: block;
    font-weight: 600;
    color: var(--color-main);
}

.sp-ctoast__name {
    font-weight: 600;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sp-ctoast__link {
    display: inline-block;
    margin-top: var(--space-1);
    font-weight: 600;
    color: var(--color-main);
    text-decoration: underline;
}

.sp-ctoast__link:hover {
    color: var(--color-main-hover);
}

.sp-ctoast__link:focus-visible,
.sp-ctoast__x:focus-visible {
    outline: 2px solid var(--stroke-focused);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

.sp-ctoast__x {
    position: relative;
    width: 20px;
    height: 20px;
    padding: 0;
    font: 400 18px/20px var(--font-base);
    color: var(--text-dark-grey);
    background: none;
    border: 0;
    cursor: pointer;
}

.sp-ctoast__x::before {
    content: "";
    position: absolute;
    inset: -12px; /* зона касания 44x44 при виде 20x20 */
}

.sp-ctoast__x:hover {
    color: var(--text-black);
}

/* стрелка к кнопке: над плашкой стрелка вниз, при переносе под кнопку - вверх; у края экрана без стрелки */
.sp-ctoast--anchored::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: var(--sp-ctoast-arrow, 50%);
    width: 12px;
    height: 12px;
    margin-left: -6px;
    background: var(--bg-white);
    transform: rotate(45deg);
}

.sp-ctoast--anchored.sp-ctoast--below::after {
    top: -6px;
    bottom: auto;
}

.sp-ctoast--anchored.sp-ctoast--noarrow::after {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .sp-ctoast {
        transition: none;
    }
}

/* End */


/* Start:/local/templates/specialty_v2/css/shell.css?17929581926942*/
/* Э1 (T-14, T-15, D14): раскладка оболочки specialty_v2 поверх эталонов блоков Э0. Липкая только ГЛАВНАЯ строка шапки (логотип, «Каталог», поиск, иконки):
   верхнее меню (десктоп) и лента уходят со скроллом. Для position: sticky строка должна быть потомком высокого контейнера, поэтому корневые
   обёртки шапки не создают собственных блоков (display: contents), а рамку эталона (подложка, отступы, нижняя обводка) несёт сама строка.
   Размеры строк - числа паспорта header (кадры 320 / 640 / 1920); отклонение от эталона «одна рамка высотой 90/116/156» - решение владельца D14
   (запись owner_override паспорта header). Цвета, радиусы, шрифты - токены. Файл подключает header.php оболочки, после css/blocks/header.css. */
html {
    scroll-padding-top: var(--sp-header-h, 0px);
}

.sp-shell-head,
.sp-shell-head .sp-hd {
    display: contents;
}

.sp-shell-head .sp-hd__main {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    box-sizing: border-box;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 16px 24px 10px;
    border-bottom: 1px solid var(--stroke-grey-light);
    background: var(--bg-white);
}

.sp-shell-head .sp-hd__quick {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 8px 24px 10px;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--stroke-grey-light);
    background: var(--bg-white);
}

.sp-shell-head .sp-hd__quick::-webkit-scrollbar {
    display: none;
}

@media (min-width: 640px) {
    .sp-shell-head .sp-hd__main {
        padding: 16px 32px;
    }

    .sp-shell-head .sp-hd__quick {
        padding: 8px 32px 12px;
    }
}

@media (min-width: 1280px) {
    .sp-shell-head .sp-hd__top {
        width: 100%;
        max-width: var(--container-max);
        margin: 0 auto;
    }

    .sp-shell-head .sp-hd__main {
        padding: 24px max(24px, calc((100% - var(--container-max)) / 2)) 16px;
        border-bottom: 0;
    }

    .sp-shell-head .sp-hd__quick {
        padding: 0 max(24px, calc((100% - var(--container-max)) / 2)) 16px;
        border-bottom: 0;
        font: var(--font-quick-lg);
    }
}

/* страница оформления: нижнего меню нет */
.sp-root.sp-root--order {
    --sp-bn-h: 0px;
}

/* Нижнее меню прикреплено к низу окна на планшете и мобайле; резерв под него - у обёртки страницы */
.sp-shell-bn {
    display: contents;
}

@media (max-width: 1279px) {
    .sp-shell-bn .sp-bn {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: var(--z-bottom-nav);
    }

    .sp-root:not(.sp-root--order) {
        padding-bottom: var(--sp-bn-h, 58px);
    }
}

.sp-root--order .sp-shell-bn {
    display: none;
}

/* Нижнее меню занимает 58 px до 1279 px (P-292 M-02): от него считается положение плашки cookie и виджета обратного звонка Envybox */
:root {
    --sp-cookie-z: 250;
}

@media (max-width: 1279px) {
    :root {
        --sp-bn-h: 58px;
    }

    .cbk-phone {
        position: fixed !important;
        top: auto !important;
        bottom: calc(var(--sp-cookie-top, var(--sp-bn-h, 0px)) + 12px) !important;
    }

    /* Плавающие кнопки Envybox («Заказать звонок» полосой у нижнего края) и любые плавающие виджеты не заходят на нижнее меню: поднимаются на его высоту */
    .cbk-btn:not(.cbk-btn-top):not(.cbk-btn-left):not(.cbk-btn-right) {
        bottom: calc(var(--sp-cookie-top, var(--sp-bn-h, 0px)) + 0px) !important;
    }

}

.sp-bn__counter[hidden] {
    display: none;
}

/* «Бренды раздела» (T-57): строка ссылок брендовых фильтров подраздела оборудования, под крошками */
.sp-brands {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px 16px;
}

.sp-brands__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sp-brands__link {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 16px;
    border: 1px solid var(--stroke-grey-light);
    border-radius: var(--radius-full);
    color: var(--text-black);
    font: 500 14px/1 var(--font-base);
    text-decoration: none;
}

.sp-brands__link:hover {
    background: var(--color-hover);
}

.sp-brands__link:focus-visible {
    outline: 2px solid var(--color-main);
    outline-offset: 2px;
}

/* Э1 (сверка с макетом Figma 1920/640/320): верхняя строка - две группы меню, телефон и город справа (контакты у правого края корпуса);
   лента быстрых ссылок - заглавными (как в макете); поле поиска на телефоне целиком кнопка открытия диалога. */
@media (min-width: 1280px) {
    .sp-shell-head .sp-hd__contacts {
        display: flex;
        flex: none;
        align-items: center;
        gap: 24px;
        margin-left: auto;
    }
}

.sp-shell-head .sp-hd__quick-item {
    text-transform: uppercase;
}

@media (max-width: 639px) {
    .sp-shell-head .sp-hd__search {
        cursor: pointer;
    }
}

/* Э1 (шапка v2, решение владельца 24.10): профиль авторизованного - значок залит --color-main; при наведении кнопки счётчик темнеет (--color-main-dark),
   цвет иконки при наведении - --color-main-hover (паспорт header.json states.hover: nav-color, counter). */
.sp-shell-head .sp-hd__nav-button--auth {
    color: var(--color-main);
}

.sp-shell-head .sp-hd__nav-button:hover {
    color: var(--color-main-hover);
}

.sp-shell-head .sp-hd__nav-button:hover .sp-hd__counter {
    background: var(--color-main-dark);
}

/* ЗБ1: контент старых страниц в оболочке v2 не выходит за край на 320-390 (на /delivery-and-payment/ значки платёжных систем были шире экрана и в прежней оболочке) */
.sp-root .payment-system__list > li {
    min-width: 0;
}

.sp-root .payment-system__list img {
    max-width: 100%;
    height: auto;
}

/* End */


/* Start:/local/templates/specialty_v2/css/legacy-fix.css?17941333974760*/
/* Э1 (T-37, маркер E1:): поправки легаси-CSS под оболочку specialty_v2. Грузится после легаси-CSS профилей, только на страницах оболочки.
   Прежние шаблоны держали шапку вне потока (липкая/фиксированная), поэтому легаси-CSS оставляет под неё отступ у body. */
@media (min-width: 1280px) {
    .sp-root {
        padding-top: 0;
    }
}

/* E1 (T-42, CLS): ползунок диапазона фильтра (ion.rangeSlider) достраивается скриптом после первой отрисовки: поле 19 px превращается в ползунок 47 px,
   карточки фильтра ниже сдвигаются на 28 px (CLS 0,07 на /coffee/ десктоп). Резерв высоты до инициализации; после - штатная высота виджета. */
.catalog-filter__item input.js-range-slider:not(.irs-hidden-input) {
    display: block;
    height: 47px;
    visibility: hidden;
}

/* E1 (ЗБ2, маркер E1:): декоративная подпись-подложка страницы (.page__meta > .backdrop-label--page, шрифт 200 px, абсолютное позиционирование) шире экрана на 768 и ниже
   (список обжарщиков/брендов/курсов: overflow 164-223 px, был и в прежней оболочке). Горизонтальный вылет обрезается по контейнеру, по вертикали глифы видны как раньше. */
.sp-root .page__meta {
    overflow-x: clip;
}

/* E1 (ЗБ2, маркер E1:): карточки кофе на странице обжарщика (Vue coffee-card, 4 в ряд col-sm-3) на 576-991 px: кнопка корзины выходит за узкую карточку (160 px), страница шире экрана на 29-223 px (в прежней оболочке так же).
   На планшете - по 3 карточки в ряд. */
@media (min-width: 576px) and (max-width: 991px) {
    .sp-root .roaster-page__coffee .filter-result > .col-sm-3 {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }
}
@media (min-width: 576px) and (max-width: 767px) {
    .sp-root .roaster-page__coffee .filter-result > .col-sm-3 {
        flex-basis: 50%;
        max-width: 50%;
    }
}

/* E1 (ЗБ2б, T-38, маркер E1:): текст статьи блога (DETAIL_TEXT, правит редактор) приходит с фиксированными ширинами таблиц (до 600 px), кнопок и картинок,
   на 320-390 px 11 статей шире экрана (в прежней оболочке так же). Общее правило вместо правки текстов: медиа и блоки не шире колонки, длинные слова и кнопки
   переносятся, таблица на узком экране прокручивается внутри себя (display:block + overflow-x:auto), а не растягивает страницу. Десктоп не затронут (кроме max-width картинок). */
.sp-root .article-detail .container img,
.sp-root .article-detail .container video,
.sp-root .article-detail .container iframe {
    max-width: 100%;
    height: auto;
}
@media (max-width: 767px) {
    .sp-root .article-detail .container :is(p, li, h2, h3, h4, a, button, .btn) {
        max-width: 100%;
        overflow-wrap: anywhere;
    }
    .sp-root .article-detail .container :is(a, button, .btn) {
        white-space: normal;
    }
    .sp-root .article-detail .container table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* HOTFIX (27.10, главная): легаси-CSS главной тянет контент под шапку отрицательным отступом (.page__wrapper--main {margin-top:-82px}, 14466 specialty/styles.css) и
   компенсирует его padding-top:82px у .main-banner - так было под фиксированной прозрачной шапкой прежнего шаблона. В оболочке v2 шапка (две строки, в потоке) выше 82 px:
   баннер ложился поверх быстрых ссылок .sp-hd__quick, и они не кликались. Отступы обнуляем: контент главной начинается под всей шапкой. */
.sp-root .page__wrapper--main {
    margin-top: 0;
}
.sp-root .main-banner {
    padding-top: 0;
}

/* End */


/* Start:/local/templates/.default/components/sotbit/search.title/sp_search/style.css?17927699596359*/
/* Э1 (T-56): подсказки поиска шапки. Паспорт search-dropdown - pending_capture (макета выпадашки нет, лимит Figma AI до 16.11): карточка товара
   собрана из токенов product-card (фото 64, название 14/19.6, цена), заголовки групп - как заголовки колонок подвала. Цвета, радиусы, шрифты - токены. */
.sp-search {
    position: relative;
}

.sp-search__clear {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0 4px 0 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    color: var(--text-dark-grey);
    background: transparent;
    cursor: pointer;
}

.sp-search__clear[hidden] {
    display: none;
}

.sp-search__clear:focus-visible {
    outline: 2px solid var(--color-main);
    outline-offset: 0;
}

.sp-search__panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: var(--z-header);
    box-sizing: border-box;
    max-height: min(70vh, 640px);
    overflow-y: auto;
    padding: 16px;
    border: 1px solid var(--stroke-grey-light);
    border-radius: var(--radius-md);
    color: var(--text-black);
    background: var(--bg-white);
    box-shadow: var(--elevation-4);
    font-family: var(--font-base);
    overscroll-behavior: contain;
}

.sp-search__panel[hidden] {
    display: none;
}

.sp-search__groups {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-search__group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sp-search__title {
    margin: 0;
    color: var(--text-dark-grey);
    font: 600 12px/14.4px var(--font-base);
    text-transform: uppercase;
}

.sp-search__items {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sp-search__item {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    color: var(--text-black);
    text-decoration: none;
}

.sp-search__item:hover,
.sp-search__item:focus-visible,
.sp-search__item.is-active {
    background: var(--color-hover);
    outline: 0;
}

.sp-search__thumb {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-xs);
    background: var(--color-main-xlight-blue);
    overflow: hidden;
}

.sp-search__thumb img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.sp-search__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sp-search__name {
    font: 400 14px/19.6px var(--font-base);
    overflow-wrap: anywhere;
}

.sp-search__name b {
    font-weight: 600;
}

.sp-search__note {
    color: var(--text-dark-grey);
    font: 400 12px/15.6px var(--font-base);
}

.sp-search__price {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: flex-end;
    color: var(--color-pink);
    font: 600 14px/16.8px var(--font-base);
    white-space: nowrap;
}

.sp-search__old {
    color: var(--text-gray);
    font: 400 12px/15.6px var(--font-base);
}

.sp-search__all {
    display: block;
    margin-top: 16px;
    padding: 12px 8px;
    border-radius: var(--radius-sm);
    color: var(--color-main);
    font: 600 14px/19.6px var(--font-base);
    text-align: center;
    text-decoration: none;
}

.sp-search__all:hover,
.sp-search__all:focus-visible {
    background: var(--color-hover);
    outline: 0;
}

.sp-search__empty {
    margin: 0;
    padding: 8px;
    color: var(--text-dark-grey);
    font: 400 14px/19.6px var(--font-base);
}

.sp-search__panel[aria-busy="true"] {
    opacity: 0.6;
}

/* мобильный режим (до 640 px): полноэкранный диалог поиска; поле шапки - таблетка, по касанию открывает диалог */
.sp-search-dlg {
    box-sizing: border-box;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-0);
    color: var(--text-black);
    background: var(--bg-white);
    overflow: hidden;
}

.sp-search-dlg[open] {
    display: flex;
    flex-direction: column;
}

.sp-search-dlg__form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.sp-search-dlg__bar {
    display: flex;
    flex: none;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--stroke-grey-light);
}

.sp-search-dlg__input {
    box-sizing: border-box;
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 0 16px;
    border: 1px solid var(--stroke-grey-normal);
    border-radius: var(--radius-full);
    color: var(--text-black);
    background: var(--bg-white);
    font: 400 16px/20.8px var(--font-base);
}

.sp-search-dlg__input:focus {
    border-color: var(--stroke-focused);
    outline: 0;
}

.sp-search-dlg__cancel {
    flex: none;
    height: 44px;
    padding: 0 8px;
    border: 0;
    color: var(--color-main);
    background: transparent;
    font: 600 14px/1 var(--font-base);
    cursor: pointer;
}

.sp-search__panel--dialog {
    position: static;
    flex: 1 1 auto;
    max-height: none;
    border: 0;
    border-radius: var(--radius-0);
    box-shadow: none;
}

@media (min-width: 640px) {
    .sp-search-dlg {
        display: none !important;
    }
}

@media (max-width: 639px) {
    .sp-search .sp-search__panel,
    .sp-search .sp-search__clear {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sp-search__panel {
        transition: none;
    }
}

/* штатная кнопка очистки поля type=search скрыта: своя кнопка [data-sp-search-clear] одинакова во всех браузерах */
.sp-search input[type="search"]::-webkit-search-cancel-button,
.sp-search-dlg input[type="search"]::-webkit-search-cancel-button {
    display: none;
    -webkit-appearance: none;
}

/* End */


/* Start:/local/templates/specialty_v2/css/blocks/header.css?179421450010903*/
/* Э0 (T-16): эталон «шапка» specialty_v2 по паспорту docs/design/blocks/header.json.
   Раскладки: мобайл (до 640 px, кадр 320), планшет (640-1279, кадр 640), десктоп (от 1280, кадр 1920: корпус 1200 = --container-max).
   Числа - паспорт (точно), фактические промежутки (gap_list) заданы явно; цвета, радиусы, шрифты - токены. Мега-меню - отдельный блок (Э1). */

/* ---------- мобайл (кадр 320) ---------- */
.sp-hd {
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    height: 90px;
    margin: 0;
    padding: 16px 24px 10px;
    border-bottom: 1px solid var(--stroke-grey-light);
    border-radius: var(--radius-0);
    color: var(--text-black);
    background: var(--bg-white);
}

.sp-hd__top {
    display: none;
}

.sp-hd__main {
    box-sizing: border-box;
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: calc(100% + 4px);
    height: 36px;
    padding: 0;
}

.sp-hd__left,
.sp-hd__catalog-search {
    display: contents;
}

.sp-hd__logo {
    display: flex;
    flex: none;
    align-items: center;
    width: 80px;
    height: 20px;
    padding: 0;
    gap: 10px;
    border-radius: var(--radius-0);
    color: var(--color-main);
    text-decoration: none;
}

.sp-hd__logo-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sp-hd__catalog {
    display: none;
}

.sp-hd__search {
    box-sizing: border-box;
    display: flex;
    flex: none;
    align-items: center;
    gap: 50px;
    width: 128px;
    height: 32px;
    margin: 0;
    padding: 8px;
    border: 1px solid var(--stroke-grey-light);
    border-radius: var(--radius-full);
    color: var(--text-gray);
    background: var(--bg-white);
    font: 400 12px/15.6px var(--font-base);
}

.sp-hd__search-input {
    box-sizing: border-box;
    display: flex;
    flex: 1 1 auto;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    color: inherit;
    background: transparent;
    font: inherit;
}

.sp-hd__search:focus-within {
    border-color: var(--stroke-focused);
}

.sp-hd__search-input::placeholder {
    color: var(--text-gray);
    opacity: 1;
}

.sp-hd__search-button {
    display: none;
}

.sp-hd__search-icon {
    display: inline-flex;
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--text-dark-grey);
}

.sp-hd__search-icon .sp-icon {
    width: 100%;
    height: 100%;
}

.sp-hd__icons {
    display: none;
}

.sp-hd__burger {
    box-sizing: border-box;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-0);
    color: var(--text-black);
    background: transparent;
    cursor: pointer;
}

.sp-hd__quick {
    box-sizing: border-box;
    display: flex;
    flex: none;
    gap: 10px;
    width: calc(100% + 24px);
    height: 20px;
    padding: 0;
    overflow: hidden;
    color: var(--text-black);
    font: var(--font-quick-sm);
}

.sp-hd__quick-item {
    flex: none;
    /* аудит PROD 07.11, мобильная вёрстка: зона нажатия 24 px по высоте на мобайле и планшете (строка 12 px + 6 + 6, по бокам 4 px - воздух для рамки фокуса);
       отрицательный margin гасит padding - вид и высота ленты прежние (запас - отступы ленты 8/10 px в shell.css). На десктопе сброшено: шрифт крупнее, отступа сверху нет */
    margin: -6px -4px;
    padding: 6px 4px;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.sp-hd__quick-item {
    transition: color var(--motion-fast) ease;
}

.sp-hd__quick-item:hover {
    color: var(--color-main-hover);
}

.sp-hd__burger:focus-visible,
.sp-hd__quick-item:focus-visible,
.sp-hd__nav-button:focus-visible,
.sp-hd__menu-item:focus-visible,
.sp-hd__city:focus-visible,
.sp-hd__logo:focus-visible {
    outline: 2px solid var(--stroke-focused);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* рамка быстрой ссылки - внутри зоны нажатия 24 px: снаружи её срезала бы лента с прокруткой */
.sp-hd__quick-item:focus-visible {
    outline-offset: -2px;
}

/* ---------- планшет (кадр 640) ---------- */
@media (min-width: 640px) {
    .sp-hd {
        gap: 16px;
        height: 116px;
        padding: 16px 32px;
    }

    .sp-hd__main {
        gap: 40px;
        width: auto;
        height: 48px;
    }

    .sp-hd__left {
        display: flex;
        align-items: center;
        gap: 24px;
    }

    .sp-hd__catalog-search {
        display: contents;
    }

    .sp-hd__logo {
        width: 136px;
        height: 34px;
    }

        .sp-hd__search {
        gap: 0;
        width: 340px;
        height: 48px;
        padding: 0 16px 0 0;
        color: var(--text-gray);
        font: 400 14px/18.2px var(--font-base);
    }

    .sp-hd__search-input {
        height: 48px;
        padding: 15px 16px;
        border-radius: var(--radius-sm);
    }

    .sp-hd__search-icon {
        width: 24px;
        height: 24px;
    }

    .sp-hd__quick {
        gap: 20px;
        width: auto;
    }
}

/* ---------- десктоп (кадр 1920, корпус 1200) ---------- */
@media (min-width: 1280px) {
    .sp-hd__quick-item {
        margin: 0;
        padding: 0;
    }

    .sp-hd__quick-item:focus-visible {
        outline-offset: 2px;
    }

    .sp-hd {
        gap: 0;
        height: 156px;
        max-width: var(--container-max);
        margin: 0 auto;
        padding: 0;
        border-bottom: 0;
        background: transparent;
    }

    .sp-hd__top {
        box-sizing: border-box;
        display: flex;
        flex: none;
        align-items: center;
        gap: 94px;
        height: 52px;
        padding: 16px 0;
        border-bottom: 1px solid var(--stroke-grey-light);
    }

    .sp-hd__menu {
        display: flex;
        gap: 24px;
    }

    .sp-hd__menu-item {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 0;
        border-radius: var(--radius-0);
        color: var(--field-description);
        font: var(--font-body-3);
        text-decoration: none;
    }

    .sp-hd__menu-item:hover {
        color: var(--color-main-hover);
    }

    .sp-hd__phone {
        display: flex;
        align-items: center;
        width: 104px;
        height: 20px;
        color: var(--field-description);
        font: 600 12px/14.4px var(--font-base);
        text-decoration: none;
        white-space: nowrap;
    }

    .sp-hd__city {
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        height: 20px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: var(--radius-0);
        color: var(--field-description);
        background: transparent;
        font: var(--font-body-3);
        cursor: pointer;
    }

    .sp-hd__main {
        gap: 26px;
        height: 44px;
        margin-top: 24px;
    }

    .sp-hd__left {
        gap: 24px;
    }

    .sp-hd__catalog-search {
        display: flex;
        gap: 13px;
    }

    .sp-hd__logo {
        width: 180px;
        height: 44px;
    }

        .sp-hd__catalog {
        box-sizing: border-box;
        display: inline-flex;
        flex: none;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 159px;
        height: 44px;
        margin: 0;
        padding: 14px 32px;
        border: 0;
        border-radius: var(--radius-full);
        color: var(--text-white);
        background: var(--color-main);
        font: var(--font-btn-md);
        text-transform: uppercase;
        cursor: pointer;
    }

    .sp-hd__catalog:is(:hover, .is-hover) {
        background: var(--color-main-hover);
    }

    .sp-hd__search {
        gap: 0;
        width: 590px;
        height: 44px;
        padding: 0;
        border-color: var(--stroke-grey-normal);
        font: 400 14px/18.2px var(--font-base);
    }

    .sp-hd__search:is(:hover, .is-hover) {
        border-color: var(--color-main-hover);
    }

    .sp-hd__search-input {
        height: 44px;
        padding: 15px 16px;
        border-radius: 999px 0 0 999px;
    }

    .sp-hd__search-button {
        box-sizing: border-box;
        display: inline-flex;
        flex: none;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 75px;
        height: 44px;
        margin: 0;
        padding: 14px 32px;
        border: 0;
        border-radius: var(--radius-full);
        color: var(--text-white);
        background: var(--color-main);
        cursor: pointer;
    }

    .sp-hd__search-button:is(:hover, .is-hover) {
        background: var(--color-main-hover);
    }

    .sp-hd__search-icon {
        display: none;
    }

    .sp-hd__icons {
        box-sizing: border-box;
        display: flex;
        flex: none;
        align-items: center;
        gap: 16px;
        height: 40px;
        padding: 0;
    }

    .sp-hd__nav-button {
        position: relative;
        box-sizing: border-box;
        display: inline-flex;
        flex: none;
        align-items: center;
        justify-content: center;
        gap: 0;
        width: 40px;
        height: 40px;
        padding: 0;
        border-radius: var(--radius-0);
        color: var(--text-black);
        text-decoration: none;
    }

    .sp-hd__nav-button:hover {
        color: var(--color-main-hover);
    }

    .sp-hd__counter {
        position: absolute;
        top: -4px;
        right: -8px;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        padding: 2px 6px;
        border-radius: var(--radius-full);
        color: var(--text-white);
        background: var(--color-main);
        font: var(--font-btn-xs);
    }

    .sp-hd__counter[hidden] {
        display: none;
    }

    .sp-hd__burger {
        display: none;
    }

    .sp-hd__quick {
        gap: 24.75px;
        margin-top: 16px;
        font: var(--font-quick-lg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sp-hd__quick-item,
    .sp-hd__menu-item,
    .sp-hd__nav-button,
    .sp-hd__catalog,
    .sp-hd__search,
    .sp-hd__search-button {
        transition: none;
    }
}

/* End */


/* Start:/local/components/swebs/main_links/templates/sp_megamenu/style.css?179442442020690*/
/* Э1 (T-16, T-17): мега-меню и бургер-панель specialty_v2. Одна разметка: до 1280 px - панель на весь экран (бургер), от 1280 - выпадающая
   панель под главной строкой шапки (корпус 1200). Цвета, радиусы, шрифты - токены. Окно - <dialog> (sp.modal), подложка - ::backdrop. */
.sp-mm {
    box-sizing: border-box;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-0);
    color: var(--text-black);
    background: var(--bg-white);
    font-family: var(--font-base);
    overflow: hidden;
}

.sp-mm[open] {
    display: flex;
    flex-direction: column;
}

.sp-mm::backdrop {
    background: rgba(33, 33, 33, 0.4);
}

.sp-mm__bar {
    box-sizing: border-box;
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 16px 0 24px;
    border-bottom: 1px solid var(--stroke-grey-light);
}

.sp-mm__title {
    font: var(--font-h2);
}

.sp-mm__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--text-black);
    background: transparent;
    cursor: pointer;
}

.sp-mm__close:hover {
    background: var(--color-hover);
}

.sp-mm__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.sp-mm__tabs {
    display: flex;
    flex: none;
    gap: 8px;
    padding: 12px 24px;
    overflow-x: auto;
    scrollbar-width: none;
}

.sp-mm__tab {
    flex: none;
    height: 36px;
    padding: 0 16px;
    border: 1px solid var(--stroke-grey-light);
    border-radius: var(--radius-full);
    color: var(--text-black);
    background: var(--bg-white);
    font: 500 14px/1 var(--font-base);
    cursor: pointer;
}

.sp-mm__tab:hover {
    background: var(--color-hover);
}

.sp-mm__tab.is-active,
.sp-mm__tab[aria-selected="true"] {
    border-color: var(--color-main);
    color: var(--text-white);
    background: var(--color-main);
}

.sp-mm__tab:focus-visible,
.sp-mm__close:focus-visible,
.sp-mm__link:focus-visible,
.sp-mm__heading:focus-visible,
.sp-mm__all:focus-visible {
    outline: 2px solid var(--color-main);
    outline-offset: 2px;
}

.sp-mm__panel {
    display: none;
    padding: 8px 24px 32px;
}

.sp-mm__panel.is-active {
    display: block;
}

.sp-mm__all {
    display: inline-block;
    margin: 0 0 16px;
    color: var(--color-main);
    font: 600 14px/19.6px var(--font-base);
    text-decoration: none;
}

.sp-mm__columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.sp-mm__column {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sp-mm__heading {
    color: var(--text-black);
    font: 600 14px/16.8px var(--font-base);
    text-decoration: none;
}

.sp-mm__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sp-mm__link {
    color: var(--text-dark-grey-2);
    font: 400 14px/19.6px var(--font-base);
    text-decoration: none;
}

.sp-mm__link:hover,
.sp-mm__heading:hover {
    color: var(--color-main-hover);
}

/* Э1 (T-17): низ бургер-панели - город, телефон, разделы, вход (до 1280 px) */
.sp-mm__foot {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
    padding: 16px 24px 24px;
    border-top: 1px solid var(--stroke-grey-light);
}

.sp-mm__city {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    min-height: 44px;
    padding: 0;
    border: 0;
    color: var(--text-black);
    background: transparent;
    font: 600 14px/19.6px var(--font-base);
    cursor: pointer;
}

.sp-mm__phone,
.sp-mm__top-link,
.sp-mm__login {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--text-black);
    font: 500 14px/19.6px var(--font-base);
    text-decoration: none;
}

.sp-mm__top {
    display: flex;
    flex-direction: column;
}

.sp-mm__login {
    justify-content: center;
    margin-top: 4px;
    border-radius: var(--radius-full);
    color: var(--text-white);
    background: var(--color-main);
    font-weight: 600;
}

@media (min-width: 640px) {
    .sp-mm__columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .sp-mm__foot {
        display: none;
    }

    .sp-mm {
        inset: var(--sp-header-bottom, 156px) 0 auto 0;
        height: auto;
        max-height: calc(100dvh - var(--sp-header-bottom, 156px));
        border-bottom: 1px solid var(--stroke-grey-light);
    }

    .sp-mm__bar {
        display: none;
    }

    .sp-mm__body {
        box-sizing: border-box;
        width: 100%;
        max-width: var(--container-max);
        margin: 0 auto;
    }

    .sp-mm__tabs {
        padding: 24px 0 12px;
    }

    .sp-mm__panel {
        padding: 12px 0 40px;
    }

    .sp-mm__columns {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 32px 25px;
    }
}

/* E1 MENU-r1 (замечание владельца 25.10, паспорт header-megamenu.json, узел Figma 5108:277920 «Menu_open»):
   - заголовки колонок прописными (14/16.8/600), пункты чёрные (14/19.6/400), наведение - цвет --color-main;
   - разделы - не таблетки, а пункты вертикального списка (ширина 180, высота 37, отступ 10, прописные 14/16.8/600), активный - заливка
     --color-main-xlight-blue, радиус 4 0 0 4 (N-10), справа линия --stroke-grey-light; на мобайле тот же вид в горизонтальной строке;
   - панель на компьютере: контейнер 1200, слева разделы (180), справа колонки по 204 с шагом 36, тень --elevation-menu (N-5). */
.sp-mm__tab {
    height: 37px;
    padding: 10px 12px;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--text-black);
    background: transparent;
    font: 600 14px/16.8px var(--font-base);
    text-transform: var(--heading-transform, uppercase);
    white-space: nowrap;
}

.sp-mm__tab:hover {
    color: var(--color-main);
    background: transparent;
}

.sp-mm__tab.is-active,
.sp-mm__tab[aria-selected="true"] {
    border: 0;
    color: var(--text-black);
    background: var(--color-main-xlight-blue);
}

.sp-mm__heading {
    text-transform: var(--heading-transform, uppercase);
}

.sp-mm__link {
    color: var(--text-black);
}

.sp-mm__link:hover,
.sp-mm__heading:hover,
.sp-mm__all:hover {
    color: var(--color-main);
}

.sp-mm__all {
    text-transform: var(--heading-transform, uppercase);
}

@media (min-width: 1280px) {
    .sp-mm {
        border-bottom: 0;
        box-shadow: var(--elevation-menu);
    }

    .sp-mm__body {
        display: grid;
        grid-template-columns: 180px minmax(0, 1fr);
        column-gap: 36px;
        align-items: start;
        padding: 24px 0 24px;
    }

    .sp-mm__tabs {
        grid-column: 1;
        grid-row: 1 / span 12;
        flex-direction: column;
        gap: 0;
        padding: 0;
        overflow: visible;
        border-right: 1px solid var(--stroke-grey-light);
        min-height: 360px;
    }

    .sp-mm__tab {
        width: 100%;
        padding: 10px 0 10px 10px;
        border-radius: 0;
        text-align: left;
    }

    .sp-mm__tab.is-active,
    .sp-mm__tab[aria-selected="true"] {
        border-radius: 4px 0 0 4px;
    }

    .sp-mm__panel {
        grid-column: 2;
        padding: 0 0 16px;
    }

    .sp-mm__all {
        margin: 0 0 20px;
    }

    .sp-mm__columns {
        grid-template-columns: repeat(auto-fill, 204px);
        gap: 28px 36px;
    }

    .sp-mm__column {
        gap: 8px;
    }

    .sp-mm__list {
        gap: 4px;
    }
}

/* E1 MENU-r2: мобильная панель - аккордеон разделов и пункт «Город» вверху; на компьютере справа от колонок быстрые ссылки (теги h40) и баннеры раздела
   (282 x 129, радиус 28); блок без данных не выводится. Пометка раздела (.sp-mm__note) - описание раздела из ИБ меню. */
.sp-mm__cityrow {
    display: flex;
    flex: none;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 0 24px;
    border: 0;
    border-bottom: 1px solid var(--stroke-grey-light);
    color: var(--text-black);
    background: transparent;
    font: 600 14px/19.6px var(--font-base);
    text-align: left;
    cursor: pointer;
}

.sp-mm__cityrow-name {
    flex: 1 1 auto;
}

.sp-mm__acc {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 52px;
    padding: 0 24px;
    border: 0;
    border-bottom: 1px solid var(--stroke-grey-light);
    color: var(--text-black);
    background: transparent;
    font: 600 14px/16.8px var(--font-base);
    text-transform: var(--heading-transform, uppercase);
    text-align: left;
    cursor: pointer;
}

.sp-mm__acc svg {
    flex: none;
    transition: transform .15s;
}

.sp-mm__acc[aria-expanded="true"] {
    background: var(--color-main-xlight-blue);
}

.sp-mm__acc[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.sp-mm__acc:focus-visible,
.sp-mm__cityrow:focus-visible {
    outline: 2px solid var(--color-main);
    outline-offset: -2px;
}

.sp-mm__note {
    margin: 0 0 12px;
    color: var(--text-dark-grey);
    font: 400 14px/19.6px var(--font-base);
}

.sp-mm__aside {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.sp-mm__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sp-mm__tag {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 10px 16px;
    box-sizing: border-box;
    border: 1px solid var(--stroke-grey-dark);
    border-radius: var(--radius-full);
    color: var(--text-dark-grey);
    font: 600 14px/19.6px var(--font-base);
    text-decoration: none;
    white-space: nowrap;
}

.sp-mm__tag:hover,
.sp-mm__tag:focus-visible {
    border-color: var(--color-main);
    color: var(--color-main);
}

.sp-mm__promos {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sp-mm__promo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 129px;
    max-width: 282px;
    padding: 16px 20px;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: var(--radius-xl, 28px);
    color: var(--text-black);
    background: var(--color-main-xlight-blue);
    text-decoration: none;
}

.sp-mm__promo--image {
    display: block;
    min-height: 0;
    padding: 0;
    border-radius: var(--radius-sm, 8px);
    background: none;
    line-height: 0;
}

.sp-mm__promo-full {
    display: block;
    width: 100%;
    max-width: 282px;
    height: auto;
    aspect-ratio: 282 / 129;
}

.sp-mm__promo-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.sp-mm__promo-title {
    font: 600 20px/24px var(--font-base);
}

.sp-mm__promo-sub {
    color: var(--text-dark-grey);
    font: 400 12px/16px var(--font-base);
}

.sp-mm__promo-img {
    flex: none;
    width: 96px;
    height: auto;
    max-height: 96px;
    object-fit: contain;
}

/* E1 MENU-r3: мобильный аккордеон 3 уровней по Figma Menu (6104:278351): уровень 2 - колонка со шевроном слева, уровень 3 - пункты с отступом 24; наведение/раскрытие - цвет main */
.sp-mm__sub {
    display: none;
}

@media (max-width: 1279px) {
    .sp-mm__column {
        position: relative;
        margin: 0;
        padding: 0;
        gap: 0;
    }

    .sp-mm__columns {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .sp-mm__column > .sp-mm__heading {
        padding-left: 32px;
    }

    .sp-mm__sub {
        position: absolute;
        top: 0;
        left: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 40px;
        padding: 0;
        border: 0;
        color: var(--text-black);
        background: transparent;
        cursor: pointer;
    }

    .sp-mm__sub svg {
        transition: transform .15s;
    }

    .sp-mm__sub[aria-expanded="true"] svg {
        transform: rotate(180deg);
    }

    .sp-mm__sub:focus-visible {
        outline: 2px solid var(--color-main);
        outline-offset: -2px;
    }

    .sp-mm__column > .sp-mm__heading {
        display: flex;
        align-items: center;
        min-height: 40px;
        text-transform: var(--heading-transform, uppercase);
    }

    .sp-mm__column.is-open > .sp-mm__heading,
    .sp-mm__column > .sp-mm__heading:hover {
        color: var(--color-main);
    }

    .sp-mm__column .sp-mm__list {
        display: none;
        margin: 0 0 8px;
        padding-left: 56px;
    }

    .sp-mm__column.is-open .sp-mm__list {
        display: block;
    }

    .sp-mm__column .sp-mm__link {
        display: flex;
        align-items: center;
        min-height: 36px;
        text-transform: var(--heading-transform, uppercase);
        font-size: 13px;
        font-weight: 600;
    }

    .sp-mm__column .sp-mm__link:hover,
    .sp-mm__column .sp-mm__link:focus-visible {
        color: var(--color-main);
    }

    .sp-mm__tabs {
        display: none;
    }

    /* заголовок раздела уже есть в кнопке аккордеона - внутри панели не повторяем (ссылка остаётся в разметке; на компьютере показана) */
    .sp-mm__all {
        display: none;
    }

    .sp-mm__panel {
        display: block;
        padding: 0;
    }

    .sp-mm__panel-body {
        display: none;
        padding: 12px 24px 20px;
    }

    .sp-mm__panel.is-open .sp-mm__panel-body {
        display: block;
    }
}

@media (min-width: 1280px) {
    .sp-mm__cityrow,
    .sp-mm__acc {
        display: none;
    }

    .sp-mm__panel-body {
        display: block;
    }

    .sp-mm__content {
        display: flex;
        align-items: flex-start;
        gap: 36px;
    }

    .sp-mm__columns {
        flex: 1 1 auto;
        min-width: 0;
    }

    .sp-mm__aside {
        flex: 0 0 300px;
        margin-top: 0;
    }
}

/* E1 MENU-r4 (замечание владельца 27.10; Figma Menu_open 5108:277920, кадр 1920x480: padding 24/360, разделы 180 | зазор 36 | колонки по 204 с шагом 36 + теги (до 684) | зазор 18 | 282 - баннеры и плитки 88x65):
   панель компьютера собрана по сетке: слева разделы, дальше колонки (подменю), теги/справка, справа графические блоки (баннеры раздела, логотипы, статьи блога).
   Высота панели - как в макете (432 + поля 24), подпункты групп ограничены четырьмя (остальное - по ссылке заголовка группы), на мобильном панель не меняется. */
.sp-mm__mid {
    display: block;
}

.sp-mm__main {
    display: block;
}

.sp-mm__tags {
    margin-top: 24px;
}

.sp-mm__info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 24px 0 0;
    font-style: normal;
}

.sp-mm__info-line {
    color: var(--text-black);
    font: 400 14px/19.6px var(--font-base);
    text-decoration: none;
}

a.sp-mm__info-line:hover,
a.sp-mm__info-line:focus-visible {
    color: var(--color-main);
}

.sp-mm__logos,
.sp-mm__posts {
    display: none;
}

.sp-mm__column.is-flat .sp-mm__list {
    padding-left: 32px;
}

@media (min-width: 1280px) {
    .sp-mm__tabs {
        min-height: 432px;
    }

    .sp-mm__panel {
        min-height: 432px;
        padding: 0;
    }

    .sp-mm__content {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 282px;
        gap: 18px;
        align-items: start;
    }

    .sp-mm__content:not(:has(.sp-mm__aside)) {
        grid-template-columns: minmax(0, 1fr);
    }

    .sp-mm__mid {
        display: flex;
        align-items: flex-start;
        gap: 36px;
        min-width: 0;
    }

    .sp-mm__main {
        display: flex;
        flex: none;
        flex-direction: column;
        gap: 16px;
    }

    .sp-mm__all {
        margin: 0;
        color: var(--text-black);
        font: 600 14px/16.8px var(--font-base);
    }

    .sp-mm__all:hover,
    .sp-mm__all:focus-visible {
        color: var(--color-main);
    }

    .sp-mm__all.is-dup {
        display: none;
    }

    .sp-mm__columns {
        display: block;
        flex: none;
        box-sizing: content-box;
        width: calc(var(--sp-cols, 1) * 204px + (var(--sp-cols, 1) - 1) * 36px);
        column-count: var(--sp-cols, 1);
        column-gap: 36px;
    }

    .sp-mm__columns.is-flat {
        width: 684px;
        column-count: 1;
    }

    .sp-mm__column {
        display: block;
        margin: 0 0 16px;
        break-inside: avoid;
    }

    .sp-mm__heading {
        display: block;
    }

    .sp-mm__column > .sp-mm__list {
        margin-top: 6px;
    }

    .sp-mm__column:not(.is-flat) .sp-mm__list li:nth-child(n + 5) {
        display: none;
    }

    .sp-mm__column.is-flat .sp-mm__list {
        display: block;
        padding-left: 0;
        column-count: 3;
        column-gap: 36px;
    }

    .sp-mm__column.is-flat .sp-mm__list li {
        margin: 0 0 4px;
        break-inside: avoid;
    }

    .sp-mm__tags {
        flex: 1 1 0;
        align-content: flex-start;
        min-width: 0;
        margin: 0;
    }

    .sp-mm__info {
        flex: none;
        width: 300px;
        margin: 0;
    }

    .sp-mm__aside {
        gap: 12px;
        width: 282px;
        margin: 0;
    }

    .sp-mm__promos {
        gap: 12px;
    }

    .sp-mm__posts {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .sp-mm__post {
        display: flex;
        flex-direction: column;
        gap: 6px;
        color: var(--text-black);
        text-decoration: none;
    }

    .sp-mm__post-img {
        display: block;
        width: 282px;
        height: 120px;
        object-fit: cover;
        border-radius: var(--radius-md, 12px);
    }

    .sp-mm__post-title {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font: 600 14px/19.6px var(--font-base);
    }

    .sp-mm__post-date {
        color: var(--text-dark-grey);
        font: 400 12px/16px var(--font-base);
    }

    .sp-mm__post:hover .sp-mm__post-title,
    .sp-mm__post:focus-visible .sp-mm__post-title {
        color: var(--color-main);
    }

    .sp-mm__logos {
        display: grid;
        grid-template-columns: repeat(3, 88px);
        gap: 9px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .sp-mm__logo {
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 88px;
        height: 65px;
        padding: 8px 16px;
        border: 1px solid var(--stroke-grey-normal);
        border-radius: 4px;
        background: var(--bg-white);
    }

    .sp-mm__logo:hover,
    .sp-mm__logo:focus-visible {
        border-color: var(--color-main);
    }

    .sp-mm__logo img {
        display: block;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
}

/* PERF-C5: обёртка WebP (<picture>) не участвует в раскладке - картинка встаёт как прежний <img> */
.sp-mm__pic {
    display: contents;
}

/* <source> не скрыт браузером: в flex-колонке (статьи блога) он стал бы пустым элементом и добавил бы gap */
.sp-mm__pic > source {
    display: none;
}

/* End */


/* Start:/local/templates/specialty_v2/css/blocks/footer.css?17939044075337*/
/* Э1 (T-20): подвал specialty_v2 по паспорту docs/design/blocks/footer.json. Раскладки: мобайл (до 640, кадр 320), планшет (640-1279, кадр 640),
   десктоп (от 1280, кадр 1920: корпус 1200 = --container-max, 5 колонок по 220 и зазор 25). Цвета, радиусы, шрифты - токены.
   Роль surface (подложка колонок) сама несёт отступы и зазор паспорта; на десктопе боковые отступы = (ширина - корпус) / 2, не меньше 24. */

.sp-ft__h1-wrap {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
}

.sp-ft__h1 {
    margin: 0;
    font: var(--font-h2);
    color: var(--text-black);
}

.sp-ft {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    color: var(--text-black);
    font-family: var(--font-base);
}

.sp-ft__surface {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding: 36px 24px 48px;
    border-top: 1px solid var(--stroke-grey-light);
    background: var(--bg-white);
}

.sp-ft__group {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sp-ft__column {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-ft__heading {
    margin: 0;
    font: 600 14px/16.8px var(--font-base);
    color: var(--text-black);
}

.sp-ft__links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sp-ft__link {
    display: block;
    min-height: 20px;
    color: var(--text-black);
    font: 400 14px/19.6px var(--font-base);
    text-decoration: none;
}

.sp-ft__link:hover {
    color: var(--color-main-hover);
}

.sp-ft__link:focus-visible,
.sp-ft__contact-link:focus-visible,
.sp-ft__social:focus-visible,
.sp-ft__logo:focus-visible {
    outline: 2px solid var(--color-main);
    outline-offset: 2px;
}

.sp-ft__contacts {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sp-ft__logo {
    display: flex;
    gap: 10px;
    width: 176px;
    height: 43px;
}

.sp-ft__logo-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sp-ft__contact {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sp-ft__contact-link {
    color: var(--text-black);
    font: 600 12px/14.4px var(--font-base);
    text-decoration: none;
}

.sp-ft__caption {
    color: var(--text-dark-grey);
    font: 400 12px/15.6px var(--font-base);
}

.sp-ft__socials {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sp-ft__social {
    box-sizing: border-box;
    display: inline-flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 8px;
    border-radius: var(--radius-sm);
    color: var(--text-white);
    background: var(--color-main);
}

.sp-ft__social:hover {
    background: var(--color-main-hover);
}

/* Глифы Telegram и WhatsApp - заливка, а не контур: общий .sp-icon (template_styles.css) сбрасывает fill в none и перебивает атрибут fill="currentColor"; спрайт ВКонтакте (<use>) не затрагивается */
.sp-ft__social > svg.sp-icon[fill="currentColor"] {
    fill: currentColor;
}

.sp-ft__bottom {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 16px 32px 36px 24px;
    background: var(--bg-light-grey);
}

.sp-ft__copyright,
.sp-ft__note {
    margin: 0;
    color: var(--text-black);
    font: 400 12px/15.6px var(--font-base);
}

/* ---------- планшет (кадр 640) ---------- */
@media (min-width: 640px) {
    .sp-ft__surface {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 276px));
        justify-content: space-between;
        gap: 48px;
        padding: 36px 32px 48px;
    }

    .sp-ft__contacts {
        grid-column: 1 / -1;
    }

    .sp-ft__logo {
        width: 180px;
        height: 44.46px;
    }

    .sp-ft__social {
        width: 32px;
        height: 32px;
    }

    .sp-ft__bottom {
        flex-direction: row;
        justify-content: space-between;
        padding: 16px 32px 36px;
    }

    .sp-ft__contact-link {
        font: 600 14px/16.8px var(--font-base);
    }

    .sp-ft__caption {
        font: 400 14px/19.6px var(--font-base);
    }

    .sp-ft__copyright,
    .sp-ft__note {
        font: 400 14px/19.6px var(--font-base);
    }
}

/* ---------- десктоп (кадр 1920, корпус 1200) ---------- */
@media (min-width: 1280px) {
    .sp-ft__surface {
        grid-template-columns: repeat(5, 220px);
        gap: 25px;
        padding: 36px max(24px, calc((100% - var(--container-max)) / 2)) 48px;
        border-top: 0;
    }

    .sp-ft__contacts {
        grid-column: auto;
    }

    .sp-ft__bottom {
        padding: 16px max(24px, calc((100% - var(--container-max)) / 2)) 36px;
    }

}

@media (min-width: 640px) and (max-width: 1279px) {
    .sp-ft__note {
        max-width: 276px;
    }
}

/* кадр: заголовки колонок заглавными */
.sp-ft__heading {
    text-transform: uppercase;
}

/* End */


/* Start:/local/templates/specialty_v2/css/blocks/mobile-bottom-nav.css?17927699592799*/
/* Э0 (T-16): эталон «нижнее меню» specialty_v2 по паспорту docs/design/blocks/mobile-bottom-nav.json.
   Мобайл (до 640 px, кадр 320): пункты 40x40, промежуток 16; планшет (640-1279, кадр 640): пункт - иконка 32x16 и подпись 10/10, промежутки по ширине.
   От 1280 px блок скрыт. Активный пункт - --text-black (решение владельца 23.10), остальные - --text-dark-grey. */
.sp-bn {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    height: 48px;
    padding: 4px 28px;
    border-radius: var(--radius-0);
    color: var(--text-black);
    background: var(--bg-white);
}

.sp-bn--fixed {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-bottom-nav);
    padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--stroke-grey-light);
}

.sp-bn__item {
    box-sizing: border-box;
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: var(--radius-0);
    color: var(--text-dark-grey);
    font: var(--font-tab-sm);
    text-decoration: none;
}

.sp-bn__item.is-active {
    color: var(--text-black);
}

.sp-bn__item:is(:hover, .is-hover) {
    color: var(--color-main-hover);
}

.sp-bn__item:focus-visible {
    outline: 2px solid var(--stroke-focused);
    outline-offset: 0;
    border-radius: var(--radius-sm);
}

.sp-bn__item[aria-disabled="true"] {
    color: var(--stroke-grey-dark);
    pointer-events: none;
}

.sp-bn__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.sp-bn__label {
    white-space: nowrap;
}

.sp-bn__counter {
    position: absolute;
    top: -4px;
    right: -10px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 2px 6px;
    border-radius: var(--radius-full);
    color: var(--text-white);
    background: var(--color-main);
    font: var(--font-btn-xs);
}

@media (min-width: 640px) {
    .sp-bn {
        gap: 0;
        padding: 8px 32px 10px;
    }

    .sp-bn__item {
        gap: 4px;
        width: auto;
        height: 30px;
        font: var(--font-tab-md);
    }

    .sp-bn__icon {
        width: 32px;
        height: 16px;
    }

    .sp-bn__icon .sp-icon {
        width: 16px;
        height: 16px;
    }
}

@media (min-width: 1280px) {
    .sp-bn {
        display: none;
    }
}

/* End */


/* Start:/local/js/sp/fab/fab.css?179421450010998*/
/* FAB (27.10): плавающая кнопка «Связаться с нами» и меню. Цвета, радиусы, шрифты, отступы - токены specialty_v2 (закрытая палитра: #6667AB, #F4F4FF). Анимации - только transform/opacity. */
:root {
    /* цвет кнопки: по умолчанию как у виджета Envybox (#F44336, красный; решение владельца 27.10), меняется настройкой «Кнопка связи» (inline-стиль .sp-fab) */
    --sp-fab-color: #f44336;
}

/* body, а не :root: на оформлении --sp-bn-h обнуляется классом .sp-root--order именно на body */
body {
    /* нижний отступ кнопки: над нижним меню sp-bn (мобайл/планшет), над плашкой cookie (--sp-cookie-top выставляет include/cookie_popup.php), 16 px от края */
    --sp-fab-bottom: calc(var(--sp-cookie-top, calc(var(--sp-bn-h, 0px) + var(--sp-bar-h, 0px))) + var(--space-4) + env(safe-area-inset-bottom, 0px));
    --sp-fab-right: var(--space-4);
}

@media (min-width: 640px) {
    body {
        --sp-fab-bottom: calc(var(--sp-cookie-top, calc(var(--sp-bn-h, 0px) + var(--sp-bar-h, 0px))) + var(--space-6) + env(safe-area-inset-bottom, 0px));
        --sp-fab-right: var(--space-6);
    }
}

/* 29.10: стек тостов (core.css) стоит в том же углу, что и кнопка, - поднимаем его над кнопкой; диалоговый стек не трогаем */
body:has(.sp-fab) .sp-toast-stack:not(.sp-toast-stack--dialog) {
    bottom: calc(var(--sp-fab-bottom) + var(--space-14) + var(--space-3));
}

.sp-fab {
    position: fixed;
    right: var(--sp-fab-right);
    bottom: var(--sp-fab-bottom);
    z-index: 240; /* выше контента и липких панелей (200), ниже шапки (300) и плашки cookie (250 - она по краю, кнопка поднята над ней) */
    width: var(--space-14);
    height: var(--space-14);
    animation: sp-fab-in 360ms ease-out 600ms both;
}

/* аудит PROD 07.11: под кнопкой элемент управления страницы - кнопка уступает (прозрачна, нажатие проходит насквозь); ставит fab.js watchCover.
   Прозрачность - у .sp-fab__btn: у самой .sp-fab анимация появления с fill both держит opacity 1 */
.sp-fab.sp-fab--yield {
    pointer-events: none;
}

.sp-fab.sp-fab--yield .sp-fab__btn {
    opacity: 0;
}

/* фокус с клавиатуры всегда видим (WCAG 2.4.7), даже если класс ещё не снят */
.sp-fab.sp-fab--yield:focus-within {
    pointer-events: auto;
}

.sp-fab.sp-fab--yield:focus-within .sp-fab__btn {
    opacity: 1;
}

.sp-fab__btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    color: var(--text-white);
    background: var(--sp-fab-color);
    box-shadow: var(--elevation-3);
    cursor: pointer;
    transition: background-color var(--motion-fast, 160ms) ease, transform var(--motion-fast, 160ms) ease, opacity var(--motion-fast, 160ms) ease;
    -webkit-tap-highlight-color: transparent;
}

.sp-fab__btn:hover {
    background: color-mix(in srgb, var(--sp-fab-color) 88%, #000);
}

.sp-fab__btn:active {
    background: color-mix(in srgb, var(--sp-fab-color) 76%, #000);
    transform: scale(.96);
}

.sp-fab__btn:focus-visible {
    outline: 2px solid var(--stroke-focused);
    outline-offset: 3px;
}

/* кольцо-пульсация: 3 цикла раз в 8 с после появления (через 2 с), затем пауза насовсем; не влияет на раскладку (transform/opacity, pointer-events: none) */
.sp-fab__btn::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid var(--sp-fab-color);
    border-radius: var(--radius-full);
    opacity: 0;
    pointer-events: none;
    animation: sp-fab-pulse 8s ease-out 2s 3;
}

.sp-fab__btn .sp-icon {
    width: 28px;
    height: 28px;
}

@keyframes sp-fab-in {
    from {
        opacity: 0;
        transform: scale(.8);
    }

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

@keyframes sp-fab-pulse {
    0% {
        opacity: .5;
        transform: scale(1);
    }

    20%,
    100% {
        opacity: 0;
        transform: scale(1.7);
    }
}

/* ---- меню: <dialog> ---- */
.sp-modal.sp-fab-menu {
    padding: var(--space-2);
}

.sp-fab-menu__form {
    padding: var(--space-2) var(--space-3) var(--space-1);
}

.sp-fab-menu__loading {
    margin: 0;
    padding: var(--space-6) 0;
    color: var(--text-dark-grey);
    font: var(--font-body-2);
}

.sp-fab-menu__sep {
    margin: var(--space-2) 0 var(--space-1);
    padding: var(--space-3) var(--space-3) 0;
    border-top: 1px solid var(--stroke-grey-normal);
    color: var(--text-dark-grey);
    font: var(--font-caption);
}

.sp-fab-menu__close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--text-black);
    background: transparent;
    cursor: pointer;
}

.sp-fab-menu__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.sp-fab-menu__row {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
}

.sp-fab-menu__item {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: var(--space-3);
    box-sizing: border-box;
    min-width: 0;
    min-height: var(--space-14);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--text-black);
    text-decoration: none;
    transition: background-color var(--motion-fast, 160ms) ease;
}

.sp-fab-menu__item:hover {
    background: var(--color-hover);
}

.sp-fab-menu__item:active {
    background: var(--color-click);
}

.sp-fab-menu__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: var(--space-10);
    height: var(--space-10);
    border-radius: var(--radius-full);
    color: var(--color-main);
    background: var(--color-main-xlight-blue);
}

.sp-fab-menu__label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    font: var(--font-btn-md);
}

.sp-fab-menu__sub {
    color: var(--text-dark-grey);
    font: var(--font-caption);
}

.sp-fab-menu__copy {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--color-main);
    background: transparent;
    cursor: pointer;
}

.sp-fab-menu__copy:hover {
    background: var(--color-hover);
}

.sp-fab-menu__status {
    min-height: 0;
    margin: 0;
    padding: 0 var(--space-4);
    color: var(--text-dark-grey);
    font: var(--font-caption);
}

.sp-fab-menu__status:not(:empty) {
    padding-top: var(--space-2);
    padding-bottom: var(--space-1);
}

.sp-fab-menu__item:focus-visible,
.sp-fab-menu__copy:focus-visible,
.sp-fab-menu__close:focus-visible {
    outline: 2px solid var(--stroke-focused);
    outline-offset: -2px;
}

/* кнопка копирования номера - только там, где есть мышь (на телефоне номер набирается ссылкой tel:) */
@media (hover: hover) and (pointer: fine) {
    .sp-fab-menu__copy {
        display: inline-flex;
    }
}

/* десктоп/планшет: раскрытие вверх над кнопкой, без подложки; заголовок - только для скринридеров */
@media (min-width: 640px) {
    .sp-modal.sp-fab-menu {
        inset: auto var(--sp-fab-right) calc(var(--sp-fab-bottom) + var(--space-14) + var(--space-3)) auto;
        width: min(360px, calc(100vw - 2 * var(--space-4)));
        max-height: calc(100dvh - var(--sp-fab-bottom) - 96px);
        margin: 0;
        transform-origin: right bottom;
    }

    .sp-fab-menu::backdrop {
        background: transparent;
    }

    .sp-fab-menu__close {
        display: none;
    }

    .sp-modal.sp-fab-menu[open] {
        animation: sp-fab-menu-in 180ms ease-out;
    }
}

/* мобайл: нижняя шторка (позиционирование и подложка - .sp-modal до 639 px) */
@media (max-width: 639px) {
    .sp-modal.sp-fab-menu {
        padding: var(--space-3) var(--space-2) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    }

    .sp-modal.sp-fab-menu::before {
        content: "";
        display: block;
        width: var(--space-10);
        height: 4px;
        margin: 0 auto var(--space-1);
        border-radius: var(--radius-full);
        background: var(--stroke-grey-dark);
    }

    .sp-modal.sp-fab-menu[open] {
        animation: sp-fab-sheet-in 240ms cubic-bezier(.2, .8, .2, 1);
    }
}

@keyframes sp-fab-menu-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.98);
    }

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

@keyframes sp-fab-sheet-in {
    from {
        transform: translateY(100%);
    }

    to {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sp-fab,
    .sp-fab__btn::after,
    .sp-modal.sp-fab-menu[open] {
        animation: none;
    }

    .sp-fab__btn {
        transition: none;
    }
}

@media print {
    .sp-fab {
        display: none;
    }
}

/* оформление заказа: на экране уже одна колонка (до 960 px) кнопка «Оформить» занимает ширину и не должна перекрываться - кнопку связи скрываем (на десктопе она справа от панели «Ваш заказ») */
@media (max-width: 959px) {
    .sp-root--order .sp-fab {
        display: none;
    }
}

/* форма в шторке компактнее отдельного окна: заголовок меньше, пояснение скрыто, день и время - друг под другом (узкие поля не обрезают текст) */
.sp-fab-menu__form .sp-form__title {
    margin: 0 44px 0 0;
    font: var(--font-h2);
}

.sp-fab-menu__form .sp-form__lead {
    display: none;
}

.sp-fab-menu__form .sp-calltime__later {
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .sp-fab-menu__form .sp-form__title {
        margin-right: 0;
    }
}

/* End */


/* Start:/local/templates/specialty_v2/css/blocks/modal-city-select.css?17929703673073*/
/* Э1 (T-26): окно выбора города. Паспорт modal-city-select - pending_capture: числа взяты у оболочки modal-login/modal-added-to-cart и атомов,
   цвета, радиусы, шрифты - токены specialty_v2. */
.sp-city {
    padding: 0;
    width: min(420px, calc(100vw - 32px));
}

.sp-city__surface {
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    max-height: calc(100dvh - 32px);
}

.sp-city__close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--text-black);
    background: transparent;
    cursor: pointer;
}

.sp-city__title {
    margin: 0 44px 0 0;
    font: var(--font-h2);
    text-transform: uppercase;
}

.sp-city__input {
    box-sizing: border-box;
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border: 1px solid var(--stroke-grey-normal);
    border-radius: var(--radius-full);
    color: var(--text-black);
    background: var(--bg-white);
    font: 400 14px/18.2px var(--font-base);
}

.sp-city__input:focus {
    border-color: var(--stroke-focused);
    outline: 0;
}

.sp-city__list {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
    overscroll-behavior: contain;
}

.sp-city__item {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 12px 8px;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--text-black);
    background: transparent;
    font: 400 14px/19.6px var(--font-base);
    text-align: left;
    cursor: pointer;
}

.sp-city__item:hover,
.sp-city__item:focus-visible {
    background: var(--color-hover);
    outline: 0;
}

.sp-city__item[aria-selected="true"] {
    color: var(--color-main);
    font-weight: 600;
}

.sp-city__message {
    margin: 0;
    color: var(--text-dark-grey);
    font: 400 14px/19.6px var(--font-base);
}

/* Меню-бургер (<1280): выбор города - полноэкранный слой, прижатый к верху, поверх меню (раньше окно 420px центровалось над меню). */
@media (max-width: 1279px) {
    .sp-city {
        width: 100vw;
        max-width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
        border-radius: 0;
    }

    .sp-city__surface {
        height: 100%;
        max-height: none;
        padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    }
}

/* Смена города идёт (запрос + перезагрузка страницы): список приглушён и не нажимается, под полем - «Меняем город…». */
.sp-city[aria-busy="true"] .sp-city__list,
.sp-city[aria-busy="true"] .sp-city__search {
    opacity: 0.5;
    pointer-events: none;
}

/* End */


/* Start:/local/templates/specialty_v2/css/blocks/modal-added-to-cart.css?17932461874661*/
/* Э0 (T-17): окно «Добавлено в корзину» specialty_v2 (составной паспорт modal-added-to-cart.json; поверх базового .sp-modal из sp.modal).
   Кадры: мобайл (до 640 px, кадр 320: окно 100vw x 650), планшет (640-1279, кадр 640: окно 100vw x 450, белая «поверхность» 638 по центру),
   десктоп (от 1280, кадр 385: окно 385 с отступами 24/24/48/48, поверхность без собственного бокса). Цвета, радиусы, шрифты - токены. */

/* ---------- мобайл ---------- */
.sp-added {
    box-sizing: border-box;
    width: 100vw;
    max-width: 100vw;
    height: 650px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-0);
    background: transparent;
    box-shadow: none;
}

.sp-added.is-static {
    animation: none;
    position: relative;
    inset: auto;
    display: block;
    margin: 0;
}

.sp-added__surface {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    min-height: 100%;
    padding: 24px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    color: var(--text-black);
    background: var(--bg-white);
}

.sp-added__close {
    position: absolute;
    top: 24px;
    right: 24px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-0);
    color: var(--text-dark-grey);
    background: transparent;
    cursor: pointer;
}

.sp-added__close:focus-visible {
    outline: 2px solid var(--stroke-focused);
    outline-offset: 2px;
}

.sp-added__title {
    margin: 0;
    padding-right: 32px;
    color: var(--text-black);
    font: 600 16px/19.2px var(--font-base);
    text-transform: uppercase;
    margin-bottom: 24px;
}

.sp-added__item {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.sp-added__photo {
    display: block;
    flex: none;
    width: 80px;
    height: 80px;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--bg-light-grey);
}

.sp-added__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

.sp-added__name {
    color: var(--text-black);
    font: 600 14px/16.8px var(--font-base);
    text-decoration: none;
}

.sp-added__price {
    box-sizing: border-box;
    width: 120px;
    height: 24px;
    color: var(--color-pink-light);
    font: 600 20px/24px var(--font-base);
}

.sp-added__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

/* ---------- сроки доставки в окне (sp.basket_notify): список с маркерами ---------- */
.sp-added__delivery {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    color: var(--text-black);
    font: 400 14px/20px var(--font-base);
}

.sp-added__delivery-title {
    font: 600 14px/20px var(--font-base);
}

.sp-added__delivery-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sp-added__delivery-item {
    position: relative;
    padding-left: 16px;
}

.sp-added__delivery-item::before {
    content: '';
    position: absolute;
    top: 7px;
    left: 2px;
    width: 6px;
    height: 6px;
    background: var(--color-main);
    border-radius: var(--radius-full);
}

.sp-added__delivery-list .sp-link {
    margin-left: 4px;
}

/* ---------- планшет ---------- */
@media (min-width: 640px) {
    .sp-added {
        height: 450px;
    }

    .sp-added__surface {
        width: min(638px, 100%);
        height: 450px;
        margin: 0 auto;
        padding: 24px 32px;
        border-radius: var(--radius-sm);
    }

    .sp-added__close {
        right: 32px;
    }

    .sp-added__title {
        font: 600 20px/24px var(--font-base);
    }
}

/* ---------- десктоп ---------- */
@media (min-width: 1280px) {
    .sp-added {
        width: 385px;
        height: fit-content;
        padding: 24px 24px 48px 48px;
        border-radius: var(--radius-sm);
        background: var(--bg-white);
    }

    .sp-added__surface {
        display: contents;
    }

    .sp-added__close {
        top: 24px;
        right: 24px;
    }

    .sp-added__title {
        font: 600 22px/30.8px var(--font-base);
    }

}

/* End */


/* Start:/local/components/specialty/auth.sms/templates/.default/style.css?1792665690483*/
/* P-292-L: индикатор ожидания окна входа (показывается, если окно не открылось за 3 с); остальные стили - расширение sp.auth_sms */
.sp-auth-sms-loading {
    position: fixed;
    left: 50%;
    bottom: 96px;
    z-index: 3000;
    transform: translateX(-50%);
    padding: 10px 18px;
    font-size: 14px;
    line-height: 20px;
    color: #fff;
    background: #6667AB;
    border-radius: 24px;
}

/* End */


/* Start:/local/templates/specialty_v2/template_styles.css?17942145003111*/
/* Э0 (T-11): стили шаблона specialty_v2. Правило: только классы с префиксом sp-, без селекторов по тегам и id
   (исключение - сброс на корневом классе .sp-root и tokens.css). Цвета, радиусы, отступы - только var(--...) из tokens.css. */

/* box-sizing: border-box задаётся явно в CSS каждого блока (универсальный селектор .sp-root * запрещён lint-sp: правило «без тегов и id»). */
.sp-root {
    margin: 0;
    background: var(--bg-white);
    color: var(--text-black);
    font: var(--font-body-2);
    font-family: var(--font-base);
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
}

.sp-main {
    min-height: 100vh;
    min-height: 100dvh;
}

.sp-icon {
    display: inline-block;
    flex: none;
    vertical-align: middle;
    fill: none;
    pointer-events: none;
}

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

/* аудит PROD 07.11, доступность: ссылка «Перейти к содержимому» (header.php) - за краем экрана, при фокусе с клавиатуры появляется в левом верхнем углу над шапкой */
.sp-skip {
    position: fixed;
    top: var(--space-2);
    left: var(--space-2);
    z-index: calc(var(--z-overlay) + 1); /* над шапкой, нижним меню и подложками окон: ссылка появляется первой при Tab */
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    color: var(--text-white);
    background: var(--color-main);
    font: var(--font-btn-md);
    text-decoration: none;
    transform: translateY(-200%);
}

.sp-skip:focus {
    outline: 2px solid var(--stroke-focused);
    outline-offset: 2px;
    transform: none;
}

/* аудит PROD 07.11 (UI-M6): таблица в тексте страниц из ИБ (cookie на /personal-data/) - класс вместо инлайн-стилей у каждой ячейки.
   На узком экране таблица прокручивается вбок внутри себя, страница шире окна не становится */
.sp-table {
    width: 100%;
    border-collapse: collapse;
    font: var(--font-body-2);
}

.sp-table th,
.sp-table td {
    padding: var(--space-2) var(--space-2);
    border: 1px solid var(--stroke-grey-normal);
    text-align: left;
    vertical-align: top;
}

.sp-table th {
    background: var(--color-main-xlight-blue);
    font-weight: var(--fw-semibold);
}

@media (max-width: 639px) {
    .sp-table {
        display: block;
        overflow-x: auto;
    }
}

.sp-main:focus {
    outline: none; /* фокус после перехода по .sp-skip - на области, а не рамкой на всю страницу */
}

/* End */


/* Start:/local/assets/legacy/styles.css?17941333976190*/

.pagination {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 0;
}

.pagination__list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pagination__list .pagination__item {
    margin: 0;
}

.pagination__link {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 24px;
    min-width: 24px;
    padding-top: 2px;
    font-size: 16px;
    line-height: 20px;
    text-decoration: none;
    color: inherit;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0);
}

.pagination__link.active {
    border-color: var(--main-blue);
    color: var(--main-blue);
}

.pagination__link-prev,
.pagination__link-next {
    display: block;
    width: 24px;
    height: 24px;
}

.pagination__link-prev svg,
.pagination__link-next svg {
    stroke: var(--text-black);
}

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

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

.pagination__item--num-link, .pagination__item--current-new {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.pagination__item--current-new {
    background-color: var(--btn-violet-default);
    color: var(--btn-white) !important;
}

.pagination__item--current-new:hover {
    background-color: var(--btn-violet-hover);
    color: var(--btn-white);
    text-decoration: none;
}

.pagination {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 8px;
}

.pagination__item {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    color: #7c7e82;
    margin-right: 10px;
}

.pagination__item span {
    pointer-events: none;
}

.pagination__item--num-link, .pagination__item--current {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.pagination__item--current {
    background-color: #25262a;
    color: white;
}

.pagination__item--prev {
    margin-right: 20px;
}

.pagination__item--next {
    margin-left: 10px;
}

.product-card__nds {
    font-size: 12px;
    color: gray;
    margin-top: 2px;
}

.product-card__nds--top {
    margin-top: -8px;
    margin-bottom: 8px;
}

.city-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.city-modal.open {
    display: block;
}

.city-modal__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
}

.city-modal__dialog {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 400px;
    max-height: 80vh;
    margin: 10vh auto 0;
    padding: 20px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
}

.city-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    margin-bottom: 16px;
}

.city-modal__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.city-modal__title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-black);
}

.city-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-black);
}

.city-modal__search {
    flex: 0 0 auto;
    width: 100%;
    padding: 13px 0 13px 15px;
    margin-bottom: 12px;
    font-size: 14px;
    background-color: #fff;
    border: 1px solid var(--stroke-gray-light);
    border-radius: 50px;
    outline: none;
    transition: border-color .2s ease;
}

.city-modal__search::placeholder {
    font-size: 14px;
    color: #7c7e82;
}

.city-modal__search:hover,
.city-modal__search:focus {
    border-color: var(--main-blue);
}

.city-modal__list-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.city-modal__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.city-modal__item {
    border-bottom: 1px solid #f0f0f0;
}

.city-modal__item--message {
    padding: 10px 4px;
    color: #7c7e82;
}

.city-modal__link {
    display: block;
    padding: 10px 4px;
    color: inherit;
    text-decoration: none;
}

.city-modal__link:hover {
    color: var(--main-blue);
    text-decoration: none;
}

body.city-modal-open {
    overflow: hidden;
}


/* P-192 Акции: акционная цена — розовый цен палитры (--second-pink-light #FF7E7E), розница зачёркнута.
   В main.css цвет ins у .head-order__price задан только для >=1280px — дублируем на все ширины. */
.head-order__price ins {
    text-decoration: none;
    font-weight: 600;
    color: var(--second-pink-light);
}

.head-order__price del {
    margin-left: 8px;
    color: var(--text-dark-gray);
}

.product-option__value--promo {
    color: var(--second-pink-light);
}

/* Фильтр «Акции» в умном фильтре */
.catalog-filter__item--promo .checkbox-field__label {
    color: var(--second-pink-light);
    font-weight: 600;
}

/* hotfix 2026-10-10: атрибут hidden у меток (скидка -0%) перекрывался display у .product-label */
.product-label[hidden], [hidden].js-offer-discount { display: none !important; }

/* Метки товара на фото детальной (решение владельца 02.11, ProductLabels): не больше 2 видимых - скрытый span скидки (js-offer-discount) не считается; «90+» - знак в кружке */
.goods-slider__slider-labels { align-items: center; }
.goods-slider__slider-labels > .product-label:not([hidden]) ~ .product-label:not([hidden]) ~ .product-label { display: none !important; }
.product-label--score { justify-content: center; width: 26px; height: 26px; padding: 0; border-radius: var(--radius-full, 999px); letter-spacing: -.02em; }

/* End */


/* Start:/local/assets/legacy/template_styles.css?17941333977326*/
.loader-wrap {
    position: fixed;
    width: 100%;
    min-width: 100%;
    height: 100%;
    min-height: 100%;
    top: 0;
    left: 0;
    z-index: 10000 !important;
    background-color: rgba(0, 0, 0, 0.35);
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader {
    width: 48px;
    height: 48px;
    border: 5px solid #fff;
    border-bottom-color: var(--btn-violet-hover);
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.fav_btn.active svg path {
    fill: currentColor;

}

.icon-wrapper {
    right: 98px;
}

@media(max-width: 576px) {
    .icon-wrapper {
        right: 50px;
    }
}

/* P-292 M-12: на телефоне (до 640 px) показывается только активная кнопка вида списка, и она ведёт на противоположный вид
   (1 колонка <-> 2 колонки). Иконка должна показывать результат нажатия, поэтому в этом диапазоне иконки поменяны местами:
   кнопка «в 2 колонки» (value=list) - иконка плиток, кнопка «в 1 колонку» (value=plate) - иконка строк. Значения view не меняются.
   Подписи: два span (телефон / компьютер), показ по ширине; визуально скрыты, нужны скринридеру. Файл версионируется ядром (?mtime). */
.view-btn {
    position: relative;
}

.view-btn .view-btn__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.view-btn .view-btn__label--m {
    display: block;
}

.view-btn .view-btn__label--d {
    display: none;
}

@media (max-width: 639px) {
    .view-btn--list:before {
        background-image: url(/local/assets/legacy/images/icons/icon-tile.svg);
    }

    .view-btn--tile:before {
        background-image: url(/local/assets/legacy/images/icons/icon-row.svg);
    }
}

@media (min-width: 640px) {
    .view-btn .view-btn__label--m {
        display: none;
    }

    .view-btn .view-btn__label--d {
        display: block;
    }
}

/* P-292 M-02: до 1279 px вместо старой нижней панели .header__controls показывается единое нижнее меню .sp-bn
   (компонент bitrix:menu, шаблон mobile_bottom). .header__controls остаётся в DOM: от 1280 px это иконки в шапке,
   а его счётчики .bascounter/.favcounter обновляют скрипты каталога - нижнее меню их зеркалит. */
@media (max-width: 1279px) {
    .header__controls {
        display: none;
    }
}

/* P-292 (замечание владельца): виджет звонка Envybox до 1279 px - пульсирующие кольца (.cbk-phone-circle, ...second_circle,
   ...third_circle) выходят за кнопку и перехватывали нажатия соседних элементов (значок «Фильтры», кнопки вида). Они декоративные:
   pointer-events:none только у колец; видимый круг (.cbk-phone-bgr) и трубка нажимаемы целиком. Скрипт Envybox не правится. */
@media (max-width: 1279px) {
    .cbk-phone .cbk-phone-circle,
    .cbk-phone .cbk-phone-second_circle,
    .cbk-phone .cbk-phone-third_circle {
        pointer-events: none !important;
    }
}

/* P-292: на узком телефоне (320 px) шапка шире экрана на 36 px: поле поиска не сжималось (min-content) и выталкивало кнопку каталога.
   Поле может сужаться (min-width:0), промежутки меньше. Проверено 320/360/375/390 px. */
@media (max-width: 639px) {
    .header__main {
        gap: 10px;
    }

    .header__search,
    .header__search .smartsearch-title__wrap,
    .header__search .smartsearch-title__input-conteiner {
        min-width: 0;
    }

    .header__search .smartsearch-title__input {
        width: 100%;
        min-width: 0;
    }
}

/* P-292-H: шапка specialty_new по Figma («Header - Адаптив и все элементы», 5930:370213): поле поиска - белая таблетка с тонкой серой
   рамкой, лупа справа внутри, плейсхолдер «Я ищу...» целиком; под шапкой - лента быстрых ссылок (меню fast_links). */
.header {
    padding-bottom: 2px;
}

.header__search .smartsearch-title__input-conteiner {
    position: relative;
}

.header__search .smartsearch-title__input-conteiner:before {
    display: none !important;
    content: none !important;
}

.header__search .smartsearch-title__wrap .smartsearch-title__input {
    box-sizing: border-box;
    width: 100%;
    height: 48px;
    padding: 0 52px 0 20px;
    font-size: 14px;
    line-height: 20px;
    color: #212121;
    background: #fff;
    border: 1px solid #ECECEC;
    border-radius: 50px;
    text-overflow: ellipsis;
}

.header__search .smartsearch-title__wrap .smartsearch-title__input::placeholder {
    color: #B8B3B3;
    opacity: 1;
}

.header__search .smartsearch-title__wrap .smartsearch-title__input:focus,
.header__search .smartsearch-title__wrap .smartsearch-title__input:hover {
    border-color: #6667AB;
    background: #fff;
}

.header__search .search-form__search-btn {
    position: absolute;
    top: 50%;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 50%;
    transform: translateY(-50%);
}

.header__search .search-form__search-btn svg {
    width: 24px;
    height: 24px;
}

.header__search .search-form__search-btn svg path {
    stroke: #7F7F84;
}

.header__search .icon-wrapper {
    right: 48px;
}

.header__bottom {
    padding-top: 4px;
}

.header__bottom .sp-fast__list {
    margin-left: calc(var(--gap-half) * -1);
    margin-right: calc(var(--gap-half) * -1);
    padding: 0 var(--gap-half);
}

@media (max-width: 639px) {
    .header__search .smartsearch-title__wrap .smartsearch-title__input {
        height: 40px;
        padding-left: 16px;
    }

    .header__search .search-form__search-btn {
        right: 4px;
        width: 32px;
        height: 32px;
    }

    .header__search .icon-wrapper {
        right: 40px;
    }
}

@media (min-width: 1280px) {
    /* десктоп: лупа - фиолетовый круг справа, как в Figma */
    .header__search .search-form__search-btn {
        right: 4px;
        width: 40px;
        height: 40px;
        background: #6667AB;
    }

    .header__search .search-form__search-btn svg path {
        stroke: #fff;
    }

    .header__bottom {
        padding-top: 8px;
    }

    .header__bottom .sp-fast__list {
        margin: 0;
        padding: 0;
    }
}

/* End */
/* /local/templates/specialty_v2/fonts.css?17927699592307 */
/* /local/templates/specialty_v2/tokens.css?179276995910969 */
/* /local/js/sp/core/core.css?17935256561801 */
/* /local/js/sp/modal/modal.css?17927699591502 */
/* /local/js/sp/cart_toast/cart_toast.css?17935256563797 */
/* /local/templates/specialty_v2/css/shell.css?17929581926942 */
/* /local/templates/specialty_v2/css/legacy-fix.css?17941333974760 */
/* /local/templates/.default/components/sotbit/search.title/sp_search/style.css?17927699596359 */
/* /local/templates/specialty_v2/css/blocks/header.css?179421450010903 */
/* /local/components/swebs/main_links/templates/sp_megamenu/style.css?179442442020690 */
/* /local/templates/specialty_v2/css/blocks/footer.css?17939044075337 */
/* /local/templates/specialty_v2/css/blocks/mobile-bottom-nav.css?17927699592799 */
/* /local/js/sp/fab/fab.css?179421450010998 */
/* /local/templates/specialty_v2/css/blocks/modal-city-select.css?17929703673073 */
/* /local/templates/specialty_v2/css/blocks/modal-added-to-cart.css?17932461874661 */
/* /local/components/specialty/auth.sms/templates/.default/style.css?1792665690483 */
/* /local/templates/specialty_v2/template_styles.css?17942145003111 */
/* /local/assets/legacy/styles.css?17941333976190 */
/* /local/assets/legacy/template_styles.css?17941333977326 */