/* Компоненты редизайна — только через переменные tokens.css и палитры. Наполняется по экранам (screen-build, этап 2). Классы — с префиксом tsg-. */

/* ---------- Основа: шрифт и цвета WoodMart — из токенов (палитра сайта задаёт акцент) ---------- */
/* на body: WoodMart печатает свои :root-переменные позже наших — значения на body действуют на всё содержимое */
:root,body{
  --wd-text-font:var(--font);
  --wd-title-font:var(--font);
  --wd-entities-title-font:var(--font);
  --wd-widget-title-font:var(--font);
  --wd-header-el-font:var(--font);
  --wd-primary-color:var(--accent);
  --wd-link-color:var(--fg);
  --wd-link-color-hover:var(--accent);
  --wd-title-color:var(--fg);
  --wd-text-color:var(--fg-2);
  --wd-header-el-font-weight:500;
  --wd-header-el-transform:none;
  --btn-default-font-family:var(--font);
}
html{scrollbar-gutter:stable}   /* место под полосу прокрутки: при блокировке прокрутки (меню, окна) страница не сдвигается */

/* Типограф: коды моделей, диапазоны и почта не рвутся по дефису (inc/typograph.php) */
.nw{white-space:nowrap}

/* Иконки Tabler (ADR-0003): контур, линия 1.5 px */
.tsg-icon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}

/* Кнопки макета (у WoodMart свой .btn — поэтому tsg-) */
.tsg-btn,button.tsg-btn{display:inline-flex;min-height:0;box-shadow:none;text-transform:none;letter-spacing:0;font-family:var(--font);align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:var(--r-pill);border:1px solid transparent;font:inherit;font-weight:500;font-size:15px;line-height:1;white-space:nowrap;cursor:pointer;transition:background var(--t),color var(--t),border-color var(--t);text-decoration:none}
.tsg-btn-primary,button.tsg-btn-primary{background:var(--accent);color:var(--accent-fg)}
.tsg-btn-outline,button.tsg-btn-outline{background:transparent;color:var(--accent);border-color:var(--accent)}
/* касание на телефоне: у WoodMart button:hover без (hover:hover) — серый фон «залипал» на «Каталог» нижней панели (ревью SIGER 2026-11-11) */
@media (hover:none){button.tsg-btn-primary:hover{background:var(--accent);color:var(--accent-fg)}button.tsg-btn-outline:hover{background:transparent;color:var(--accent);border-color:var(--accent)}}
@media (hover:hover){
  .tsg-btn-primary:hover,button.tsg-btn-primary:hover{background:var(--accent-hover);color:var(--accent-fg)}
  .tsg-btn-outline:hover{background:var(--accent-soft);color:var(--accent)}
}
/* Фокус с клавиатуры (CLAUDE.md): у кнопок и ссылок — кольцо 2 px цвета акцента с отступом 2 px. WoodMart рисует свой пунктир правилом
   :is(a,button,…):focus-visible — перебиваем на всём сайте; у полей ввода — граница поля, их не трогаем */
html body :is(a,button,summary,[role="button"],input[type="button"],input[type="submit"],input[type="checkbox"],input[type="radio"],[tabindex]:not(input):not(textarea):not(select)):focus-visible{outline:2px solid var(--accent)!important;outline-offset:2px!important;box-shadow:none}
/* там, где предок обрезает края (overflow:hidden) — кольцо внутрь, иначе его не видно (повторное ревью 2026-10-25) */
html body :is(.promo-banner,.wd-cat-thumb,.wd-cat-inner,.wd-nav-tabs-wrapper,.searchform,.whb-top-bar,.tsg-mega-promo-slot) :is(a,button):focus-visible{outline-offset:-3px!important}
html body .tsg-mega-promo:focus-visible{outline-offset:-3px!important}
/* поле количества — фокус по границе пилюли (поля ввода — границей, CLAUDE.md) */
html body div.quantity:focus-within{border-color:var(--accent)}

/* ---------- Элементы WoodMart по UI-киту (решения Air 2026-10-25): поведение их, вид — макета ---------- */
/* ссылки «Перейти к навигации / к содержимому» */
.wd-skip-links .btn{border-radius:var(--r-pill);background:var(--accent);color:var(--accent-fg);font-family:var(--font);font-size:14px;font-weight:500;text-transform:none;letter-spacing:0}
/* баннер cookie: правила WoodMart (opt-cookies) подключаются позже с тем же весом — поэтому html body */
html body .wd-cookies-popup{font-family:var(--font);background:var(--bg);color:var(--fg-2);border-top:1px solid var(--border);box-shadow:var(--shadow-lg)}
html body .wd-cookies-popup .cookies-info-text{font-size:14px;line-height:1.5;color:var(--fg-2)}
html body .wd-cookies-popup .cookies-buttons .cookies-accept-btn{height:44px;min-height:0;padding:0 22px;border-radius:var(--r-pill);background:var(--accent);color:var(--accent-fg);font-family:var(--font);font-size:15px;font-weight:500;line-height:1;text-transform:none;letter-spacing:0;box-shadow:none}
html body .wd-cookies-popup .cookies-buttons .cookies-more-btn{font-family:var(--font);font-size:15px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--accent);border:0;text-decoration:underline;text-underline-offset:3px}
@media (hover:hover){html body .wd-cookies-popup .cookies-buttons .cookies-accept-btn:hover{background:var(--accent-hover);color:var(--accent-fg)}}
/* подсказки поиска */
.wd-search-results{font-family:var(--font);border-radius:var(--r-md);box-shadow:var(--shadow-lg)}
.wd-search-results .wd-entities-title,.wd-search-results .suggestion-title{font-family:var(--font);font-size:15px;font-weight:500;text-transform:none;color:var(--fg)}
.wd-search-results .price{font-family:var(--font);color:var(--fg)}

/* ---------- Пустое состояние (пустой раздел каталога, пустая корзина): значок, заголовок, текст, кнопки ---------- */
.tsg-empty{display:grid;justify-items:center;gap:12px;padding:56px 24px;border-radius:var(--r-lg);background:var(--bg-raised);text-align:center;font-family:var(--font)}
.tsg-empty-ic{display:block;width:40px;height:40px;background:var(--fg-muted);-webkit-mask:var(--ti-package) center/contain no-repeat;mask:var(--ti-package) center/contain no-repeat}
html body .tsg-empty h2{margin:0;font-family:var(--font);font-size:24px;font-weight:600;line-height:1.25;letter-spacing:0;text-transform:none;color:var(--fg);text-wrap:balance}
.tsg-empty p{max-width:440px;margin:0;color:var(--fg-2)}
.tsg-empty-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:8px}
.tsg-empty-ic.is-cart{-webkit-mask-image:var(--ti-cart-40);mask-image:var(--ti-cart-40)}