/* Start:/local/templates/dompro/template_styles.css?179066825787594*/
/* design/ap-shell.css — токены + каркас витрины «Дом прораба».
 * Перенесено из Shell.dc.html дословно (те же классы ap-*); литералы цвета заменены на var(--ap-…).
 * В шаблоне Битрикса становится частью /local/templates/dompro/template_styles.css. */

/* ===== design/tokens.css — дословно (ADR-262) ===== */
:root{
  --ap-bg:#FFFFFF; --ap-surface:#FFFFFF; --ap-surface-2:#F1EFEA;
  --ap-ink:#16181D; --ap-ink-2:#5C6069; --ap-ink-3:#9A9EA6;
  --ap-line:rgba(22,24,29,.09); --ap-line-2:rgba(22,24,29,.16);
  --ap-accent:#F2A63B; --ap-accent-600:#E0912A; --ap-accent-ink:#1B1508;
  --ap-green:#1F9E62; --ap-red:#D8483B;
  --ap-r-sm:8px; --ap-r:12px; --ap-r-lg:18px; --ap-r-xl:24px;
  --ap-sh-1:0 1px 2px rgba(22,24,29,.05);
  --ap-sh-2:0 2px 4px rgba(22,24,29,.04), 0 12px 28px -14px rgba(22,24,29,.18);
  --ap-sh-3:0 4px 8px rgba(22,24,29,.05), 0 24px 48px -20px rgba(22,24,29,.28);
  --ap-dur-160:160ms; --ap-ease:ease-out;
  --ap-focus:0 0 0 2px var(--ap-surface), 0 0 0 5px var(--ap-ink);
  --bs-body-font-family:'Manrope',system-ui,sans-serif;
  --bs-body-color:var(--ap-ink); --bs-body-bg:var(--ap-bg);
  --bs-border-radius:var(--ap-r); --bs-primary:#16181D;
}
body{margin:0;background:var(--ap-bg);color:var(--ap-ink);font-family:'Manrope',system-ui,sans-serif;-webkit-font-smoothing:antialiased;letter-spacing:-.01em}
a{color:var(--ap-ink);text-decoration:none}
a:hover{color:var(--ap-accent-600)}
img{max-width:100%}
button{font-family:inherit}

/* ===== обвязка артборда (в код шаблона не идёт) ===== */
.ap-doc{padding:48px 56px 96px;display:flex;flex-direction:column;gap:56px}
.ap-turn{display:flex;flex-direction:column;gap:40px}
.ap-eyebrow{font:700 11px/1 'Manrope';letter-spacing:.14em;text-transform:uppercase;color:var(--ap-ink-3)}
.ap-h1{font:800 46px/1.05 'Manrope';letter-spacing:-.035em;margin:12px 0 0}
.ap-lead{font:400 16px/1.6 'Manrope';color:var(--ap-ink-2);max-width:78ch;margin:14px 0 0}
.ap-row{display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start}
.ap-id{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;background:var(--ap-ink);color:var(--ap-surface);font:800 11px/1 'Manrope';letter-spacing:.04em}
.ap-cap{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.ap-cap b{font:700 14px/1 'Manrope';letter-spacing:-.02em}
.ap-cap span{font:500 12.5px/1 'Manrope';color:var(--ap-ink-3)}
.ap-board{width:1440px;background:var(--ap-bg);border:1px solid var(--ap-line);border-radius:var(--ap-r-lg);box-shadow:var(--ap-sh-2);overflow:hidden;position:relative}
.ap-board--m{width:390px}
.ap-pair{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start}
.ap-pair__t{font:700 12.5px/1 'Manrope';letter-spacing:-.01em;color:var(--ap-ink);margin:0 0 10px;display:flex;align-items:center;gap:8px}
.ap-pair__t i{font-style:normal;font:700 10.5px/1 'Manrope';letter-spacing:.1em;text-transform:uppercase;color:var(--ap-ink-3)}
.ap-state{display:flex;flex-direction:column;gap:14px}
.ap-mstack{display:flex;flex-direction:column;min-height:100%}
.ap-mfill{flex:1 1 auto}
.ap-msug{border-top:1px solid var(--ap-line);background:var(--ap-surface)}
.ap-board--clip{overflow:hidden}
.ap-stub{margin:0;padding:64px 0;text-align:center;font:600 12.5px/1 ui-monospace,Menlo,monospace;color:var(--ap-ink-3);background:repeating-linear-gradient(135deg,var(--ap-surface-2) 0 10px,transparent 10px 20px);border-top:1px solid var(--ap-line);border-bottom:1px solid var(--ap-line)}
.ap-stub--m{padding:120px 0}

/* ===== container ===== */
.ap-c{max-width:1360px;margin:0 auto;padding:0 40px}
.ap-c--m{padding:0 16px}

/* ===== topbar ===== */
.ap-header{background:var(--ap-surface);position:relative}
.ap-topbar{border-bottom:1px solid var(--ap-line)}
.ap-topbar__in{display:flex;align-items:center;height:42px;gap:24px;font:500 12.5px/1 'Manrope'}
.ap-topbar a{color:var(--ap-ink-2)}
.ap-topbar a:hover{color:var(--ap-ink)}
.ap-topbar__r{margin-left:auto;display:flex;align-items:center;gap:20px}
.ap-hours{color:var(--ap-ink-3);font:500 12.5px/1 'Manrope'}
.ap-phone{font:700 13.5px/1 'Manrope';color:var(--ap-ink)}
.ap-wa{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 13px;border:1px solid var(--ap-line-2);border-radius:99px;font:600 12.5px/1 'Manrope';color:var(--ap-ink)}
.ap-wa:hover{border-color:var(--ap-green);color:var(--ap-green)}
.ap-wa i{width:8px;height:8px;border-radius:50%;background:var(--ap-green);display:block}

/* ===== mainbar ===== */
.ap-mainbar{display:flex;align-items:center;gap:20px;padding:18px 0}
.ap-logo{flex:none;display:block}
.ap-logo img{display:block;height:56px;width:auto}
.ap-btn-catalog{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 20px;border:0;border-radius:var(--ap-r);background:var(--ap-ink);color:var(--ap-surface);font:700 14px/1 'Manrope';letter-spacing:-.01em}
.ap-btn-catalog:hover{background:var(--ap-ink)}
.ap-btn-catalog--open{background:var(--ap-accent);color:var(--ap-accent-ink)}
/* UI-P5 (в): `:hover` (специфичность 0,2,0) перебивал только `background` у `--open` (0,1,0) —
   текст оставался тёмным (--ap-accent-ink), фон становился тёмным (--ap-ink) от hover — тёмный на
   тёмном при наведении на открытую кнопку (owner remarks evening #4). Своя пара классов — выше
   специфичности `:hover` в любом порядке источника. */
.ap-btn-catalog--open:hover{background:var(--ap-accent);color:var(--ap-accent-ink)}
.ap-burger{display:grid;gap:3px}
.ap-burger i{display:block;width:14px;height:1.6px;background:currentColor;border-radius:2px}
.ap-search{flex:1 1 auto;min-width:200px;position:relative}
.ap-search input{width:100%;height:48px;border:1px solid var(--ap-line-2);border-radius:var(--ap-r);background:var(--ap-surface);padding:0 56px 0 18px;font:500 14px/1 'Manrope';color:var(--ap-ink)}
.ap-search input::placeholder{color:var(--ap-ink-3)}
.ap-search--focus input{border-color:var(--ap-ink);box-shadow:0 0 0 4px var(--ap-line)}
.ap-search__btn{position:absolute;right:6px;top:6px;width:38px;height:36px;border:0;border-radius:9px;background:var(--ap-accent);color:var(--ap-accent-ink);display:grid;place-items:center}
.ap-search__btn:hover{background:var(--ap-accent-600)}
.ap-acts{display:flex;align-items:center;gap:6px;flex:none}
.ap-act{position:relative;display:flex;align-items:center;gap:10px;height:48px;padding:0 14px;border-radius:var(--ap-r);color:var(--ap-ink);font:600 13px/1.25 'Manrope'}
.ap-act:hover{background:var(--ap-surface-2)}
.ap-act__ico{position:relative;display:grid;place-items:center;color:var(--ap-ink-2)}
.ap-act small{display:block;font:500 11.5px/1 'Manrope';color:var(--ap-ink-3);margin-top:4px}
.ap-badge{position:absolute;top:-6px;right:-8px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--ap-accent);color:var(--ap-accent-ink);font:800 10.5px/18px 'Manrope';text-align:center}

/* ===== navbar ===== */
.ap-nav{border-top:1px solid var(--ap-line);position:relative}
.ap-nav__list{display:flex;align-items:center;gap:2px;height:52px;margin:0;padding:0;list-style:none}
.ap-nav__link{display:inline-flex;align-items:center;height:34px;padding:0 12px;border-radius:99px;font:600 13.5px/1 'Manrope';color:var(--ap-ink-2);white-space:nowrap}
.ap-nav__link:hover{background:var(--ap-surface-2);color:var(--ap-ink)}
.ap-nav__link--sale{color:var(--ap-red);font-weight:700}
.ap-nav__link--active{background:var(--ap-ink);color:var(--ap-surface)}
.ap-nav__link--active:hover{background:var(--ap-ink);color:var(--ap-surface)}
.ap-nav__more{margin-left:auto}
.ap-nav__link--more{color:var(--ap-ink)}

/* ===== мегаменю ===== */
.ap-mega{border-top:1px solid var(--ap-line);background:var(--ap-surface);box-shadow:var(--ap-sh-2)}
.ap-mega__in{display:grid;grid-template-columns:300px minmax(0,1fr);gap:0;min-height:428px}
.ap-mega__l{border-right:1px solid var(--ap-line);padding:16px 16px 22px 0;display:flex;flex-direction:column;gap:2px}
.ap-mega__li{display:flex;align-items:center;justify-content:space-between;gap:12px;height:40px;padding:0 14px;border-radius:var(--ap-r-sm);font:600 14px/1 'Manrope';color:var(--ap-ink-2)}
.ap-mega__li:hover{background:var(--ap-surface-2);color:var(--ap-ink)}
.ap-mega__li--on{background:var(--ap-surface-2);color:var(--ap-ink)}
.ap-mega__li em{font:500 12px/1 'Manrope';font-style:normal;color:var(--ap-ink-3)}
.ap-mega__r{padding:22px 0 26px 34px}
.ap-mega__cols{column-count:3;column-gap:34px}
.ap-mega__grp{break-inside:avoid;margin:0 0 22px}
.ap-mega__grp b{display:block;font:700 14px/1.3 'Manrope';letter-spacing:-.02em;margin:0 0 8px}
.ap-mega__grp a{display:block;font:500 13.5px/1.75 'Manrope';color:var(--ap-ink-2)}
.ap-mega__grp a:hover{color:var(--ap-accent-600)}
.ap-mega__grp b a{display:inline;font:700 14px/1.3 'Manrope';letter-spacing:-.02em;color:var(--ap-ink)}
.ap-mega__grp b a:hover{color:var(--ap-accent-600)}
.ap-mega__all{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border:1px solid var(--ap-line-2);border-radius:var(--ap-r);font:700 13.5px/1 'Manrope'}
.ap-mega__all:hover{border-color:var(--ap-ink);color:var(--ap-ink)}
.ap-mega__empty{display:flex;align-items:center;min-height:380px}

/* ===== подсказки поиска ===== */
.ap-sug{position:absolute;left:0;right:0;top:54px;background:var(--ap-surface);border:1px solid var(--ap-line);border-radius:var(--ap-r);box-shadow:var(--ap-sh-3);padding:6px;z-index:5}
.ap-sug__it{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:var(--ap-r-sm)}
.ap-sug__it:hover{background:var(--ap-surface-2)}
.ap-sug__ph{flex:none;width:40px;height:40px;border-radius:var(--ap-r-sm);border:1px solid var(--ap-line);background:repeating-linear-gradient(135deg,var(--ap-surface-2) 0 6px,transparent 6px 12px)}
.ap-sug__nm{flex:1 1 auto;font:600 13.5px/1.35 'Manrope'}
.ap-sug__pr{flex:none;font:800 14px/1 'Manrope';white-space:nowrap}
.ap-sug__hd{font:700 10.5px/1 'Manrope';letter-spacing:.12em;text-transform:uppercase;color:var(--ap-ink-3);padding:12px 10px 6px}
.ap-sug__sec{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;border-radius:var(--ap-r-sm);font:600 13.5px/1 'Manrope'}
.ap-sug__sec:hover{background:var(--ap-surface-2)}
.ap-sug__sec em{font-style:normal;font:500 12px/1 'Manrope';color:var(--ap-ink-3)}
.ap-sug__all{display:block;margin-top:6px;border-top:1px solid var(--ap-line);padding:13px 10px 9px;font:700 13px/1 'Manrope'}
.ap-sug__none{padding:16px 10px;font:500 13.5px/1.5 'Manrope';color:var(--ap-ink-2)}

/* ===== выпадающее кабинета ===== */
.ap-drop{position:absolute;right:0;top:54px;min-width:216px;background:var(--ap-surface);border:1px solid var(--ap-line);border-radius:var(--ap-r);box-shadow:var(--ap-sh-3);padding:6px;z-index:5}
.ap-drop a{display:block;padding:10px 12px;border-radius:var(--ap-r-sm);font:600 13.5px/1 'Manrope'}
.ap-drop a:hover{background:var(--ap-surface-2)}
.ap-drop a.ap-drop__out{color:var(--ap-ink-2);border-top:1px solid var(--ap-line);border-radius:0;margin-top:4px;padding-top:13px}

/* ===== тост ===== */
.ap-toast{position:fixed;right:24px;bottom:24px;z-index:60;display:flex;align-items:center;gap:16px;background:var(--ap-surface);border:1px solid var(--ap-line);border-radius:var(--ap-r);box-shadow:var(--ap-sh-3);padding:14px 16px;max-width:400px}
.ap-toast__ok{flex:none;width:26px;height:26px;border-radius:50%;background:var(--ap-green);color:var(--ap-surface);display:grid;place-items:center}
.ap-toast__tx b{display:block;font:700 13.5px/1.3 'Manrope';letter-spacing:-.02em}
.ap-toast__tx span{display:block;font:500 12px/1.3 'Manrope';color:var(--ap-ink-3);margin-top:3px}
.ap-toast.ap-mtoast{position:fixed;left:16px;right:16px;bottom:78px}
.ap-toast__btn{flex:none;height:36px;padding:0 15px;border:0;border-radius:var(--ap-r-sm);background:var(--ap-ink);color:var(--ap-surface);font:700 13px/36px 'Manrope'}

/* ===== подвал ===== */
.ap-footer{background:var(--ap-surface);border-top:1px solid var(--ap-line);margin-top:0}
.ap-footer__in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 1.35fr;gap:40px;padding:44px 0 36px}
.ap-fcol b{display:block;font:700 13px/1 'Manrope';letter-spacing:.02em;margin:0 0 14px}
.ap-fcol a{display:block;font:500 13.5px/2 'Manrope';color:var(--ap-ink-2)}
.ap-fcol a:hover{color:var(--ap-accent-600)}
.ap-fc__phone{font:800 20px/1 'Manrope';letter-spacing:-.03em;display:block;margin:0 0 6px}
.ap-fc__p{font:500 13px/1.6 'Manrope';color:var(--ap-ink-2);margin:0 0 4px}
.ap-soc{display:flex;gap:8px;margin-top:16px}
.ap-soc a{width:36px;height:36px;border:1px solid var(--ap-line-2);border-radius:var(--ap-r-sm);display:grid;place-items:center;font:800 12px/1 'Manrope';color:var(--ap-ink-2)}
.ap-soc a:hover{border-color:var(--ap-ink);color:var(--ap-ink)}
.ap-legal{border-top:1px solid var(--ap-line);display:flex;align-items:center;gap:26px;padding:18px 0;font:500 12.5px/1.4 'Manrope';color:var(--ap-ink-3);flex-wrap:wrap}
.ap-legal a{color:var(--ap-ink-2)}
.ap-legal__c{margin-right:auto}

/* ===== мобильная ===== */
.ap-mhead{background:var(--ap-surface);border-bottom:1px solid var(--ap-line)}
.ap-mbar{display:flex;align-items:center;gap:14px;height:58px}
.ap-mburger{flex:none;width:44px;height:44px;border:1px solid var(--ap-line-2);border-radius:var(--ap-r-sm);background:var(--ap-surface);display:grid;place-items:center;color:var(--ap-ink)}
.ap-mburger i{display:block;width:16px;height:1.8px;background:currentColor;border-radius:2px;margin:2px 0}
.ap-mlogo{flex:1 1 auto;display:block;overflow:hidden}
.ap-mlogo img{display:block;height:40px;width:auto}
.ap-mcart{flex:none;position:relative;width:44px;height:44px;display:grid;place-items:center;color:var(--ap-ink)}
.ap-msearch{padding:0 0 12px}
.ap-mstatus{display:flex;align-items:center;justify-content:space-between;height:26px;padding:0 16px;font:600 11.5px/1 'Manrope';color:var(--ap-ink-3);background:var(--ap-surface-2)}
.ap-mtabs{position:sticky;bottom:0;display:grid;grid-template-columns:repeat(5,1fr);background:var(--ap-surface);border-top:1px solid var(--ap-line);box-shadow:var(--ap-sh-2)}
/* «Часть 2 дополнительно» (briefs/UI-2G.md ред. 4): подписи .ap-mtab на телефоне — 12 px (M-04;
   было 10.5 px — reference/2026-09-28_ui2g_p1_arch_mobile.txt строки .ap-mtab на каждом экране). */
.ap-mtab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;height:62px;font:600 12px/1 'Manrope';color:var(--ap-ink-3);position:relative}
.ap-mtab--on{color:var(--ap-ink)}
.ap-mtabs--fix{position:absolute;left:0;right:0;bottom:0}
.ap-mtab .ap-badge{top:2px;right:16px}
.ap-macc{border-bottom:1px solid var(--ap-line);padding:16px 0;display:flex;align-items:center;justify-content:space-between;font:700 14px/1 'Manrope'}
.ap-macc span{font:500 20px/1 'Manrope';color:var(--ap-ink-3)}
.ap-msheet{background:var(--ap-surface)}
.ap-msheet__hd{display:flex;align-items:center;justify-content:space-between;height:58px;border-bottom:1px solid var(--ap-line);font:800 15px/1 'Manrope'}
.ap-msheet__x{width:44px;height:44px;border:1px solid var(--ap-line-2);border-radius:var(--ap-r-sm);background:var(--ap-surface);display:grid;place-items:center;font:500 16px/1 'Manrope';color:var(--ap-ink-2)}
.ap-mlist{list-style:none;margin:0;padding:0}
.ap-mlist li{border-bottom:1px solid var(--ap-line)}
.ap-mlist a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:12px 0;font:600 14.5px/1.3 'Manrope'}
.ap-mlist em{font-style:normal;font:500 20px/1 'Manrope';color:var(--ap-ink-3)}
.ap-msub{list-style:none;margin:0;padding:0 0 12px 14px}
.ap-msub a{font:500 13.5px/1.3 'Manrope';color:var(--ap-ink-2);min-height:44px;padding:10px 0}
.ap-msec{font:700 10.5px/1 'Manrope';letter-spacing:.12em;text-transform:uppercase;color:var(--ap-ink-3);padding:20px 0 8px}
.ap-mbtn{display:flex;align-items:center;justify-content:center;height:48px;border-radius:var(--ap-r);background:var(--ap-ink);color:var(--ap-surface);font:700 14px/1 'Manrope';margin:14px 0 0}
.ap-mbtn--wa{background:var(--ap-surface);border:1px solid var(--ap-line-2);color:var(--ap-ink);margin-top:10px}

/* ===== переключение раскладки по трём диапазонам (UI-1G часть 3 В, design/spec/mobile.md §2/§4):
   телефон < 600, планшет 600–1023, компьютер >= 1024. Только каркас — шапка, нижняя навигация
   (.ap-mtabs), меню «Каталог» (.ap-msheet/.ap-mega), подвал; полоса 992–1023 экранов 5–14
   (col-lg-*, строки 564 и ниже) не трогается — там остаётся компьютерная раскладка контента. */
.ap-mhead,.ap-msheet,.ap-mtabs,.ap-mmenu{display:none}
.ap-footer__groups{display:contents}
.ap-footer__groups-m{display:none}
/* < 1024: каркас телефона/планшета — шапка .ap-mhead, нижняя навигация закреплена, меню «Каталог»
   шторкой (ширина шторки разведена ниже: полный экран на телефоне, 360px на планшете). */
@media (max-width:1023.98px){
  .ap-header>.ap-topbar,.ap-header>.ap-c>.ap-mainbar,.ap-header>.ap-nav,.ap-header>.ap-mega{display:none}
  .ap-mhead{display:block}
  .ap-mtabs{display:grid;position:fixed;left:0;right:0;bottom:0}
  .ap-msheet{display:none}
  .ap-msheet.ap-msheet--open{display:block;position:fixed;inset:0;z-index:20;overflow-y:auto}
  /* Карточка «Сортировка» (.ap-msheet.ap-msheet--fix внутри .ap-modal) не входила в исключение
     строки выше (только .ap-msheet--open) — правило .ap-msheet{display:none} гасило её всегда,
     затемнение .ap-modal открывалось без содержимого (ADR-296 §4, строка 80). Показ и скрытие
     держит инлайновый display самого .ap-modal; окно входа показывает свою карточку отдельным
     правилом [data-dp-auth-sheet] (строка 789). */
  .ap-modal .ap-msheet.ap-msheet--fix{display:block}
}
/* < 600: телефон — подвал аккордеоном, поиск строкой под шапкой (.ap-msearch — блок по умолчанию,
   ничего не меняется), меню «Каталог» на весь экран (унаследовано из блока выше). */
@media (max-width:599.98px){
  .ap-footer__in{grid-template-columns:1fr;gap:0;padding:8px 0 0}
  .ap-footer__groups{display:none}
  .ap-footer__groups-m{display:block}
  .ap-fcol--contacts{padding-top:20px 0 4px}
  .ap-legal{display:block}
}
/* 600–1023: планшет — шапка телефона, но поле поиска в строке шапки (не отдельной строкой под
   ней); меню «Каталог» — шторка слева 360px (перекрывает inset:0 блока выше, тот же селектор,
   позже в каскаде); подвал — 2 колонки (группы каталога/покупателя + контакты, без аккордеона). */
@media (min-width:600px) and (max-width:1023.98px){
  .ap-mhead .ap-c--m{display:flex;align-items:center;flex-wrap:nowrap;gap:16px}
  .ap-mhead .ap-mbar{flex:none}
  .ap-mhead .ap-msearch{flex:1 1 auto;padding:0;min-width:0}
  .ap-msheet.ap-msheet--open{inset:auto;top:0;left:0;bottom:0;right:auto;width:360px}
  .ap-footer__in{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding:32px 0 28px}
}
@media (min-width:1024px){
  .ap-mega{display:none}
  .ap-mega.ap-mega--open{display:block}
}
.ap-toast{display:none}
.ap-toast.ap-toast--show{display:flex}

/* ===== UI-2: design/ap-screens.css (2026-09-17, sha256 6b0321d2c0a45a81…), дописано дословно,
   один раз, общий файл с UI-3…UI-5 (ADR-271 §2, briefs/UI-2.md шаг 2.1) ===== */

/* ===== главная ===== */
.ap-sec{padding:44px 0}
.ap-sec--hero{padding-top:28px}
.ap-sec--m{padding:24px 0}
.ap-sec__hd{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:0 0 20px}
.ap-h2{font:800 30px/1.15 'Manrope';letter-spacing:-.03em;margin:0}
.ap-h2--m{font-size:22px}
.ap-sub{font:500 14.5px/1.5 'Manrope';color:var(--ap-ink-2);margin:6px 0 0}
.ap-more{font:700 13.5px/1 'Manrope';white-space:nowrap}
.ap-ph{border-radius:var(--ap-r);border:1px solid var(--ap-line);background:repeating-linear-gradient(135deg,var(--ap-surface-2) 0 10px,transparent 10px 20px);display:grid;place-items:center;font:600 11.5px/1.4 ui-monospace,Menlo,monospace;color:var(--ap-ink-3);text-align:center;padding:12px}
.ap-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border:0;border-radius:var(--ap-r);background:var(--ap-ink);color:var(--ap-surface);font:700 14px/1 'Manrope'}
.ap-btn:hover{color:var(--ap-surface)}
.ap-btn--ghost{background:var(--ap-surface);border:1px solid var(--ap-line-2);color:var(--ap-ink)}
.ap-btn--ghost:hover{color:var(--ap-ink);border-color:var(--ap-ink)}
.ap-label{display:inline-flex;height:26px;align-items:center;padding:0 10px;border-radius:99px;background:var(--ap-surface-2);font:700 11px/1 'Manrope';letter-spacing:.1em;text-transform:uppercase;color:var(--ap-ink-2)}
.ap-hero{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);gap:20px;align-items:stretch}
.ap-hero--full{grid-template-columns:minmax(0,1fr)}
.ap-hero__big{background:var(--ap-surface);border:1px solid var(--ap-line);border-radius:var(--ap-r-lg);overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.ap-hero__tx{padding:40px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.ap-hero__h1{font:800 40px/1.06 'Manrope';letter-spacing:-.035em;margin:0}
.ap-hero__h1--m{font-size:26px}
.ap-hero__p{font:500 15px/1.5 'Manrope';color:var(--ap-ink-2);margin:0}
.ap-hero--m{grid-template-columns:minmax(0,1fr)}
.ap-hero--m .ap-hero__big{grid-template-columns:minmax(0,1fr)}
.ap-hero--m .ap-hero__tx{padding:20px;gap:12px}
.ap-promos{display:grid;grid-template-rows:1fr 1fr;gap:20px}
.ap-promos--one{grid-template-rows:1fr}
.ap-promo{position:relative;display:block;background:var(--ap-surface);border:1px solid var(--ap-line);border-radius:var(--ap-r-lg);padding:22px 24px}
.ap-promo:hover{box-shadow:var(--ap-sh-2);color:var(--ap-ink)}
.ap-promo b{display:block;font:700 17px/1.3 'Manrope';letter-spacing:-.02em;padding-right:28px}
.ap-promo p{font:500 13.5px/1.5 'Manrope';color:var(--ap-ink-2);margin:8px 0 0}
.ap-promo__ar{position:absolute;right:22px;top:20px;font:700 18px/1 'Manrope';color:var(--ap-ink-3)}
.ap-tizers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.ap-tiz{background:var(--ap-surface);border:1px solid var(--ap-line);border-radius:var(--ap-r-lg);padding:20px}
.ap-tiz__ico{display:block;width:34px;height:34px;border-radius:var(--ap-r-sm);background:var(--ap-surface-2);margin:0 0 14px}
.ap-tiz b{display:block;font:700 15px/1.3 'Manrope';letter-spacing:-.02em}
.ap-tiz p{font:500 13px/1.5 'Manrope';color:var(--ap-ink-2);margin:6px 0 0}
.ap-cats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.ap-cat{display:block;background:var(--ap-surface);border:1px solid var(--ap-line);border-radius:var(--ap-r-lg);padding:12px}
.ap-cat:hover{box-shadow:var(--ap-sh-2);color:var(--ap-ink)}
.ap-cat b{display:block;font:700 14px/1.3 'Manrope';letter-spacing:-.02em;margin:12px 0 0}
.ap-cat span{display:block;font:500 12.5px/1 'Manrope';color:var(--ap-ink-3);margin:6px 0 2px}
.ap-tiles{display:grid;gap:16px}
.ap-tiles--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ap-tiles--6{grid-template-columns:repeat(6,minmax(0,1fr))}
.ap-tiles--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.ap-tile{background:var(--ap-surface);border:1px solid var(--ap-line);border-radius:var(--ap-r-lg);padding:12px;display:flex;flex-direction:column;gap:8px}
.ap-tile__ph{position:relative;margin:0 0 4px}
.ap-tile__sale{position:absolute;top:10px;left:10px;background:var(--ap-green);color:var(--ap-surface);border-radius:var(--ap-r-sm);padding:5px 8px;font:800 11.5px/1 'Manrope'}
.ap-tile__brand{font:500 11px/1 'Manrope';letter-spacing:.08em;text-transform:uppercase;color:var(--ap-ink-3);min-height:11px}
.ap-tile__nm{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font:600 13.5px/1.35 'Manrope';overflow:hidden;min-height:37px}
.ap-tile__stock{font:600 12px/1 'Manrope';color:var(--ap-green)}
.ap-tile__stock--order{color:var(--ap-ink-3)}
.ap-tile__pr{display:flex;align-items:baseline;gap:8px;margin-top:auto}
.ap-tile__pr b{font:800 17px/1 'Manrope';letter-spacing:-.02em}
.ap-tile__pr s{font:500 13px/1 'Manrope';color:var(--ap-ink-3)}
.ap-tile__btn{height:44px;border:0;border-radius:var(--ap-r);background:var(--ap-ink);color:var(--ap-surface);font:700 13.5px/1 'Manrope'}
.ap-tile__link{display:block;text-align:center;font:600 12.5px/1 'Manrope';color:var(--ap-ink-2)}
.ap-qty{display:flex;align-items:center;justify-content:space-between;height:44px;border:1px solid var(--ap-line-2);border-radius:var(--ap-r);padding:0 6px}
.ap-qty button{width:38px;height:38px;border:0;background:transparent;font:700 16px/1 'Manrope';color:var(--ap-ink)}
.ap-qty b{font:700 14px/1 'Manrope'}
.ap-skel{background:var(--ap-surface-2);border-radius:var(--ap-r);height:14px}
.ap-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}
.ap-tabs--m{flex-wrap:nowrap;overflow-x:auto}
.ap-tab{flex:none;height:44px;padding:0 16px;border:1px solid var(--ap-line);border-radius:99px;background:var(--ap-surface);display:inline-flex;align-items:center;font:600 13.5px/1 'Manrope';color:var(--ap-ink-2)}
.ap-tab--on{background:var(--ap-ink);border-color:var(--ap-ink);color:var(--ap-surface)}
.ap-tab--on:hover{color:var(--ap-surface)}
.ap-brands{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.ap-brand{height:84px;border:1px solid var(--ap-line);border-radius:var(--ap-r);background:var(--ap-surface);display:grid;place-items:center;font:800 16px/1 'Manrope';letter-spacing:-.02em;color:var(--ap-ink-2)}
.ap-store{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:24px;background:var(--ap-surface);border:1px solid var(--ap-line);border-radius:var(--ap-r-lg);padding:24px}
.ap-store--m{grid-template-columns:minmax(0,1fr);gap:14px;padding:16px}
.ap-store__tx{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.ap-store__addr{font:700 17px/1.35 'Manrope';letter-spacing:-.02em}
.ap-g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ap-scroll{display:flex;gap:12px;overflow-x:auto;padding-bottom:4px}
.ap-scroll>*{flex:0 0 46%}
.ap-err{background:var(--ap-surface);border:1px solid var(--ap-line);border-radius:var(--ap-r-lg);padding:28px;text-align:center;font:600 14px/1.5 'Manrope';color:var(--ap-ink-2)}

/* ===== общее для клиентских экранов (UI-S2) ===== */
.ap-doc{width:max-content;min-width:100%}
.ap-crumbs{display:flex;flex-wrap:wrap;gap:8px;font:500 12.5px/1 'Manrope';color:var(--ap-ink-3);padding:18px 0 0}
.ap-crumbs a{color:var(--ap-ink-3)}
.ap-crumbs--m{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap}
/* display:flex снят (baseline M-QA-1 строка 66, «search» на 360): анонимный флекс-item голого
   текста заголовка держит min-width:auto по спецификации — не сжимался у́же своей однострочной
   ширины и обрезался вместо переноса на длинном запросе. Блочный H1 с обычным текстовым потоком
   переносит слова штатно; отступ у «N товаров» — margin-left вместо gap. overflow-wrap:break-word —
   поисковый запрос в кавычках сам по себе одно слово без пробелов («zzzznonexistentzzzz», 20
   знаков) и после снятия flex всё равно не помещался на 360 (scrollWidth 260 против clientWidth
   248) — обычный перенос рвёт только между словами, внутри длинного слова нужен явный разрыв. */
.ap-ph1{font:800 34px/1.1 'Manrope';letter-spacing:-.03em;margin:10px 0 0;overflow-wrap:break-word}
.ap-ph1--m{font-size:24px}
.ap-ph1 em{font-style:normal;font:500 14px/1 'Manrope';color:var(--ap-ink-3);margin-left:12px;white-space:nowrap}
/* UI-D2 ч.1 (.ap-ph1 43/21): «Оформление заказа» (sale.order.ajax/dp/template.php:151) — единственный
   H1 сайта без десктоп/мобильного дублирования блока и без класса `ap-ph1--m` вовсе (макет держит
   24px на 390, стенд — 34px всегда, найдено style_check.sh, «нет на стенде: checkout 390 .ap-ph1--m»).
   На страницах с двумя блоками (.ap-basket__desktop/__mobile и т.п.) `--m` уже расставлен в PHP —
   правило здесь их не меняет (тот же 24px, дубль безвреден), но снимает реальный дефект: H1
   оформления не уменьшался на телефоне ни для одного живого пользователя. */
@media (max-width:991.98px){
  .ap-ph1{font-size:24px}
}
.ap-card{background:var(--ap-surface);border:1px solid var(--ap-line);border-radius:var(--ap-r-lg);padding:20px}
.ap-card--pad0{padding:0}
.ap-h3{font:700 17px/1.3 'Manrope';letter-spacing:-.02em;margin:0 0 14px}
.ap-p{font:500 13.5px/1.55 'Manrope';color:var(--ap-ink-2);margin:0}
.ap-p--sm{font-size:12px}
.ap-lbl{display:block;font:600 12.5px/1 'Manrope';color:var(--ap-ink-2);margin:0 0 7px}
.ap-inp{width:100%;height:48px;border:1px solid var(--ap-line-2);border-radius:var(--ap-r);background:var(--ap-surface);padding:0 16px;font:600 14.5px/1 'Manrope';color:var(--ap-ink)}
.ap-inp--ph{color:var(--ap-ink-3);font-weight:500}
.ap-inp--err{border-color:var(--ap-red)}
.ap-inp--ro{background:var(--ap-surface-2);color:var(--ap-ink-2)}
.ap-ta{width:100%;min-height:88px;border:1px solid var(--ap-line-2);border-radius:var(--ap-r);background:var(--ap-surface);padding:13px 16px;font:500 13.5px/1.5 'Manrope';color:var(--ap-ink-3)}
.ap-hint{font:500 12px/1.45 'Manrope';color:var(--ap-ink-3);margin:7px 0 0}
.ap-hint--err{color:var(--ap-red)}
.ap-hint--acc{color:var(--ap-accent-600)}
.ap-field+.ap-field{margin-top:14px}
.ap-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ap-row3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ap-chips{display:flex;flex-wrap:wrap;gap:8px}
.ap-chips--m{flex-wrap:nowrap;overflow-x:auto}
.ap-chip{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--ap-line-2);border-radius:99px;background:var(--ap-surface);font:600 13.5px/1 'Manrope';color:var(--ap-ink)}
.ap-chip em{font-style:normal;color:var(--ap-ink-3);font-weight:500}
.ap-chip--on{background:var(--ap-ink);border-color:var(--ap-ink);color:var(--ap-surface)}
.ap-chip--on em{color:var(--ap-surface)}
.ap-chip--off{color:var(--ap-ink-3);background:var(--ap-surface-2);border-color:var(--ap-line)}
.ap-chip--err{border-color:var(--ap-red)}
.ap-chip--x{padding-right:12px}
.ap-chip--x i{font-style:normal;color:var(--ap-ink-3)}
.ap-pick{display:grid;gap:12px}
.ap-pick--2{grid-template-columns:1fr 1fr}
/* UI-3 2R сессия 7: на 360 карточки «Как получить» не шире рамки — колонка сжимается ниже мин. ширины текста */
.ap-pick--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ap-opt>span:last-child{min-width:0;overflow-wrap:break-word}
.ap-opt{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--ap-line-2);border-radius:var(--ap-r);background:var(--ap-surface);padding:16px;min-height:44px}
.ap-opt--on{border-color:var(--ap-ink);box-shadow:var(--ap-sh-1)}
.ap-opt__m{flex:none;width:20px;height:20px;border-radius:50%;border:1.6px solid var(--ap-line-2);margin-top:2px}
.ap-opt--on .ap-opt__m{border:6px solid var(--ap-ink)}
.ap-opt b{display:block;font:700 14.5px/1.25 'Manrope';letter-spacing:-.02em}
.ap-opt p{font:500 12.5px/1.45 'Manrope';color:var(--ap-ink-2);margin:6px 0 0}
.ap-seg{display:inline-flex;padding:4px;background:var(--ap-surface-2);border-radius:var(--ap-r);gap:4px}
.ap-seg a{display:inline-flex;align-items:center;min-height:36px;padding:0 16px;border-radius:var(--ap-r-sm);font:600 13.5px/1 'Manrope';color:var(--ap-ink-2)}
.ap-seg a.ap-seg--on{background:var(--ap-surface);color:var(--ap-ink);box-shadow:var(--ap-sh-1)}
.ap-map{position:relative;border-radius:var(--ap-r);border:1px solid var(--ap-line);background:repeating-linear-gradient(135deg,var(--ap-surface-2) 0 10px,transparent 10px 20px);display:grid;place-items:center;font:600 11.5px/1.4 ui-monospace,Menlo,monospace;color:var(--ap-ink-3);text-align:center;min-height:260px;overflow:hidden}
.ap-map__pin{position:absolute;left:50%;top:44%;width:16px;height:16px;border-radius:50%;background:var(--ap-red);border:3px solid var(--ap-surface);box-shadow:var(--ap-sh-2)}
.ap-sum__row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;font:500 13.5px/1.5 'Manrope';color:var(--ap-ink-2);padding:6px 0}
.ap-sum__row b{font:700 13.5px/1.5 'Manrope';color:var(--ap-ink)}
.ap-sum__tot{display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-top:1px solid var(--ap-line);margin-top:10px;padding-top:14px;font:700 15px/1 'Manrope'}
.ap-sum__tot b{font:800 24px/1 'Manrope';letter-spacing:-.03em}
.ap-sum__grey{color:var(--ap-ink-3)}
.ap-btn--acc{background:var(--ap-accent);color:var(--ap-accent-ink)}
.ap-btn--acc:hover{background:var(--ap-accent-600);color:var(--ap-accent-ink)}
.ap-btn--w{width:100%}
.ap-btn--off{background:var(--ap-surface-2);color:var(--ap-ink-3)}
.ap-btn--off:hover{color:var(--ap-ink-3)}
.ap-btn--sm{height:40px;padding:0 16px;font-size:13px}
.ap-spin{width:16px;height:16px;border-radius:50%;border:2px solid var(--ap-line-2);border-top-color:var(--ap-ink);display:inline-block}
.ap-btn .ap-spin{border-color:var(--ap-line-2);border-top-color:var(--ap-surface)}
.ap-plate{border:1px solid var(--ap-line-2);border-radius:var(--ap-r);background:var(--ap-surface);padding:14px 16px;font:600 13.5px/1.45 'Manrope'}
.ap-plate--err{border-color:var(--ap-red);color:var(--ap-red)}
.ap-plate--grey{background:var(--ap-surface-2);color:var(--ap-ink-2);border-color:var(--ap-line)}
.ap-st{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:99px;font:700 12px/1 'Manrope';background:var(--ap-surface-2);color:var(--ap-ink-2)}
.ap-st--wait{background:var(--ap-accent);color:var(--ap-accent-ink)}
.ap-st--ok{background:var(--ap-green);color:var(--ap-surface)}
.ap-st--go{background:var(--ap-ink);color:var(--ap-surface)}
.ap-mfixed{position:absolute;left:0;right:0;bottom:62px;background:var(--ap-surface);border-top:1px solid var(--ap-line);padding:12px 16px;box-shadow:var(--ap-sh-2);z-index:4}
.ap-mfixed__in{display:flex;align-items:center;gap:12px}
.ap-mfixed__in .ap-btn{flex:1 1 auto}
.ap-mfixed b{font:800 17px/1 'Manrope';letter-spacing:-.02em;white-space:nowrap}
.ap-mfixed span{display:block;font:500 11.5px/1 'Manrope';color:var(--ap-ink-3);margin-top:5px}
.ap-acct{display:flex;flex-direction:column;gap:2px}
.ap-acct a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--ap-r-sm);font:600 14px/1 'Manrope';color:var(--ap-ink-2)}
.ap-acct a.ap-acct--on{background:var(--ap-ink);color:var(--ap-surface)}
.ap-acct a.ap-acct--out{color:var(--ap-ink-3);border-top:1px solid var(--ap-line);border-radius:0;margin-top:8px}
.ap-acct__ph{font:500 12.5px/1.4 'Manrope';color:var(--ap-ink-3);padding:14px 14px 0}
.ap-line{border:0;border-top:1px solid var(--ap-line);margin:18px 0}
.ap-tbl{width:100%;border-collapse:collapse}
.ap-tbl th{font:600 11.5px/1 'Manrope';letter-spacing:.08em;text-transform:uppercase;color:var(--ap-ink-3);text-align:left;padding:0 0 12px}
.ap-tbl td{border-top:1px solid var(--ap-line);padding:14px 0;font:600 13.5px/1.35 'Manrope';vertical-align:middle}
.ap-tbl td.ap-tbl__r{text-align:right;white-space:nowrap}
.ap-thumb{width:56px;height:56px;border-radius:var(--ap-r-sm);border:1px solid var(--ap-line);background:repeating-linear-gradient(135deg,var(--ap-surface-2) 0 6px,transparent 6px 12px);flex:none}
.ap-thumb--80{width:80px;height:80px;border-radius:var(--ap-r)}
.ap-thumb--40{width:40px;height:40px}
.ap-steps{display:flex;align-items:flex-start;gap:0}
.ap-steps__i{flex:1 1 0;display:flex;flex-direction:column;gap:10px;position:relative;padding-right:8px}
.ap-steps__d{width:14px;height:14px;border-radius:50%;background:var(--ap-surface-2);border:2px solid var(--ap-line-2)}
.ap-steps__i--on .ap-steps__d{background:var(--ap-green);border-color:var(--ap-green)}
.ap-steps__i--now .ap-steps__d{background:var(--ap-accent);border-color:var(--ap-accent)}
.ap-steps__i b{font:700 12.5px/1.3 'Manrope'}
.ap-steps__i span{font:500 11.5px/1.3 'Manrope';color:var(--ap-ink-3)}
.ap-steps__i:after{content:"";position:absolute;left:14px;top:6px;right:8px;height:2px;background:var(--ap-line)}
.ap-steps__i:last-child:after{display:none}
.ap-steps__i:last-child{flex:0 0 auto;padding-right:0}
.ap-steps__i--on:after{background:var(--ap-green)}
.ap-otp{display:flex;gap:10px}
.ap-otp i{width:56px;height:56px;border:1px solid var(--ap-line-2);border-radius:var(--ap-r);background:var(--ap-surface);display:grid;place-items:center;font:800 22px/1 'Manrope';font-style:normal}
.ap-otp i.ap-otp--on{border-color:var(--ap-ink)}
.ap-otp i.ap-otp--err{border-color:var(--ap-red);color:var(--ap-red)}
/* .ap-modal/.ap-modal__bg/.ap-msheet--fix на канве (design/ap-screens.css:400,401,404) держат
   position:absolute — там это мокап, канва не скроллится и не двигается клавиатурой. На живой
   странице нужен fixed, тот же приём, что у .ap-mfixed (комментарий ниже) и .ap-personal-mobile-block
   (UI-5 этап 2). Одного fixed на iOS Safari мало: он следит за LAYOUT viewport, а не за видимой
   (VISUAL) областью — при открытой клавиатуре layout не сжимается, только видимая область, и низ
   формы остаётся под клавиатурой тем же зазором (найдено Owner живьём на iPhone дважды, UI-4).
   `--dp-vv-gap` — переменная в px, которую держит в актуальном состоянии `window.visualViewport`
   (`dompro.js`, общий для всех use .ap-modal); 0px, где особенности нет (десктоп, Android). */
.ap-modal{position:fixed;inset:0;bottom:var(--dp-vv-gap,0px);display:grid;place-items:center;padding:40px;z-index:8}
.ap-modal__bg{position:fixed;inset:0;bottom:var(--dp-vv-gap,0px);background:var(--ap-ink);opacity:.45}
.ap-modal__w{width:440px;background:var(--ap-surface);border-radius:var(--ap-r-xl);box-shadow:var(--ap-sh-3);padding:28px;position:relative}
.ap-modal__x{position:absolute;right:16px;top:16px;width:36px;height:36px;border:0;border-radius:var(--ap-r-sm);background:var(--ap-surface-2);color:var(--ap-ink-2);font:500 15px/1 'Manrope'}
.ap-msheet--fix{position:fixed;left:0;right:0;bottom:var(--dp-vv-gap,0px);border-radius:var(--ap-r-xl) var(--ap-r-xl) 0 0;box-shadow:var(--ap-sh-3);padding:0 16px 16px;z-index:6}
.ap-msheet__grab{width:44px;height:4px;border-radius:2px;background:var(--ap-line-2);margin:10px auto 14px}
.ap-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ap-line);border-top:1px solid var(--ap-line)}
.ap-keys b{background:var(--ap-surface-2);text-align:center;font:500 22px/1 'Manrope';padding:15px 0}
.ap-keys b span{display:block;font:500 9px/1 'Manrope';color:var(--ap-ink-3);margin-top:4px}
.ap-fgrp{border-bottom:1px solid var(--ap-line);padding:16px 0}
.ap-fgrp__hd{display:flex;align-items:center;justify-content:space-between;font:700 13.5px/1 'Manrope';margin:0 0 12px}
.ap-fgrp__hd span{font:500 16px/1 'Manrope';color:var(--ap-ink-3)}
.ap-chk{display:flex;align-items:center;gap:10px;min-height:32px;font:500 13.5px/1.3 'Manrope';color:var(--ap-ink-2)}
.ap-chk i{flex:none;width:18px;height:18px;border:1.6px solid var(--ap-line-2);border-radius:5px;background:var(--ap-surface)}
.ap-chk i.ap-chk--on{background:var(--ap-ink);border-color:var(--ap-ink)}
.ap-chk em{font-style:normal;margin-left:auto;color:var(--ap-ink-3);font-size:12px}
.ap-chk--grey em{color:var(--ap-surface-2)}
.ap-sw{display:flex;align-items:center;gap:10px;min-height:44px;font:600 13.5px/1 'Manrope'}
.ap-sw i{width:40px;height:24px;border-radius:99px;background:var(--ap-surface-2);border:1px solid var(--ap-line-2);position:relative;flex:none}
.ap-sw i:after{content:"";position:absolute;left:3px;top:2px;width:18px;height:18px;border-radius:50%;background:var(--ap-surface);box-shadow:var(--ap-sh-1)}
.ap-sw i.ap-sw--on{background:var(--ap-ink);border-color:var(--ap-ink)}
.ap-sw i.ap-sw--on:after{left:auto;right:3px}
.ap-range{height:4px;border-radius:2px;background:var(--ap-surface-2);position:relative;margin:18px 6px}
.ap-range:before{content:"";position:absolute;left:12%;right:28%;top:0;bottom:0;background:var(--ap-ink);border-radius:2px}
.ap-range i{position:absolute;top:-7px;width:18px;height:18px;border-radius:50%;background:var(--ap-surface);border:2px solid var(--ap-ink)}
.ap-ctl{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 18px}
.ap-sel{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 14px;border:1px solid var(--ap-line-2);border-radius:var(--ap-r);background:var(--ap-surface);font:600 13.5px/1 'Manrope'}
.ap-sel span{color:var(--ap-ink-3);font-weight:500}
.ap-cnt{font:500 13px/1 'Manrope';color:var(--ap-ink-3);margin-left:auto}
.ap-list1{display:flex;gap:18px;align-items:center;background:var(--ap-surface);border:1px solid var(--ap-line);border-radius:var(--ap-r-lg);padding:14px}
.ap-list1--off{color:var(--ap-ink-3)}
.ap-pag{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ap-pag a{min-width:40px;height:40px;padding:0 12px;border:1px solid var(--ap-line-2);border-radius:var(--ap-r-sm);display:inline-flex;align-items:center;justify-content:center;font:600 13.5px/1 'Manrope'}
.ap-pag a.ap-pag--on{background:var(--ap-ink);border-color:var(--ap-ink);color:var(--ap-surface)}
.ap-bsk{display:flex;gap:16px;align-items:flex-start;border-top:1px solid var(--ap-line);padding:18px 0}
.ap-bsk--off{color:var(--ap-ink-3)}
.ap-bsk__nm{font:600 14px/1.35 'Manrope';display:block}
.ap-bsk__x{width:32px;height:32px;border:0;background:transparent;color:var(--ap-ink-3);font:500 15px/1 'Manrope'}
.ap-empty{text-align:center;padding:64px 20px}
.ap-empty__ico{width:72px;height:72px;border-radius:50%;background:var(--ap-surface-2);margin:0 auto 20px;display:grid;place-items:center;color:var(--ap-ink-3)}
.ap-empty b{display:block;font:800 22px/1.2 'Manrope';letter-spacing:-.03em;margin:0 0 8px}
.ap-ok{width:64px;height:64px;border-radius:50%;background:var(--ap-green);color:var(--ap-surface);display:grid;place-items:center;margin:0 0 20px}
.ap-ok--red{background:var(--ap-red)}
.ap-ok--grey{background:var(--ap-surface-2);color:var(--ap-ink-3)}
.ap-pay{display:flex;gap:10px;align-items:center;margin:14px 0 0}
.ap-pay i{height:28px;min-width:48px;border:1px solid var(--ap-line-2);border-radius:6px;display:grid;place-items:center;font:800 10px/1 'Manrope';font-style:normal;color:var(--ap-ink-2);padding:0 8px}
.ap-narrow{max-width:640px;margin:0 auto}
.ap-tiles--2{grid-template-columns:repeat(2,minmax(0,1fr))}
/* C-01 (briefs/UI-2G.md ред. 4, ADR-322): 768 — 3 в ряд, 360 — 2, 1440 — 5 (.ap-tiles--5, десктоп-
   блок). Разметка .ap-cat__mobile общая на 0-991.98px (LINE_ELEMENT_COUNT=2, .ap-tiles--2) — тот
   же набор плиток, колонки только CSS-сеткой; артборда на 768 в design/ нет, это раскладка сетки,
   не новое состояние. */
@media (min-width:768px) and (max-width:991.98px){
  .ap-tiles--2{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.ap-scroll--2>*{flex:0 0 48%}
.ap-sticky{position:sticky;top:24px}

/* ===== СОСТОЯНИЯ ВЗАИМОДЕЙСТВИЯ — целиком отсутствовали в деплое (design/shell/shell_r3.dc.html
   343-386, 623-673), перенесено дословно. Найдено живой проверкой ховера кнопки «Получить код»
   .default/auth.otp на /auth/: без :disabled и pointer-events:none отключенная .ap-btn--off всё
   равно ловит :hover, а .ap-btn--acc:hover той же кнопки перебивает серый фон при равной
   специфичности более поздним правилом. Ни один :hover не тронут, покой не сдвинут — только
   :focus-visible/:active/:disabled/:invalid и общий transition. ===== */
a,.ap-topbar a,.ap-wa,.ap-btn-catalog,.ap-search__btn,.ap-act,.ap-nav__link,.ap-nav__link--active,
.ap-mega__li,.ap-mega__grp a,.ap-mega__grp b a,.ap-mega__all,.ap-sug__it,.ap-sug__sec,.ap-drop a,
.ap-fcol a,.ap-soc a{transition:color var(--ap-dur-160) var(--ap-ease),background-color var(--ap-dur-160) var(--ap-ease),border-color var(--ap-dur-160) var(--ap-ease),box-shadow var(--ap-dur-160) var(--ap-ease),transform var(--ap-dur-160) var(--ap-ease)}
a:focus-visible,.ap-topbar a:focus-visible,.ap-wa:focus-visible,.ap-btn-catalog:focus-visible,
.ap-search__btn:focus-visible,.ap-act:focus-visible,.ap-nav__link:focus-visible,
.ap-nav__link--active:focus-visible,.ap-mega__li:focus-visible,.ap-mega__grp a:focus-visible,
.ap-mega__grp b a:focus-visible,.ap-mega__all:focus-visible,.ap-sug__it:focus-visible,
.ap-sug__sec:focus-visible,.ap-drop a:focus-visible,.ap-fcol a:focus-visible,
.ap-soc a:focus-visible,.ap-search input:focus-visible,.ap-mburger:focus-visible,
.ap-mcart:focus-visible,.ap-msheet__x:focus-visible,.ap-mtab:focus-visible,
.ap-mlist a:focus-visible,.ap-msub a:focus-visible,.ap-mbtn:focus-visible,
.ap-toast__btn:focus-visible{outline:none;box-shadow:var(--ap-focus)}
.ap-wa:active,.ap-btn-catalog:active,.ap-search__btn:active,.ap-act:active,.ap-nav__link:active,
.ap-nav__link--active:active,.ap-mega__li:active,.ap-mega__all:active,.ap-sug__it:active,
.ap-sug__sec:active,.ap-drop a:active,.ap-soc a:active,.ap-mburger:active,.ap-mcart:active,
.ap-msheet__x:active,.ap-mtab:active,.ap-mbtn:active,.ap-toast__btn:active{transform:translateY(1px);filter:brightness(.94)}
a:active,.ap-topbar a:active,.ap-mega__grp a:active,.ap-mega__grp b a:active,
.ap-fcol a:active,.ap-mlist a:active,.ap-msub a:active{color:var(--ap-accent-600)}
a[aria-disabled="true"],a.is-disabled,.ap-topbar a[aria-disabled="true"],.ap-topbar a.is-disabled,
.ap-nav__link[aria-disabled="true"],.ap-nav__link.is-disabled,.ap-mega__li[aria-disabled="true"],
.ap-mega__li.is-disabled,.ap-mega__grp a[aria-disabled="true"],.ap-mega__grp a.is-disabled,
.ap-fcol a[aria-disabled="true"],.ap-fcol a.is-disabled,.ap-sug__it[aria-disabled="true"],
.ap-sug__it.is-disabled,.ap-sug__sec[aria-disabled="true"],.ap-sug__sec.is-disabled,
.ap-drop a[aria-disabled="true"],.ap-drop a.is-disabled{color:var(--ap-ink-3);cursor:not-allowed;pointer-events:none}
.ap-wa[aria-disabled="true"],.ap-wa.is-disabled,.ap-mega__all[aria-disabled="true"],
.ap-mega__all.is-disabled,.ap-soc a[aria-disabled="true"],.ap-soc a.is-disabled,
.ap-act[aria-disabled="true"],.ap-act.is-disabled{color:var(--ap-ink-3);border-color:var(--ap-line);background:var(--ap-surface-2);box-shadow:none;cursor:not-allowed;pointer-events:none}
.ap-btn-catalog:disabled,.ap-btn-catalog[aria-disabled="true"],.ap-btn-catalog.is-disabled,
.ap-search__btn:disabled,.ap-search__btn[aria-disabled="true"],.ap-search__btn.is-disabled,
.ap-toast__btn:disabled,.ap-toast__btn[aria-disabled="true"],.ap-toast__btn.is-disabled,
.ap-mburger:disabled,.ap-mcart:disabled,.ap-msheet__x:disabled,
.ap-mbtn[aria-disabled="true"],.ap-mbtn.is-disabled{background:var(--ap-surface-2);color:var(--ap-ink-3);border-color:var(--ap-line);box-shadow:none;cursor:not-allowed;pointer-events:none}

.ap-btn,.ap-btn--ghost,.ap-btn--acc,.ap-btn--off,.ap-promo,.ap-cat,.ap-tab,.ap-tab--on,
.ap-inp,.ap-sel,.ap-chk,.ap-sw,.ap-seg a,.ap-qty button,.ap-otp i,.ap-chip,.ap-opt,
.ap-pag a,.ap-acct a,.ap-tile__btn,.ap-tile__link,.ap-bsk__x,.ap-modal__x{transition:color var(--ap-dur-160) var(--ap-ease),background-color var(--ap-dur-160) var(--ap-ease),border-color var(--ap-dur-160) var(--ap-ease),box-shadow var(--ap-dur-160) var(--ap-ease),transform var(--ap-dur-160) var(--ap-ease)}
.ap-btn:focus-visible,.ap-btn--ghost:focus-visible,.ap-btn--acc:focus-visible,
.ap-btn--off:focus-visible,.ap-promo:focus-visible,.ap-cat:focus-visible,.ap-tab:focus-visible,
.ap-tab--on:focus-visible,.ap-sel:focus-visible,.ap-chk:focus-visible,.ap-sw:focus-visible,
.ap-seg a:focus-visible,.ap-qty button:focus-visible,.ap-otp i:focus-visible,
.ap-chip:focus-visible,.ap-opt:focus-visible,.ap-pag a:focus-visible,.ap-acct a:focus-visible,
.ap-tile__btn:focus-visible,.ap-tile__link:focus-visible,.ap-bsk__x:focus-visible,
.ap-modal__x:focus-visible,.ap-ta:focus-visible{outline:none;box-shadow:var(--ap-focus)}
.ap-inp:focus-visible,.ap-qty:focus-within{outline:none;border-color:var(--ap-ink);box-shadow:var(--ap-focus)}
.ap-btn:active,.ap-btn--ghost:active,.ap-btn--acc:active,.ap-btn--off:active,.ap-promo:active,
.ap-cat:active,.ap-tab:active,.ap-tab--on:active,.ap-sel:active,.ap-seg a:active,
.ap-qty button:active,.ap-chip:active,.ap-opt:active,.ap-pag a:active,.ap-acct a:active,
.ap-tile__btn:active,.ap-bsk__x:active,.ap-modal__x:active{transform:translateY(1px);filter:brightness(.94)}
.ap-chk:active i,.ap-sw:active i{filter:brightness(.94)}
.ap-tile__link:active{color:var(--ap-accent-600)}
.ap-inp:invalid{border-color:var(--ap-red)}
.ap-ta:invalid{border-color:var(--ap-red)}
.ap-otp input:invalid{border-color:var(--ap-red);color:var(--ap-red)}
.ap-btn:disabled,.ap-btn[aria-disabled="true"],.ap-btn.is-disabled,
.ap-btn--ghost:disabled,.ap-btn--ghost[aria-disabled="true"],.ap-btn--ghost.is-disabled,
.ap-btn--acc:disabled,.ap-btn--acc[aria-disabled="true"],.ap-btn--acc.is-disabled,
.ap-btn--off:disabled,.ap-btn--off[aria-disabled="true"],.ap-btn--off.is-disabled,
.ap-tile__btn:disabled,.ap-tile__btn[aria-disabled="true"],.ap-tile__btn.is-disabled,
.ap-modal__x:disabled,.ap-bsk__x:disabled,.ap-qty button:disabled,
.ap-tab[aria-disabled="true"],.ap-tab.is-disabled,.ap-tab--on[aria-disabled="true"],
.ap-tab--on.is-disabled,.ap-chip[aria-disabled="true"],.ap-chip.is-disabled,
.ap-pag a[aria-disabled="true"],.ap-pag a.is-disabled{background:var(--ap-surface-2);color:var(--ap-ink-3);border-color:var(--ap-line);box-shadow:none;cursor:not-allowed;pointer-events:none}
.ap-inp:disabled,.ap-inp[aria-disabled="true"],.ap-inp.is-disabled,
.ap-ta:disabled,.ap-ta.is-disabled,.ap-sel[aria-disabled="true"],.ap-sel.is-disabled,
.ap-chk[aria-disabled="true"],.ap-chk.is-disabled,.ap-sw[aria-disabled="true"],.ap-sw.is-disabled,
.ap-seg a[aria-disabled="true"],.ap-seg a.is-disabled,.ap-qty[aria-disabled="true"],
.ap-qty.is-disabled,.ap-otp i[aria-disabled="true"],.ap-otp i.is-disabled,
.ap-opt[aria-disabled="true"],.ap-opt.is-disabled{background:var(--ap-surface-2);color:var(--ap-ink-3);border-color:var(--ap-line);box-shadow:none;cursor:not-allowed;pointer-events:none}
.ap-chk.is-disabled i,.ap-sw.is-disabled i,.ap-chk[aria-disabled="true"] i,.ap-sw[aria-disabled="true"] i{background:var(--ap-surface-2);border-color:var(--ap-line)}
.ap-promo[aria-disabled="true"],.ap-promo.is-disabled,.ap-cat[aria-disabled="true"],
.ap-cat.is-disabled,.ap-acct a[aria-disabled="true"],.ap-acct a.is-disabled,
.ap-tile__link[aria-disabled="true"],.ap-tile__link.is-disabled{color:var(--ap-ink-3);box-shadow:none;cursor:not-allowed;pointer-events:none}

/* Р-14 = Б, ADR-271 §4 */
.ap-cat__list .ap-tile__nm{-webkit-line-clamp:3;min-height:calc(3 * 1.35em)}
.ap-cat__list .ap-tile__old{display:block}

/* ===== UI-2: переключение раскладки раздела каталога десктоп/мобайл (в макете отдельные
   артборды 1a/1b/1g/1h/1i/1j — разработчик разводит по ширине экрана, тот же порог 992px,
   что и в блоке UI-1 выше; ap-screens.css литералов не несёт, эти классы — не из макета) ===== */
.ap-cat__mobile{display:none}
@media (max-width:991.98px){
  .ap-cat__desktop{display:none}
  .ap-cat__mobile{display:block}
  .ap-cats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ap-cat__sub{display:none}
}

/* ===== UI-2 этап 3: та же развязка десктоп/мобайл для карточки товара (артборды 1a/1b
   product.dc.html) — порог тот же 992px ===== */
.ap-product__mobile{display:none}
.ap-product__mfixed{display:none}
@media (max-width:991.98px){
  .ap-product__desktop{display:none}
  .ap-product__mobile{display:block}
  .ap-product__mfixed{display:block;position:fixed;left:0;right:0;bottom:62px;z-index:4}
}
.ap-thumb--on{border-color:var(--ap-ink)}

/* ===== UI-1 этап 2: главная (home_r2.dc.html 1a/1b) — та же развязка одной разметкой + медиа-
   запрос, что у шапки/подвала/раздела/товара выше (порог 992px); значения мобильных правил взяты
   дословно из «--m»-классов макета (ap-hero--m, ap-store--m, ap-tabs--m), которые ap-screens.css
   принёс как отдельные статические классы, но использовать их нужно подменой самого базового
   класса на ширине экрана, а не вторым DOM-узлом (карточка `home.md` данных не меняет, только
   раскладку). Лента «весь каталог» использует уже существующее правило .ap-cats ниже по файлу
   (общее с /catalog/, добавлять новое не нужно). .ap-lane — метка только на трёх лентах товаров
   главной (со скидкой, бренд, вкладки), чтобы не задеть .ap-tiles--5 страниц раздела/поиска. */
.ap-hero__pic{order:0}
@media (max-width:991.98px){
  .ap-hero{grid-template-columns:minmax(0,1fr)}
  .ap-hero__big{grid-template-columns:minmax(0,1fr)}
  .ap-hero__tx{padding:20px;gap:12px}
  .ap-hero__h1{font-size:26px}
  .ap-hero__pic{order:-1;min-height:180px}
  /* minmax(0,1fr) — тот же приём, что у .ap-hero/.ap-tizers/.ap-cats/.ap-tiles рядом (K-26): голый
     1fr держит track-минимум auto (= max-content промо-текста), грид не сжимался у́же текста
     «Самовывоз со склада…» и раздвигал страницу на ~50px — baseline M-QA-1 строка 66, «home»/
     «shell» scrollWidth=402 на 360/390 (живой замер: getBoundingClientRect правой границы .ap-promo
     упирался в 402 при clientWidth 390/360, единственный элемент вне контейнеров с overflow-x). */
  .ap-promos{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:none;margin-top:12px}
  .ap-tizers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ap-h2{font-size:22px}
  .ap-tabs{flex-wrap:nowrap;overflow-x:auto}
  .ap-lane.ap-tiles--5{display:flex;grid-template-columns:none;overflow-x:auto;gap:12px;padding-bottom:4px}
  .ap-lane.ap-tiles--5>*{flex:0 0 48%}
  .ap-brands{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ap-store{grid-template-columns:minmax(0,1fr);gap:14px;padding:16px}
}

/* ===== UI-1 этап 3: статические страницы (design/static/static_r2.dc.html <style>, дословно) —
   блок <style> макета целиком, кроме обвязки артборда — единственный класс этого блока, не идущий в
   шаблон, это .ap-doc (reference/2026-09-18_static_r2_export_unpack.md §3: обвязка артбордов в код
   шаблона не идёт). Медиа-запрос 390 — тем же порогом 991.98px, что у остальных экранов шаблона,
   значения взяты из «--m»-классов макета (ap-h1p--m, ap-h2--m, ap-mission--m, ap-contacts--m,
   ap-steps--m). */
/* UI-D2 ч.1 (общие корни, .ap-crumbs 8/8): дословный повтор общего блока design/ap-screens.css:84
   (строка 328 этого файла) — та же специфичность, позже в каскаде, padding-top отличался (20 вместо
   18) и перебивал общий .ap-crumbs на ВСЕХ экранах, не только статических страницах (before-прогон
   reference/2026-09-28_uid2_style_before.txt: 18px→20px на каждом из 12 экранов с крошками). Ни одна
   статическая страница (about/contacts/delivery/returns/terms/privacy) не задаёт своего padding —
   снято, оставлен только собственный :hover, которого в общем блоке не было. */
.ap-crumbs a:hover{color:var(--ap-ink)}
.ap-page{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:48px;padding:22px 0 56px}
.ap-msel[data-dp-sections-toggle]{display:none}
.ap-side{display:flex;flex-direction:column;gap:2px;position:relative}
.ap-side a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--ap-r-sm);font:600 13.5px/1.3 'Manrope';color:var(--ap-ink-2)}
.ap-side a:hover{background:var(--ap-surface-2);color:var(--ap-ink)}
.ap-side a.ap-side--on{background:var(--ap-ink);color:var(--ap-surface)}
.ap-h1p{font:800 40px/1.08 'Manrope';letter-spacing:-.035em;margin:12px 0 0}
.ap-h1p--m{font-size:28px}
.ap-h2{font:800 30px/1.15 'Manrope';letter-spacing:-.03em;margin:0}
.ap-h2--m{font-size:22px}
.ap-sub{font:500 14.5px/1.5 'Manrope';color:var(--ap-ink-2);margin:6px 0 0}
.ap-tx{max-width:72ch}
.ap-tx h2,.ap-tx__h2{font:800 22px/1.25 'Manrope';letter-spacing:-.025em;margin:32px 0 10px;max-width:72ch}
.ap-num{display:inline-block;min-width:38px;color:var(--ap-ink-3)}
.ap-tx p{font:400 15px/1.7 'Manrope';color:var(--ap-ink-2);margin:0 0 12px}
.ap-tx ul{margin:0 0 14px;padding-left:20px}
.ap-tx li{font:400 15px/1.7 'Manrope';color:var(--ap-ink-2)}
/* .ap-btn/.ap-btn:hover/.ap-btn--ghost/.ap-btn--ghost:hover ЗДЕСЬ БЫЛИ дословной копией строк
   231-234 (блок static.dc.html нёс свой <style> целиком, включая уже общие классы) — сняты
   найденной живьём сессией UI-3 ошибкой: при равной специфичности эта, более поздняя по файлу,
   копия .ap-btn отменяла .ap-btn--acc:352 у ВСЕХ акцентных кнопок сайта, не только у корзины
   (reference/2026-09-21_ui3_stage1_basket_macro_diff.md, десктоп п.1). Класс .ap-btn--ghost
   вторым экземпляром безвреден (не участвует в конфликте), снят вместе для симметрии дублей. */
.ap-ph{border-radius:var(--ap-r);border:1px solid var(--ap-line);background:repeating-linear-gradient(135deg,var(--ap-surface-2) 0 10px,transparent 10px 20px);display:grid;place-items:center;font:600 11.5px/1.4 ui-monospace,Menlo,monospace;color:var(--ap-ink-3);text-align:center;padding:12px}
.ap-tizers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.ap-tizers--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ap-tiz{background:var(--ap-surface);border:1px solid var(--ap-line);border-radius:var(--ap-r-lg);padding:20px}
.ap-tiz:hover{color:var(--ap-ink);box-shadow:var(--ap-sh-2)}
.ap-tiz--off{display:none}
.ap-tiz__ico{display:block;width:34px;height:34px;border-radius:var(--ap-r-sm);background:var(--ap-surface-2);margin:0 0 14px}
.ap-tiz b{display:block;font:700 15px/1.3 'Manrope';letter-spacing:-.02em}
.ap-tiz p{font:500 13px/1.5 'Manrope';color:var(--ap-ink-2);margin:6px 0 0}
/* UI-D2 ч.2 (в): .ap-g2 держал дословный повтор общего правила design/ap-screens.css:77
   (строка 321 этого файла, gap:12px) — та же специфичность, позже в каскаде, gap:16px перебивал
   общий на единственном месте использования класса (shop/include/dp/about_who.php). Тот же
   паттерн, что .ap-crumbs/.ap-h2 в части 1 — блок <style> static.dc.html скопирован целиком,
   включая уже общие классы. Снят, общее правило строка 321 остаётся. */
.ap-mission{background:var(--ap-surface-2);border:1px solid var(--ap-line);border-radius:var(--ap-r-lg);padding:26px 28px;font:800 26px/1.35 'Manrope';letter-spacing:-.03em;margin:30px 0 0}
.ap-mission--m{font-size:19px;padding:18px 20px;margin:24px 0 0}
.ap-contacts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:24px;background:var(--ap-surface);border:1px solid var(--ap-line);border-radius:var(--ap-r-lg);padding:24px}
.ap-contacts--m{grid-template-columns:minmax(0,1fr);padding:16px}
.ap-contacts--nomap{grid-template-columns:minmax(0,1fr)}
.ap-store__tx{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.ap-store__addr{font:700 17px/1.35 'Manrope';letter-spacing:-.02em}
.ap-req{width:100%;border-collapse:collapse;background:var(--ap-surface);border:1px solid var(--ap-line);border-radius:var(--ap-r-lg);overflow:hidden}
.ap-req td{padding:12px 16px;border-bottom:1px solid var(--ap-line);font:500 13.5px/1.5 'Manrope';vertical-align:top}
.ap-req td:first-child{width:38%;color:var(--ap-ink-3);font-weight:500}
.ap-req tr:last-child td{border-bottom:0}
.ap-mark{display:flex;align-items:center;gap:16px;background:var(--ap-surface);border:1px solid var(--ap-line);border-radius:var(--ap-r-lg);padding:16px 18px;margin-top:16px}
.ap-mark b{font:700 14px/1.4 'Manrope'}
.ap-mark p{margin:4px 0 0;font:500 13px/1.5 'Manrope';color:var(--ap-ink-2)}
.ap-imp{display:flex;gap:14px;background:var(--ap-surface-2);border:1px solid var(--ap-line);border-radius:var(--ap-r-lg);padding:18px 20px;margin:18px 0}
.ap-imp b{display:block;font:700 13.5px/1 'Manrope';margin:0 0 6px}
.ap-imp p{margin:0;font:500 13.5px/1.6 'Manrope';color:var(--ap-ink-2)}
.ap-imp__i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--ap-accent);margin-top:6px}
.ap-ask{display:flex;flex-wrap:wrap;align-items:center;gap:16px;background:var(--ap-surface);border:1px solid var(--ap-line);border-radius:var(--ap-r-lg);padding:22px 24px;margin-top:32px}
.ap-ask b{font:700 17px/1.3 'Manrope';letter-spacing:-.02em;flex:1 1 220px}
.ap-msel{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 16px;border:1px solid var(--ap-line-2);border-radius:var(--ap-r);background:var(--ap-surface);font:600 14px/1 'Manrope';margin:14px 0 18px}
.ap-msel span{color:var(--ap-ink-3);font:500 18px/1 'Manrope'}
.ap-pays{display:flex;flex-wrap:wrap;gap:12px;margin:14px 0 6px}
.ap-pay{display:grid;place-items:center;min-width:112px;height:44px;padding:0 18px;border:1px solid var(--ap-line-2);border-radius:var(--ap-r-sm);background:var(--ap-surface);font:700 12.5px/1 'Manrope';letter-spacing:.08em;text-transform:uppercase;color:var(--ap-ink-2)}
.ap-pay img{display:block;height:24px;width:auto}
.ap-fpays{display:flex;align-items:center;gap:14px}
.ap-fpays img{display:block;height:18px;width:auto;filter:grayscale(1);opacity:.45}
.ap-msel[data-dp-toc-toggle]{display:none}
.ap-toc{background:var(--ap-surface);border:1px solid var(--ap-line);border-radius:var(--ap-r-lg);padding:20px 24px;margin:20px 0 0}
.ap-toc b{display:block;font:700 13px/1 'Manrope';letter-spacing:.02em;margin:0 0 12px}
.ap-toc ol{margin:0;padding-left:22px;column-count:2;column-gap:36px}
.ap-toc--one ol{column-count:1}
.ap-toc li{font:500 13.5px/1.9 'Manrope';color:var(--ap-ink-3);break-inside:avoid}
.ap-toc a{color:var(--ap-ink-2)}
.ap-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:14px 0 16px}
.ap-steps--m{grid-template-columns:minmax(0,1fr)}
.ap-step{background:var(--ap-surface);border:1px solid var(--ap-line);border-radius:var(--ap-r-lg);padding:16px;min-height:44px}
.ap-step i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ap-surface-2);font-style:normal;font:800 12.5px/1 'Manrope';color:var(--ap-ink-2);margin:0 0 10px}
.ap-step b{font:700 14px/1.35 'Manrope'}
.ap-seller{background:var(--ap-surface);border:1px solid var(--ap-line);border-radius:var(--ap-r-lg);padding:22px 24px;margin:32px 0 16px}
.ap-seller b{display:block;font:700 16px/1.3 'Manrope';letter-spacing:-.02em;margin:0 0 10px}
.ap-seller p{margin:0 0 4px;font:500 13.5px/1.6 'Manrope';color:var(--ap-ink-2)}

/* ===== 404 ===== */
.ap-404{padding:64px 0 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.ap-404 h1{font:800 40px/1.1 'Manrope';letter-spacing:-.035em;margin:0}
.ap-404 p{font:500 15.5px/1.5 'Manrope';color:var(--ap-ink-2);margin:0}
.ap-404__code{font:600 12px/1 ui-monospace,Menlo,monospace;color:var(--ap-ink-3);letter-spacing:.14em}
.ap-404__search{width:100%;max-width:640px;margin-top:8px}
.ap-404__acts{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;padding:8px 0 48px}
.ap-404--m h1{font-size:26px}

/* ===== адаптация 390 (--m классы макета подменой раскладки, тот же приём, что у главной выше) ===== */
@media (max-width:991.98px){
  .ap-page{display:block}
  /* Боковая навигация на 390 — выпадающий список «Разделы» (design/spec/static.md §3.1 п.3, §5):
     [data-dp-sections-toggle] — строка-кнопка (всегда видна на мобильной), [data-dp-sections] — тот
     же .ap-side, свёрнут по умолчанию, раскрывается классом ap-side--open (dompro.js). */
  .ap-msel[data-dp-sections-toggle]{display:flex;margin:0 0 14px}
  .ap-side[data-dp-sections]{display:none;position:static;border:1px solid var(--ap-line);border-radius:var(--ap-r-lg);background:var(--ap-surface);padding:6px;margin:-10px 0 14px}
  .ap-side[data-dp-sections].ap-side--open{display:flex}
  .ap-h1p{font-size:28px}
  /* UI-D2 ч.1 (.ap-h2 8): margin:26px 0 12px был бесклассовым — перебивал общий .ap-h2{margin:0}
     (design/ap-screens.css:9) на home/product/basket/404 (before: margin-top 0→26, margin-bottom
     0→12 на всех четырёх). Ни одна статическая страница на него не опирается: /about/ держит свой
     margin инлайн-стилем (32px 0 14px, shop/about/index.php:53,63), у /delivery/, /returns/, /terms/,
     /privacy/ заголовка .ap-h2 нет вовсе. font-size:22px оставлен (дублирует home-блок строки 630
     безвредно). */
  .ap-h2{font-size:22px}
  .ap-tizers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ap-mission{font-size:19px;padding:18px 20px;margin:24px 0 0}
  .ap-contacts{grid-template-columns:minmax(0,1fr);padding:16px}
  .ap-steps{grid-template-columns:minmax(0,1fr)}
  .ap-ask{flex-direction:column;align-items:flex-start}
  .ap-ask .ap-btn{width:100%}
  /* «Содержание» на 390 — строка-переключатель .ap-msel[data-dp-toc-toggle] + .ap-toc[data-dp-toc]
     (design/spec/static.md §5 «Содержание»: свёрнуто/раскрыто, static_r2.dc.html 1e). Десктоп —
     .ap-toc всегда раскрыт (правило выше), переключатель на 1440 не выводится (dompro.js). */
  .ap-toc[data-dp-toc]{display:none;margin-top:4px}
  .ap-toc[data-dp-toc].ap-toc--one{display:block}
  .ap-toc ol{column-count:1}
  .ap-msel[data-dp-toc-toggle]{display:flex;margin:16px 0 4px}
  .ap-pays--m{flex-wrap:nowrap;gap:8px}
  .ap-pays--m .ap-pay{min-width:0;flex:1 1 0;padding:0 8px}
  .ap-fpays--m{margin-top:14px}
  .ap-404 h1{font-size:26px}
}

/* ===== UI-5 этап 1: меню кабинета (account_orders.md §2.1 п.1, §4 «Меню кабинета») — десктоп
   3/12 с телефоном и мобильные чипы под H1 разведены двумя узлами DOM, тот же приём и тот же
   порог 992px, что .ap-cat__desktop/.ap-cat__mobile (UI-2 этап 2 выше в этом файле). ===== */
.ap-personal-mobile{display:none}
/* «Состав» — таблица .ap-tbl только на десктопе (ниже прячет её медиа-запрос),
   .ap-personal-mobile-block — блочный аналог .ap-personal-mobile (та несёт display:flex,
   не подходит для столбика строк .ap-bsk); правило-умолчание ставится ДО медиа-запроса —
   иначе оно, как обычное правило той же специфичности, идущее позже в файле, перебивает
   условное значение внутри @media независимо от ширины экрана. */
.ap-personal-mobile-block{display:none}
.ap-personal-actions{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:991.98px){
  .ap-personal-desktop{display:none}
  .ap-personal-mobile{display:flex}
  /* UI-5 этап 2: `col-9`/`col-6` — простой Bootstrap-класс без брейкпоинт-инфикса, ширина не
     меняется на мобильном сама по себе (`col-md-9` менял бы, `col-9` — нет); без этого правила
     контент кабинета на 390 остаётся сжатым в 75%/50% колонку — «мобильная почти отсутствует»
     (Owner, живой прогон). `.ap-personal-desktop ~ .col-9` — колонка контента, у которой рядом
     скрытый на мобильном сайдбар (общий признак обеих страниц кабинета, разметку менять не
     пришлось); `.ap-personal-2col` — своя пометка второго ряда (`account_order`, «Получение»/
     «Оплата» столбиком на 390, `account_order.md` §2.2). */
  .ap-personal-desktop ~ .col-9{width:100%}
  /* UI-5 этап 3 (account_profile): та же дыра, что у `col-9` выше, но с `col-6` — колонка
     `main.profile/dp/template.php` «Контакты»/«Адреса доставки» осталась стиснутой в 50% на 390
     (весь текст обрезался: «Владеле» вместо «Владелец» и т.п.) — найдено живым прогоном UI-5 этапа
     3, тот же приём, что и `col-9`. */
  .ap-personal-desktop ~ .col-6{width:100%}
  .ap-personal-2col > [class^="col-"]{width:100%}
  .ap-personal-mobile-block{display:block}
  /* Сверка с артбордом 1b (`account_order.dc.html`, эталонный экспорт Owner): крошки на 390 без
     «Главная», дата отдельной строкой под H1, действия во всю ширину (`.ap-mbtn`), карточка шкалы
     с отступом макета (16×12, не 20 общего `.ap-card`), «Оплатить» закреплена над нижней панелью
     (`.ap-mfixed`, макет держит `position:absolute` для канвы — на живой странице нужен `fixed`,
     чтобы плашка правда прилипала при скролле). */
  .ap-personal-steps{padding:16px 12px}
  .ap-mfixed.ap-personal-mobile-block{position:fixed;display:flex}
}

/* ===== UI-5, карточка заказа account_orders (ADR-294 §1, строка 70а) — десктоп строка/мобайл
   столбик разведены тем же приёмом, что .ap-cat__desktop/.ap-cat__mobile (UI-2): два узла DOM,
   не один со сдвигом флексов, потому что артборд account_orders.dc.html 1b (390) не флекс-строка,
   поджатая до переноса, а другой состав строк (миниатюр нет, способ и сумма — обычные абзацы,
   кнопка действия во всю ширину, сумма и «до <дата>»/причина отмены — одной строкой через « · »).
   Инлайновые flex:none;width:230px/130px карточки 1a были СТАРШЕ мобильных правил (UI-2 приёма) —
   поэтому раскладка не сворачивалась (ADR-294 §1, строка 70). Порог 992px — тот же, что у всей
   витрины. */
.ap-order-card{padding:16px}
.ap-order-card__mobile{display:none}
.ap-order-card__desktop{display:flex;gap:18px;align-items:center}
.ap-order-card__info{flex:1 1 auto;min-width:0}
.ap-order-card__way{flex:none;width:230px}
.ap-order-card__sum{flex:none;width:130px;text-align:right;font:800 17px/1 'Manrope'}
.ap-order-card__sum--muted{color:var(--ap-ink-3)}
.ap-order-card__thumbs{flex:none;display:flex;gap:6px}
.ap-order-card__act{flex:none}
@media (max-width:991.98px){
  .ap-order-card__desktop{display:none}
  .ap-order-card__mobile{display:block}
}

/* ===== UI-5 этап 2 (account_order) — сверено дословно с эталонным экспортом Owner
   (Заказ в кабинете.html, 2026-09-21): `.ap-tbl th.ap-tbl__r` не задан в design/ap-screens.css,
   эталон держит ширину числовых колонок инлайн-стилем `width:140px` на самих `<th>`
   (template.php), здесь только выравнивание заголовка вправо — сам класс `.ap-tbl__r` для `td`
   уже есть в design/ap-screens.css:164. ===== */
.ap-tbl th.ap-tbl__r{text-align:right}

/* Шкала состояний заказа — коллизия имени: `.ap-steps` уже занят блоком «как заказать» на
   статических страницах (UI-1, строка выше — `display:grid;grid-template-columns:repeat(5,…)`),
   он шёл в файле позже исходного flex-правила design/ap-screens.css и молча перебивал разметку
   шкалы заказа сеткой на 5 колонок. `.ap-steps--wide` возвращает flex только для этого блока
   (design/ap-screens.css сам получил недостающую `.ap-steps__i:last-child{flex:0 0 auto}` тем же
   эталонным экспортом — эта часть уже дословна и здесь не дублируется). */
.ap-steps--wide{display:flex;grid-template-columns:none;gap:0;margin:0;align-items:flex-start}

/* ===== UI-4 этап 1: окно входа dp:auth.otp — карточка (.ap-modal__w, артборд 1a/1c) на десктопе,
   панель (.ap-msheet--fix, артборд 1b/1c) на мобильном, тот же приём и порог 992px, что
   .ap-cat__desktop/.ap-cat__mobile (UI-2, выше в этом файле). Оба узла лежат внутри одного
   .ap-modal — класс держит display:grid (design/ap-screens.css:400), сам модал скрыт/показан
   инлайн-стилем из template.php/script.js, эта пара правит только выбор карточка/панель. ===== */
[data-dp-auth-card]{display:block}
[data-dp-auth-sheet]{display:none}
@media (max-width:991.98px){
  [data-dp-auth-card]{display:none}
  [data-dp-auth-sheet]{display:block}
}

/* ===== UI-3 этап 1: корзина (sale.basket.basket/dp, design/basket/basket.dc.html) — десктоп/мобайл
   разведены тем же приёмом, что .ap-cat__desktop/.ap-cat__mobile (UI-2) и .ap-personal-desktop/
   .ap-personal-mobile (UI-5), порог 992px. .ap-mfixed на канве держит position:absolute — на живой
   странице нужен fixed, тот же приём, что у .ap-personal-mobile-block (UI-5 этап 2). Первая строка
   списка — border-top:0, как в макете (артборд 1a/1b, .ap-bsk первый в списке без верхней черты). ===== */
.ap-basket__mobile{display:none}
@media (max-width:991.98px){
  .ap-basket__desktop{display:none}
  .ap-basket__mobile{display:block}
  .ap-mfixed.ap-basket-mobile-block{position:fixed;display:flex}
}
[data-dp-basket-list] > .ap-bsk:first-child,
[data-dp-basket-list-m] > .ap-bsk:first-child{border-top:0;padding-top:0}

/* ===== UI-3 этап 2, сессия 3 (sale.order.ajax/dp, design/checkout/checkout_gaps.dc.html G-03) —
   итог справа десктоп-only, снизу 390 своя панель .ap-mfixed «Итого · Оформить», тот же приём, что
   .ap-basket-mobile-block; .ap-mfixed сам держит position:absolute без display:none (канва), поэтому
   здесь модификатор явно прячет её по умолчанию, а не полагается на скрытый родитель, как у корзины. ===== */
.ap-mfixed.ap-checkout-mobile-block{display:none}
@media (max-width:991.98px){
  #dp-co-sec{padding-bottom:100px}
  /* сессия 6: block, как .ap-mfixed макета (design/ap-screens.css:150) — строка «Товары · развернуть»
     над строкой «Итого · кнопка»; display:flex ставил их в ряд и выталкивал кнопку за край 390.
     «Итого» сжимается раньше кнопки, чтобы подпись кнопки оставалась целой на 360. */
  .ap-mfixed.ap-checkout-mobile-block{position:fixed;display:block}
  .ap-checkout-mobile-block .ap-mfixed__in b{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
}

/* ===== UI-3 этап 2, сессия 4 (confirm.php, «Заказ оформлен») — тот же приём десктоп/мобайл,
   что .ap-basket__desktop/.ap-basket__mobile: на 390 действия «Мои заказы»/«На главную» идут
   карточками `.ap-mbtn` во всю ширину столбиком (артборд 1g, checkout.dc.html:433-434), а не
   строкой `.ap-btn` в две колонки — дефект вида, найденный приёмкой сессий 2-3. ===== */
.ap-done-acts{display:flex;gap:12px;margin-top:20px}
.ap-done-acts-m{display:none}
@media (max-width:991.98px){
  .ap-done-acts{display:none}
  .ap-done-acts-m{display:block}
}

/* ===== UI-1G часть 2, ред. 5 (briefs/UI-1G.md; design/spec/mobile.md ред. 2 §3) — общие корни
   мобильной версии, диапазон «телефон» < 600 (mobile.md §2). Правки точечные, поверх существующего
   каскада (селекторы этого блока идут ПОСЛЕ исходных правил файла и специфичнее по контексту не
   становятся — порядок в каскаде решает при равном весе). ===== */
@media (max-width:599px){
  /* (а) поле поиска шапки и 404 (dp-search-input*, mobile.md M-03) — 16 px, иначе iOS зумит
     страницу при фокусе. .ap-search покрывает все три инпута (шапка десктоп/мобайл, 404 —
     header.php, 404_main.php: одна и та же разметка `.ap-search input`). */
  .ap-search input{font-size:16px}

  /* UI-5G ч.2 «дополнительно» (ред. 5): M-03 — 16 px у ЛЮБОГО поля ввода на телефоне, не только
     поиска — токен макета `--ap-fs-14-5` (design/ap-screens.css:96, `.ap-inp` и т.п.) младше этого
     правила на ширинах < 600 (mobile.md §2, утверждено Owner); одно общее правило, не по классу.
     `!important` — НАЙДЕНО живым прогоном `mobile_check.sh` этой сессии: бесклассовый селектор
     `input,select,textarea` (специфичность 0,0,0,1) без `!important` проигрывает любому классу поля
     (`.ap-inp` и т.п. — 0,0,1,0) независимо от места в каскаде, M-03 оставался 84 из 84; переписывать
     кегль в каждый класс поля по всему сайту — уже не «одно правило», которое называет брифом. */
  input, select, textarea{font-size:16px !important}

  /* (б) плейсхолдеры фото и счётчик корзины (M-04) — не мельче 12 px. .ap-ph — общий класс
     подписи «нет фото»/«нет картинки» (комбинируется с .ap-cat__ph, .ap-tile__ph, .ap-hero__pic —
     собственного font-size у них нет, читают .ap-ph). */
  .ap-ph{font-size:12px}
  .ap-badge{font-size:12px}

  /* (в) `main` — поля 16 px с каждой стороны, контент не уже 288 px на 320 (M-05). Круг 2: чистый
     `padding` на `main.ap-c` — визуально верно, `behavior_check.sh checkout` 133/133, но
     `getBoundingClientRect()` `<main>` padding не считает (M-05 мерит рамку блока) — диагностика
     M-05 не «0», а 204 (найдено кругом 3). Круг 3, повторная проверка: margin вместо padding ТОЛЬКО
     на `main.ap-c` (не на все `.ap-c`, как в первой попытке круга 2) — гипотеза «`.ap-mfixed`
     держит `position:fixed`, margin `<main>` его не касается» ПРОВЕРЕНА и ОПРОВЕРГНУТА: тот же
     провал `behavior_check.sh checkout` (55/133, `locator.click: Timeout`, `H-01` 1032 против 398
     раньше — хуже, не лучше) даже с фиксом `.row.g-4`. Причина глубже одного правила (вероятно,
     смена `width:auto`+`margin` на блочном `<main>` меняет доступную ширину ПОТОМКОВ с `width:100%`
     где-то в дереве оформления способом, который `getBoundingClientRect` одного элемента не ловит) —
     не разобрано в пределе круга 3. Оставлено на `padding` — checkout важнее диагностики M-05;
     открытый вопрос Architect. */
  main.ap-c{padding-left:16px;padding-right:16px}
  /* UI-D2 ч.2 (б): круг 3 выше чинил только main.ap-c — `.ap-c` каркаса ВНЕ main (header.php
     .ap-topbar/.ap-mainbar обёртки, footer.php .ap-footer) держал общее правило `.ap-c{padding:0
     40px}` (строка 53) на телефоне, M-05 требует 16px. `padding`, не `margin` — тот же риск, что
     margin `<main>` ломает клики оформления (круг 3 выше), явно проверено `behavior_check.sh
     checkout` после этой правки. */
  .ap-c{padding-left:16px;padding-right:16px}

  /* UI-D2 ч.2 (г) хвост: главная — `.ap-tizers`/`.ap-cats` держат общий gap 20/16px везде, доска
     мобильного состояния design/home/home_r3.dc.html комбинирует оба класса с `.ap-g2` (gap 12px)
     только на мобильном блоке разметки — в шаблоне (`shop/include/dp/home_main.php`) эти два блока
     не продублированы десктоп/мобайл (в отличие от `.ap-cat__desktop`/`__mobile` и т.п.), один DOM-
     узел на оба диапазона: добавление класса `ap-g2` в разметку сломало бы 1440 (общий `.ap-g2` без
     `@media`). Тот же итоговый gap — точечно здесь, без правки разметки. */
  .ap-tizers,.ap-cats{gap:12px}

  /* Круг 3 (Owner, развилка А): H-01 (`behavior_check.sh checkout`) — оформление на 390/360 уходило
     в горизонтальную прокрутку на 8 px (`.row.g-4` — отрицательный margin Bootstrap-гаттера
     `col-lg-8/col-lg-4`, components/bitrix/sale.order.ajax/dp/template.php:171). На 991.98px и
     шире это гасил padding `.ap-c` в 40 px; на телефоне после сужения padding до 16 px (пункт «в»
     выше) отрицательный margin -8px стал пробивать край вьюпорта — не было завязано на «margin
     вместо padding» находку, это отдельный дефект того же корня (в), всплывший тем же сужением.
     На телефоне колонки всегда в столбик (`col-12` побеждает `col-lg-*` ниже 992px) — гаттер между
     колонками нечего компенсировать, гасим ряд без потери вида. */
  #dp-co-form .row.g-4{margin-left:0;margin-right:0}
  #dp-co-form .row.g-4>.col-lg-8.col-12,#dp-co-form .row.g-4>.col-lg-4.col-12{padding-left:0;padding-right:0}
}

/* End */
/* /local/templates/dompro/template_styles.css?179066825787594 */