.g-recaptcha.error {
	border: 1px solid red;
}
@media (min-width: 1260px) {
    .header .container .header__basket {
        margin-left: 0px !important;

	}}

a.toright {
    margin-left: 6px;
}
a.conline.mob {
    display: none;
}
.conline{
width: 110px;
    height: 22px;
    background: url(../img/cvideo2.png) no-repeat;
    display: block;
    font-size: 12px !important;
    text-align: right;
    color: #9970cb !important;
    font-weight: normal;
    padding-left: 3px;
    padding-top: 3px;
    background-size: 24px;
}

	span.cvideo {
    position: fixed;
    bottom: 0px;
    left: 0px;
	padding-top: 30px;
	    z-index: 9999999;
}

.cvideo .cvideoclose{
display: none;
position: absolute;
    top: 0px;
    background: #000;
    color: #fff;
    width: 20px;
    text-align: center;
    right: 0px;
    padding: 4px;
    cursor: pointer;
	 z-index: 999999999999;
}

.cvideo:hover .cvideoclose{
display: inline-block;

}



.sale-block {
	position:fixed;
	bottom:30px;
	right:20px;
	z-index:999;
}
.sale-container {
	max-width:442px;
	width:100%;
	background:#fff;
	border-radius:24px;
	border: 1px solid #5A65721F;
	padding:24px;
	position:relative;
}
.sale-block .sale-title {
	background:#FB0D1B;
	padding:10px 20px;
	font-family: DINRoundPro,sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 21px;
	text-transform: uppercase;
	color:#fff;
	display:flex;
	align-items:center;
	position:absolute;
	top:-17px;
	left:20px;
	border-radius:5px;
}
.sale-block .sale-title:before {
	content:'';
	display:block;
	width:24px;
	height:20px;
	background: url('/local/templates/webkm/assets/img/sale-icon.svg') center center no-repeat;
	margin:0 10px 0 0;
}
.sale-block .sale-item {
	display:flex;
	align-items:center;
	justify-content:space-between;
	flex-wrap:wrap;
}
.sale-block .sale-item .image {
	width:32%;
}
.sale-block .sale-item .image img {
	display:block;
	max-width:100%;
}
.sale-block .sale-item .text {
	width:calc(68% - 30px);
	margin:0 0 0 30px;
	font-weight: 600;
	font-size: 16px;
}
.sale-block .sale-item .text .buttons {
	display:flex;
	gap: 8px;
}
.sale-block .sale-item .text .buttons .button {
	margin:0 5px;
	height:40px;
	cursor:pointer;
	-webkit-transition: background-color .4s;
	-o-transition: background-color .4s;
	transition: background-color .4s;
	margin-top: 16px;
}
.sale-block .sale-item .text .buttons .button.apple-button {
	background: url('../img/apple-store-footer-outline.svg') center center no-repeat;
}
.sale-block .sale-item .text .buttons .button.android-button {
	background: url('../img/google-play-footer-outline.svg') center center no-repeat;
}
a.button.pop_botton {
    width: auto !important;
    display: block;
    line-height: 40px;
    padding-top: 0px;
    padding-bottom: 0px;
	border: 1px solid #FF492F;
    border-radius: 5px;
    margin: 0 5px;
    height: 40px;
    cursor: pointer;
	padding: 0 20px;
	font-weight: 500;
        color: #FF492F;
}
@media (max-width: 630px) {
a.conline.mob {
        display: block;
		color: #000000 !important;
        width: auto;
        padding-left: 30px !important;
        text-align: left;
		display: flex;
		align-items: center;
		font-size: 14px !important;
}
a.conline {
    margin-top: -2px;
    background-position-y: 2px;
    height: 24px;
}
header.header.header-sliced a.conline{
display: inline-block;
}

header.header.header-sliced.open a.conline{
display: none;
}
header.header.header-sliced.open a.conline.mob{
display: inline-block;
}
}

@media (max-width: 540px) {
.sale-block {
    bottom: 0px;
    right: 0px;
}
.sale-container {
	max-width:100%;
	padding:20px 30px;
	box-sizing:border-box;
}
.sale-block .sale-title {
	padding:10px 20px;
	font-size: 12px;
	line-height: 15px;
	top:-17px;
	left:30px;
}
.sale-block .sale-title:before {
	width:17px;
	height:14px;
	margin:0 5px 0 0;
}
	
}
@media (max-width: 480px) {
.sale-container {
	padding-bottom:80px;
}
.sale-block .sale-item .text .buttons {
    display: flex;
    margin: 20px 0 0 0;
    position: absolute;
    top: calc(100% - 90px);
    left: 30px;
    right: 30px;
}
.sale-block .sale-item .text .buttons .button {
	width:100%;
	margin:0;
}
.sale-block .sale-item .text .buttons .hide {
	display:none;
}
.sale-block .mfp-close {
	width:16px;
	height:16px;
}
}







/* ==== okimaki-brand overrides (загружается последним) ==== */
/* Okimaki brand tokens — извлечено из Figma fOOeOVkPQlZiAU6hEmMz8O (dev-значения, 30.08.2026) */
:root {
  /* Основные */
  --oki-bg:            #000000; /* фон Grays/Black */
  --oki-text:          #FFFFFF; /* текст */
  --oki-accent:        #FFD600; /* жёлтый акцент (подтверждён заказчиком 30.08) */
  --oki-accent-alt:    #FFCC00; /* второй жёлтый, реже в макете */
  --oki-green:         #477B56; /* positive/fill/primary: баннеры, подложки категорий */
  --oki-red:           #FF492F; /* Accents/Red: плашки акций */
  --oki-pink:          #FF3376;
  /* Вспомогательные/серые */
  --oki-gray-ph:       #D9D9D9; /* плейсхолдеры/разделители */
  --oki-gray-blue:     #5A6572;
  --oki-gray-dark:     #3C4043;
  --oki-aux:           #BA8181; /* вспомогательный из брифа */
  /* Типографика */
  --oki-font:          "Onest", "Roboto", -apple-system, Arial, sans-serif;
  --oki-font-2:        "Roboto", Arial, sans-serif;
  /* веса: 400 regular, 600 semibold, 700 bold; размеры: 42/40/38/32/30/24/20/18/16/14/12/11 */
}

/* Onest — основной шрифт бренда (из фигмы) */

/* Бренд-переопределения (только цвет/шрифт, без изменения структуры — ТЗ п.3) */
body, .b24-form, input, button, textarea, select { font-family: var(--oki-font) !important; }

/* ================= ТЁМНАЯ ТЕМА OKIMAKI (по токенам фигмы) ================= */
/* Базовый фон/текст */
html, body { background: var(--oki-bg) !important; color: var(--oki-text) !important; }
.wrapper, .page, main, .content, .container, section, .footer, .header,
.footer__top, .footer__bottom { background-color: transparent !important; }
/* Шапка на чёрном */
.header { background: var(--oki-bg) !important; }
.header, .header a, .header__phone, .header__menu a, .header__nav a { color: var(--oki-text) !important; }
/* Текстовые элементы — белые */
h1,h2,h3,h4,h5,h6, p, span, a, li, label, .title { color: var(--oki-text); }
/* Ссылки-акценты (Акции и т.п.) — жёлтый */
.header__menu a:hover, .active, .accent { color: var(--oki-accent) !important; }
/* Кнопки: основная — жёлтая (акцент бренда) с чёрным текстом */
.button, button.button, .btn, input[type=submit], .login-btn-green, .btn-primary,
  .catalog-item__buy, .add-to-cart {
  background: var(--oki-accent) !important; color: #000 !important; border-color: var(--oki-accent) !important;
}
/* Карточки/подложки категорий — тёмно-серые, зелёный акцент для позитива */
.catalog-item, .card, .product, .footer__application { background: #111 !important; }
.badge-positive, .price, .positive { color: var(--oki-green) !important; }
/* Плашки акций — красный */
.badge-sale, .sale, .stock, .action-badge { background: var(--oki-red) !important; color:#fff !important; }
/* Инпуты на тёмном */
input, textarea, select { background:#111 !important; color:#fff !important; border-color:#333 !important; }
/* Подвал */
.footer__bottom { background: #111 !important; }
/* фиксы: контейнеры не красим как кнопки */
.header__basket, .header__gift, .gift, .basket-progress, .header__cart { background: transparent !important; }
/* takeeat-промо приложения — скрыть (okimaki без приложения на этапе 1) */
#sale-block { display: none !important; }
/* Имя блюда в карточке/каталоге — белый (шаблон был под светлую тему) */
.catalog-list__name, .catalog-item__name, .product-item-title, .product-item-title a,
.catalog-element__title, .catalog-detail__title { color: var(--oki-text) !important; font-weight: 600; }
.catalog-list__name:hover { color: var(--oki-accent) !important; }
/* Кнопка «в корзину»/цена — жёлтая, чёрный текст (была белой с невидимым текстом) */
.basket-button, .basket-button_active, .catalog-card__price, .catalog-list__price, .catalog-item__price {
  background: var(--oki-accent) !important; color: #000 !important; border-color: var(--oki-accent) !important;
}
.basket-button *, .catalog-card__price * { color: #000 !important; }
/* Детальная карточка товара: панель тёмная (в фигме чёрная, был зелёный/цветной вариант) */
.catalog-card, .catalog-card_green, .catalog-card_red, .catalog-card_blue,
.catalog-card_yellow, .catalog-card_orange, .catalog-card_purple,
.catalog-card__detail { background: #0d0d0d !important; }
.catalog-card__preview { background: #1a1a1a !important; }
.catalog-card__name, .catalog-card__desc, .catalog-card__props-info { color: var(--oki-text) !important; }
.catalog-card__desc { color: #b8b8b8 !important; }
/* Hero-баннер главной (по фигме) */
.oki-hero{position:relative;margin:24px 0 8px;border-radius:28px;overflow:hidden;
  background:linear-gradient(90deg,#3f6f4e 0%,#477B56 60%,#3f6f4e 100%);min-height:300px;display:flex;align-items:center;}
.oki-hero__tag{position:absolute;left:40px;top:40px;background:var(--oki-red);color:#fff;font-weight:700;
  padding:14px 22px;border-radius:16px;font-size:18px;line-height:1.15;max-width:260px;text-transform:uppercase;}
.oki-hero__title{padding:0 40px;color:#fff;font-weight:800;font-size:56px;line-height:1.02;max-width:60%;}
.oki-hero__title span{color:var(--oki-accent);}
.oki-hero__img{position:absolute;right:24px;top:50%;transform:translateY(-50%);height:78%;border-radius:20px;object-fit:cover;}
@media(max-width:900px){.oki-hero__title{font-size:32px;max-width:100%}.oki-hero__img{opacity:.35}.oki-hero__tag{font-size:14px;padding:10px 14px}}
/* Бургер-панель — чёрная, без takeeat-водяного знака */
.header__extended, .header__extended-wrapper { background:#0d0d0d !important; background-image:none !important; }
.header__nav a, .header__nav .menu-item a, .header__extended a { color: var(--oki-text) !important; }
.header__nav a:hover { color: var(--oki-accent) !important; }
.header__nav .selected a, .header__nav a[href="/sale/"] { color: var(--oki-accent) !important; } /* Акции жёлтым */
/* Красные остатки takeeat → бренд */
.header__vk, .footer__vk, .header__vk svg, .footer__vk svg { color: var(--oki-accent) !important; fill: var(--oki-accent) !important; }
.header__extended .application a svg { color:#fff !important; }
/* красный градиент внизу страницы (takeeat) — убрать/затемнить */
[class*="gradient"], .page__gradient, .footer::before, body::after { background:transparent !important; }
/* красный спиннер загрузки */
.loader, .spinner, .preloader, [class*="spinner"] { border-color: var(--oki-accent) transparent var(--oki-accent) transparent !important; color: var(--oki-accent) !important; }
/* ===== Auth-модалка okimaki (по figma frame-auth) ===== */
.oki-auth-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:99999;display:flex;align-items:center;justify-content:center;}
.oki-auth{position:relative;background:#fff;color:#111;width:480px;max-width:92vw;border-radius:28px;padding:40px;box-shadow:0 20px 60px rgba(0,0,0,.4);font-family:var(--oki-font);}
.oki-auth__close{position:absolute;top:22px;right:22px;width:40px;height:40px;border:none;border-radius:50%;background:#f2f2f2;font-size:22px;color:#333;cursor:pointer;line-height:1;}
.oki-auth__title{font-size:40px;font-weight:800;margin:0 0 10px;color:#111;}
.oki-auth__sub{font-size:16px;color:#5a6572;margin-bottom:26px;}
.oki-auth__label{display:block;font-weight:700;color:#111;margin-bottom:8px;}
.oki-auth__input{width:100%;box-sizing:border-box;padding:18px 20px;border:1px solid #e2e2e2;border-radius:16px;font-size:17px;color:#111;background:#fff;margin-bottom:22px;}
.oki-auth__input::placeholder{color:#b3b3b3;}
.oki-auth__captcha{display:flex;align-items:center;gap:10px;border:1px solid #e2e2e2;border-radius:12px;padding:16px 18px;color:#444;font-size:15px;margin-bottom:24px;position:relative;}
.oki-auth__captcha-box{width:22px;height:22px;border:2px solid #c1c1c1;border-radius:4px;display:inline-block;}
.oki-auth__captcha-logo{position:absolute;right:16px;font-size:11px;color:#9c9c9c;}
.oki-auth__submit{width:100%;padding:19px;border:none;border-radius:16px;background:var(--oki-accent);color:#000;font-weight:800;font-size:18px;cursor:pointer;}
.oki-auth__submit:hover{filter:brightness(.96);}
@media(max-width:520px){.oki-auth{padding:28px 22px;border-radius:22px}.oki-auth__title{font-size:32px}}
.oki-auth__input, .oki-auth input { background:#fff !important; color:#111 !important; border-color:#e2e2e2 !important; }
/* Иконка профиля — тёмный кружок (был красный), иконка жёлтая */
.header__auth_icon, .header__auth_link, .header__auth_link-personal { background:#1a1a1a !important; }
.header__auth_icon svg, .header__auth_link svg { color: var(--oki-accent) !important; fill: var(--oki-accent) !important; }
.header__auth_text { color: var(--oki-text) !important; }
/* корзина-иконка контейнер тёмный */
.header__cart, .header__basket .basket-line, .basket-line__icon { background:transparent !important; }
/* Фото пиццы: скруглённый квадрат (в фигме у всех), а не круг */
.catalog-list__item .catalog-list__image, .catalog-list__photo, .catalog-list__preview,
[class*="pizza"] .catalog-list__image { border-radius: 24px !important; }
/* Футер okimaki */
.footer__contacts{display:flex;flex-direction:column;gap:8px;}
.footer__phone{font-size:22px;font-weight:800;color:var(--oki-text) !important;text-decoration:none;}
.footer__hours{color:#b8b8b8;font-size:14px;}
.footer__application{display:flex;gap:12px;margin-top:8px;}
.footer__application a{color:var(--oki-text) !important;}
/* SEO-блок */
.oki-seo{margin:32px 0;color:#cfcfcf;}
.oki-seo h2{color:var(--oki-text);font-size:26px;margin-bottom:14px;}
.oki-seo p{line-height:1.6;font-size:15px;max-width:1000px;}
/* Hero: стрелки + точки (пункт 9) */
.oki-hero__arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:none;border-radius:50%;
  background:rgba(0,0,0,.35);color:#fff;font-size:26px;line-height:1;cursor:pointer;z-index:3;display:flex;align-items:center;justify-content:center;}
.oki-hero__arrow--prev{left:16px;} .oki-hero__arrow--next{right:16px;}
.oki-hero__arrow:hover{background:var(--oki-accent);color:#000;}
.oki-hero__dots{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:3;}
.oki-hero__dots span{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.4);}
.oki-hero__dots span.is-active{background:var(--oki-accent);width:22px;border-radius:6px;}
/* Мобильные категории — чипы-пилюли в 2 ряда (пункт 12) */
@media(max-width:900px){
  /* п.Р3-9: чипы каталога — ОДИН ряд с горизонтальной прокруткой (как в takeeat и frame-m-glavnaya).
     Прежний flex-wrap рвал ряды: .header__menu держит фиксированную высоту, строки наезжали друг на друга. */
  .header__menu{display:block !important;flex-wrap:nowrap !important;overflow-x:auto !important;overflow-y:hidden !important;
    max-height:none !important;height:auto !important;padding:8px 0;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .header__menu::-webkit-scrollbar{display:none;}
  .header__menu ul{display:flex !important;flex-wrap:nowrap !important;gap:8px !important;list-style:none;margin:0;padding:0 15px;width:max-content;}
  .header__menu ul li{flex:0 0 auto;margin:0 !important;}
  /* Фигма (М Главная, Menu #3:1969): чипы главной — БЕЗ подложки, текст 16/20, gap 24, padding 0 24.
     Тёмные пилюли — только в раскрытом бургер-меню (frame-m-menu). */
  .header:not(.open) .header__menu ul{gap:24px !important;padding:0 24px;}
  .header:not(.open) .header__menu a{display:inline-block;background:transparent !important;border-radius:0 !important;
    padding:0 !important;font-size:16px !important;line-height:20px !important;font-weight:600;white-space:nowrap;}
  .header.open .header__menu a, .header.open .header__menu .menu-item a{display:inline-block;background:#1a1a1a !important;border-radius:20px !important;padding:8px 16px !important;font-size:14px !important;white-space:nowrap;}
  .header.open .header__menu{display:block !important;overflow:visible !important;}
  .header.open .header__menu ul{flex-wrap:wrap !important;width:auto !important;gap:8px !important;padding:0 !important;}
  .header__menu a.selected, .header__menu a:hover{background:var(--oki-accent) !important;color:#000 !important;}
  .oki-hero__title{font-size:30px !important;}
}
/* Бейджи карточек (пункт 11): НЬЮ синий, ХИТ красный */
.catalog-list__badges{position:absolute;top:12px;left:12px;z-index:2;display:flex;gap:6px;}
.catalog-list__badges span{padding:5px 12px;border-radius:12px;font-size:12px;font-weight:800;color:#fff;line-height:1;}
.catalog-list__badges .new{background:#0099FF;}
.catalog-list__badges .hit{background:var(--oki-red);}
.catalog-list__badges .spec{background:var(--oki-accent);color:#000;}
.catalog-list__preview{position:relative;}
/* Опции карточки товара (пункт 10, вёрстка; модификаторы — iiko этап2) */
.oki-options{margin:18px 0;display:flex;flex-direction:column;gap:14px;}
.oki-options__row{display:flex;align-items:center;gap:12px;color:var(--oki-text);font-weight:600;font-size:17px;}
.oki-options__ic{width:34px;height:34px;border-radius:50%;background:var(--oki-accent);color:#000;display:flex;align-items:center;justify-content:center;font-size:16px;}
/* Пустой серый блок КБЖУ болванки — не показывать плейсхолдер */
.catalog-card__props:empty, .catalog-card__props-info:empty{display:none !important;}
/* КБЖУ-плашка как в фигме (узел 12:4063): полупрозрачный светлый бокс, скругление 24px.
   Значения из макета — fill rgba(255,255,255,.08), border 1px того же цвета, padding 16/28. */
.catalog-card__detail .catalog-card__props,
.catalog-card__detail-wrapper .catalog-card__props{
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  padding:16px 28px;
  margin:20px 0;
}
/* Карточки под фигму */
.catalog-list__badges .new, .catalog-list__badges .hit{background:var(--oki-accent) !important;color:#000 !important;text-transform:lowercase;}
.oki-feat{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:13px;margin-right:4px;}
.oki-feat--veg{background:#477B56;} .oki-feat--hot{background:var(--oki-red);}
.catalog-list__ingredient{position:absolute;top:12px;right:12px;z-index:2;display:flex;gap:4px;}
/* Кнопка цены — жёлтая пилюля */
.basket-button, .basket-button_active, .catalog-list__price, .catalog-card__price{border-radius:999px !important;padding:12px 22px !important;}
/* Стрелка раздела — жёлтый кружок */
.catalog-list__more, .section-arrow, .catalog__section-arrow, [class*="section"] [class*="arrow"]{background:var(--oki-accent) !important;color:#000 !important;}
/* Иконки шапки — тёмные КРУЖКИ (как фигма) */
.header__basket, .header__auth_link, .header__auth_link-personal, .header__cart{
  width:48px;height:48px;border-radius:50% !important;background:#1a1a1a !important;
  display:flex !important;align-items:center;justify-content:center;}
.header__basket svg, .header__cart svg{color:var(--oki-accent) !important;fill:var(--oki-accent) !important;}
@media(min-width:901px){.header__auth_text{display:none;}} /* десктоп — только иконка; в мобильном меню нужен текст «Войти» */
/* Мобильное меню (.header.open): «Войти» — кружок-иконка + подпись, как в takeeat/фигме */
@media(max-width:900px){
  .header.open .header__auth_link, .header.open .header__auth_link-personal{
    width:auto !important;height:auto !important;border-radius:0 !important;background:transparent !important;
    justify-content:flex-start !important;gap:16px;}
  .header.open .header__auth_icon{
    width:36px;height:36px;flex:0 0 36px;border-radius:50% !important;background:#1a1a1a !important;
    display:flex;align-items:center;justify-content:center;}
  .header.open .header__auth_icon svg{width:20px;height:20px;}
  .header.open .header__extended, .header.open .header__extended-wrapper{background:transparent !important;}
  /* × в одну строку с логотипом (frame-m-menu) */
  .header.open .container .header__button_close{
    top:0 !important;left:0 !important;width:48px !important;height:48px !important;
    background:#1a1a1a !important;}
}
/* Instagram в мобильном меню — как VK: жёлтый в круге */
.header__ig{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border:1.5px solid var(--oki-accent);border-radius:50%;color:var(--oki-accent);}
.header__ig svg{fill:var(--oki-accent);color:var(--oki-accent);}
.header__social_list ul{display:flex;align-items:center;gap:14px;list-style:none;padding:0;margin:0;}
/* Акции — жёлтым */
.header__menu a.special{color:var(--oki-accent) !important;font-weight:700;}
/* HERO под фигму */
.oki-hero{overflow:visible;min-height:340px;}
.oki-hero__title{text-transform:uppercase;font-weight:900;font-size:64px;line-height:.98;letter-spacing:-1px;}
.oki-hero__title span{color:#9db3a4 !important;} /* приглушённо-зелёный, не жёлтый */
.oki-hero__tag{background:#FF4B2B;border-radius:20px 20px 40px 20px;font-size:20px;padding:16px 26px;}
.oki-hero__img{height:92%;right:40px;border-radius:16px;}
.oki-hero__arrow{width:56px;height:56px;background:#fff !important;color:#3a3a3a !important;font-size:30px;box-shadow:0 6px 18px rgba(0,0,0,.35);}
.oki-hero__arrow--prev{left:-28px;} .oki-hero__arrow--next{right:-28px;}
.oki-hero__arrow:hover{background:var(--oki-accent) !important;color:#000 !important;}
@media(max-width:900px){.oki-hero{overflow:hidden}.oki-hero__arrow{width:40px;height:40px}.oki-hero__arrow--prev{left:6px}.oki-hero__arrow--next{right:6px}.oki-hero__title{font-size:30px}}
/* Корзина: контейнер прозрачный, кружок только на иконке */
.header__basket{width:auto !important;height:auto !important;background:transparent !important;border-radius:0 !important;}
/* 36, а не 48: у тейка бургер и корзина одного размера, и лого поэтому стоит ровно по центру
   экрана. С нашими 48 правый кружок перевешивал, свободное место между кнопками смещалось
   влево и лого уезжало на 6px (замер на айфоне: центр лого 189 при центре экрана 195).
   Правка заказчика 08.09; он же и предложил уменьшить корзину. */
.header__cart{width:36px !important;height:36px !important;border-radius:50% !important;background:#1a1a1a !important;}
/* Стрелки-кружки у заголовков секций главной — жёлтые */
.catalog-list__title-link, .catalog__more-link, a[href^="/catalog/"] .arrow, .h1 + a, .catalog-list__head a{background:var(--oki-accent) !important;color:#000 !important;}
.basket-button, .basket-button_active, .catalog-list__price, .catalog-card__price{padding:9px 18px !important;font-size:15px !important;}
.catalog-card__price, .basket-button_active[data-id]{padding:16px 28px !important;font-size:17px !important;}
/* ===== Бургер-меню как в фигме (frame-menu): большая правая панель =====
   ТОЛЬКО десктоп (>=901px). На мобильной работает штатный механизм takeeat (.header.open). */
@media(min-width:901px){
.header__extended{position:fixed !important;top:0 !important;right:0 !important;left:auto !important;
  width:46vw !important;min-width:420px;height:100vh !important;background:#0d0d0d !important;z-index:99998 !important;
  border-radius:40px 0 0 40px;padding:70px 60px !important;box-sizing:border-box;overflow-y:auto;}
.header__extended-wrapper{display:flex !important;flex-direction:column;height:100%;background:transparent !important;}
.header__nav{margin-top:10px;}
.header__nav ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:34px;}
.header__nav a{font-size:44px !important;font-weight:800 !important;color:#fff !important;line-height:1;}
.header__nav a.special, .header__nav a[href*="actions"], .header__nav a[href="/sale/"]{color:var(--oki-accent) !important;}
.header__button_close, #header-close{position:absolute;top:34px;right:44px;cursor:pointer;}
.header__social{margin-top:auto;display:flex;align-items:center;gap:20px;}
.header__extended .application{display:flex;gap:14px;}
/* блюр-подложка */
.header__extended::before{content:"";position:fixed;inset:0;right:46vw;background:rgba(0,0,0,.4);backdrop-filter:blur(6px);z-index:-1;}
}
/* Кнопка-цена: компактная пилюля по контенту (не на всю ширину) */
.catalog-list__item .basket-button, .catalog-list__item .basket-button_active,
.catalog-list__item .catalog-list__price, .catalog__actions .basket-button{
  display:inline-flex !important;width:auto !important;max-width:max-content !important;
  padding:11px 20px !important;font-size:16px !important;align-self:flex-start;}
.catalog__actions{display:flex;}
@media(max-width:900px){
  .catalog-list__item .basket-button, .catalog-list__item .basket-button_active{padding:10px 18px !important;font-size:15px !important;}
}
/* Кнопка-цена не тянется на всю ширину карточки */
.catalog__actions{align-items:flex-start !important;}
.catalog__actions .basket-button, .catalog__actions .basket-button_active{width:auto !important;flex:0 0 auto !important;}
@media(min-width:901px){
.header__extended{display:none !important;}
.header__extended.oki-open{display:block !important;}
}
/* КЛЮЧ: кнопка не растягивается по ширине в flex-колонке */
.catalog__actions .basket-button, .catalog__actions .basket-button_active,
.catalog__actions .basket-button, .catalog__actions .basket-button_active{display:inline-flex !important;width:fit-content !important;}
.catalog-list__info .catalog__actions{align-items:flex-start !important;}
/* КЛЮЧ: сброс flex:1 у price-span + кнопка по контенту */
.catalog__actions .basket-button.basket-button_active{align-self:flex-start !important;width:auto !important;flex:0 0 auto !important;display:inline-flex !important;}
.catalog__actions .basket-button.basket-button_active .catalog-list__price{flex:0 0 auto !important;width:auto !important;}
.catalog-list__price{background:transparent !important;}
.catalog__actions .basket-button{background:var(--oki-accent) !important;position:static !important;left:auto !important;right:auto !important;width:-moz-fit-content !important;width:fit-content !important;flex:0 0 auto !important;align-self:flex-start !important;}
/* ФИКС ширины кнопки: .catalog__actions было width:100% */
.catalog__actions{width:auto !important;max-width:-moz-max-content !important;max-width:max-content !important;align-items:flex-start !important;}
/* Кнопка-цена карточки: пилюля = внутренний span (компактный), обёртки прозрачные (п.4) */
.catalog-list__item .catalog__actions .basket-button, .catalog__actions .basket-button.basket-button_active{background:transparent !important;padding:0 !important;border-radius:0 !important;}
.catalog__actions .catalog-list__price{background:transparent !important;padding:0 !important;}
.catalog__actions .catalog-list__price span:not(.old-price){background:var(--oki-accent) !important;color:#000 !important;font-weight:700 !important;height:44px !important;padding:0 22px !important;border-radius:999px !important;}
/* Контейнер 1200 по центру + сетка 4-в-ряд (п.3) */
.container{max-width:1240px !important;margin-left:auto !important;margin-right:auto !important;}
.catalog-list{grid-template-columns:repeat(4,1fr) !important;grid-column-gap:24px !important;}
@media(max-width:1100px){.catalog-list{grid-template-columns:repeat(3,1fr) !important;}}
@media(max-width:760px){.catalog-list{grid-template-columns:1fr !important;}}
/* Бейджи+иконки в РЯД top-left, без наложения (п.5): ХИТ красный, НЬЮ жёлтый */
.catalog-list__preview{position:relative;}
.catalog-list__badges{position:absolute;top:12px;left:12px;z-index:3;display:flex;gap:6px;align-items:center;}
.catalog-list__ingredient{position:static !important;display:inline-flex;gap:6px;}
.catalog-list__badges .hit{background:var(--oki-red) !important;color:#fff !important;}
.catalog-list__badges .new{background:var(--oki-accent) !important;color:#000 !important;}
.catalog-list__badges span{padding:5px 12px;border-radius:12px;font-size:12px;font-weight:800;line-height:1;text-transform:lowercase;}
.oki-feat{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;}
/* Стрелка заголовка секции — жёлтый круг с чёрной стрелкой (п.6) */
.catalog-list__title-link, .h1 + a, .catalog-list__head a, [class*="section-title"] a, .content > .container > p.h1 + a{background:var(--oki-accent) !important;color:#000 !important;border-radius:50% !important;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;}
/* Футер: кнопки сторов — контурные пилюли жёлтой обводкой (п.15) */
.footer__application a svg rect, .footer__application a svg{color:var(--oki-accent) !important;stroke:var(--oki-accent) !important;}
.footer__application a{border:1.5px solid var(--oki-accent);border-radius:999px;padding:6px 4px;color:var(--oki-accent) !important;}
/* veg/spicy иконки — в ряд после бейджа top-left (п.5) */
.catalog-list__ingredient{position:absolute !important;top:13px;left:66px;z-index:3;display:inline-flex;gap:5px;}
/* Плашка баннера — скошенный правый край (п.7) */
.oki-hero__tag{clip-path:polygon(0 0, 100% 0, 88% 100%, 0 100%);padding-right:44px !important;font-size:19px !important;line-height:1.15;}
/* Наклон слайда и карточек-фото (18b,18c) — лёгкий */

/* Стрелка заголовка секции — жёлтый круг с чёрным › (п.6) */
.section-title .section-link{background:var(--oki-accent) !important;border-radius:50% !important;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;margin-left:12px;}
.section-title .section-link::after{content:"\203A";color:#000;font-size:26px;font-weight:800;line-height:1;margin-top:-3px;}
.section-title{display:flex;align-items:center;}
/* Мобильные доводки round-2 */
@media(max-width:900px){
  /* п.Р3-9: плашка на 390px закрывала карточку целиком и прятала заголовок.
     Приводим к пропорции frame-m-glavnaya: одна строка, мелкий кегль, узкая полоса сверху.
     Цвет оставлен жёлтым — решение round-2; в фигме плашка красная (вопрос Андрею). */
  .oki-hero__tag{background:var(--oki-accent) !important;color:#000 !important;
    font-size:12px !important;line-height:1.15 !important;padding:8px 14px !important;
    max-width:calc(100% - 48px) !important;left:16px !important;top:14px !important;
    border-radius:12px 12px 20px 12px !important;}
  .oki-hero__tag br{display:none;}
  /* (см. выше: чипы в один прокручиваемый ряд — п.Р3-9) */
}
/* Счётчик количества на карточке (п.18a/19) */
.basket-counter{display:none;align-items:center;gap:6px;}
.basket-counter .minus, .basket-counter .plus{width:44px;height:44px;border-radius:50% !important;background:var(--oki-accent) !important;color:#000 !important;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-weight:800;font-size:24px;line-height:1;}
.basket-counter .minus::after{content:"−";} .basket-counter .plus::after{content:"+";}
.basket-counter .count{display:inline-flex;align-items:center;}
/* п.Р3-8: цифра БЕЗ рамки/подложки — штатное правило takeeat даёт input{background:#111}, перебиваем */
.basket-counter .count{background:transparent !important;border:none !important;box-shadow:none !important;}
.basket-counter .count input{width:38px;text-align:center;background:transparent !important;background-color:transparent !important;
  border:none !important;box-shadow:none !important;border-radius:0 !important;color:#fff !important;font-weight:800;font-size:18px;outline:none;-webkit-appearance:none;appearance:none;}
/* Сторы: контурные пилюли, иконка+2 строки (п.21) */
.footer__application{display:flex;gap:12px;}
.oki-store{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--oki-accent) !important;border-radius:14px;padding:8px 16px;color:var(--oki-accent) !important;background:transparent !important;text-decoration:none;}
.oki-store svg, .oki-store .oki-store__ic{color:var(--oki-accent) !important;}
.oki-store__t{display:flex;flex-direction:column;line-height:1.1;color:#fff !important;font-weight:700;font-size:14px;}
.oki-store__t small{font-size:10px;color:#b8b8b8 !important;font-weight:400;text-transform:uppercase;}
/* VK — жёлтая обводка (п.22) */
.footer__vk, .footer__social a.footer__vk{border:1.5px solid var(--oki-accent) !important;border-radius:50% !important;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;color:var(--oki-accent) !important;}
.footer__vk svg{color:var(--oki-accent) !important;fill:var(--oki-accent) !important;}
/* плашка баннера крупнее (п.7) */
.oki-hero__tag{font-size:22px !important;font-weight:800 !important;line-height:1.1;max-width:300px;}
/* SEO-блок рамка (п.14) */
.oki-seo{border:1px solid rgba(255,255,255,.18);border-radius:20px;padding:28px 32px;}

/* ==== HERO CAROUSEL bleed/наклон/крупное фото (round2 #7-10,18b) ==== */
.oki-hero-wrap{position:relative;margin:24px 0 10px;}
.oki-hero-vp{overflow:hidden;padding:6px 0 14px;}
.oki-hero-track{display:flex;gap:22px;
  transform:translateX(calc(40px - var(--i) * (100% - 58px)));
  transition:transform .5s cubic-bezier(.4,0,.2,1);}
/* каждый слайд = карточка карусели; чуть уже вьюпорта → по бокам видны соседи (bleed) */
.oki-hero-track .oki-hero{flex:0 0 calc(100% - 80px);margin:0;position:relative;
  min-height:320px;border-radius:28px;overflow:hidden;display:flex;flex-direction:column;
  justify-content:center;
  opacity:.4;transform:scale(.94);
  transition:opacity .45s ease, transform .5s cubic-bezier(.4,0,.2,1);will-change:transform;}
.oki-hero-track .oki-hero.is-active{opacity:1;transform:rotate(-1.1deg) scale(1);}/* лёгкий наклон активного (18b) */
.oki-hero--green{background:linear-gradient(120deg,#123a2b 0%,#1c5a3f 60%,#237a52 100%);}
.oki-hero--dark{background:linear-gradient(120deg,#141414 0%,#232323 100%);}
.oki-hero-track .oki-hero__tag{position:absolute;left:34px;top:32px;z-index:2;
  background:#FF4B2B;color:#fff;font-weight:800;font-size:20px;line-height:1.12;
  padding:14px 40px 14px 22px;border-radius:18px 18px 34px 18px;max-width:230px;
  clip-path:polygon(0 0,100% 0,86% 100%,0 100%);}
.oki-hero-track .oki-hero__title{padding:0 44px;margin:0;color:#fff;font-weight:900;
  text-transform:uppercase;font-size:60px;line-height:.98;letter-spacing:-1px;max-width:60%;}
.oki-hero-track .oki-hero__title span{color:#9db3a4;}
/* крупное фото в правой трети (10) */
.oki-hero-track .oki-hero__img{position:absolute;right:16px;bottom:-6px;top:auto;transform:none;
  height:104%;max-width:48%;object-fit:contain;border-radius:0;filter:drop-shadow(0 12px 24px rgba(0,0,0,.35));}
/* стрелки — на обёртке, наполовину поверх края активного слайда, белые (8) */
.oki-hero-wrap .oki-hero__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:56px;height:56px;border:none;border-radius:50%;background:#fff !important;color:#2c2c2c !important;
  font-size:30px;line-height:1;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.35);
  display:flex;align-items:center;justify-content:center;}
.oki-hero-wrap .oki-hero__arrow--prev{left:14px;} .oki-hero-wrap .oki-hero__arrow--next{right:14px;}
.oki-hero-wrap .oki-hero__arrow:hover{background:var(--oki-accent) !important;color:#000 !important;}
.oki-hero__dots{display:none !important;}/* точек в макете нет (9) */
@media(max-width:900px){
  .oki-hero-track .oki-hero{flex:0 0 calc(100% - 44px) !important;min-height:220px;}
  .oki-hero-track{transform:translateX(calc(22px - var(--i) * (100% - 30px))) !important;gap:14px !important;}
  .oki-hero-track .oki-hero__title{font-size:30px;max-width:70%;padding:0 20px;}
  .oki-hero-track .oki-hero__tag{font-size:15px;left:16px;top:16px;padding:10px 26px 10px 14px;
    background:var(--oki-accent) !important;color:#000 !important;}/* жёлтая на мобиле */
  .oki-hero-track .oki-hero__img{opacity:.9;max-width:44%;}
  .oki-hero-wrap .oki-hero__arrow{width:38px;height:38px;font-size:22px;}
  .oki-hero-wrap .oki-hero__arrow--prev{left:4px;} .oki-hero-wrap .oki-hero__arrow--next{right:4px;}
}

/* ==== ROUND2 v3 (31.08) — правки по фидбеку со скринами ==== */
/* #5 бейджи+иконки одним рядом в углу, без отступа */
.catalog-list__tags{position:absolute;top:12px;left:12px;z-index:4;display:flex;align-items:center;gap:6px;}
.catalog-list__tags .catalog-list__badges{position:static !important;order:1;display:flex;gap:6px;top:auto !important;left:auto !important;}
.catalog-list__tags .catalog-list__ingredient{position:static !important;order:2;display:inline-flex;gap:5px;top:auto !important;left:auto !important;right:auto !important;}
.catalog-list__tags:empty{display:none;}

/* #6 сторы: контурная ПИЛЮЛЯ (не круг), иконка слева + 2 строки */
.footer__application{gap:14px !important;}
.footer__application a.oki-store, a.oki-store{border-radius:14px !important;padding:11px 20px !important;
  min-width:184px;min-height:0 !important;gap:12px !important;border:1.5px solid var(--oki-accent) !important;
  background:transparent !important;display:inline-flex !important;align-items:center;}
.oki-store .oki-store__ic{flex:0 0 auto;width:24px;height:24px;color:var(--oki-accent) !important;}
.oki-store__t{align-items:flex-start;}

/* #7 вторая соцсеть рядом с VK */
.footer__social{display:flex;gap:14px;align-items:center;}
/* п.Р3-4: takeeat-правило .footer__social a{border:1px solid #FF492F} специфичнее — нужен !important, как у VK */
.oki-soc, .footer__social a.oki-soc{border:1.5px solid var(--oki-accent) !important;border-radius:50% !important;width:44px;height:44px;
  display:inline-flex;align-items:center;justify-content:center;color:var(--oki-accent) !important;text-decoration:none;}
.oki-soc svg{fill:var(--oki-accent) !important;color:var(--oki-accent) !important;}

/* #9 бургер: видимая белая кнопка закрытия + гарантированно тёмная подложка за блюром */
#header-close img, .header__button_close img{filter:invert(1) brightness(3) !important;width:22px;height:22px;}
#header-close, .header__button_close{z-index:5;padding:8px;}
@media(min-width:901px){.header__extended::before{background:rgba(6,6,6,.55) !important;}}

/* #8 модалка товара: подложка за блюром тёмная, не белая */
.mfp-bg{background:#0b0b0b !important;opacity:.86 !important;}
.mfp-wrap, .mfp-container{background:transparent !important;}

/* #4 баннер: не «повёрнут», а слегка неровный (трапеция); плашка скруглённая; фото крупно и обрезано краем */
.oki-hero-track .oki-hero.is-active{transform:perspective(1500px) rotateY(-2.4deg) rotate(-0.4deg) !important;transform-origin:left center;}
.oki-hero-track .oki-hero__tag{clip-path:none !important;border-radius:22px 22px 40px 22px !important;
  padding:14px 24px !important;max-width:none !important;width:auto;}
.oki-hero-track .oki-hero__img{right:0 !important;bottom:0 !important;top:0 !important;height:100% !important;
  max-width:46% !important;object-fit:cover !important;object-position:center !important;
  border-radius:0 !important;filter:none !important;}

/* #4 добивка: растушевать левый край фото (убрать шов), заметнее «неровность» */
.oki-hero-track .oki-hero__img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%);mask-image:linear-gradient(90deg,transparent 0,#000 26%);}
.oki-hero-track .oki-hero.is-active{transform:perspective(1400px) rotateY(-3deg) rotate(-0.7deg) !important;}

/* #9 добивка: гарантированно видимая кнопка закрытия бургера (белый × вместо тёмного svg) */
#header-close, .header__button_close{position:absolute !important;top:26px !important;right:34px !important;
  width:44px !important;height:44px !important;border-radius:50% !important;border:1.5px solid rgba(255,255,255,.35) !important;
  display:flex !important;align-items:center;justify-content:center;cursor:pointer;z-index:10 !important;background:transparent !important;padding:0 !important;}
#header-close img, .header__button_close img{display:none !important;}
#header-close::before, .header__button_close::before{content:"\00d7";color:#fff;font-size:28px;line-height:1;font-weight:300;}
#header-close:hover, .header__button_close:hover{border-color:var(--oki-accent) !important;}
#header-close:hover::before, .header__button_close:hover::before{color:var(--oki-accent);}

/* ==== ROUND2 v4 (31.08) ==== */
/* #4 БАННЕР: заметный bleed — соседние слайды выглядывают по бокам */
.oki-hero-vp{overflow:visible !important;}                 /* чтобы соседи были видны */
.oki-hero-wrap{overflow:hidden;border-radius:0;}
.oki-hero-track{gap:24px !important;
  transform:translateX(calc(70px - var(--i) * (100% - 116px))) !important;}
.oki-hero-track .oki-hero{flex:0 0 calc(100% - 140px) !important;}
.oki-hero-wrap .oki-hero__arrow--prev{left:16px;} .oki-hero-wrap .oki-hero__arrow--next{right:16px;}

/* #15/6 СТОРЫ: стадион (круглые торцы), прозрачная заливка, текст мельче */
.footer__application{background:transparent !important;}
.footer__application a.oki-store, a.oki-store{border-radius:999px !important;padding:10px 28px !important;
  background:transparent !important;min-width:200px;}
.oki-store__t{font-size:13px !important;line-height:1.15;}
.oki-store__t small{font-size:9px !important;letter-spacing:.3px;}

/* #13 бейджи на фото в модалке (угол) */
.catalog-card__preview{position:relative;}
.catalog-card__preview .catalog-list__tags{position:absolute;top:18px;left:18px;z-index:5;display:flex;align-items:center;gap:6px;}
.catalog-card__preview .catalog-list__badges{position:static !important;order:1;display:flex;gap:6px;}
.catalog-card__preview .catalog-list__ingredient{position:static !important;order:2;display:inline-flex;gap:5px;}

/* КБЖУ карточка в модалке (как в макете) */
.oki-kbju{background:#1b1b1b;border-radius:20px;padding:18px 24px;margin:8px 0 22px;max-width:420px;}
.oki-kbju__top{color:#fff;font-size:22px;font-weight:800;margin-bottom:8px;}
.oki-kbju__top span{color:#8a8a8a;font-size:15px;font-weight:500;}
.oki-kbju__row{display:flex;gap:22px;color:#8a8a8a;font-size:14px;}
.oki-kbju__row b{color:#fff;font-weight:700;}

/* #12 «Также попробуйте» под модалкой */
.oki-also{flex:0 0 100%;width:100%;background:#0d0d0d;border-radius:28px;padding:34px 40px 40px;margin-top:22px;}

.oki-also__title{color:#fff;font-size:34px;font-weight:800;margin-bottom:22px;}
.oki-also__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.oki-also__card{position:relative;display:block;text-decoration:none;background:#161616;border-radius:22px;overflow:hidden;}
.oki-also__card img{width:100%;height:200px;object-fit:cover;display:block;}
.oki-also__name{color:#fff;font-weight:700;font-size:18px;padding:14px 18px 18px;}
.oki-also__badges{position:absolute;top:12px;left:12px;z-index:2;display:flex;gap:6px;align-items:center;}
.oki-also__badges .hit{background:var(--oki-red);color:#fff;}
.oki-also__badges .new{background:var(--oki-accent);color:#000;}
.oki-also__badges span{padding:5px 12px;border-radius:12px;font-size:12px;font-weight:800;line-height:1;text-transform:lowercase;}
@media(max-width:900px){.oki-also__grid{grid-template-columns:1fr 1fr;}.oki-also{padding:22px;}.oki-also__title{font-size:24px;}}

/* ==== ROUND2 v5 — модалка (grid 1fr/1fr, row 510px) ==== */
/* «Также попробуйте» на всю ширину под обеими колонками */
.catalog-card .oki-also{grid-column:1 / -1 !important;margin-top:0;border-radius:0 0 36px 36px;}
/* КБЖУ уже внутри прокручиваемого __detail-wrapper — просто ограничим ширину */


/* ==== ROUND2 v5b ==== */
/* иконки веган/остро — цветные кружки с белой обводкой (видно на фото) */
.oki-feat{display:inline-flex !important;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;font-size:15px;line-height:1;border:2px solid #fff;box-sizing:border-box;}
.oki-feat--veg{background:#2f7d33;}
.oki-feat--hot{background:#e5352b;}
.catalog-card__preview .oki-feat, .oki-also__badges .oki-feat{width:34px;height:34px;font-size:17px;}

/* БАННЕР: плашка в 2 строки, крупнее, слева */
.oki-hero-track .oki-hero__tag{font-size:24px !important;line-height:1.12 !important;font-weight:800 !important;
  text-align:left !important;max-width:340px !important;padding:18px 30px 18px 26px !important;
  white-space:normal !important;text-transform:uppercase;}
/* фото крупнее (ближе к «одному большому роллу») */
.oki-hero-track .oki-hero__img{max-width:52% !important;transform:scale(1.18);transform-origin:right center;}

/* БАННЕР: заголовок ниже плашки (не наезжать) */
.oki-hero-track .oki-hero{justify-content:flex-end !important;padding-bottom:52px !important;padding-top:0 !important;}
.oki-hero-track .oki-hero__title{margin-bottom:0 !important;}

/* Этап 1 (болванка): нативный props был пуст, его прятали, а КБЖУ рисовали своим .oki-kbju.
   Этап 2 (12.09): КБЖУ подтянулись из айки и рендерятся в нативный .catalog-card__props —
   глухое скрытие убрано, пустые блоки прячет правило :empty выше (стр.403). */
.catalog-card__detail-wrapper .oki-kbju{display:block !important;margin-top:22px;}

/* КБЖУ: аккуратный бокс, обе строки видны */
.catalog-card__detail-wrapper .oki-kbju{max-width:440px !important;display:block !important;margin-top:22px;}
.oki-kbju__row{display:flex !important;flex-wrap:wrap;gap:20px;margin-top:8px;}

/* КБЖУ — авторитетное определение (перебивает всё выше) */
.catalog-card .oki-kbju{background:#1b1b1b !important;border-radius:20px !important;
  padding:18px 24px !important;margin:22px 0 0 !important;max-width:440px !important;
  width:auto !important;height:auto !important;min-height:0 !important;overflow:visible !important;display:block !important;}
.catalog-card .oki-kbju__top{display:block !important;color:#fff !important;font-size:22px !important;font-weight:800 !important;margin:0 0 10px !important;}
.catalog-card .oki-kbju__top span{color:#8a8a8a !important;font-size:15px !important;font-weight:500 !important;}
.catalog-card .oki-kbju__row{display:flex !important;gap:22px !important;color:#b5b5b5 !important;font-size:14px !important;margin:0 !important;height:auto !important;visibility:visible !important;}
.catalog-card .oki-kbju__row span{display:inline !important;white-space:nowrap;}
.catalog-card .oki-kbju__row b{color:#fff !important;font-weight:700 !important;}
ff00ff !important;}
#ff00ff !important;}
/* КБЖУ подстрока У/Ж/Б */
.catalog-card .oki-kbju__sub{display:block !important;margin-top:10px !important;color:#9a9a9a !important;font-size:14px !important;line-height:1.3;}
.catalog-card .oki-kbju__sub b{color:#fff !important;font-weight:700 !important;}
.catalog-card .oki-kbju__sub{display:flex !important;gap:22px !important;margin-top:10px !important;color:#9a9a9a !important;font-size:14px !important;}
.catalog-card .oki-kbju__sub span{white-space:nowrap;}
.catalog-card .oki-kbju__sub b{color:#fff !important;}

/* ===== п.Р3-9: доводка мобильной 390px (последний блок — перебивает накопленные слои выше) ===== */
@media(max-width:900px){
  /* Плашка баннера: на 390 закрывала карточку целиком и прятала заголовок.
     Пропорция по frame-m-glavnaya: узкая полоса сверху, одна строка, мелкий кегль. */
  .oki-hero-track .oki-hero__tag{font-size:12px !important;line-height:1.15 !important;font-weight:800 !important;
    padding:8px 14px !important;max-width:calc(100% - 48px) !important;left:16px !important;top:14px !important;
    border-radius:12px 12px 20px 12px !important;text-transform:uppercase;}
  .oki-hero-track .oki-hero__tag br{display:none;}
  /* Заголовок слайда не должен уезжать под фото */
  .oki-hero-track .oki-hero__title{font-size:26px !important;padding:0 20px !important;max-width:62% !important;}
}
@media(max-width:900px){
  /* × в одну строку с логотипом (frame-m-menu): логотип 48px от верха контейнера */
  .header.open .container .header__button_close,
  .header.open .header__button_close, #header-close{
    top:0 !important;left:0 !important;right:auto !important;
    width:48px !important;height:48px !important;background:#1a1a1a !important;
    border:none !important;margin:0 !important;}
}

/* ===== Кнопки сторов в футере — по замерам из frame-glavnaya =====
   Замер по макету (1440): каждая кнопка 120x40, gap 8, ВСЁ жёлтое (обводка+иконка+текст).
   Было: 184x44+, иконка и текст белые. */
.footer__application{gap:8px !important;align-items:center;}
.footer__application a.oki-store, a.oki-store{
  width:120px !important;min-width:0 !important;max-width:120px !important;height:40px !important;
  box-sizing:border-box !important;padding:0 10px !important;gap:7px !important;
  border-radius:12px !important;border:1.5px solid var(--oki-accent) !important;
  background:transparent !important;color:var(--oki-accent) !important;
  display:inline-flex !important;align-items:center !important;justify-content:flex-start !important;}
.oki-store .oki-store__ic{flex:0 0 auto;width:18px !important;height:18px !important;
  color:var(--oki-accent) !important;fill:var(--oki-accent) !important;}
.oki-store__t{display:flex;flex-direction:column;align-items:flex-start;line-height:1;
  color:var(--oki-accent) !important;font-weight:800 !important;font-size:12px !important;}
.oki-store__t small{display:block;font-size:7px !important;font-weight:600 !important;
  letter-spacing:.04em;text-transform:uppercase;color:var(--oki-accent) !important;margin-bottom:2px;}

/* ===== Модалка товара: КБЖУ не влезал в правую колонку =====
   Структура takeeat: .catalog-card grid-template-rows:510px, правая колонка скроллится.
   Блок КБЖУ (добавлен в round-2, в фигме его нет) выдавливал контент — резался на середине.
   Ужимаем блок так, чтобы он помещался целиком. */
.catalog-card .oki-kbju{padding:12px 18px !important;margin:10px 0 0 !important;border-radius:16px !important;}
.catalog-card .oki-kbju__top{font-size:18px !important;margin:0 0 6px !important;}
.catalog-card .oki-kbju__top span{font-size:13px !important;}
.catalog-card .oki-kbju__sub{margin-top:6px !important;font-size:13px !important;gap:18px !important;}
.catalog-card__detail-wrapper{padding-bottom:4px;}

/* ===== Модалка товара: кнопка цены по замерам frame-card =====
   Замер по макету (1440): 339x55, во всю ширину контентной колонки, пилюля.
   Было ~445x100 — из-за высоты правая колонка не вмещала КБЖУ и он резался. */
.catalog-card__actions{margin-top:24px !important;width:100% !important;}
.catalog-card__actions .basket-button, .catalog-card__actions .catalog-card__price,
.catalog-card__actions .basket-button_active{
  width:100% !important;max-width:none !important;height:56px !important;min-height:0 !important;
  padding:0 24px !important;font-size:18px !important;font-weight:800 !important;
  border-radius:999px !important;display:inline-flex !important;align-items:center !important;
  justify-content:center !important;box-sizing:border-box !important;}

/* ===== Плашка баннера — по пиксельным замерам frame-glavnaya (1440) =====
   Макет: зелёная карта x112..1312 (1200x400); плашка x106..602, y192..344 —
   то есть 496x152 (41.5% x 38% карты), ВРОСШАЯ в левый верхний угол, а не пилюля с отступом.
   Правый нижний угол сильно скруглён (~72px). Текст: белый, uppercase, 2 строки,
   x174 (68px от левого края плашки), кегль ~40, интерлиньяж ~38.
   Было: пилюля 300x85 с отступом 34px и clip-path. */
.oki-hero-track .oki-hero{position:relative;overflow:hidden;}
.oki-hero-track .oki-hero__tag{
  position:absolute !important;left:0 !important;top:0 !important;right:auto !important;z-index:3;
  width:41.5% !important;min-width:300px !important;max-width:none !important;
  height:38% !important;min-height:120px !important;
  box-sizing:border-box !important;
  display:flex !important;flex-direction:column;justify-content:center;
  padding:0 40px 0 5.6% !important;
  background:#FF4B2B !important;color:#fff !important;
  clip-path:none !important;
  border-radius:28px 24px 72px 0 !important;
  font-size:clamp(22px,2.7vw,40px) !important;line-height:.95 !important;
  font-weight:800 !important;text-transform:uppercase !important;text-align:left !important;
  white-space:normal !important;letter-spacing:0 !important;}
.oki-hero-track .oki-hero__tag br{display:block;}
/* заголовок слайда — ниже плашки, чтобы не пересекались */
.oki-hero-track .oki-hero__title{position:relative;z-index:2;margin-top:auto !important;}

/* ===== Баннер: фото и заголовок по замерам frame-glavnaya =====
   Макет (1440, карта x112..1312 = 1200x400):
     фото-ролл  x930..1213 (283 шир. = 23.6% карты), y244..510 — НЕ во всю высоту и не в край;
     заголовок  x112..718 (макс. 50% карты), y374..532 — нижняя половина, слева, без наезда на фото.
   Было: фото 52% ширины со scale(1.18) во всю высоту — накрывало заголовок. */
.oki-hero-track .oki-hero__img--cutout{
  position:absolute !important;right:8% !important;left:auto !important;
  top:50% !important;bottom:auto !important;transform:translateY(-50%) !important;
  width:24% !important;max-width:24% !important;height:auto !important;max-height:78% !important;
  object-fit:contain !important;border-radius:0 !important;filter:none !important;}
.oki-hero-track .oki-hero__title{max-width:52% !important;padding:0 0 0 5.6% !important;
  margin-top:auto !important;margin-bottom:6% !important;text-align:left !important;}
/* доводка: заголовок прижат влево (карта — flex-колонка), плашка в 2 строки как в макете */
.oki-hero-track .oki-hero{display:flex !important;flex-direction:column !important;align-items:flex-start !important;}
.oki-hero-track .oki-hero__title{align-self:flex-start !important;margin-right:auto !important;
  width:52% !important;max-width:52% !important;}
.oki-hero-track .oki-hero__tag{width:44% !important;padding:0 26px 0 5.6% !important;
  font-size:clamp(20px,2.4vw,36px) !important;}

/* ===== Мобильный баннер — по замерам frame-m-glavnaya (360) =====
   Плашка так же вросшая в левый верхний угол: ширина ~72% карты, высота 40,
   текст 15px в ОДНУ строку, левый паддинг 19 (5.6% карты). Идёт последним — перебивает
   десктопные правила выше, у которых нет медиазапроса. */
@media(max-width:900px){
  .oki-hero-track .oki-hero__tag{
    width:72% !important;min-width:0 !important;height:auto !important;min-height:40px !important;
    left:0 !important;top:0 !important;
    padding:10px 18px 10px 5.6% !important;
    border-radius:22px 16px 40px 0 !important;
    font-size:15px !important;line-height:1.1 !important;}
  .oki-hero-track .oki-hero__tag br{display:none !important;}
  .oki-hero-track .oki-hero__img--cutout{
    width:46% !important;max-width:46% !important;max-height:58% !important;right:5% !important;
    top:56% !important;}
  .oki-hero-track .oki-hero__title{width:70% !important;max-width:70% !important;
    font-size:24px !important;padding:0 0 0 5.6% !important;margin-bottom:8% !important;}
}
@media(max-width:900px){
  /* карта баннера в макете занимает 87% ширины экрана (360→312), у нас была 69% —
     из-за узости плашка ломалась на две строки, а ролл наезжал на заголовок */
  .oki-hero-track .oki-hero{flex:0 0 calc(100% - 40px) !important;}
  .oki-hero-track{gap:12px !important;}
  .oki-hero-track .oki-hero__tag{font-size:14px !important;width:76% !important;}
  .oki-hero-track .oki-hero__img--cutout{width:40% !important;max-width:40% !important;
    right:4% !important;top:50% !important;max-height:50% !important;}
  .oki-hero-track .oki-hero__title{width:62% !important;max-width:62% !important;font-size:22px !important;}
}
@media(max-width:900px){
  /* откат: смена flex-basis ломала центрирование трека (карта уезжала за правый край).
     Ширину карты оставляем штатной, плашку укладываем в одну строку кеглем. */
  .oki-hero-track .oki-hero{flex:0 0 calc(100% - 80px) !important;}
  .oki-hero-track{gap:22px !important;}
  .oki-hero-track .oki-hero__tag{font-size:12px !important;width:80% !important;
    padding:9px 14px 9px 5.6% !important;letter-spacing:-.2px !important;}
  .oki-hero-track .oki-hero__img--cutout{width:38% !important;max-width:38% !important;
    right:5% !important;top:52% !important;max-height:46% !important;}
  .oki-hero-track .oki-hero__title{width:58% !important;max-width:58% !important;font-size:21px !important;}
}
@media(max-width:900px){
  /* Карусель на мобильной: слайд = W-44, gap 12, сдвиг 22 → активная карта строго по центру
     с одинаковым «выглядыванием» соседей слева и справа (раньше правый край уезжал за экран). */
  .oki-hero-track{gap:12px !important;
    transform:translateX(calc(22px - var(--i) * (100% - 32px))) !important;}
  .oki-hero-track .oki-hero{flex:0 0 calc(100% - 44px) !important;}
}
@media(max-width:900px){
  /* заголовок не должен попадать под стрелки карусели */
  .oki-hero-track .oki-hero__title{padding:0 0 0 13% !important;width:64% !important;max-width:64% !important;}
  .oki-hero-wrap .oki-hero__arrow{opacity:.85;}
}

/* ===== БАННЕР: геометрия 1-в-1 с frame-glavnaya, в единицах карточки (cqw) =====
   Замеры макета: карта 1200x400 (aspect 3/1), внутри:
     плашка   x0..496, y0..152      -> 41.3cqw x 12.7cqw, вросшая в левый верхний угол
     текст пл. x68, кегль 40/38     -> 5.67cqw, 3.33cqw / 3.15cqw
     заголовок x63, y209, кегль 66, интерлиньяж 78 -> 5.25 / 17.4 / 5.5 / 6.5 cqw
     ролл     x930..1213, y244..510 -> ширина 23.6cqw, справа 8.25cqw, сверху 3.7cqw, высота 22.2cqw
   Раньше заголовок был мельче и его первую строку накрывала плашка. */
@media(min-width:901px){
  .oki-hero-track .oki-hero{container-type:inline-size;aspect-ratio:3/1;min-height:0 !important;
    display:block !important;padding:0 !important;}
  .oki-hero-track .oki-hero__tag{
    position:absolute !important;left:0 !important;top:0 !important;right:auto !important;
    width:41.3cqw !important;min-width:0 !important;max-width:none !important;
    height:12.7cqw !important;min-height:0 !important;
    display:flex !important;flex-direction:column;justify-content:center;
    padding:0 6cqw 0 5.67cqw !important;
    font-size:3.33cqw !important;line-height:3.15cqw !important;
    border-radius:2.3cqw 2.3cqw 9cqw 0 !important;}
  .oki-hero-track .oki-hero__title{
    position:absolute !important;left:5.25cqw !important;top:17.4cqw !important;
    width:auto !important;max-width:56cqw !important;margin:0 !important;padding:0 !important;
    font-size:5.5cqw !important;line-height:6.5cqw !important;}
  .oki-hero-track .oki-hero__img--cutout{
    position:absolute !important;right:8.25cqw !important;left:auto !important;
    top:3.7cqw !important;bottom:auto !important;transform:none !important;
    width:23.6cqw !important;max-width:none !important;height:22.2cqw !important;max-height:none !important;
    object-fit:contain !important;object-position:center !important;}
}
@media(min-width:901px){
  /* карта в макете шире: x112..1312 при вьюпорте 1440 (у нас начиналась с 175) */
  .oki-hero-track{gap:24px !important;
    transform:translateX(calc(7px - var(--i) * (100% - 51px))) !important;}
  .oki-hero-track .oki-hero{flex:0 0 calc(100% - 75px) !important;}
  /* правый паддинг плашки меньше: текст «ПРИ ПЕРВОМ ЗАКАЗЕ» должен лечь в одну строку */
  .oki-hero-track .oki-hero__tag{padding:0 3cqw 0 5.67cqw !important;}
}
@media(min-width:901px){
  /* наш шрифт шире Onest из макета — чуть уменьшаем кегль плашки, чтобы
     «ПРИ ПЕРВОМ ЗАКАЗЕ» встало в одну строку, как в frame-glavnaya */
  .oki-hero-track .oki-hero__tag{font-size:2.95cqw !important;line-height:3.1cqw !important;
    letter-spacing:-.01em !important;}
  /* в PNG-вырезке вокруг ролла есть прозрачные поля — компенсируем размером */
  .oki-hero-track .oki-hero__img--cutout{width:26cqw !important;height:24.5cqw !important;
    top:3.2cqw !important;right:7cqw !important;}
}

/* ===== Модалка товара: попап должен скроллиться по вертикали =====
   Было: .white-popup/.catalog-card получали фикс. высоту 900 и overflow:hidden,
   поэтому блок «Также попробуйте» обрезался и до него нельзя было доскроллить.
   Теперь высота по контенту, скроллит .mfp-wrap (штатный механизм magnificPopup). */
.mfp-wrap{overflow-y:auto !important;}
.popup__basket .white-popup, .white-popup.popup{height:auto !important;max-height:none !important;overflow:visible !important;}
.popup__basket .catalog-card, .catalog-card{height:auto !important;overflow:visible !important;}
.catalog-card .oki-also{width:auto !important;max-width:none !important;box-sizing:border-box;}
.mfp-container{padding-top:40px !important;padding-bottom:40px !important;}

/* ===== Подложка под модалкой — СВЕТЛАЯ с блюром (frame-card) =====
   Было: сплошной тёмный rgb(11,11,11) без блюра. */
.mfp-bg{background:rgba(226,228,230,.55) !important;opacity:1 !important;
  backdrop-filter:blur(22px) saturate(1.05) !important;-webkit-backdrop-filter:blur(22px) saturate(1.05) !important;}
.mfp-bg.mfp-ready{opacity:1 !important;}

/* ===== Модалка: вернуть скругления =====
   Сняв overflow:hidden ради скролла, я заодно убил скругление углов карточки.
   Теперь высота auto, поэтому overflow:hidden уже ничего не режет — возвращаем. */
.popup__basket .white-popup, .white-popup.popup{border-radius:36px !important;overflow:hidden !important;}
.popup__basket .catalog-card, .catalog-card{border-radius:36px !important;overflow:hidden !important;}
.catalog-card .oki-also{border-radius:0 0 36px 36px !important;}
.catalog-card__detail{border-radius:0 !important;}

/* ===== Под подложкой сайт в СВЕТЛОЙ теме (frame-card) =====
   Класс вешает JS при открытии любого magnificPopup. Скоупим строго на .wrapper —
   сам попап лежит в .mfp-wrap рядом и остаётся тёмным. */
html.oki-modal-open .wrapper,
html.oki-modal-open .wrapper .header,
html.oki-modal-open .wrapper .header__extended,
html.oki-modal-open .wrapper .footer,
html.oki-modal-open .wrapper .footer__bottom{background:#ECEDEE !important;background-image:none !important;}
html.oki-modal-open .wrapper .catalog-list__item,
html.oki-modal-open .wrapper .oki-kbju,
html.oki-modal-open .wrapper .seo-block,
html.oki-modal-open .wrapper [class*="__card"]{background:#FFFFFF !important;}
html.oki-modal-open .wrapper,
html.oki-modal-open .wrapper *:not(svg):not(path){color:#5A6572 !important;}
html.oki-modal-open .wrapper .header__cart,
html.oki-modal-open .wrapper .header__auth_link,
html.oki-modal-open .wrapper .header__auth_icon{background:#DDDEE0 !important;}

/* ===== Счётчик в модалке товара — как на карточке (п.Р3-8) =====
   Штатный takeeat даёт белую пилюлю-контейнер и подложку под цифрой.
   Приводим к виду карточки: прозрачный контейнер, жёлтые кружки, просто цифра. */
.catalog-card__actions .basket-counter{background:transparent !important;border:none !important;
  border-radius:0 !important;box-shadow:none !important;padding:0 !important;
  align-items:center !important;gap:14px !important;width:auto !important;}
.catalog-card__actions .basket-counter span.minus,
.catalog-card__actions .basket-counter span.plus{
  width:56px !important;height:56px !important;flex:0 0 56px !important;border-radius:50% !important;
  background:var(--oki-accent) !important;color:#000 !important;
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  font-size:30px !important;font-weight:800 !important;line-height:1 !important;cursor:pointer;}
.catalog-card__actions .basket-counter .count{background:transparent !important;border:none !important;
  box-shadow:none !important;padding:0 !important;min-width:44px;display:inline-flex !important;
  align-items:center !important;justify-content:center !important;}
.catalog-card__actions .basket-counter .count input{
  width:44px !important;text-align:center !important;background:transparent !important;
  background-color:transparent !important;border:none !important;box-shadow:none !important;
  border-radius:0 !important;color:#fff !important;font-weight:800 !important;font-size:22px !important;
  outline:none !important;-webkit-appearance:none;appearance:none;height:auto !important;}

/* ===== Белый засвет по краям шапки на широких экранах / при зуме «в минус» =====
   Причина: takeeat с 1921px рисует боковые «шторки» .header:before/:after
   белым градиентом (width: calc(50vw - 606px)) — на светлом takeeat это уместно,
   на чёрном окимаки лезет белыми полосами. Перекрашиваем в фон страницы. */
@media(min-width:1921px){
  .header:before, .header:after{
    background:linear-gradient(90deg,#000,#000 64%,rgba(0,0,0,.66) 76%,rgba(0,0,0,.33) 88%,rgba(0,0,0,0)) !important;}
  html.oki-modal-open .header:before, html.oki-modal-open .header:after{
    background:linear-gradient(90deg,#ECEDEE,#ECEDEE 64%,rgba(236,237,238,.66) 76%,rgba(236,237,238,.33) 88%,rgba(236,237,238,0)) !important;}
}

/* ===== Бургер: подложка светлая, как у модалки ===== */
@media(min-width:901px){
  .header__extended::before{background:rgba(226,228,230,.55) !important;
    backdrop-filter:blur(22px) saturate(1.05) !important;-webkit-backdrop-filter:blur(22px) saturate(1.05) !important;}
}
/* сама панель бургера остаётся тёмной — специфичнее правил светлой темы ниже */
html.oki-modal-open .wrapper .header__extended.oki-open{background:#0D0D0D !important;}
/* фон панели теперь на wrapper (см. блок про подложку бургера ниже) — держим его тёмным
   и при включённой светлой теме страницы */
html.oki-modal-open .wrapper .header__extended.oki-open .header__extended-wrapper{background:#0D0D0D !important;}
html.oki-modal-open .wrapper .header__extended.oki-open *:not(svg):not(path){color:#FFFFFF !important;}
html.oki-modal-open .wrapper .header__extended.oki-open .header__nav .selected a,
html.oki-modal-open .wrapper .header__extended.oki-open .header__nav a[href="/sale/"],
html.oki-modal-open .wrapper .header__extended.oki-open .header__vk,
html.oki-modal-open .wrapper .header__extended.oki-open .header__ig{color:var(--oki-accent) !important;}

/* ===== Баннер чуть меньше (по просьбе: «не видно геометрии, слишком крупный») =====
   Уменьшаем блок целиком на 10%, пропорции не трогаем — вся внутренняя геометрия
   задана в cqw и масштабируется вместе с карточкой. */
@media(min-width:901px){
  .oki-hero-wrap{max-width:90%;margin-left:auto !important;margin-right:auto !important;}
}

/* ===== Наклон баннера — не поворот, а ПЕРСПЕКТИВА =====
   Замер frame-glavnaya: верхняя кромка идёт ВНИЗ вправо (y 192.5 -> 210),
   нижняя — ВВЕРХ вправо (609 -> 591), при этом центральная линия постоянна (400.75 -> 400.5).
   То есть карта сужается по вертикали вправо: 416.5 -> 381 (-8.5%). Поворот такого не даёт
   (при повороте обе кромки едут в одну сторону). Это perspective + rotateY.
   Подбор: (P-k)/(P+k)=0.915, k=(W/2)·sinθ  ->  при P=1400 и W≈1080  θ≈6.6°. */
.oki-hero-track .oki-hero.is-active{
  transform:perspective(1400px) rotateY(6.6deg) !important;
  transform-origin:center center !important;}
@media(min-width:901px){
  /* PNG пересобран без прозрачных полей, поэтому размер бокса = размеру ролла в макете:
     x930..1213 / y244..510 при карте 1200x400 -> 23.6 x 22.2 cqw, справа 8.2, сверху 3.67 */
  .oki-hero-track .oki-hero__img--cutout{
    width:23.6cqw !important;height:22.2cqw !important;
    right:8.2cqw !important;top:3.67cqw !important;}
}
@media(max-width:900px){
  /* на мобильной карта в макете стоит ровно — перспективу не применяем */
  .oki-hero-track .oki-hero.is-active{transform:none !important;}
  /* PNG стал плотным (без прозрачных полей) — ролл надо ужать, иначе лезет на заголовок */
  .oki-hero-track .oki-hero__img--cutout{
    width:32% !important;max-width:32% !important;height:auto !important;max-height:40% !important;
    right:5% !important;top:auto !important;bottom:8% !important;transform:none !important;}
}

/* ===== Наклон и боковых рёбер тоже (perspective по ДВУМ осям) =====
   Замер frame-glavnaya: карта сужается не только вправо (416.5->381 по высоте),
   но и вниз: ширина 1205.5 (y=245) -> 1171 (y=570) при неподвижном центре по x (~709).
   Один rotateY оставляет боковые рёбра вертикальными — добавляем rotateX.
   (P-k)/(P+k)=0.965, k=(H/2)·sinθ; при P=1400 и H≈360 -> θx≈7.9°. */
@media(min-width:901px){
  .oki-hero-track .oki-hero.is-active{
    transform:perspective(1400px) rotateY(6.6deg) rotateX(-7.9deg) !important;}
  /* карта после перспективы выпирает влево — даём вьюпорту поля, иначе левый край режется */
  .oki-hero-vp{padding-left:34px !important;padding-right:34px !important;box-sizing:border-box;}
}

/* ===== Баннер по ширине = 4 колонки каталога =====
   Замер: сетка карточек 100..1340 (1240px), контейнер 85..1355 c padding 15.
   Значит .oki-hero-wrap на 100% контентной ширины контейнера ровно совпадает с сеткой.
   Вьюпорту даём отрицательные поля + такой же padding: overflow режет по padding-box,
   поэтому соседние слайды «выглядывают» слева и справа, а перспектива не обрезается. */
@media(min-width:901px){
  .oki-hero-wrap{max-width:none !important;width:100% !important;margin:24px 0 10px !important;}
  .oki-hero-vp{margin-left:-64px !important;margin-right:-64px !important;
    padding-left:64px !important;padding-right:64px !important;box-sizing:border-box;}
  .oki-hero-track{gap:24px !important;
    transform:translateX(calc(0px - var(--i) * (100% + 24px))) !important;}
  .oki-hero-track .oki-hero{flex:0 0 100% !important;}
  /* стрелки — белые кружки 56px, центром РОВНО на левой и правой кромке карты (frame-glavnaya) */
  .oki-hero-wrap .oki-hero__arrow{width:56px !important;height:56px !important;
    top:50% !important;transform:translateY(-50%) !important;z-index:6;
    background:#fff !important;color:#3a3a3a !important;font-size:28px !important;
    box-shadow:0 6px 18px rgba(0,0,0,.35) !important;}
  .oki-hero-wrap .oki-hero__arrow--prev{left:-28px !important;right:auto !important;}
  .oki-hero-wrap .oki-hero__arrow--next{right:-28px !important;left:auto !important;}
}
@media(min-width:901px){
  /* .oki-hero-wrap имел overflow:hidden — он срезал и стрелки на кромках, и «выглядывания».
     Обрезкой занимается .oki-hero-vp (по своему padding-box), обёртке она не нужна. */
  .oki-hero-wrap{overflow:visible !important;}
}
@media(min-width:901px){
  /* перспектива расширяет ближний (левый) край и поджимает дальний (правый),
     из-за чего карта уезжала на ~31px левее сетки — компенсируем сдвигом трека */
  .oki-hero-track{transform:translateX(calc(31px - var(--i) * (100% + 24px))) !important;}
}

/* ===== РЕШЕНИЕ ЗАКАЗЧИКА: баннер и карточки товара — РОВНЫЕ =====
   Отменяет всю подгонку наклона под фигму (perspective/rotateY/rotateX) и
   «органические» маски takeeat на фото товаров. */

/* 1. Баннер без наклона. Сдвиг трека возвращаем к 0: 31px были компенсацией
   бокового выпуска перспективы, без неё карта встаёт ровно по сетке. */
.oki-hero-track .oki-hero,
.oki-hero-track .oki-hero.is-active{transform:none !important;}
@media(min-width:901px){
  .oki-hero-track{transform:translateX(calc(0px - var(--i) * (100% + 24px))) !important;}
}

/* 2. Фото товаров: маски takeeat давали неровные, разные на каждом углу скругления.
   Убираем маску, ставим одинаковый радиус (в маске mask-card1 угол ≈30px на 276px). */
.catalog-list__item picture,
.catalog-list__item .catalog-list__pic,
.catalog-card__preview picture{
  -webkit-mask-image:none !important;mask-image:none !important;
  border-radius:30px !important;overflow:hidden !important;display:block;}
.catalog-list__item picture img,
.catalog-card__preview picture img{border-radius:30px !important;}

/* ===== Штатная корзина: не ломать переключение «кнопка цены <-> счётчик» =====
   Механизм takeeat: `.basket-button{display:none}`, показывается только с классом
   `.basket-button_active`; при добавлении в корзину JS этот класс снимает.
   Наши правила ставили `display:inline-flex !important` на обе — кнопка оставалась
   видимой рядом со счётчиком. Возвращаем скрытие неактивной. */
.catalog__actions .basket-button:not(.basket-button_active),
.catalog-list__item .basket-button:not(.basket-button_active),
.catalog-card__actions .basket-button:not(.basket-button_active){display:none !important;}

/* ===== КОРЗИНА (webkm:basket, попап /ajax/basket.php) — фирменная тема =====
   Перенесена из takeeat как есть: светлая панель, у нас на ней белый текст на белом.
   Красим по тем же токенам, что главная и карточка товара. */
#basket, #basket.white-popup, #basket.popup{
  background:#0D0D0D !important;color:#fff !important;border-radius:36px !important;}
#basket .h1, #basket .h2_basket{color:#fff !important;}
#basket a, #basket .basket__product_link{color:#fff !important;}
#basket .basket__item{border-color:rgba(255,255,255,.08) !important;}
#basket .catalog-list__price{background:transparent !important;color:#fff !important;
  padding:0 !important;font-weight:800 !important;}
#basket .basket__result{background:#141414 !important;border-radius:24px !important;}
#basket .ticket__row{color:#9a9a9a !important;}
#basket .ticket__row_total, #basket .ticket__row_total span{color:#fff !important;font-weight:800 !important;}
#basket .basket_code label{color:#fff !important;}
#basket .basket_code input{background:#111 !important;color:#fff !important;
  border:1px solid #2a2a2a !important;border-radius:999px !important;}
#basket .basket__empty{color:#9a9a9a !important;}

/* Кнопка «Перейти к оформлению» переиспользует класс .header__auth_link, а он у нас —
   круглая иконка профиля 48x48. Из-за этого кнопка схлопывалась в жёлтый кружок. */
#basket input.btn, #basket .btn, #basket .basket__result .header__auth_link{
  width:100% !important;height:56px !important;min-width:0 !important;
  border-radius:999px !important;border:none !important;
  background:var(--oki-accent) !important;color:#000 !important;
  font-weight:800 !important;font-size:17px !important;
  display:block !important;padding:0 24px !important;cursor:pointer;}

/* ===== ОФОРМЛЕНИЕ ЗАКАЗА (webkm:doorder, попап /ajax/do_order.php) — фирменная тема =====
   Тот же приём, что и для корзины: панель takeeat светлая, у нас на ней белый текст.
   Красим по тем же токенам; красные акценты takeeat -> бренд. */
#do_order, #do_order.white-popup, #do_order.popup,
#basket, #basket.white-popup, #basket.popup{
  background:#0D0D0D !important;color:#fff !important;border-radius:36px !important;}
#do_order .h1, #do_order .h2, #do_order label, #do_order .do-order__item > .h2{color:#fff !important;}
#do_order .order-back{color:var(--oki-accent) !important;}
/* карточки-секции оформления (доставка, получатель, оплата) */
#do_order .do-order__item, #do_order .popup-right__block, #do_order .order-tabs__content{
  background:#141414 !important;border-radius:24px !important;border-color:rgba(255,255,255,.08) !important;}
/* поля ввода */
#do_order input[type=text], #do_order input[type=tel], #do_order input[type=number],
#do_order select, #do_order textarea{
  background:#111 !important;color:#fff !important;border:1px solid #2a2a2a !important;
  border-radius:999px !important;}
#do_order select{appearance:none;-webkit-appearance:none;}
/* вкладки «Курьером / Самовывоз» */
#do_order .order-tabs__item, #do_order [class*="tab"] a, #do_order [class*="tab"] span{color:#9a9a9a !important;}
#do_order .order-tabs__item.active, #do_order [class*="tab"] .active{color:#fff !important;background:#141414 !important;}
/* ошибка «Необходимо выбрать адрес» — красная плашка takeeat на белом */
#do_order .order-address__error{background:rgba(255,75,43,.12) !important;color:#FF7A5E !important;
  border-radius:14px !important;}
/* итоги */
#do_order .ticket__row{color:#9a9a9a !important;}
#do_order .ticket__row_total, #do_order .ticket__row_total span{color:#fff !important;font-weight:800 !important;}
#do_order .order-agreement, #do_order .agreement, #do_order small{color:#7d7d7d !important;}
/* кнопки: жёлтая пилюля во всю ширину, как в корзине */
#do_order input.btn, #do_order .btn, #do_order button[type=submit], #do_order .order-address__add{
  width:100% !important;height:56px !important;min-width:0 !important;
  border-radius:999px !important;border:none !important;
  background:var(--oki-accent) !important;color:#000 !important;
  font-weight:800 !important;font-size:17px !important;padding:0 24px !important;cursor:pointer;}
/* доводка оформления: текст внутри жёлтых кнопок, кастомный селект, иконка «К корзине» */
#do_order .btn, #do_order .btn *, #do_order input.btn{color:#000 !important;}
#do_order .custom-select__selected, #do_order .custom-select__list, #do_order .custom-select{
  background:#111 !important;color:#fff !important;border:1px solid #2a2a2a !important;
  border-radius:999px !important;}
#do_order .custom-select__selected span, #do_order .custom-select__list *{color:#fff !important;}
#do_order .custom-select__list{border-radius:20px !important;}
#do_order .custom-select__list li:hover, #do_order .custom-select__item:hover{background:#1e1e1e !important;}
/* стрелка «К корзине» — иконка takeeat красная, инвертируем в жёлтую */
#do_order .order-back img{filter:brightness(0) saturate(100%) invert(83%) sepia(63%) saturate(1352%) hue-rotate(358deg) brightness(103%) contrast(104%);}
/* «Выбрать адрес» лежит внутри .tabs__item и попадала под моё же правило серого текста вкладок */
#do_order [class*="tab"] a.btn, #do_order [class*="tab"] a.btn *,
#do_order a.btn, #do_order a.btn *{color:#000 !important;}

/* ===== Белая полоса сверху в корзине/оформлении =====
   `.popup__right ... .white-popup::before` — фиксированная заглушка 420x60 из takeeat.
   Панель у них скроллится (overflow-y:auto, padding-top:60), и эта полоса прикрывает
   контент, уезжающий вверх под кнопку закрытия. У takeeat панель белая — заглушка
   не видна; у нас панель #0D0D0D, и она торчала белым прямоугольником.
   Красим в цвет панели. */
.popup__right .mfp-container .mfp-content .white-popup::before,
.mfp-content #basket::before, .mfp-content #do_order::before{
  background-color:#0D0D0D !important;}
/* Правая панель (корзина/оформление) у takeeat во всю высоту и заглушка-::before
   привязана к верху экрана. Мой padding на .mfp-container (добавлен ради скролла
   модалки блюда) опускал панель на 40px, и заглушка повисала над её скруглением. */
.popup__right .mfp-container{padding-top:0 !important;padding-bottom:0 !important;}

/* ===== Правки по замечаниям 01.09 ===== */

/* 1. Счётчик на иконке корзины: был красный takeeat и свисал снизу по центру.
      Переносим в правый верхний угол иконки и обводим фоном шапки, чтобы читался. */
.header__basket .header__cart_count{
  /* у takeeat на бейдже был свой сдвиг (transform/margin) — он утаскивал кружок
     на 10px влево-вверх, поэтому гасим и позиционируем от угла иконки */
  transform:none !important;margin:0 !important;
  top:1px !important;right:1px !important;bottom:auto !important;left:auto !important;
  width:20px !important;height:20px !important;min-width:0 !important;
  background:var(--oki-red) !important;color:#fff !important;
  border:2px solid #0d0d0d !important;border-radius:50% !important;
  font-size:11px !important;font-weight:800 !important;line-height:16px !important;
  display:flex !important;align-items:center;justify-content:center;padding:0 !important;}
.header__basket .header__cart_price{display:none !important;}

/* 2. Кнопка закрытия попапа: приехала из светлой темы (тёмный крестик на светлом),
      на тёмной панели была не видна и без реакции на наведение. */
/* Крестик попапов — как в бургере: прозрачный кружок с тонкой светлой обводкой.
   ВАЖНО: только background-color, не сокращение `background` — им я в прошлый раз
   затёр background-image с самим крестиком (../img/close-white.svg). */
.mfp-close{
  /* position НЕ трогаем: у magnificPopup крестик позиционируется абсолютно,
     и мой relative выбивал его из угла панели вниз-влево.
     Для ::before абсолютный родитель и так является containing block. */
  box-sizing:border-box !important;
  width:46px !important;height:46px !important;
  background-color:transparent !important;background-image:none !important;
  border:1px solid rgba(255,255,255,.35) !important;border-radius:50% !important;
  color:#fff !important;opacity:1 !important;font-size:0 !important;
  transition:border-color .18s ease !important;}
/* сам крестик — отдельным слоем: красить его надо отдельно от обводки
   (filter на самом элементе перекрасил бы и рамку). Через маску, а не фильтр —
   фильтр давал приблизительный цвет (255,236,0 вместо токена 255,214,0). */
.mfp-close::before{
  content:"" !important;position:absolute;inset:0;
  background-color:#fff;
  -webkit-mask:url(../img/close-white.svg) no-repeat center / 20px 20px;
  mask:url(../img/close-white.svg) no-repeat center / 20px 20px;
  transition:background-color .18s ease;}
/* как в бургере: на наведение жёлтыми становятся и обводка, и крестик */
.mfp-close:hover, .mfp-close:focus{border-color:var(--oki-accent) !important;background-color:transparent !important;}
.mfp-close:hover::before, .mfp-close:focus::before{background-color:var(--oki-accent);}

/* 3. Выравнивание блоков корзины по правому краю: «Дополните заказ» вылезал
      за padding панели (правый край 1424 против 1380 у остальных блоков). */
#basket .add_block_basket, #basket .add_block_basket-list{
  margin-left:0 !important;margin-right:0 !important;
  padding-left:0 !important;padding-right:0 !important;
  width:100% !important;max-width:100% !important;box-sizing:border-box !important;}
#basket .add_block_basket-list{overflow-x:auto;scrollbar-width:none;}
#basket .add_block_basket-list::-webkit-scrollbar{display:none;}

/* 4. Бургер: в левом нижнем углу сквозь скругление просвечивала страница —
      подложка обрывалась ровно по краю панели (right:46vw), а вырез скругления
      остаётся снаружи фигуры и показывал вёрстку.
      Растянуть подложку на весь экран мало: у .header__extended свой контекст
      наложения, и ::before ложится ПОВЕРХ её фона — панель становилась мутной.
      Поэтому фон и скругление переносим на .header__extended-wrapper, который
      лежит выше ::before, а сама .header__extended остаётся прозрачным холстом. */
@media(min-width:901px){
  .header__extended{background:transparent !important;border-radius:0 !important;
    padding:0 !important;overflow:visible !important;}
  .header__extended::before{right:0 !important;z-index:0 !important;}
  .header__extended-wrapper{position:relative;z-index:1;
    background:#0D0D0D !important;border-radius:40px 0 0 40px !important;
    height:100% !important;padding:70px 60px !important;box-sizing:border-box;overflow-y:auto;}
}
/* «Дополните заказ»: после выравнивания по padding четвёртая плитка обрезалась
   краем скролла — раскладываем в 4 колонки по ширине панели, без прокрутки. */
#basket .add_block_basket-list{display:grid !important;grid-template-columns:repeat(4,1fr) !important;
  gap:12px !important;overflow:visible !important;}
#basket .add_block_basket-list > *{min-width:0 !important;}
#basket .add_block_basket-list img{width:100% !important;height:auto !important;}

/* ===== Модалка товара: карточка и «Также попробуйте» — два отдельных блока =====
   Было одно сплошное полотно. Разделяем зазором, в котором виден блюр подложки.
   Скоупим на .catalog-card, чтобы не задеть корзину (#basket) и оформление. */
/* ГРАБЛЯ takeeat: у модалки блюда и у корзины ОДИН И ТОТ ЖЕ id="basket" —
   поэтому все мои правила на #basket красили заодно и модалку блюда.
   Различаются они только обёрткой: .popup__basket у блюда, .popup__right у корзины.
   Здесь нужен вес выше #basket, отсюда id в селекторе. */
.popup__basket .mfp-content #basket,
.popup__basket .mfp-content .white-popup{background:transparent !important;overflow:visible !important;}
.popup__basket .catalog-card, .catalog-card{background:transparent !important;overflow:visible !important;border-radius:0 !important;}
.catalog-card__preview{background:#0D0D0D !important;overflow:hidden !important;}
.catalog-card__detail{background:#0D0D0D !important;}
.catalog-card .oki-also{margin-top:16px !important;background:#0D0D0D !important;
  border-radius:36px !important;overflow:hidden !important;}
@media(min-width:901px){
  /* десктоп: фото слева, описание справа — скругляем внешние углы пары */
  .catalog-card__preview{border-radius:36px 0 0 36px !important;}
  .catalog-card__detail{border-radius:0 36px 36px 0 !important;}
}
@media(max-width:900px){
  /* мобильная: фото сверху, описание снизу */
  .catalog-card__preview{border-radius:36px 36px 0 0 !important;}
  .catalog-card__detail{border-radius:0 0 36px 36px !important;}
}
/* Фото в модалке товара: правые углы должны быть прямыми — форму задаёт
   .catalog-card__preview. Радиус 30px приехал сюда из правила «ровные карточки
   каталога» и округлял снимок со всех четырёх сторон. */
.catalog-card__preview picture,
.catalog-card__preview picture img,
.catalog-card__preview img{border-radius:0 !important;}

/* ===== Текстовые страницы (доставка, контакты, акции, бонусы, о нас) =====
   У takeeat это статические страницы на классах шаблона. У окимаки их не было —
   собираем свою сетку в фирменной теме, на тех же токенах, что каталог и модалки. */
.oki-page{padding:24px 0 80px;color:#fff;}
.oki-page__title{font-size:56px;line-height:1.05;font-weight:800;margin:8px 0 12px;color:#fff;}
.oki-page__lead{font-size:19px;line-height:1.5;color:#9aa3ad;max-width:760px;margin:0 0 40px;}
.oki-page h2{font-size:32px;font-weight:800;color:#fff;margin:48px 0 20px;}
.oki-page p{color:#c9ced4;line-height:1.6;}

.oki-grid{display:grid;gap:20px;}
.oki-grid--3{grid-template-columns:repeat(3,1fr);}
.oki-grid--2{grid-template-columns:repeat(2,1fr);}
.oki-card{background:#141414;border-radius:28px;padding:32px;box-sizing:border-box;}
.oki-card__h{font-size:22px;font-weight:800;color:#fff;margin:0 0 10px;}
.oki-card__t{color:#9aa3ad;line-height:1.55;margin:0;}
.oki-card__big{font-size:40px;font-weight:800;color:var(--oki-accent);line-height:1;margin:0 0 8px;}

/* зоны доставки: цветная метка + цена */
.oki-zone{display:flex;align-items:flex-start;gap:16px;background:#141414;border-radius:24px;padding:24px 28px;}
.oki-zone__dot{width:18px;height:18px;border-radius:50%;flex:0 0 18px;margin-top:4px;}
.oki-zone__name{font-size:19px;font-weight:800;color:#fff;margin:0 0 4px;}
.oki-zone__meta{color:#9aa3ad;font-size:15px;margin:0;}

/* строки «ключ — значение» (контакты, оплата) */
.oki-rows{display:flex;flex-direction:column;gap:2px;background:#141414;border-radius:28px;overflow:hidden;}
.oki-row{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 28px;
  border-bottom:1px solid rgba(255,255,255,.06);}
.oki-row:last-child{border-bottom:none;}
.oki-row__k{color:#9aa3ad;font-size:16px;}
.oki-row__v{color:#fff;font-size:18px;font-weight:700;text-align:right;}
.oki-row__v a{color:#fff;text-decoration:none;}
.oki-row__v a:hover{color:var(--oki-accent);}

/* акции */
.oki-promo{background:#141414;border-radius:28px;overflow:hidden;display:flex;flex-direction:column;}
.oki-promo__img{width:100%;height:220px;object-fit:cover;display:block;}
.oki-promo__body{padding:28px 32px 32px;}
.oki-promo__tag{display:inline-block;background:var(--oki-red);color:#fff;font-size:13px;font-weight:800;
  text-transform:uppercase;border-radius:999px;padding:7px 14px;margin-bottom:14px;}

.oki-note{color:#7d8790;font-size:15px;line-height:1.55;margin-top:28px;}
.oki-cta{display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 32px;
  border-radius:999px;background:var(--oki-accent);color:#000 !important;font-weight:800;font-size:17px;
  text-decoration:none;margin-top:32px;}
.oki-cta:hover{filter:brightness(.96);}

@media(max-width:900px){
  .oki-page{padding:8px 0 56px;}
  .oki-page__title{font-size:32px;}
  .oki-page__lead{font-size:16px;margin-bottom:28px;}
  .oki-page h2{font-size:24px;margin:32px 0 16px;}
  .oki-grid--3, .oki-grid--2{grid-template-columns:1fr;}
  .oki-card{padding:24px;border-radius:24px;}
  .oki-row{flex-direction:column;align-items:flex-start;gap:6px;padding:18px 22px;}
  .oki-row__v{text-align:left;}
}
/* доводка текстовых страниц: боковые поля на мобильной (эти страницы исключены из
   .content.static, поэтому штатный padding контейнера до них не доходит) и цвет цифр */
.oki-page .oki-card__big{color:var(--oki-accent) !important;}
@media(max-width:900px){
  .oki-page{padding-left:16px !important;padding-right:16px !important;}
}

/* ===== Меню в футере =====
   Раскладка и точки-разделители у takeeat уже хорошие — их не трогаем.
   Меняем только цвета: было белым с красным takeeat (#FF492F) на наведении,
   текущая страница ничем не отмечалась. */
.footer__menu ul li a{color:#c9ced4 !important;transition:color .18s ease;}
.footer__menu ul li a:hover, .footer__menu ul li a:focus{color:var(--oki-accent) !important;}
/* текущая страница — жёлтая с подчёркиванием (класс selected добавлен в шаблон меню) */
.footer__menu ul li.selected a{color:var(--oki-accent) !important;
  text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px;}
@media(max-width:900px){
  .footer__menu ul li a{font-size:15px;}
}
}
/* Юридический текст (политика): читаемая типографика на тёмном */
.oki-legal h2{font-size:22px;font-weight:800;color:#fff;margin:40px 0 14px;}
.oki-legal p, .oki-legal li{color:#c9ced4;line-height:1.65;font-size:16px;}
.oki-legal ol, .oki-legal ul{padding-left:22px;margin:0 0 16px;}
.oki-legal li{margin-bottom:10px;}
.oki-legal a{color:var(--oki-accent);}
.oki-legal{max-width:900px;}
/* политика: ширина колонки, фирменные ссылки и маркеры вместо красных takeeat */
.oki-legal{max-width:900px !important;}
.oki-legal a{color:var(--oki-accent) !important;}
.oki-legal ul li::marker, .oki-legal ol li::marker{color:rgba(255,255,255,.35) !important;}
.oki-legal ul li::before, .oki-legal ol li::before{color:rgba(255,255,255,.35) !important;
  background:rgba(255,255,255,.35) !important;}
/* «Дополните заказ» на мобильной: моё десктопное правило в 4 колонки давило плитки
   до 88px — картинки схлопывались, названия налезали на бейджи, кнопки вылезали.
   На узком экране — две колонки. */
@media(max-width:900px){
  /* у панели на мобильной padding: 20px 0 — контент лип к краям экрана */
  .popup__right .mfp-content #basket{padding-left:16px !important;padding-right:16px !important;}
  #basket .add_block_basket-list{grid-template-columns:repeat(2,1fr) !important;gap:16px 14px !important;align-items:start !important;}
  /* у takeeat на плитках margin-top:15px для всех, кроме первой — в сетке это
     сдвигало вторую колонку вниз; отступы задаёт gap */
  #basket .add_block_basket-list .basket__item{flex-direction:column !important;align-items:stretch !important;
    gap:10px;margin:0 !important;}
  /* фото — квадрат со скруглением, а не растянутая полоска */
  /* у takeeat на превью жёстко height:60px, поэтому aspect-ratio не срабатывал —
     задаём высоту явно */
  #basket .add_block_basket-list .basket__preview{width:100% !important;height:132px !important;
    border-radius:18px !important;overflow:hidden !important;display:block !important;position:relative;}
  #basket .add_block_basket-list .basket__preview picture,
  #basket .add_block_basket-list .basket__preview img{width:100% !important;height:100% !important;
    object-fit:cover !important;display:block !important;border-radius:0 !important;}
  #basket .add_block_basket-list .basket__product{width:100% !important;}
  #basket .add_block_basket-list .basket__product_link{display:block;font-size:14px;line-height:1.25;margin-bottom:8px;}
  #basket .add_block_basket-list .basket-button,
  #basket .add_block_basket-list .basket-button_active{width:100% !important;justify-content:center !important;}
}

/* ===== «Также попробуйте»: карточка теперь с описанием и кнопкой ===== */
.oki-also__card{background:#161616;border-radius:22px;overflow:hidden;display:flex;flex-direction:column;}
.oki-also__pic{position:relative;display:block;}
.oki-also__pic img{width:100%;height:200px;object-fit:cover;display:block;}
.oki-also__info{padding:14px 18px 18px;display:flex;flex-direction:column;gap:8px;}
.oki-also__name{color:#fff !important;font-weight:700;font-size:18px;text-decoration:none;line-height:1.25;}
.oki-also__desc{display:none;} /* на десктопе карточки компактные — описание только на мобильной */
.oki-also__info .catalog__actions{margin-top:2px;}

@media(max-width:900px){
  /* Макет мобильной: список строк — фото слева, справа название, описание и кнопка */
  .oki-also__grid{grid-template-columns:1fr !important;gap:14px !important;}
  .oki-also__card{flex-direction:row !important;align-items:stretch;gap:14px;
    background:transparent !important;border-radius:0 !important;overflow:visible !important;
    padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.07);}
  .oki-also__card:last-child{border-bottom:none;padding-bottom:0;}
  .oki-also__pic{flex:0 0 150px;width:150px;border-radius:18px;overflow:hidden;}
  .oki-also__pic img{height:150px !important;}
  .oki-also__info{flex:1 1 auto;min-width:0;padding:2px 0 0 !important;gap:6px;}
  .oki-also__name{font-size:17px;}
  .oki-also__desc{display:block;color:#9aa3ad;font-size:14px;line-height:1.35;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
  .oki-also__info .catalog__actions{margin-top:6px;}
}

/* ===== Счётчик в карточке товара на мобильной — жёлтая пилюля (по макету) =====
   На десктопе остаются два жёлтых кружка; на узком экране счётчик занимает место
   кнопки цены и повторяет её форму. */
@media(max-width:900px){
  /* ВАЖНО: display задаём только активному счётчику. С `display:flex !important`
     на самом .basket-counter он показывался всегда, и в карточке висели
     одновременно кнопка цены и пилюля. */
  .catalog-card__actions .basket-counter{
    width:100% !important;height:56px !important;box-sizing:border-box;
    background:var(--oki-accent) !important;border-radius:999px !important;
    align-items:center !important;justify-content:space-between !important;
    padding:0 10px !important;gap:0 !important;}
  .catalog-card__actions .basket-counter.basket-counter_active{display:flex !important;}
  .catalog-card__actions .basket-counter span.minus,
  .catalog-card__actions .basket-counter span.plus{
    width:44px !important;height:44px !important;flex:0 0 44px !important;
    background:transparent !important;color:#000 !important;
    font-size:32px !important;font-weight:800 !important;line-height:1 !important;
    display:inline-flex !important;align-items:center !important;justify-content:center !important;}
  .catalog-card__actions .basket-counter .count{flex:1 1 auto !important;justify-content:center !important;}
  .catalog-card__actions .basket-counter .count input{
    width:100% !important;color:#000 !important;font-size:20px !important;font-weight:800 !important;
    text-align:center !important;background:transparent !important;}
}

/* ===== Удаление из корзины ===== */
/* крестик у позиции */
#basket .basket__item{position:relative;}
#basket .basket__list .oki-remove{
  position:absolute;top:0;right:0;z-index:3;
  width:28px;height:28px;padding:0;border:none;border-radius:50%;
  background:rgba(255,255,255,.08);cursor:pointer;
  transition:background .18s ease;}
#basket .basket__list .oki-remove::before,
#basket .basket__list .oki-remove::after{
  content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;border-radius:2px;
  background:#c9ced4;transform-origin:center;transition:background .18s ease;}
#basket .basket__list .oki-remove::before{transform:translate(-50%,-50%) rotate(45deg);}
#basket .basket__list .oki-remove::after{transform:translate(-50%,-50%) rotate(-45deg);}
#basket .basket__list .oki-remove:hover{background:rgba(255,75,43,.18);}
#basket .basket__list .oki-remove:hover::before,
#basket .basket__list .oki-remove:hover::after{background:#FF7A5E;}
/* в блоке «Дополните заказ» крестик не нужен */
#basket .add_block_basket .oki-remove{display:none !important;}

/* ссылка «Очистить корзину» */
#basket .oki-clear-wrap{display:flex;justify-content:flex-end;margin:6px 0 10px;}
#basket .oki-clear{background:none;border:none;padding:6px 2px;cursor:pointer;
  color:#7d8790;font-size:14px;font-weight:600;transition:color .18s ease;}
#basket .oki-clear:hover{color:#FF7A5E;}
#basket .oki-clear[data-state="confirm"]{color:#FF7A5E;}
#basket .oki-clear[data-state="confirm"]::after{content:" — да, очистить";color:var(--oki-accent);}
@media(max-width:900px){
  /* на узком экране крестик вставал вплотную к верхней границе строки и ровно над «+».
     Ставим его на линию названия и отодвигаем текст, чтобы длинные названия не залезали. */
  #basket .basket__list .oki-remove{width:28px !important;height:28px !important;
    top:14px !important;right:0 !important;}
  #basket .basket__list .basket__product{padding-right:36px !important;box-sizing:border-box;}
  #basket .oki-clear{font-size:15px;}
}

/* ===== Горизонтальный скролл на главной =====
   Обрезка карусели исторически стояла на .oki-hero-wrap (строка 669), а .oki-hero-vp
   был overflow:visible. Когда я выпускал стрелки и «выглядывания» наружу, я снял
   overflow с wrap — и лента из пяти слайдов (три + два клона) начала растягивать
   документ на ~3700px вправо.
   Обрезаем на .oki-hero-vp: он шире контейнера на 64px с каждой стороны, поэтому
   соседи по-прежнему видны, а стрелки лежат в wrap и под обрезку не попадают. */
.oki-hero-vp{overflow:hidden !important;}
/* Вылет карусели за края экрана: -64px жёстко упирались в узкие вьюпорты (1000–1280),
   где контейнер уже почти во всю ширину. Делаем вылет адаптивным — не больше,
   чем реально есть места по бокам. Плюс overflow-x:clip на обёртке как страховка
   от округления на ширину полосы прокрутки (clip, а не hidden — не создаёт
   контекст прокрутки и не ломает sticky). */
@media(min-width:901px){
  .oki-hero-vp{
    --oki-bleed: min(64px, calc((100vw - 100%) / 2));
    margin-left: calc(-1 * var(--oki-bleed)) !important;
    margin-right: calc(-1 * var(--oki-bleed)) !important;
    padding-left: var(--oki-bleed) !important;
    padding-right: var(--oki-bleed) !important;}
}
.wrapper{overflow-x:clip;}
/* Стрелки стоят центром на кромке карты (по макету) и выходят за неё на 28px.
   Место для этого есть только пока экран шире контейнера на 56px+ (то есть от ~1300).
   Ниже — убираем стрелки внутрь карты, иначе их срезает обрезкой. */
@media(min-width:901px) and (max-width:1299px){
  .oki-hero-wrap .oki-hero__arrow--prev{left:16px !important;}
  .oki-hero-wrap .oki-hero__arrow--next{right:16px !important;}
}

/* ===== Личный кабинет: остатки красного takeeat ===== */
/* «Выйти» и «Добавить адрес» приехали на фирменном красном takeeat #FF492F */
/* ссылка «Выйти» встречается и в меню профиля, и в кабинете (там без класса) —
   цепляемся за href, он одинаковый */
.personal-menu__logout, a[href*="logout=yes"]{color:var(--oki-accent) !important;}
a[href*="logout=yes"]:hover{color:#fff !important;}
.address__item.address__new{background:var(--oki-accent) !important;color:#000 !important;
  border-radius:22px !important;}
.address__item.address__new *{color:#000 !important;}
.address__item.address__new svg, .address__item.address__new path{fill:#000 !important;stroke:#000 !important;}
/* плюс в кнопке — белая картинка, на жёлтом не видна; инвертируем в чёрный.
   И hover у takeeat уходил в сиреневый #b19ec6 — приглушаем жёлтый вместо этого. */
.address__item.address__new img{filter:brightness(0) !important;}
.address__item.address__new:hover{background:var(--oki-accent) !important;
  border-color:var(--oki-accent) !important;filter:brightness(.95);}
/* иконка выхода у заголовка кабинета — svg в фирменных цветах takeeat, перекрашиваем */
.h1__logout img{filter:brightness(0) saturate(100%) invert(83%) sepia(63%) saturate(1352%) hue-rotate(358deg) brightness(103%) contrast(104%);
  opacity:.9;transition:opacity .18s ease;}
.h1__logout:hover img{opacity:1;}

/* ===== Оформление заказа: воздух и заголовки секций =====
   Я дал .do-order__item фон и радиус, но не дал отступов — заголовок h2 лежал
   вплотную к верхнему краю карточки, а внутренний блок читался как настоящая
   карточка. Отступы переносим на саму секцию, у внутреннего .do-order__bg
   обнуляем, чтобы не удваивались. */
#do_order .do-order__item{padding:24px 25px !important;box-sizing:border-box;}
#do_order .do-order__item > h2{margin:0 0 16px !important;padding:0 !important;
  font-size:20px !important;font-weight:800 !important;color:#fff !important;}
#do_order .do-order__bg{padding:0 !important;}
#do_order .do-order__item + .do-order__item{margin-top:16px !important;}

/* «К корзине» — воздуха между ссылкой и заголовком было 5px */
#do_order .order-back{display:inline-flex !important;align-items:center;gap:8px;
  margin:0 0 18px !important;font-weight:600;}
#do_order .h1{margin:0 0 22px !important;}

/* Предупреждение об адресе: сплошная красная плашка на тёмном смотрится тяжело.
   Оставляем только цветной текст с тонкой линией слева. */
#do_order .order-address__error{
  background:transparent !important;border:none !important;border-radius:0 !important;
  border-left:2px solid #FF7A5E !important;
  padding:2px 0 2px 12px !important;margin:10px 0 0 !important;
  color:#FF7A5E !important;font-size:14px !important;line-height:1.4 !important;}
/* Вкладки в оформлении: у takeeat это «папки» с рамкой, и внутри секции получалась
   вторая карточка с обводкой. Делаем плоско — контейнером служит сама секция. */
#do_order .tabs__content, #do_order .tabs__item{
  background:transparent !important;border:none !important;border-radius:0 !important;
  padding-left:0 !important;padding-right:0 !important;box-shadow:none !important;}
#do_order .tabs__list{border:none !important;margin-bottom:14px !important;}
#do_order .tabs__list ul{display:flex;gap:18px;list-style:none;margin:0;padding:0;}
#do_order .tabs__list li{background:transparent !important;border:none !important;
  border-radius:0 !important;padding:0 0 8px !important;color:#9aa3ad !important;
  font-weight:700;cursor:pointer;}
#do_order .tabs__list li.active{color:#fff !important;box-shadow:inset 0 -2px 0 0 var(--oki-accent);}
/* подписи полей внутри вкладок */
#do_order .order-address__interval, #do_order .tabs__item > .text_din{margin-top:16px !important;}
/* остатки внутренних рамок-«карточек» внутри секций оформления */
#do_order .do-order__bg, #do_order .do-order__item .form{
  background:transparent !important;border:none !important;border-radius:0 !important;box-shadow:none !important;}
/* .tabs__box — ещё одна «карточка» внутри секции (светлая рамка #EEEAF3 от takeeat) */
#do_order .tabs__box{border:none !important;border-radius:0 !important;
  background:transparent !important;padding:0 !important;}
/* неактивная кнопка оформления: opacity .3 на жёлтом читается как грязно-оливковая */
#do_order .order-button:disabled, #do_order .order-button[disabled]{
  opacity:1 !important;background:#2a2a2a !important;color:#7d8790 !important;cursor:not-allowed;}
/* ссылка на политику под кнопкой была чёрной на чёрном */
#do_order .do-order__policy{color:#7d8790 !important;}
#do_order .do-order__policy a{color:#9aa3ad !important;text-decoration:underline;text-underline-offset:3px;}
#do_order .do-order__policy a:hover{color:var(--oki-accent) !important;}
@media(max-width:900px){
  /* у оформления та же беда, что была у корзины: panel padding 20px 0 — контент липнет к краям */
  .popup__right .mfp-content #do_order{padding-left:16px !important;padding-right:16px !important;}
}

/* ===== Остальные попапы и меню профиля — светлая тема takeeat =====
   Корзину и оформление я покрасил поимённо, а попапы адреса, карты и выпадающее
   меню профиля остались белыми. Красим все .white-popup разом; модалка блюда
   не задета — у неё правило с id и большей специфичностью. */
.mfp-content .white-popup{background:#0D0D0D !important;color:#fff !important;}
.mfp-content .white-popup label,
.mfp-content .white-popup .h1,
.mfp-content .white-popup h1,
.mfp-content .white-popup h2{color:#fff !important;}
.mfp-content .white-popup p, .mfp-content .white-popup .popup__description{color:#c9ced4 !important;}
/* подсказки валидации: чистый красный на тёмном режет глаз */
.mfp-content .white-popup .error, .mfp-content .white-popup .errortext,
.mfp-content .white-popup [class*="error"]{color:#FF7A5E !important;}
/* поля и кнопки в этих попапах — как в оформлении */
.mfp-content .white-popup input[type=text], .mfp-content .white-popup input[type=tel],
.mfp-content .white-popup input[type=number], .mfp-content .white-popup textarea{
  background:#111 !important;color:#fff !important;border:1px solid #2a2a2a !important;
  border-radius:999px !important;}
.mfp-content .white-popup .btn{border-radius:999px !important;background:var(--oki-accent) !important;
  color:#000 !important;font-weight:800 !important;border:none !important;}
/* Исключение: цифра в счётчике — не поле ввода в привычном смысле, а число внутри жёлтой
   пилюли. Правило выше красило её в #111 с радиусом 999px, и получалась пилюля в пилюле —
   именно это заказчик и видел (07.09). Правило стоит после, поэтому перебивает. */
.mfp-content .white-popup .basket-counter .count input,
.mfp-content .white-popup .basket-counter input[type=text]{
  background:transparent !important;background-color:transparent !important;
  border:none !important;border-radius:0 !important;box-shadow:none !important;
  text-align:center !important;color:#fff !important;}
/* Счётчик в карточке блюда: цифра стоит между двумя жёлтыми кружками на ТЁМНОМ фоне
   карточки (не на жёлтой пилюле, как думали раньше) — чёрная не читалась (рис заказчика
   12.09). Делаем белой. */
.mfp-content .white-popup .catalog-card__actions .basket-counter .count input{color:#fff !important;}

/* выпадающее меню профиля */
/* .personal-menu — только позиционирующая обёртка с padding-top:72px (отступ от иконки
   профиля). Фон на ней давал пустой тёмный блок над ссылками — красим только список. */
.personal-menu{background:transparent !important;box-shadow:none !important;}
.personal-menu__list{background:#141414 !important;border-radius:20px !important;
  box-shadow:0 18px 40px rgba(0,0,0,.45) !important;overflow:hidden;padding:8px 0 !important;}
.personal-menu__item{color:#c9ced4 !important;padding:12px 18px !important;display:block;
  transition:background .15s ease, color .15s ease;}
.personal-menu__item:hover{background:#1e1e1e !important;color:var(--oki-accent) !important;}
/* Меню профиля выпадает ниже шапки, а у .header.header-sliced стоит overflow:hidden
   (правило takeeat для «нарезанного» фона) — меню просто обрезалось и было не видно.
   Снимаем обрезку и поднимаем меню над баннером. */
@media(min-width:901px){
  .header.header-sliced{overflow:visible !important;}
}
.personal-menu{z-index:400 !important;}
.header__auth{z-index:400 !important;}
/* Подсказки валидации в формах (label.wrong) — тем же приёмом, что и предупреждение
   об адресе в оформлении: цветной текст с тонкой линией слева, без заливки. */
.mfp-content .white-popup label.wrong, .white-popup label.wrong, label.wrong{
  color:#FF7A5E !important;font-size:14px !important;font-weight:500 !important;
  border-left:2px solid #FF7A5E !important;padding:2px 0 2px 12px !important;
  margin:8px 0 0 !important;display:block !important;line-height:1.4 !important;}

/* ===== Правки заказчика 03.09 ===== */

/* 1. Маски takeeat остались на превью в корзине, в блоке «Дополните заказ» и на соусах —
   те же неровные углы, что уже сняли с карточек каталога. Радиус в процентах, чтобы
   на превью 60px и на карточке 92px скругление было одной пропорции (в маске ≈11%). */
.basket__item .basket__preview picture,
.section_pizza.basket__item .basket__preview picture,
.sauce-product .picture,
.sauce-addictive .sauce-additive__item .sauce-additive__item_picture{
  -webkit-mask-image:none !important;mask-image:none !important;
  border-radius:11% !important;overflow:hidden !important;}
.basket__item .basket__preview picture img,
.sauce-product .picture img,
.sauce-addictive .sauce-additive__item .sauce-additive__item_picture img{
  border-radius:11% !important;}

/* 2. Баннер на мобиле: десктопная раскладка (текст слева, фото справа) на узком экране
   давала фото во весь блок и заголовок поверх него. В фигме (frame-m-glavnaya) мобильный
   баннер — колонка: плашка во всю ширину сверху, фото по центру, заголовок внизу.
   Все свойства через !important: выше по файлу лежат заходы 6-9 по десктопному баннеру,
   каждый со своими !important — без них перебивают. */
@media(max-width:900px){
  .oki-hero-track .oki-hero{
    display:flex !important;flex-direction:column !important;align-items:center !important;
    justify-content:flex-start !important;aspect-ratio:1/1.08;min-height:0 !important;
    padding:0 0 22px !important;overflow:hidden !important;}
  .oki-hero-track .oki-hero__tag{
    position:static !important;order:1 !important;align-self:stretch !important;
    width:auto !important;max-width:none !important;margin:0 !important;
    padding:13px 20px !important;text-align:left !important;
    border-radius:0 0 36px 0 !important;clip-path:none !important;
    font-size:15px !important;line-height:1.15 !important;display:block !important;}
  .oki-hero-track .oki-hero__tag br{display:none !important;}
  .oki-hero-track .oki-hero__img,
  .oki-hero-track .oki-hero__img--cutout{
    position:static !important;order:2 !important;transform:none !important;
    margin:auto !important;width:auto !important;height:auto !important;
    max-width:66% !important;max-height:56% !important;
    object-fit:contain !important;opacity:1 !important;border-radius:22px !important;
    -webkit-mask-image:none !important;mask-image:none !important;}
  /* вырезанный ролл лежит на фоне карточки — скруглять нечего */
  .oki-hero-track .oki-hero__img--cutout{border-radius:0 !important;}
  .oki-hero-track .oki-hero__title{
    order:3 !important;align-self:stretch !important;
    width:100% !important;max-width:100% !important;
    margin:0 !important;padding:0 18px !important;text-align:center !important;
    font-size:26px !important;line-height:1.06 !important;}
}

/* ===== Попап авторизации (05.09) =====
   Раньше на окимаки висел муляж (своя разметка без логики). Теперь показывается штатный
   #auth-popup из /ajax/auth.php — в нём и капча, и звонок. Перекрашиваем под фигму
   (frame-auth): белая карточка 480px, крупный заголовок, жёлтая кнопка. */
#auth-popup, #auth-popup_code, #auth-popup_name, #auth-popup_birthday, #auth_call{background:#fff !important;color:#111 !important;width:480px;max-width:92vw;border-radius:28px;padding:40px;box-sizing:border-box;}
#auth-popup .h1, #auth-popup_code .h1, #auth-popup_name .h1, #auth-popup_birthday .h1, #auth_call .h1{font-size:40px;font-weight:800;margin:0 0 10px;color:#111 !important;line-height:1.05;}
#auth-popup .popup__description, #auth-popup_code .popup__description, #auth-popup_name .popup__description, #auth-popup_birthday .popup__description, #auth_call .popup__description{font-size:16px;color:#5a6572;margin:0 0 26px;}
#auth-popup .form-control, #auth-popup_code .form-control, #auth-popup_name .form-control, #auth-popup_birthday .form-control, #auth_call .form-control{margin-bottom:16px;}
#auth-popup label, #auth-popup_code label, #auth-popup_name label, #auth-popup_birthday label, #auth_call label{display:block;font-weight:700;color:#111 !important;margin-bottom:8px;}
#auth-popup input[type="tel"], #auth-popup_code input[type="text"], #auth-popup_code input[type="tel"], #auth-popup_name input[type="text"], #auth-popup_birthday input[type="text"], #auth-popup_birthday input[type="date"]{width:100%;box-sizing:border-box;padding:18px 20px;border:1px solid #e2e2e2 !important;
  border-radius:16px;font-size:18px;background:#fff !important;color:#111 !important;}
#auth-popup input[type="tel"]::placeholder{color:#b3b3b3;}
#auth-popup .g-recaptcha{margin:4px 0 6px;}
#auth-popup .g-recaptcha.error{outline:2px solid var(--oki-red);border-radius:6px;}
#auth-popup input[type="submit"], #auth-popup_code input[type="submit"], #auth-popup_name input[type="submit"], #auth-popup_birthday input[type="submit"], #auth_call input[type="submit"], #auth-popup_name button, #auth-popup_code button{width:100%;padding:19px;margin-top:10px;border:none;border-radius:16px;
  background:var(--oki-accent);color:#000;font-size:18px;font-weight:800;cursor:pointer;}
#auth-popup input[type="submit"][disabled]{opacity:.45;cursor:default;}
#auth-popup input[type="submit"]:not([disabled]):hover{filter:brightness(.96);}
#auth-popup input[name="call"]{background:#fff;color:#111;border:1px solid #e2e2e2;}
#auth-popup br{display:none;}
@media(max-width:520px){#auth-popup, #auth-popup_code, #auth-popup_name, #auth-popup_birthday, #auth_call{padding:28px 22px;border-radius:22px}#auth-popup .h1{font-size:32px}}

/* сообщение об ошибке в попапе входа: было display:none в разметке takeeat */
#auth-popup .showerrorrobot{display:block;color:var(--oki-red) !important;text-align:center;margin:4px 0 8px;font-size:14px;min-height:0;}
#auth-popup .showerrorrobot:empty{display:none !important;}

/* Номер для звонка в попапе входа: h1 внутри поля наследовал белый цвет тёмной темы
   и оказывался белым по белому — виден был только по клику (фокус перекрашивал). */
/* рамку рисует .phone-code (она уже была) — своей у .input1 не заводим, иначе двойная */
#auth-popup_code .phone-code{border:1px solid #e2e2e2 !important;border-radius:16px !important;
  padding:14px 20px !important;background:#fff;text-align:center;box-sizing:border-box;}
#auth-popup_code .input1{border:none !important;padding:0 !important;background:none !important;width:100%;}
#auth-popup_code .input1 h1, #auth-popup_code .input1 a{
  color:#111 !important;font-size:32px;font-weight:800;text-decoration:none;letter-spacing:.5px;}

/* ===== Личный кабинет: подписи полей (06.09) =====
   Разметка takeeat рассчитана на светлую тему: label и текст чекбокса — тёмные.
   На чёрном фоне они были чёрным по чёрному, поля выглядели безымянными. */
.personal-data label,
.personal-data .form-control > label,
.personal-data .form-control,
#tab-1 label, #tab-2 label, #tab-3 label,
.tabs__content label{color:var(--oki-text) !important;}
.tabs__content .form-control > label{display:block;margin-bottom:8px;font-weight:700;}
.tabs__content input[type="text"],
.tabs__content input[type="email"],
.tabs__content input[type="tel"]{color:var(--oki-text) !important;}
.tabs__content label span{color:var(--oki-text) !important;}

/* ===== Кабинет и попап адреса (06.09) ===== */

/* 1. Под полями оставалась красная точка: jQuery.validate вешает label.error,
   и он показывался даже пустым. Пустой — скрываем. */
.mfp-content .white-popup label.error:empty,
.tabs__content label.error:empty,
form label.error:empty{display:none !important;}
.mfp-content .white-popup label.error,
.tabs__content label.error{display:block;margin-top:6px;font-size:13px;font-weight:400;}

/* 2. Чекбокс «Получать промокоды» был виден только при наведении: рамка задана
   полупрозрачным чёрным по чёрному фону. */
.form-control input[type=checkbox] + label span:first-child{
  border:1px solid rgba(255,255,255,.45) !important;background:transparent;}
.form-control input[type=checkbox] + label:hover span:first-child{
  border:1px solid rgba(255,255,255,.8) !important;}
.form-control input[type=checkbox]:checked + label span:first-child{
  background:var(--oki-accent) url(../img/icon-form-check.svg) 50% no-repeat !important;
  border:1px solid var(--oki-accent) !important;}
.form-control input[type=checkbox] + label span:last-child{color:var(--oki-text) !important;}

/* Подписи ошибок валидатора: он настроен на класс wrong (errorClass: "wrong"),
   а не error — поэтому пустая подпись оставалась красной точкой под полем. */
label.wrong:empty, .mfp-content label.wrong:empty, .tabs__content label.wrong:empty{display:none !important;}
label.wrong{display:block;margin-top:6px;font-size:13px;font-weight:400;color:#FF7A5E !important;
  background:none !important;padding:0 !important;border:none !important;}
input.wrong, .form-control input.wrong{border-color:#FF7A5E !important;}

/* Кнопка «Новый адрес» имеет смысл, только пока форма свёрнута: у takeeat она висела
   и над раскрытой формой. */
.order-address:has(form:not(.form-hidden)) .show-address,
#address-popup:has(form:not(.form-hidden)) .show-address{display:none !important;}

/* Доставка и оплата. Раскладку и классы берём у takeeat (.delivery__map — грид 1fr 2fr),
   но у него панель светлая (#f7f5f9) на светлой теме, а у окимаки фон чёрный —
   перекрашиваем панель и подписи, иначе белый текст ложится на светло-серое. */
.delivery__zone_title span.zone_green  { background: #56db40 }
.delivery__zone_title span.zone_blue   { background: #1e98ff }
.delivery__zone_title span.zone_orange { background: #ff931e }
.delivery__zone_title span.zone_red    { background: #ed4543 }
.delivery__zone_desc { color: rgba(255, 255, 255, .72) }
.delivery__map_time { margin-top: 30px }
.delivery__map_time a { color: var(--oki-accent); text-decoration: none }
.delivery__map_interface { overflow: hidden }
.delivery__payment p { color: rgba(255, 255, 255, .82) }
.delivery__payment h2 { margin-top: 36px }
@media (min-width: 1080px) {
    .delivery__map { background: var(--oki-gray-dark) }
}

/* Подсказки адреса при вводе улицы.
   Было две беды: панель из takeeat светло-серая (#e5e5e5), а текст на тёмной теме белый —
   читалось бледно-серым по светлому; и список резался снизу, потому что на попапе стоит
   overflow:hidden ради скруглённых углов. Красим по-своему, даём список прокручиваться
   и разрешаем ему выходить за края формы адреса. */
.popup-map_autocomplete{
    background: #1c1c1c;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 16px;
    padding: 6px;
    max-height: min(300px, 40vh);
    overflow-y: auto;
    box-shadow: 0 18px 40px rgba(0,0,0,.55);
}
.popup-map_autocomplete a{
    color: #fff;
    padding: 10px 12px;
    border-radius: 10px;
    line-height: 1.35;
}
.popup-map_autocomplete a:not(:last-child){ margin-bottom: 2px }
.popup-map_autocomplete a:hover{
    background: var(--oki-accent);
    color: #000;
}
/* полоса прокрутки списка — тонкая, чтобы не спорила с тёмной панелью */
.popup-map_autocomplete::-webkit-scrollbar{ width: 8px }
.popup-map_autocomplete::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.22); border-radius: 8px }

/* список не должен обрезаться краем попапа адреса */
#address-popup.white-popup, #address-popup.popup{ overflow: visible !important }
#address-popup .form-control{ position: relative }

/* ======== Правки заказчика, раунд 3 (07.09) ======== */

/* Единственная вкладка «Курьером» в оформлении: самовывоза у окимаки нет, переключать
   не из чего. Прячем сам список, содержимое вкладки остаётся. */
/* Селектор с id, потому что выше в этом же файле лежит #do_order .tabs__list ul{display:flex} —
   правило по классам он перебивал. */
#do_order .tabs-delivery.tabs-single .tabs__list ul,
.tabs-delivery.tabs-single > .tabs__list ul { display: none !important }
#do_order .tabs-delivery.tabs-single .tabs__list,
.tabs-delivery.tabs-single > .tabs__list { margin: 0 }

/* Состав заказа: название блюда рисовалось цветом takeeat — тёмным по тёмному,
   на экране оставались только картинка и цена. */
.basket__product_link, .basket__product .basket__product_link { color: #fff }
.basket__sauce, .basket__product .basket__count { color: rgba(255,255,255,.7) }

/* Карточки адресов и заказов в кабинете достались светлыми, текст жёлтым по светлому —
   не читалось. Приводим к тёмной теме. */
.address__item, .order__item, .personal .address__item, .personal-orders__item,
.order-list__item, .history__item {
    background: var(--oki-gray-dark) !important;
    color: #fff !important;
    border-radius: 20px;
}
.address__item .address__title, .order__item .order__title,
.order-list__item .order-list__num { color: var(--oki-accent) !important }
.address__item .address__info, .address__item .address__desc,
.order-list__item .order-list__date { color: rgba(255,255,255,.75) !important }

@media (max-width: 1079px) {
    /* Бургер не перекрывал карточки каталога: пункты меню читались поверх товаров.
       Красим сам раскрытый блок, а не растягиваем его: min-height на 100vh утолкал
       район, «Войти» и ссылки за нижний край экрана. */
    /* !important обязателен: выше в этом же файле, в блоке мобильного меню, стоит
       `.header.open .header__extended{background:transparent !important}` — правило без
       приоритета проигрывало ему, и меню оставалось прозрачным (поймал на перепроверке
       перед отчётом 07.09). Красим только сам блок; обёртку не трогаем, чтобы не менять
       раскладку «Войти», ради которой прозрачность и ставили. */
    .header.open .header__extended {
        background: var(--oki-bg) !important;
    }
    .header.open .header__extended { padding-bottom: 24px }

    /* Стрелки слайдера на телефоне не нужны — листается пальцем (правка заказчика). */
    .oki-hero__arrow, .slick-prev, .slick-next { display: none !important }

    /* Заголовок карты налезал на крестик. */
    #map-popup .h1, #address-popup .h1 { font-size: 22px; line-height: 1.2; padding-right: 56px }
}

/* Попап выбора топпингов: «пилюля в пилюле» (правка заказчика 07.09).
   Кнопка .basket-button уже жёлтая пилюля, а внутри неё span с собственным фоном и
   радиусом — на экране это выглядит как кнопка внутри кнопки. То же самое со счётчиком,
   когда топпинг добавлен: чёрная подложка под числом внутри жёлтой пилюли.
   Внутренности делаем прозрачными — как это уже сделано для карточек каталога. */
.sauce-additive__item_basket .basket-button > span,
.sauce-additive__item_basket .basket-counter .count,
.sauce-additive__item_basket .basket-counter .count input,
.topping-list .basket-button > span,
.topping-list .basket-counter .count,
.topping-list .basket-counter .count input {
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
}
/* Цвет цифры — по фону, на котором она лежит. Внутри кнопки-пилюли фон жёлтый, поэтому
   цифра чёрная; в попапе топпингов счётчик стоит на тёмном, и чёрная цифра пропадала
   (заметил заказчик 07.09). */
.sauce-additive__item_basket .basket-button > span { color: #000 !important }
.sauce-additive__item_basket .basket-counter .count input,
.topping-list .basket-counter .count input { color: #fff !important }
.sauce-additive__item_basket .basket-counter .minus,
.sauce-additive__item_basket .basket-counter .plus,
.topping-list .basket-counter .minus,
.topping-list .basket-counter .plus { color: #000 !important }

/* Попап топпингов: возврат к блюду и подпись «Добавлено» (правка заказчика 07.09) */
/* Ссылка стоит сразу после <div class="h1">, поэтому её ловило правило «.h1 + a» —
   то самое, что делает жёлтые круглые стрелки у заголовков секций. Гасим круг явно. */
.topping-popup .oki-back, .topping-popup .h1 + a.oki-back{
  display:inline-flex !important;align-items:center;gap:8px;margin:0 0 18px !important;
  width:auto !important;height:auto !important;min-width:0 !important;
  background:transparent !important;border-radius:0 !important;
  color:var(--oki-accent) !important;font-weight:700;text-decoration:none;
  font-size:15px;line-height:1.2;white-space:nowrap;justify-content:flex-start !important;}
.topping-popup .oki-back::before{content:"‹";font-size:22px;line-height:1;}
.topping-popup .oki-chosen{display:block;margin-top:6px;color:rgba(255,255,255,.7);font-size:14px;font-weight:400;}
.oki-options__chosen{margin-top:8px;color:rgba(255,255,255,.72);font-size:14px;}

/* Прелоадер: подпись под спиннером оставалась красной (правка заказчика 08.09).
   Сам спиннер уже жёлтый — preloader.svg перекрашен в #FFD600, и браузер берёт именно
   его из srcset (проверено рендером: currentSrc = preloader.svg). Красной была подпись:
   index.min.css, строка 1239 — `.mfp-preloader-animate_wrapper span{color:#FF492F}`.
   #FF492F это не остаток тейка, а --oki-red из палитры окимаки, просто не на своём месте.
   В корзине прелоадер другой, он попадает под правило .loader/.spinner выше — поэтому
   заказчик и видел «в корзине жёлтый, а тут оранжевый».

   Подложка прелоадера была почти сплошной белой (hsla(0,0%,100%,.95) в index.min.css).
   Ставим ту же светлую матовую, что у модалок (.mfp-bg выше, по макету frame-card):
   прелоадер показывается ПЕРЕД попапом, и на его фоне подложка не должна дёргаться.

   Подпись при этом жёлтой быть не может: на светлой подложке #FFD600 не читается
   (проверил рендером — потому и не оставил). Спиннер жёлтый, он толстый и виден,
   а текст берём чёрный основного фона. Оранжевого, на который жаловался заказчик,
   не остаётся ни там ни там. */
.mfp-preloader-animate .mfp-preloader-animate_wrapper span{color:var(--oki-bg) !important;}
.mfp-preloader-animate{background:rgba(226,228,230,.55) !important;
  backdrop-filter:blur(22px) saturate(1.05) !important;-webkit-backdrop-filter:blur(22px) saturate(1.05) !important;}

/* ===== Баннеры: листание пальцем (правка заказчика 08.09) =====
   Карусель у нас своя (oki-hero-track сдвигается трансформом по --i), не slick, как у тейка,
   — поэтому свайпа и не было вовсе. Добавляем в трансформ слагаемое --oki-drag: пока палец
   ведёт, скрипт кладёт туда смещение в пикселях, на отпускании обнуляет. Обе формулы ниже
   повторяют исходные (десктоп и мобильная), меняется только хвост. */
/* Свайп (round 5) добавлял ОДНО правило без медиа-запроса с формулой 40px/58px — оно
   перебивало выверенную десктопную геометрию 7px/51px (min-width:901px) и смещало баннер
   на десктопе (заказчик 12.09: «баннер сломало на мобильных работах»). Разносим по брейкпоинтам:
   десктоп сохраняет свою геометрию + слагаемое --oki-drag, мобилка — свою. */
@media(min-width:901px){
  .oki-hero-track{transform:translateX(calc(7px - var(--i) * (100% - 51px) + var(--oki-drag,0px))) !important;}
}
@media(max-width:900px){
  .oki-hero-track{transform:translateX(calc(22px - var(--i) * (100% - 30px) + var(--oki-drag,0px))) !important;}
}
/* Пока тянем — без анимации, иначе трек тащится за пальцем с задержкой. */
.oki-hero-track.is-dragging{transition:none !important;}
/* pan-y: вертикальную прокрутку страницы браузер оставляет себе, горизонталь берём мы. */
.oki-hero-vp{touch-action:pan-y;}

/* ===== Кнопка входа: текст сидел выше центра (правка заказчика 08.09) =====
   У тейка .btn задаёт height:50px и box-sizing:border-box, а наше правило добавляло
   padding:19px сверху и снизу. 50 − 38 = 12px контентной коробки при строке 20.7px —
   строка не влезала и выдавливалась вверх. 14px: 14 + 20.7 + 14 = 48.7, помещается,
   высота пилюли прежняя. */
#auth-popup input[type="submit"], #auth-popup_code input[type="submit"]{
  padding:14px 19px !important;}


/* ===== Белый «засвет» на конце длинного описания (правка заказчика 12.09) =====
   Базовый .catalog-list__desc.is-overflow::after фейдит в #ffffff — на чёрных карточках
   это белая полоса. Фейдим в фон сайта. */
.catalog-list__desc.is-overflow::after{
  background:linear-gradient(to right, transparent, var(--oki-bg)) !important;
}

/* ===== Меню категорий: 16 разделов не влезали в строку и переносились в три (рис заказчика
   12.09). На десктопе делаем один ряд с горизонтальной прокруткой, как на мобиле. ===== */
@media(min-width:901px){
  /* 16 разделов в один ряд. Если не влезают — горизонтальная прокрутка с ВИДИМЫМ тонким
     скроллбаром (скрытый = мышью не прокрутить, заказчик «без прокрутки» 12.09). Шрифт и
     отступ чуть уменьшены, чтобы на обычных десктопах помещалось без прокрутки и не так плотно.
     Полноценно чище будет, если укрупнить разделы — но это решение заказчика. */
  .header .header__menu{overflow-x:auto; overflow-y:hidden;}
  .header .header__menu::-webkit-scrollbar{height:6px;}
  .header .header__menu::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25); border-radius:3px;}
  .header .header__menu ul{flex-wrap:nowrap !important; white-space:nowrap;}
  .header .header__menu ul li{flex:0 0 auto;}
  /* Спейсинг из фигмы (узел Menu 603:3127): gap 24px между пунктами, шрифт 16px. */
  .header .header__menu ul li:not(:last-child){margin-right:24px;}
  .header .header__menu ul li a{font-size:16px;}
}

/* ==== Баннер во всю ширину на десктопе (заказчик 12.09: без выглядывания соседних слайдов) ====
   Баннер с раунда 2 был «bleed»-каруселью (vp с отрицательными отступами -64px + паддинг,
   слайды calc(100% - Npx), наклон/скейл — соседи выглядывали по краям). Заказчик просит один
   слайд строго во всю ширину. Перебиваем всю ту механику блоком ПОВЫШЕННОЙ специфичности
   (.oki-hero-wrap .oki-hero-track…), только для десктопа. Мобильную карусель не трогаем. */
@media(min-width:901px){
  .oki-hero-wrap .oki-hero-vp{margin:0 !important;padding:6px 0 14px !important;overflow:hidden !important;}
  .oki-hero-wrap .oki-hero-track{gap:0 !important;
    transform:translateX(calc(var(--i) * -100% + var(--oki-drag,0px))) !important;}
  .oki-hero-wrap .oki-hero-track .oki-hero{flex:0 0 100% !important;opacity:1 !important;
    transform:none !important;border-radius:28px;}
  .oki-hero-wrap .oki-hero-track .oki-hero.is-active{transform:none !important;}
}

/* Главная: по фигме максимум 8 позиций на категорию (десктоп, ограничено в шаблоне trends),
   на мобильной — 4. Лишние карточки (5-я и далее) на узких экранах прячем. */
@media(max-width:900px){
  .catalog-list--home .catalog-list__item:nth-child(n+5){display:none !important;}
}

/* Вкладки подразделов каталога («Все / Классические / Запечённые…», как у тейка).
   В header.css тейка ссылки чёрные, выбранная и hover красные — на тёмном фоне окимаки
   их не видно. Обычные белым, выбранная и hover — жёлтым акцентом, как «Акции» в шапке. */
.catalog-section-list ul li a,
.catalog-section-list ul li a:active,
.catalog-section-list ul li a:visited{color:var(--oki-text);}
.catalog-section-list ul li a:hover,
.catalog-section-list ul li.catalog-section-list_item_selected a{color:var(--oki-accent);}
/* мобильная версия — выпадающий список, тёмный как селекты оформления */
.custom-select-catalog .custom-select__selected,
.custom-select-catalog .custom-select__list{background:#1e1e1e !important;border-color:#1e1e1e !important;}
.custom-select-catalog .custom-select__selected span,
.custom-select-catalog .custom-select__item{color:var(--oki-text) !important;}
.custom-select-catalog .custom-select__item:hover{color:var(--oki-accent) !important;}
.custom-select-catalog .custom-select__selected img{filter:invert(1);}

/* Счётчик в блоках допродажи корзины: колонка ~96px, а стандартный счётчик (44+38+44)
   шире и после добавления налезал на соседнюю карточку. Ужимаем только внутри корзины. */
#basket .add_block_basket-list .basket-counter{gap:2px;justify-content:center;max-width:100%;}
#basket .add_block_basket-list .basket-counter .minus,
#basket .add_block_basket-list .basket-counter .plus{width:30px;height:30px;font-size:18px;flex:0 0 30px;}
#basket .add_block_basket-list .basket-counter .count input{width:24px;}

/* Баннер главной со ссылкой — тег <a>, без подчёркивания и синего цвета */
a.oki-hero{color:inherit;text-decoration:none;}
/* Акции из инфоблока: ссылка «Подробнее» и детальная страница */
.oki-promo__more{display:inline-block;margin-top:14px;color:var(--oki-accent);font-weight:700;text-decoration:none;}
.oki-promo__more:hover{text-decoration:underline;}
.oki-promo__back{display:block;width:max-content;margin:8px 0 18px;color:#9aa3ad;text-decoration:none;font-size:15px;}
.oki-promo__back:hover{color:var(--oki-accent);}
.oki-promo__detail-img{display:block;width:100%;max-width:760px;max-height:420px;object-fit:cover;border-radius:28px;margin:8px 0 28px;}
.oki-promo__text{color:#d5d9dd;font-size:18px;line-height:1.6;max-width:760px;}
.oki-promo__text p{margin:0 0 14px;}

/* Баннер главной = готовая картинка целиком (правка заказчика 16.09): без зелёной подложки,
   без плашки и заголовка поверх, без наклона активного слайда. Как слайдер тейка. */
.oki-hero-track .oki-hero--pic{background:none !important;min-height:0 !important;padding:0 !important;
  display:block !important;transform:none !important;overflow:hidden;}
.oki-hero-track .oki-hero--pic.is-active{transform:none !important;}
.oki-hero-track .oki-hero--pic picture{display:block;}
.oki-hero__pic{display:block;width:100%;height:auto;border-radius:inherit;}