/*
 * Дополнения к site.css из макета. Сам site.css не правим: следующую выгрузку
 * из Claude Design кладём поверх него, а всё своё живёт здесь.
 *
 * В выгрузке открытое меню и выбранную роль рисовал её рантайм инлайн-стилями.
 * Разметка у нас теперь серверная, поэтому те же состояния заданы здесь по
 * aria-атрибутам, а site.js только переключает атрибуты.
 */
body.sb-body{margin:0;background:#fff}

/*
 * Резиновая страница на небольших ПК: масштаб считает скрипт в <head>
 * (layout.blade.php) так, чтобы у содержимого оставалось 30 px полей. Цветной
 * первый экран при этом стоит в 10 px от края окна, и его содержимое — в 20 px
 * от края фона, вровень с остальной страницей. Делим на масштаб, чтобы на
 * экране выходили ровно эти пиксели.
 */
html.sb-zoomed body.sb-body{zoom:var(--sb-zoom,1)}
html.sb-zoomed .sb-top{margin-left:calc(10px / var(--sb-zoom,1));margin-right:calc(10px / var(--sb-zoom,1))}

/*
 * Иллюстрации как фото (site.js, [data-fit]). На узком экране нарисованная
 * иллюстрация считается в настольной ширине и уменьшается целиком. Обёртка
 * .sb-scale-c объявлена контейнером «sb» шириной 1296 px: правила макета
 * @container sb внутри неё видят настольную ширину и не перестраивают
 * рисунок под телефон. Лишняя ширина контейнера обрезается .sb-scale.
 * Имя не sb-fit: в site.css оно уже занято картинкой «на всю площадь».
 */
/* contain: широкий контейнер внутри не должен раздвигать колонку сетки, в которой стоит иллюстрация. */
.sb-scale{flex:none;overflow-x:clip;contain:inline-size}
.sb-scale-c{container:sb/inline-size;width:1296px}

/* Открытое/закрытое: правило из site.css (display:grid и т.п.) иначе перебивает атрибут hidden. */
.sb [hidden]{display:none !important}

/*
 * Шапка — отдельным слоем поверх страницы. Каждая обёртка .sb в макете
 * объявлена контейнером (container-type), а это своя стопка слоёв: без
 * z-index ряд иконок, идущий ниже по разметке, рисовался бы поверх
 * открытого меню. Сам слой и закрепление при прокрутке — site-v5.css.
 */
.sb-hd-wrap{position:relative;z-index:40}

/*
 * Карточка шапки не шире своего места минус по 20 px с краёв. В макете её
 * ограничивает только max-width 1136, и на планшете (761–1023, без
 * уменьшения страницы) она прилипала к краям окна. На телефоне — как в макете.
 */
@container sb (min-width: 761px){
  .sb-hd-in{max-width:min(1136px, calc(100% - 40px))}
}

/*
 * Закреплённая шапка видна только при прокрутке вверх (просьба владельца):
 * вниз она уезжает за край, вверх возвращается. Класс sb-hd-hide на <html>
 * ставит site.js по направлению прокрутки.
 *
 * --sb-pin — сколько места сверху занимает видимая шапка; по нему встают
 * закреплённые колонки и заголовки при переходе из «Содержания» (kb-app.css),
 * чтобы не уходить под шапку и не висеть с пустым местом, когда её нет.
 * Карточка шапки кончается на 96 px от верха окна, на телефоне на 70.
 */
.sb-wrap{--sb-pin:96px}
@container sb (max-width: 760px){
  .sb-wrap{--sb-pin:70px}
}
html.sb-hd-hide .sb-wrap{--sb-pin:0px}
.sb-stick>.sb{transition:transform .25s ease}
html.sb-hd-hide .sb-stick>.sb{transform:translateY(calc(-100% - 40px))}
/* Слой шапки во всю ширину и с отступом сверху прозрачен, но ловил бы клики по странице под собой. */
.sb-stick{pointer-events:none}
.sb-stick .sb-hd-in{pointer-events:auto}
@media (prefers-reduced-motion: reduce){
  .sb-stick>.sb{transition:none}
}

/* Меню «Инструменты» */
.sb-nav button[aria-expanded="true"]{background:var(--bg2)}
.sb-nav button svg{transition:transform .15s}
.sb-nav button[aria-expanded="true"] svg{transform:rotate(180deg)}

/* Роли команды: выбранная — белая карточка и синяя иконка */
.sb-tm-r .sb-tm-ic{background:#E9EBEF;color:#5B6475}
.sb-tm-r[aria-pressed="true"]{background:#FFFFFF;box-shadow:0 12px 32px -18px rgba(15,23,41,.28)}
.sb-tm-r[aria-pressed="true"] .sb-tm-ic{background:#2C5EEA;color:#FFFFFF}

/* Бургер: две полоски закрытого меню и крестик открытого, по aria-expanded.
   С «.sb» впереди: site-v5.css показывает каждую иконку бургера правилом
   .sb .sb-burger svg{display:block}, и без него видны были обе сразу. */
.sb .sb-burger .sb-burger-x{display:none}
.sb .sb-burger[aria-expanded="true"] .sb-burger-x{display:block}
.sb .sb-burger[aria-expanded="true"] .sb-burger-bars{display:none}
/* Вошедшему одна кнопка «Личный кабинет» на всю ширину, а не в половину сетки. */
.hm-act .hm-act-one{grid-column:1 / -1}
/* Длинное меню на низком экране листается само, страница под ним стоит. */
.sb .hm-mob{max-height:calc(100dvh - 96px);overflow-y:auto;overscroll-behavior:contain}
/*
 * Полное меню в шапке помещается от ~960 px: логотип, четыре пункта, «Войти»
 * и «Начать бесплатно». В макете бургер включается только с 760, и между ними
 * кнопка уезжала за край. Поэтому бургер — до 980, а мобильное меню макета
 * (site-v5.css, там оно только до 760) повторено здесь для 761–980.
 */
@container sb (max-width: 980px){
  .sb-nav,.sb-hd-act{display:none}
  .sb-burger{display:flex;margin-left:auto}
  .sb-menu{display:none}
}
@container sb (min-width: 761px) and (max-width: 980px){
  .hm-mob{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:calc(100% + 8px);padding:8px;border-radius:16px;background:#fff;box-shadow:0 32px 64px -20px rgba(15,23,41,.25),0 0 0 1px rgba(15,23,41,.04);z-index:1001}
  .hm-tools{display:flex;flex-direction:column}
  .hm-mob a.hm-tl{display:flex;align-items:center;gap:12px;padding:6px 8px;border-radius:10px;min-width:0}
  .hm-mob .sb-ic{width:32px;height:32px;border-radius:9px;flex:none}
  .hm-mob .sb-ic img{width:20px;height:20px}
  .sb .hm-mob .hm-n{font-size:15px;line-height:20px;font-weight:600}
  .hm-links{display:flex;flex-direction:column;margin-top:6px;padding-top:6px;box-shadow:0 -1px 0 #EEF0F3}
  .hm-links a{padding:8px;border-radius:10px;font-size:15px;line-height:20px;font-weight:500;color:#0F1729}
  .hm-act{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
  .sb .hm-act .sb-btn--ghost{background:#F1F3F6;box-shadow:none;border:0;color:#0F1729}
  .hm-act .sb-btn{justify-content:center;height:44px;border-radius:12px;font-size:15px;padding:0 12px}
}

/* Реквизиты продавца в нижней строке подвала, сразу после «© Sellerbek»; длинная строка переносится. */
.sb-ft-copy{min-width:0;line-height:22px}
/* Telegram-канал и Instagram под логотипом в подвале. */
.sb-ft-soc{display:flex;gap:10px}
.sb-ft-soc a{width:40px;height:40px;border-radius:12px;background:#FFFFFF;box-shadow:0 0 0 1px var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink2);transition:color .15s,box-shadow .15s}
.sb-ft-soc a:hover{color:var(--blue);box-shadow:0 0 0 1px var(--blue)}

/*
 * Текст для поисковиков внизу страниц (landing/partials/seo-text): заголовок,
 * вводный абзац и блоки в две колонки. Шрифт и цвета те же, что у
 * описаний в блоках макета, чтобы текст не выглядел чужим.
 */
.sb-seo .sb-h2{max-width:920px}
.sb-seo-lead{max-width:920px;margin:20px 0 0;font-size:18px;line-height:28px;color:var(--ink2,#5B6475)}
.sb-seo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 56px;margin-top:40px}
.sb-seo-grid h3{margin:0 0 8px;font-size:20px;line-height:28px;font-weight:600;color:var(--ink,#0F1729)}
.sb-seo-grid p{margin:0;font-size:16px;line-height:26px;color:var(--ink2,#5B6475)}
.sb-seo a{color:var(--blue,#2C5EEA);text-decoration:none}
.sb-seo a:hover{text-decoration:underline}
@media (max-width:760px){
  .sb-seo-lead{font-size:16px;line-height:26px}
  .sb-seo-grid{grid-template-columns:1fr;gap:24px;margin-top:28px}
  .sb-seo-grid h3{font-size:18px;line-height:26px}
}