/* Точечные правки поверх CSS Vesla (public/vesla/vesla.css) — только то, что нужно нашему стеку.
 *
 * На витрине одновременно загружен app.css (Tailwind preflight + базовая типографика админки в @layer base).
 * Vesla рассчитана на чистый Meyer-reset, поэтому возвращаем то, что ломает preflight/база админки.
 * Селекторы обёрнуты в :where() — нулевая специфичность, любое правило Vesla с классом всё равно сильнее. */

/* Шрифт и цвет у Vesla задаются на html (16px/18px f1, #000) и наследуются; база админки ставит свои на body, заголовки и абзацы. */
:where(.html--vesla) body {
    font: inherit;
    color: var(--common-color, #000);
    background: transparent;
}
:where(.html--vesla) :where(h1, h2, h3, h4, h5, h6, p) {
    color: inherit;
    letter-spacing: normal;
}

/* Preflight делает медиа блочными (display:block; vertical-align:middle; max-width:100%) — у Vesla они строчные. */
:where(.html--vesla) :where(img, svg, video, canvas, audio, iframe, embed, object) {
    display: inline;
    vertical-align: baseline;
    max-width: none;
}

/* База админки красит все рамки в var(--border); у Vesla цвет рамки по умолчанию — currentColor. */
:where(.html--vesla) :where(*, ::before, ::after) {
    border-color: currentColor;
}

/* Inertia-корень растягиваем как body у Vesla. */
#app {
    min-height: 100%;
}

/* WhatsApp в соцсетях мобильного футера — в стиле иконок Vesla (белый контур в скруглённом квадрате 32px). */
.footer__social--socialWhatsapp {
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='30' height='30' rx='7.5' stroke='white' stroke-width='1.8'/%3E%3Cpath d='M16.02 7.5a8.4 8.4 0 0 0-7.27 12.63L7.6 24.4l4.38-1.15a8.4 8.4 0 1 0 4.04-15.75Zm0 15.37a6.95 6.95 0 0 1-3.55-.97l-.25-.15-2.6.68.7-2.54-.17-.26a6.97 6.97 0 1 1 5.87 3.24Zm3.82-5.21c-.21-.1-1.24-.61-1.43-.68-.19-.07-.33-.1-.47.1-.14.21-.54.68-.66.82-.12.14-.24.16-.45.05-.21-.1-.88-.32-1.68-1.03a6.3 6.3 0 0 1-1.16-1.45c-.12-.21-.01-.32.09-.42.1-.1.21-.24.31-.36.1-.12.14-.21.21-.35.07-.14.04-.26-.02-.37-.05-.1-.47-1.13-.64-1.55-.17-.4-.34-.35-.47-.36h-.4a.77.77 0 0 0-.56.26c-.19.21-.73.71-.73 1.74s.75 2.02.85 2.16c.1.14 1.47 2.25 3.57 3.15.5.22.89.35 1.19.44.5.16.96.14 1.32.08.4-.06 1.24-.5 1.41-.99.17-.49.17-.9.12-.99-.05-.09-.19-.14-.4-.24Z' fill='white'/%3E%3C/svg%3E");
}

/* ---------- Адаптивность ---------- */

/* Узкий десктоп 1024–1199: у Vesla html{min-width:1140px} — шапка обрезалась и появлялась
   горизонтальная прокрутка. Даём раскладке сжиматься и уменьшаем боковые поля. */
@media (min-width: 1024px) and (max-width: 1199px) {
    html {
        min-width: 0;
    }
    .layout,
    .html--air .layout {
        min-width: 0;
        padding-left: 30px;
        padding-right: 30px;
    }
    .airHeader__container {
        padding-left: 30px;
        padding-right: 30px;
    }
}

/* Планшеты и узкие окна (мобильная вёрстка шире 600px): карточки не растягиваем на пол-экрана —
   3 в ряд, с 840px — 4 в ряд (как сетка десктопа). Горизонтальные ленты не трогаем. */
@media (min-width: 600px) and (max-width: 1023px) {
    .sect:not(.sect--horizontalScroll) .ddish {
        width: calc(33.333% - 14px);
    }
}
@media (min-width: 840px) and (max-width: 1023px) {
    .sect:not(.sect--horizontalScroll) .ddish {
        width: calc(25% - 13px);
    }
}

/* Окна на ПК не шире экрана: попап товара (1050px) на экране 1024–1090 упирался в края. */
.vrScreen__window {
    max-width: min(var(--maxWidth), calc(100% - 40px));
}

/* Шторки на планшете: не на всю ширину, а колонкой по центру — фото товара не вытесняет выбор веса и кнопку. */
@media (min-width: 600px) and (max-width: 1023px) {
    .curtain {
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ---------- Знак сома ⃀ (U+20C0) ----------
   Шрифт из SVG владельца (spec/som-sign/build.py): высота знака = высоте цифр SF Pro, у каждого веса
   своя толщина линий. Отдельное семейство "som" только для U+20C0 стоит первым в --f1: знак рисуется
   в тексте цены, масштабируется вместе с ним и зачёркивается вместе со старой ценой; остальные символы
   браузер берёт из "f1" (SF Pro), как раньше. */
@font-face {
    font-family: "som";
    src: url(/fonts/som/som-400.woff2) format("woff2");
    font-weight: 100 449;
    font-display: block;
    unicode-range: U+20C0;
}
@font-face {
    font-family: "som";
    src: url(/fonts/som/som-500.woff2) format("woff2");
    font-weight: 450 549;
    font-display: block;
    unicode-range: U+20C0;
}
@font-face {
    font-family: "som";
    src: url(/fonts/som/som-600.woff2) format("woff2");
    font-weight: 550 649;
    font-display: block;
    unicode-range: U+20C0;
}
@font-face {
    font-family: "som";
    src: url(/fonts/som/som-700.woff2) format("woff2");
    font-weight: 650 1000;
    font-display: block;
    unicode-range: U+20C0;
}
:root:root {
    --f1: "som", "f1", "byn";
}

/* Переключатель «Доставка / Самовывоз» со временем доставки: у Vesla время прижато к низу кнопки,
   а название остаётся по центру — блок «название + время» съезжал вниз. Центрируем их вместе. */
.html--air .gDelivery__type--withTime .gDelivery__typeName {
    transform: translateY(-8px);
}
.html--air .gDelivery__type--withTime .gDelivery__typeTime {
    bottom: 12px;
}
.htab__item--withTime {
    flex-direction: column;
    gap: 4px;
}
.htab__item--withTime .htab__typeTime {
    position: static;
}

/* Широкий логотип в мобильной шапке: у Vesla он растягивается до ~230px между кнопками —
   надпись «Choco & Almonds» выглядела огромной. Ограничиваем ширину. */
.hdlogo--wide .hdlogo__img {
    max-width: 140px;
    max-height: 28px;
}

/* Видео в сторис: лежит поверх картинки и проявляется, только когда реально заиграло
   (до этого — картинка, без чёрного кадра и мигания). В ленте прозрачность даёт CSS Vesla
   (video.stories__cardImg + stories__video--loaded); .stories__cardWrap у Vesla уже absolute. */
.stories__cardVideo {
    position: absolute;
    inset: 0;
}
.story__video {
    opacity: 0;
    transition: opacity 0.3s ease;
}
.story__video--playing {
    opacity: 1;
}

/* Кадр сторис на мобилке — во весь экран (cover, как у Vesla): кадры рисуются 9:16 с безопасной зоной
   (~100px по бокам), края с фоном можно обрезать. */
@media (max-width: 700px) {
    /* Кнопка в сторис на мобилке: без размытия фона (дорого при перелистывании), чуть плотнее подложка. */
    .story .action {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgb(0 0 0 / 0.6);
    }
}

/* <picture> с AVIF не должен менять вёрстку Vesla, рассчитанную на голый <img>. */
.vpicture {
    display: contents;
}

/* ---------- Подвал (SiteFooter): один и тот же светлый на ПК и на телефоне ---------- */
.sfoot {
    background: #fff;
    color: #0f0f0f;
    font-family: var(--f1);
    padding: 60px 0 0;
}
.sfoot__container {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1.3fr 1fr;
    gap: 32px;
    max-width: var(--layoutMaxWidth, 1200px);
    margin: 0 auto;
    padding: 0 60px;
}
.sfoot__col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
}
.sfoot__logoImg {
    /* Явная ширина: у SVG логотипа нет собственных размеров, без неё он сжимался в 0. */
    display: block;
    width: 150px;
    height: auto;
    max-height: 92px;
    object-fit: contain;
    object-position: left center;
}
.sfoot__logo {
    display: block;
}
.sfoot__name {
    font: 700 18px/1.2 var(--f1);
    text-transform: uppercase;
}
.sfoot__copyright {
    color: #999;
    font: 400 13px/1.3 var(--f1);
    white-space: pre-line;
}
.sfoot__title {
    margin: 0 0 4px;
    color: #292929;
    font: 500 18px/1.2 var(--f1);
}
.sfoot__link,
.sfoot__text {
    color: #999;
    font: 400 17px/1.25 var(--f1);
    text-decoration: none;
    transition: color 0.15s;
}
.sfoot__link:hover {
    color: #0f0f0f;
}
.sfoot__link--strong {
    color: #0f0f0f;
    font-weight: 500;
}
.sfoot__apps {
    display: flex;
    gap: 8px;
}
.sfoot__app {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: #999;
    border: 1px solid #ddd;
    border-radius: 10px;
}
.sfoot__fp {
    margin: 56px 0 0;
    color: #676767;
    font: 400 15px/52px var(--f1);
    text-align: center;
    background: #f8f8f8;
}
.sfoot__fpStrong {
    color: #0f0f0f;
    font-weight: 500;
}
/* С открытой корзиной справа места меньше — две колонки. */
.html--cartOpened .sfoot__container {
    grid-template-columns: 1fr 1fr;
}
@media (max-width: 1023px) {
    .sfoot {
        padding-top: 40px;
    }
    .sfoot__container {
        grid-template-columns: 1fr 1fr;
        gap: 32px 20px;
        padding: 0 20px;
    }
    .sfoot__col--logo {
        grid-column: 1 / -1;
    }
    .sfoot__link,
    .sfoot__text {
        font-size: 16px;
    }
    .sfoot__title {
        font-size: 17px;
    }
    .sfoot__fp {
        margin-top: 40px;
        line-height: 1.4;
        padding: 16px 20px;
        white-space: normal;
    }
    /* Под плавающим нижним меню подвал не должен прятаться. */
    .html--toolbar .sfoot__fp {
        padding-bottom: calc(var(--toolbarHeight, 64px) + var(--toolbarOffset, 12px) + 24px);
    }
}
/* Телефон/планшет: логотип сверху, «Информация» и «Правовая информация» рядом, «Контакты» — ниже на всю ширину. */
@media (max-width: 1023px) {
    .sfoot__logoImg {
        width: 120px;
    }
    .sfoot__col--contacts {
        grid-column: 1 / -1;
        order: 3;
    }
}

/* ---------- Узкий ПК (1024–1399): плавная («резиновая») подстройка ----------
   Особенно с открытой корзиной справа (375px): на остальную страницу остаётся ~600–1000px. */
@media (min-width: 1024px) {
    /* Заголовок главной уменьшается плавно вместе с шириной окна. */
    .html--air .company__h1 {
        font-size: clamp(26px, 2.4vw, 34px);
        line-height: 1.2;
    }
    /* Кнопку чата при открытой корзине сдвигает SupportButton (меряет край панели корзины). */
}
@media (min-width: 1024px) and (max-width: 1399px) {
    /* Переключатель доставки и адрес — в две строки, если места мало (корзина открыта). */
    .html--cartOpened .gDelivery__container {
        flex-wrap: wrap;
        row-gap: 12px;
    }
    .html--cartOpened .gDelivery__types {
        width: 100%;
    }
    .html--cartOpened .gDelivery__addressGroup {
        flex-basis: 100%;
        margin-left: 0;
    }
}
@media (min-width: 1024px) and (max-width: 1199px) {
    /* Без корзины: 4 колонки становятся тесными — 3 в ряд. */
    html:not(.html--cartOpened) .sect__dishes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
/* С открытой корзиной: 3 колонки, если места хватает (≥ ~760px контента), иначе 2. */
@media (min-width: 1150px) and (max-width: 1399px) {
    .html--cartOpened:not(.html--kiosk) .sect__dishes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Переключатель «Доставка / Самовывоз» (ПК): у Vesla кнопки фиксированно по 180px — длинные названия
   («Өзү алып кетүү») сжимались. Кнопки одинаковой ширины по самому длинному названию (сетка 1fr),
   индикатор — доля ширины; адрес забирает всё оставшееся место и обрезается многоточием. */
@media (min-width: 1024px) {
    .gDelivery__container:not(.gDelivery__types--all) .gDelivery__types:not(.gDelivery__types--single) {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
    }
    .gDelivery__container:not(.gDelivery__types--all) .gDelivery__types:not(.gDelivery__types--single) .gDelivery__type {
        width: auto;
        min-width: 150px;
        padding: 0 24px;
    }
    /* В grid абсолютный индикатор без top/left встаёт в угол padding-box (у Vesla во flex — внутрь
       отступа 3px), и белая плашка прилипала к краю серого блока. Ставим отступ явно. */
    .html--air .gDelivery__container:not(.gDelivery__types--all) .gDelivery__types:not(.gDelivery__types--single) .gDelivery__indicator {
        top: 3px;
        left: 3px;
        width: calc((100% - 6px) / var(--gDeliveryTypes, 2));
    }
    .gDelivery__addressGroup {
        min-width: 0;
    }
}

/* ---------- Шрифт витрины: урезанный SF Pro (spec/fonts/subset.sh) ----------
   Те же начертания, что у Vesla, но в 3 раза легче (~28 КБ вместо ~95 КБ). font-display: block —
   вместо подмены системным шрифтом браузер коротко ждёт свой (файлы предзагружаются в <head>),
   поэтому текст больше не «прыгает» с чужого шрифта на родной. Объявлены после vesla.css → перекрывают его. */
@font-face {
    font-family: "f1";
    src: url(/fonts/sfpro/sub/SFProDisplay-Regular.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: "f1";
    src: url(/fonts/sfpro/sub/SFProDisplay-Medium.woff2) format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: "f1";
    src: url(/fonts/sfpro/sub/SFProDisplay-Semibold.woff2) format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: "f1";
    src: url(/fonts/sfpro/sub/SFProDisplay-Bold.woff2) format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: "f1";
    src: url(/fonts/sfpro/sub/SFProDisplay-Heavy.woff2) format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: block;
}
/* Tailwind (общий app.css) ставит body шрифт Inter, которого на витрине нет, — отсюда «чужой» шрифт
   у текста без своего font. На витрине — шрифт Vesla. */
html.html--vesla body {
    font-family: var(--f1), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Глобальные уведомления (notify): тост на мобилке виден поверх окон и шторок (у окон z-index 9999999),
   а пока открыто окно — показывается сверху, чтобы не закрывать содержимое шторки снизу. */
.toast {
    z-index: 10000001;
}
.html--vrContainerVisible .toast {
    top: calc(12px + env(safe-area-inset-top, 0px));
    bottom: auto;
}
.growl {
    z-index: 10000001;
}

/* Мгновенное превью фото (ProgressiveImage): растянутая крошечная копия, чуть размытая — как у Vesla,
   пока поверх не проявится полное фото. */
.vlqip {
    /* Превью 24px + лёгкое размытие: мягко и узнаваемо (сильное blur(8px) смазывало всё в пятна). */
    filter: blur(3px);
    transform: scale(1.02);
}
/* В галерее попапа фото не абсолютное — превью кладём поверх рамки слайда. */
.tpImage__slide {
    position: relative;
}
.vlqip--fill {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Превью обложки сторис — поверх рамки карточки, под фото. */
.stories__cardWrap .vlqip {
    position: absolute;
    inset: 0;
}

/* Нижний тулбар: подложка backdrop-filter мигала при прокрутке (iOS Safari перерисовывает размытие
   фиксированной панели со скруглением вместе со страницей). Отдельный слой композиции это убирает.
   translate, а не transform: анимация нажатия toolbar-bounce крутит transform и сбрасывала бы слой. */
.toolbar {
    translate: 0 0 0;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    isolation: isolate;
}