/* Grillnurk Child — Shell / каркас (Фаза 2): ticker, sticky-хедер,
 * переключатель языков, корзина, поиск, тёмный 4-колоночный футер.
 * Зависит от tokens.css (--gn-*). Разметка — inc/shell.php + существующая шапка GP. */

/* =========================================================================
 * A. TICKER (бегущая строка)
 * ========================================================================= */
.gn-ticker {
  background: var(--gn-dark);
  color: var(--gn-on-dark);
  overflow: hidden;
  font-family: var(--gn-font-body);
  font-size: 13px;
  line-height: 1;
}
.gn-ticker__track {
  display: flex;
  width: max-content;
  animation: gnMarquee 32s linear infinite;
}
.gn-ticker:hover .gn-ticker__track { animation-play-state: paused; }
.gn-ticker__group {
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding: 8px 0;
}
.gn-ticker__item { padding: 0 14px; letter-spacing: 0.01em; }
.gn-ticker__dot { opacity: 0.45; }

@keyframes gnMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .gn-ticker__track { animation: none; transform: none; }
  .gn-ticker__group:nth-child(2) { display: none; }
  .gn-ticker__group { justify-content: center; width: 100%; flex-wrap: wrap; }
}

/* =========================================================================
 * B. STICKY-ХЕДЕР — тёплый полупрозрачный фон + blur + нижняя граница
 * ========================================================================= */
#site-navigation.main-navigation,
#sticky-navigation.main-navigation {
  background-color: rgba(236, 234, 229, 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gn-border-3);
}

/* Sticky-хедер по макету: nav-as-header (#site-navigation несёт лого+меню+lang+cart)
 * липнет к top:0. GP-нативный sticky выключен (nav-below-header, 0 sticky-ключей) и
 * serialized generate_settings не трогаем (L-gp-options) — делаем чистым CSS.
 * Тикер (сиблинг выше, generate_before_header) НЕ sticky → уезжает при скролле.
 * z-index:100 — над контентом, но НИЖЕ оверлеев (scrim 998 / drawer/modal 999),
 * чтобы дравера/скрим накрывали хедер. overflow-clip на body/#page отсутствует. */
#site-navigation.main-navigation {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Логотип 80px десктоп / 68px моб. (перебивает inline-стиль GP 75px).
 * Высота шапки GP content-driven → лого 80px просто делает бар выше, без клиппинга;
 * то же правило применяется и в sticky-клоне (#sticky-navigation) — бар не «прыгает». */
.navigation-branding img,
.site-logo.mobile-header-logo img {
  height: 80px !important;
  width: auto;
}
@media (max-width: 768px) {
  .navigation-branding img,
  .site-logo.mobile-header-logo img { height: 68px !important; }
}

/* Панель элементов справа: языки → поиск → корзина */
.main-navigation .menu-bar-items {
  display: flex;
  align-items: center;
  gap: 10px;
}
.main-navigation .menu-bar-items .menu-bar-item.wc-menu-item { order: 3; }

/* =========================================================================
 * D. ГАМБУРГЕР НА ДЕСКТОПЕ (крайний слева правого кластера) → открывает #gn-menu
 * Переиспользуем нативный GP `.menu-toggle` (в нём уже 3-полосный SVG
 * `gp-icon icon-menu-bars`). overlays.js уже слушает `.menu-toggle` в capture-фазе
 * (bindTrigger, stopImmediatePropagation гасит родной GP-обработчик) → открывает
 * #gn-menu на десктопе И мобиле, второго drawer не плодим, JS не трогаем.
 * GP прячет toggle на десктопе (показывает только ≤768px); показываем его на
 * десктопе. Порядок детей .inside-navigation (DOM: лого→бургер→nav→bar-items) уже
 * верный; ЕДИНСТВЕННЫЙ auto-margin — на бургере (первом элементе кластера) →
 * ровно один зазор: «лого [зазор] ☰ Каталог Скидки [langs] 🔍 🛒». Кластер слитный.
 * Явно фиксируем flex + justify-content:flex-start на .inside-navigation (GP по
 * nav-align-right ставит space-between — он разнёс бы группы; flex-start отдаёт
 * управление зазором только auto-margin'у). gap даёт «дыхание» внутри кластера.
 * Всё scoped ≥769px — мобильное поведение GP/оверлеев не трогаем. Селектор с
 * #site-navigation (id) гарантированно бьёт GP `.menu-toggle{display:none}`. */
@media (min-width: 769px) {
  #site-navigation .inside-navigation {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 10px;
  }
  #site-navigation .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    order: 1;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gn-text);
  }
  #site-navigation .menu-toggle:hover { color: var(--gn-acc); }
  #site-navigation .menu-toggle .gp-icon { font-size: 22px; line-height: 1; }
  /* лого слева (order 0), кластер бургер→nav→bar-items (order 1-3) справа и слитно */
  /* GP вешает на лого margin-right:auto (nav-align) → он отталкивал nav в центр;
   * гасим, чтобы единственный auto-зазор был на .menu-bar-items (кластер справа). */
  #site-navigation .navigation-branding { order: 0; margin-right: 0; }
  #site-navigation .main-nav { order: 2; }
  #site-navigation .menu-bar-items { order: 3; margin-left: auto; }
}

/* =========================================================================
 * Переключатель языков (пилюли)
 * ========================================================================= */
.gn-langs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--gn-card);
  border: 1px solid var(--gn-border-2);
  border-radius: var(--gn-r-pill);
}
.gn-lang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 30px;
  padding: 0 10px;
  border-radius: var(--gn-r-pill);
  font-family: var(--gn-font-body);
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  color: var(--gn-text-2);
  text-decoration: none;
}

/* Геометрия пилюль поверх GP-инлайна. GP задаёт `.main-navigation .menu-bar-item > a
 * { line-height: 49px }` (0,3,1) — наш `<a class="gn-lang">` это прямой `> a`-потомок
 * `<span class="menu-bar-item gn-langs">`, поэтому 49px перебивал `.gn-lang{line-height:1}`
 * (0,1,0) → строка не влезала в 30px-пилюлю, текст «уезжал», активная плашка раздувалась.
 * Дублируем геометрию в выигрывающий селектор (0,5,0) — GP-49px больше не проходит. */
.main-navigation .menu-bar-items .gn-langs .gn-lang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  min-width: 36px;
  padding: 0 10px;
  line-height: 1;
}

/* Re-color слой: GP-инлайн бьёт цвет пилюль своей специфичностью
 * `.main-navigation .menu-bar-item:hover > a { background:none; color:var(--contrast) }`
 * (0,3,1) — гасил hover-цвет и срывал тёмный фон активной пилюли. Префиксуем
 * `.main-navigation .menu-bar-items .gn-langs` → (0,5,0), бьём GP. Не привязано к
 * #site-navigation → работает и в sticky-клоне (#sticky-navigation). :visited покрыт. */
.main-navigation .menu-bar-items .gn-langs .gn-lang,
.main-navigation .menu-bar-items .gn-langs .gn-lang:link,
.main-navigation .menu-bar-items .gn-langs .gn-lang:visited {
  color: var(--gn-text-2);
  background: transparent;
}
.main-navigation .menu-bar-items .gn-langs .gn-lang:hover,
.main-navigation .menu-bar-items .gn-langs .gn-lang:focus {
  color: var(--gn-text);
  background: transparent;
}
.main-navigation .menu-bar-items .gn-langs .gn-lang--active,
.main-navigation .menu-bar-items .gn-langs .gn-lang--active:link,
.main-navigation .menu-bar-items .gn-langs .gn-lang--active:visited,
.main-navigation .menu-bar-items .gn-langs .gn-lang--active:hover,
.main-navigation .menu-bar-items .gn-langs .gn-lang--active:focus {
  background: var(--gn-dark-btn);
  color: var(--gn-on-dark);
}

/* =========================================================================
 * Корзина — тёмная кнопка + акцентный бейдж (хит-таргет 44px)
 * ========================================================================= */
.menu-bar-item.wc-menu-item .cart-contents {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 14px;
  background: var(--gn-dark-btn);
  color: var(--gn-on-dark);
  border-radius: var(--gn-r-btn);
}
.menu-bar-item.wc-menu-item .cart-contents:hover { background: var(--gn-dark); }
.menu-bar-item.wc-menu-item .cart-contents .gp-icon { color: var(--gn-on-dark); display: inline-flex; align-items: center; font-size: 21px; }
/* «Горшочек» — штриховой SVG (fill:none, stroke:currentColor в разметке); НЕ форсим
 * fill, иначе штриховая иконка зальётся сплошным. Цвет наследуется через currentColor. */
.menu-bar-item.wc-menu-item .cart-contents .gp-icon.gn-cart-pot svg { fill: none; stroke: currentColor; }
.menu-bar-item.wc-menu-item .cart-contents .amount { display: none; }
.menu-bar-item.wc-menu-item .number-of-items {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--gn-acc);
  color: #fff;
  border-radius: var(--gn-r-pill);
  font-family: var(--gn-font-body);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.menu-bar-item.wc-menu-item .number-of-items.no-items { display: none; }

/* =========================================================================
 * Поиск-иконка (модалка — GP, оставляем; здесь только вид)
 * ========================================================================= */
.main-navigation .menu-bar-item > a[data-gpmodal-trigger] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}
.main-navigation .menu-bar-item > a[data-gpmodal-trigger] .gp-icon { color: var(--gn-text); font-size: 19px; }
.main-navigation .menu-bar-item > a[data-gpmodal-trigger]:hover .gp-icon { color: var(--gn-acc); }

/* =========================================================================
 * C. ТЁМНЫЙ ФУТЕР 4 КОЛОНКИ
 * ========================================================================= */
.site-footer { background: var(--gn-dark); }
.gn-footer {
  background: var(--gn-dark);
  color: var(--gn-on-dark-2);
  font-family: var(--gn-font-body);
}
.gn-footer__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 64px) 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
@media (max-width: 880px) { .gn-footer__inner { grid-template-columns: repeat(2, 1fr); gap: 32px; } }
@media (max-width: 520px) { .gn-footer__inner { grid-template-columns: 1fr; } }

.gn-footer__logo { max-width: 180px; height: auto; margin-bottom: 16px; }
.gn-footer__title {
  margin: 0 0 14px;
  font-family: var(--gn-font-head);
  font-size: 18px;
  font-weight: 600;
  color: var(--gn-on-dark);
}
/* Ссылки футера — светлые во ВСЕХ состояниях, включая :visited/:focus/:active.
 * Глобальный акцент задают recolor.css (`a { --gn-acc }`, `a:hover, a:focus { --gn-acc-d }`)
 * и GP-inline (`a:focus`, `a:active` = var(--contrast)). У их состояний специфичность
 * (0,1,1) — РОВНО как у `.gn-footer a`, т.е. светлый цвет держался только на том, что
 * shell.css грузится позже (поз. 19 против 18 и 12). Тай, решаемый порядком, хрупок: смена
 * зависимостей enqueue или любое чужое `.x a:focus` вернули бы терракоту на тёмный фон.
 * Состояния перечислены явно → (0,2,1) выигрывает специфичностью, а не порядком.
 * Порядок LVHA обязателен: :link/:visited должны идти ДО :hover/:focus/:active. */
.gn-footer a { text-decoration: none; }
.gn-footer a:link,
.gn-footer a:visited { color: var(--gn-on-dark-2); }
.gn-footer a:hover,
.gn-footer a:focus,
.gn-footer a:focus-visible,
.gn-footer a:active { color: var(--gn-on-dark); }
.gn-footer__req,
.gn-footer__line { margin: 0 0 8px; font-size: 14px; line-height: 1.6; }
/* Реквизиты перенесены в колонку «Контакты» (под email) — отделяем и приглушаем. */
.gn-footer__req { margin-top: 16px; color: var(--gn-on-dark-3); }
.gn-footer__hours { font-weight: 600; color: var(--gn-on-dark); }
.gn-footer__links { list-style: none; margin: 0; padding: 0; }
.gn-footer__links li { margin-bottom: 8px; font-size: 14px; }
.gn-footer__note { margin: 6px 0 0; font-size: 13px; color: var(--gn-on-dark-3); line-height: 1.5; }

.gn-footer__social { display: flex; gap: 10px; margin-top: 12px; }
.gn-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(240, 231, 218, 0.25);
  border-radius: var(--gn-r-pill);
  color: var(--gn-on-dark-2);
}
/* :focus наравне с :hover — клавиатурой иконка должна давать тот же аффорданс.
 * (0,3,1) перебивает общее `.gn-footer a:hover/:focus` (0,2,1) выше. */
.gn-footer__social a:hover,
.gn-footer__social a:focus,
.gn-footer__social a:focus-visible { background: var(--gn-acc); border-color: var(--gn-acc); color: #fff; }

.gn-footer__bottom {
  border-top: 1px solid rgba(240, 231, 218, 0.12);
  padding: 18px 24px;
  text-align: center;
  font-size: 13px;
  color: var(--gn-on-dark-3);
}

/* ===================== WooCommerce notices (add-to-cart / stock / info / error)
 * Классические (.woocommerce-message | -info | -error) + блочные (cart/checkout).
 * Только вид; тексты/логику/разметку Woo не трогаем.
 *
 * КАСКАД (проверено по served CSS): shell.css грузится ПОЗЖЕ woocommerce.css (плагин),
 * но РАНЬШЕ gp-premium/woocommerce/functions/css/woocommerce.min.css. GP Premium при
 * равной специфичности (0,1,0) выигрывал бы и гасил всё:
 *   .woocommerce-error,.woocommerce-info,.woocommerce-message { padding:20px 30px; border:0;
 *                                          border-left:10px solid rgba(0,0,0,.3) }
 *   .woocommerce-*::before { display:none }                     ← прятал бы нашу иконку
 *   div.woocommerce-message a.button(:hover|:focus) { background:0 0; padding:0 }  (0,2,2)
 * Поэтому префикс `body` (0,1,1) на плашках/иконках и `body div…` (0,2,3) на кнопке —
 * перебивает GP без !important. Иконка ::before ещё и переопределяет WC-шный
 * `font-family: WooCommerce` (иначе "✓"/"!"/"i" рисуются иконочным шрифтом = тофу).
 * WC-шный ::after (clearfix) НЕ трогаем — он держит float кнопки. ===================== */

body .woocommerce-message,
body .woocommerce-info,
body .woocommerce-error {
  font-family: var(--gn-font-body);
  border: 1px solid var(--gn-border-2);
  border-radius: var(--gn-r-btn);
  background: var(--gn-surface-3);
  color: var(--gn-text);
  padding: 14px 16px 14px 44px;
  margin: 0 0 16px;
  position: relative;
  list-style: none;
  box-shadow: none;
}
body .woocommerce-error li { list-style: none; margin: 0; }

body .woocommerce-message::before,
body .woocommerce-info::before,
body .woocommerce-error::before {
  content: "i";
  position: absolute;
  left: 14px;
  top: 16px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--gn-font-body);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  color: #fff;
}

/* success — «добавлено в корзину» */
body .woocommerce-message { background: var(--gn-stock-bg); border-color: var(--gn-stock); color: var(--gn-stock-txt); }
body .woocommerce-message::before { content: "✓"; background: var(--gn-stock); }

/* error — напр. превышение остатка */
body .woocommerce-error { background: var(--gn-checkout-sel); border-color: var(--gn-acc-d); color: var(--gn-acc-d); }
body .woocommerce-error::before { content: "!"; background: var(--gn-acc-d); }

/* info */
body .woocommerce-info { background: var(--gn-surface-3); border-color: var(--gn-border-2); color: var(--gn-text); }
body .woocommerce-info::before { background: var(--gn-text-4); }

/* Кнопка «Vaata ostukorvi» / «Просмотр корзины» внутри уведомления */
body div.woocommerce-message a.button,
body div.woocommerce-message a.button.wc-forward {
  float: right;
  margin: -2px 0 0 12px;
  background: transparent;
  border: 1.5px solid var(--gn-stock);
  color: var(--gn-stock-txt);
  border-radius: var(--gn-r-pill);
  padding: 6px 16px;
  min-height: 0;
  font-family: var(--gn-font-body);
  font-weight: 600;
  font-size: 13px;
}
body div.woocommerce-message a.button:hover,
body div.woocommerce-message a.button.wc-forward:hover { background: var(--gn-stock); color: #fff; }

/* ---- Блочные уведомления (cart/checkout) — только цвет/радиус/иконка, layout не трогаем.
 * Модификаторы .is-success|.is-error|.is-info|.is-warning — реальные (сверено по
 * woocommerce/assets/client/blocks/store-notices.css). Иконка там — БЕЛЫЙ глиф на цветном
 * круге (`> svg { fill:#fff; background-color:<цвет типа> }`), поэтому перекрашиваем ФОН
 * круга под палитру и оставляем глиф белым (fill не трогаем — currentColor убил бы контраст).
 * Все блочные CSS Woo грузятся раньше shell.css → хватает равной специфичности. ---- */
.wc-block-components-notice-banner { border-radius: var(--gn-r-btn); font-family: var(--gn-font-body); }
.wc-block-components-notice-banner.is-success { background-color: var(--gn-stock-bg); border-color: var(--gn-stock); color: var(--gn-stock-txt); }
.wc-block-components-notice-banner.is-success > svg { background-color: var(--gn-stock); }
.wc-block-components-notice-banner.is-error { background-color: var(--gn-checkout-sel); border-color: var(--gn-acc-d); color: var(--gn-acc-d); }
.wc-block-components-notice-banner.is-error > svg { background-color: var(--gn-acc-d); }
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-warning { background-color: var(--gn-surface-3); border-color: var(--gn-border-2); color: var(--gn-text); }
.wc-block-components-notice-banner.is-info > svg,
.wc-block-components-notice-banner.is-warning > svg { background-color: var(--gn-text-4); }

/* ===================== Контент-карточки (статика / аккаунт / пост)
 * recolor.css сделал GP-бокс .inside-article прозрачным на всех single-страницах →
 * контенту, которому карточку не рисует свой компонент, отдаём белую панель.
 * Карточка вешается на КОНТЕЙНЕР `.inside-article > .entry-content` (не на вложенные
 * блоки) — иначе «карточка в карточке»: у аккаунта .woocommerce лежит ВНУТРИ
 * .entry-content и своей панели не требует.
 *
 * Кого правило НЕ трогает (у них свои карточки/сетки):
 *   .woocommerce-cart / .woocommerce-checkout — блоки Woo (панели в checkout.css);
 *     order-received тоже: у него body-класс .woocommerce-checkout (WC ставит его на
 *     endpoint-странице) → попадает под :not();
 *   .gn-shop-page («Новинки») — витрина с [products], товары = li.product со своим фоном;
 *   архивы/поиск/shop/категории/товар — не body.page и не body.single-post.
 * Аккаунт отдельным селектором не нужен: страница «Minu konto» — это body.page. ==== */
body.page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.gn-shop-page) .inside-article > .entry-content,
body.single-post .inside-article > .entry-content {
  background: var(--gn-card);
  border: 1px solid var(--gn-border);
  border-radius: var(--gn-r-card-l);
  padding: clamp(24px, 4vw, 40px);
}