/*
Theme Name:   Game Bound (Blocksy Child)
Theme URI:    https://www.gamebound.lt
Description:  Дочерняя тема Blocksy для магазина Game Bound. Вёрстка витрины по
              макету design/10-funside-v2.html. Родительскую тему Blocksy НЕ
              править - её обновления затрут правки.
Author:       Game Bound
Template:     blocksy
Version:      3.33.0
Text Domain:  gamebound
*/

/* ===========================================================================
   1. ТОКЕНЫ ДИЗАЙНА
   Сняты один в один с design/10-funside-v2.html, а не придуманы.
   Если макет меняется - менять здесь, а не расставлять значения по месту.
   =========================================================================== */

:root {
  /* --- база --- */
  --gb-w: #FFFFFF;
  --gb-ink: #0B0D0C;
  --gb-ink-2: #5C625D;
  --gb-line: #E3E5E2;
  --gb-field: #F0F0EE;

  /* --- фирменные --- */
  --gb-brand: #223A7A;      /* синий: кнопки, ссылки, акценты */
  --gb-brand-d: #1A2C5E;    /* он же в hover */
  --gb-brand-lt: #EAEFFA;   /* подложка hero */
  --gb-brand-md: #7A89AF;   /* бренд, разбавленный белым: крупные декоративные
                               надписи, где --gb-brand-lt даёт нечитаемый
                               контраст 1.11. У этого - 3.36, проходит
                               требование для крупного текста */
  --gb-brand-tx: #33405C;   /* текст на светло-синем */
  --gb-sky: #3FA6DC;
  --gb-sky-lt: #E7F3FB;
  --gb-sky-tx: #08222F;
  --gb-sun: #FFF2B2;        /* жёлтая подложка баннера */

  /* --- статусы товара --- */
  --gb-sale: #BF2A1B;       /* скидка */
  --gb-ok: #12704C;         /* Nauja */
  --gb-pre: #6B32BC;        /* Išankstinis užsakymas */
  --gb-out: #6E736F;        /* Parduota */

  /* Звёзды отзывов. В макете стоит #A87400, но замер на живой странице дал
     контраст 3.93 при норме 4.5: звёзды идут обычным весом 16px и под
     «крупный текст» не подпадают. Касается не только демо-отзывов - тем же
     токеном красятся настоящие звёзды на странице товара и звёзды в форме
     отзыва, то есть постоянные элементы витрины. Затемнено до значения,
     которое норму проходит; замер после правки - в отчёте партии 3. */
  --gb-gold: #8F6200;

  /* --- форма ---
     ВНИМАНИЕ: в макете 10 скругления ЕСТЬ - 12px у блоков, pill у кнопок.
     Это отличие от funside.it, где радиусов не было вовсе. */
  --gb-font: system-ui, -apple-system, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --gb-max: 1320px;
  --gb-gut: 28px;
  --gb-r-pill: 999px;
  --gb-r-blk: 12px;
  --gb-r-in: 8px;
}

@media (max-width: 980px) { :root { --gb-gut: 20px; } }

/* ---------------------------------------------------------------------------
   Переменные кнопок Blocksy.

   Тема красит кнопки через свои переменные, и её правило идёт позже нашего
   при равной специфичности - то есть выигрывает по порядку, а не по весу.
   Гоняться за селекторами бессмысленно: перекрасив переменные, чиним все
   кнопки сразу, включая те, до которых мы не дописались (вход, регистрация,
   восстановление пароля, формы в личном кабинете).
   --------------------------------------------------------------------------- */

/* Селектор :root:root вместо :root - намеренно. Blocksy печатает свои
   переменные динамическим CSS, который подключается ПОСЛЕ нашего файла
   и тоже на :root. При равной специфичности выигрывает последний, поэтому
   специфичность приходится поднять. Повтор класса - самый безобидный
   способ это сделать, без !important. */
:root:root {
  --theme-button-background-initial-color: var(--gb-brand);
  --theme-button-background-hover-color: var(--gb-brand-d);
  --theme-button-text-initial-color: #ffffff;
  --theme-button-text-hover-color: #ffffff;
  --theme-button-border-radius: var(--gb-r-pill);
  --theme-button-min-height: 48px;
  --theme-button-padding: 12px 26px;
  --theme-button-font-weight: 700;

  /* ⚠️ Цвет текста и заголовков. Найдено сравнением с утверждённым макетом:
     на макете весь текст near-black #0B0D0C, а на сайте шёл #3A4F66 -
     логотип, меню, подписи кружков, ссылки футера, «Paskyra».

     Причина та же, что была у веса заголовков: наше `body { color: ... }`
     весит (0,0,1), у Blocksy в bundle/main.min.css ровно такое же
     `body { color: var(--theme-text-color) }`, и оно подключается позже -
     значит выигрывает по порядку. Названия товаров брали третий цвет,
     #192A3D, из --theme-headings-color.

     Гоняться за селекторами тут бессмысленно: перекрасив переменные,
     чиним разом и те места, до которых тема не дописалась. */
  --theme-text-color: var(--gb-ink);
  --theme-headings-color: var(--gb-ink);
  --theme-link-initial-color: var(--gb-brand);
  --theme-link-hover-color: var(--gb-brand-d);
}

/* ===========================================================================
   2. БАЗА
   Шрифт только системный. Didot, Bodoni, Futura, Avenir, Gill Sans
   использовать нельзя - их нет на Windows и Android, а оттуда идёт
   основной литовский трафик.
   =========================================================================== */

body {
  background: var(--gb-w);
  color: var(--gb-ink);
  font-family: var(--gb-font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Селектор :root:root вместо голого h1,h2 - по той же причине, что и у
   переменных кнопок выше, и это измерено, а не предположено.

   В bundle/main.min.css родительской темы есть правило со списком
   `body,h1,h2,h3,...`, задающее font-weight, line-height и letter-spacing.
   Для элемента h1 его специфичность (0,0,1) - ровно как у голого `h1, h2`.
   При равной специфичности решает порядок, а бандл Blocksy подключается
   седьмым против второго у дочерней темы, поэтому выигрывал он.

   Как это выглядело на живой странице до правки (замер getComputedStyle,
   1280px): заголовок героя 44px/700, letter-spacing normal, line-height 66px.
   По макету 10-funside-v2.html должно быть 800 / -.025em / 1.08.
   Кегли при этом были верные, потому что они заданы отдельно на .gb-hero h1
   и подобных - там специфичность (0,1,1) и она бандл обходила.

   :root:root даёт (0,2,1) и выигрывает независимо от порядка подключения.
   После правки тот же замер: 44px/800/-1.1px/47.52px, то есть 1.08 ровно. */
:root:root h1,
:root:root h2 {
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.08;
}

:focus-visible {
  outline: 3px solid var(--gb-brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Заголовок, который читает скринридер, но не видит глаз. Из макета
   (10-funside-v2.html:51). Нужен там, где заголовок секции обязателен
   по структуре, а в дизайне его нет - например «Kodėl Game Bound».
   Свой класс, а не .screen-reader-text: тот у нас привязан к .woocommerce. */
.gb-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ===========================================================================
   3. КНОПКИ

   Требования доступности, зафиксированные при приёмке макетов:
   цель нажатия не меньше 44px, кегль не меньше 13px, настоящая заливка.
   =========================================================================== */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce ul.products li.product .button,
.woocommerce div.product form.cart .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 26px;
  border: 2px solid var(--gb-brand);
  border-radius: var(--gb-r-pill);
  background: var(--gb-brand);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  transition: background .2s, border-color .2s, color .2s;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce ul.products li.product .button:hover,
.woocommerce div.product form.cart .button:hover {
  background: var(--gb-brand-d);
  border-color: var(--gb-brand-d);
  color: #fff;
}

/* Вторичная кнопка - контур. Для предзаказа и «нет в наличии». */
.gb-btn--ghost,
.woocommerce ul.products li.product .button.gb-btn--ghost {
  background: var(--gb-w);
  color: var(--gb-brand);
}

/* Отключённая кнопка каталога. Рядом стоял ещё класс .gb-btn--disabled,
   но его не было НИ В ОДНОМ файле проекта - ни в разметке, ни в скриптах
   (проверено сверкой всех 178 классов gb-* с разметкой 30.08.2026). Убран:
   мёртвый селектор заставляет следующего искать место, где он якобы
   применяется. Настоящий вид отключённой кнопки задаёт [disabled] - его
   ставит режим витрины с закрытыми заказами. */
.woocommerce ul.products li.product .button[disabled] {
  background: var(--gb-w);
  border-color: var(--gb-line);
  color: var(--gb-ink-2);
  cursor: not-allowed;
}

/* Распроданный товар в каталоге. Вид приглушённый, как у отключённой кнопки
   в макете, но курсор обычный: это работающая ссылка на страницу товара,
   и «запрещающий» курсор врал бы о том, что нажатие ничего не даст. */
.woocommerce ul.products li.product .button.gb-oos {
  background: var(--gb-w);
  border-color: var(--gb-line);
  color: var(--gb-ink-2);
}

.woocommerce ul.products li.product .button.gb-oos:hover {
  background: var(--gb-field);
  border-color: var(--gb-ink-2);
  color: var(--gb-ink);
}

/* ===========================================================================
   4. КАТАЛОГ: СЕТКА
   =========================================================================== */

.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px 24px;
  margin: 0;
  padding: 0;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: auto;
  margin: 0;
  float: none;
}

@media (max-width: 1180px) { .woocommerce ul.products { gap: 30px 18px; } }
@media (max-width: 980px)  { .woocommerce ul.products { gap: 28px 14px; } }
@media (max-width: 760px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 16px;
  }
}

/* ===========================================================================
   4b. ЗАГОЛОВОК СТРАНИЦЫ КАТАЛОГА И КАТЕГОРИИ

   Blocksy рисует заголовок архива блоком .hero-section[data-type="type-2"]:
   серая плашка во всю ширину, текст по центру. Замер ДО правки: плашка
   занимала 250px на ЛЮБОЙ ширине от 320 до 1920 - она вообще не адаптивная, -
   а первый товар на телефоне начинался на 717-м пикселе из 812, то есть 88%
   первого экрана уходило под одно слово. На корзине и юридических страницах
   тот же заголовок занимает 32px: расхождение внутри одного сайта 218px.

   Приводим к системе утверждённого макета 10: заголовок слева, рядом счётчик
   товаров - это форма .sh, где заголовок секции слева, а вспомогательное
   справа. В макете по центру стоят только полосы-анонсы и подписи кружков
   категорий, заголовки - никогда.

   ⚠ Сам блок НЕ убираем. На каталоге и категориях этот h1 - ЕДИНСТВЕННЫЙ
   заголовок первого уровня на странице (проверено обходом), вместе с ним
   ушли бы и заголовок для скринридера, и микроразметка itemprop="headline".

   ⚠ Правим ПЕРЕМЕННЫМИ, которые Blocksy для этого и завёл: у него записано
   min-height: var(--min-height, 250px) и padding: var(--container-padding,
   50px 0). Так правка переживёт обновление темы, в отличие от перебивания
   готовых правил.

   ⚠ Специфичность :root:root + класс + атрибут = (0,4,0). Меньше нельзя:
   у Blocksy (0,3,0), но его таблица подключается ЧЕТВЁРТОЙ против нашей
   ВТОРОЙ, и при равном весе выигрывает он. Это грабли номер один проекта.

   ⚠ Через кастомайзер то же самое сделать НЕЛЬЗЯ: его настройки живут
   в базе, а база в репозиторий не входит - при переносе на хостинг они
   потерялись бы молча, как это уже было со значком сайта и с полноэкранным
   просмотром фото товара.

   ⚠ Все правила ниже привязаны к `body.gb-catalog-hero` - классу, который
   ставит тот же PHP, что переносит счётчик. Без этой привязки они цепляли бы
   ещё один тип страниц: у Blocksy герой type-2 по умолчанию стоит и на архиве
   автора. Сейчас `/author/dvitex_gb/` отдаёт 404, потому что записей в блоге
   нет, но с первой же записью автор получил бы нашу раскладку - скептики
   подставили его разметку синтетически, и имя, описание и мета встали в одну
   горизонтальную строку.
   =========================================================================== */

:root:root body.gb-catalog-hero .hero-section[data-type="type-2"] {
  --min-height: 0;
  /* ⚠️ Поля по бокам задаются ЗДЕСЬ, а не правилом `.ct-container-narrow`
     ниже: Blocksy печатает `padding: var(--container-padding)` сокращённой
     записью с более тяжёлым селектором, и она затирала наши padding-left
     и padding-right в ноль. Замер: заголовок каталога стоял на 60px при
     шапке на 88px. */
  --container-padding: 16px var(--gb-gut) 0;
  --alignment: left;
  background-color: transparent;
  background-image: none;
}

/* ⚠ flex-direction обязателен: у Blocksy тут column, и без него
   justify-content раскидывал бы элементы по ВЕРТИКАЛИ, а align-items
   прижимал бы заголовок ВПРАВО. Поймано снимком до внедрения. */
:root:root body.gb-catalog-hero .hero-section[data-type="type-2"] .entry-header {
  max-width: var(--theme-normal-container-max-width, 1290px);
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 18px;
  text-align: left;
  margin-bottom: 12px;
}

:root:root body.gb-catalog-hero .hero-section[data-type="type-2"] .page-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.08;
  margin: 0;
}

/* Счётчик товаров переехал сюда из строки под фильтрами - см. functions.php.

   ⚠ `align-self` обязателен. Правило `.woocommerce .woocommerce-result-count`
   ниже по файлу задаёт ему `align-self: center` для прежней строки, и оно
   перебивало наш `align-items: baseline` у контейнера - счётчик вставал
   на 4,5px выше базовой линии заголовка. Нашли скептики. */
:root:root body.gb-catalog-hero .hero-section[data-type="type-2"] .woocommerce-result-count {
  margin: 0;
  align-self: baseline;
  font-size: 13px;
  line-height: 1.4;
  color: var(--gb-ink-2);
  text-transform: none;
  letter-spacing: 0;
}

/* Описание категории, если владелец его заполнит. Сейчас описаний нет,
   но Blocksy выводит их тем же слоем, и без правила описание встало бы
   в один ряд с заголовком.

   ⚠ `min-width: 100%` обязателен, и одного `flex: 1 0 100%` мало.
   С `max-width` браузер обрезает гипотетический основной размер до этого
   максимума, элемент перестаёт требовать всю строку и умещается рядом
   с заголовком: замер при 1440px давал заголовок слева, счётчик посередине
   и описание справа - три колонки вместо двух строк. Ломалось от ширины
   окна ~1160px и при ЛЮБОМ непустом описании, даже в два слова.
   Нашли скептики.

   ⚠ Поэтому длину строки ограничиваем не шириной блока, а его содержимым:
   `get_the_archive_description()` пропускает текст через wpautop, то есть
   внутри лежат абзацы. Если владелец вставит голый текст без абзаца,
   строка будет во всю ширину - не сломано, просто длинновато. */
:root:root body.gb-catalog-hero .hero-section[data-type="type-2"] .page-description {
  flex: 1 0 100%;
  min-width: 100%;
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--gb-ink-2);
}

:root:root body.gb-catalog-hero .hero-section[data-type="type-2"] .page-description > * {
  max-width: 70ch;
  margin-top: 0;
}

/* Вертикальный отступ контейнера попадает РОВНО между заголовком и фильтрами,
   потому что на этих страницах заголовок стоит СНАРУЖИ контейнера.
   Замер до правки: 169px на большом экране и 159px на телефоне.

   ⚠ Поиск сюда намеренно НЕ включён: там заголовок стоит ВНУТРИ контейнера,
   и тот же отступ работает как поле сверху - обнулив его, мы прижали бы
   заголовок поиска к шапке. Проверено замером на обеих страницах.

   ⚠ Класс `gb-catalog-hero` ставит тот же PHP, который переносит счётчик
   (`gamebound_is_catalog_hero()` в functions.php). Так сделано специально:
   первая версия привязывалась к `post-type-archive-product` и `tax-product_cat`,
   и это разъезжалось с PHP. `is_product_taxonomy()` покрывает ещё метки, бренды
   и все десять архивов атрибутов - на `/savybe/amzius/nuo-10-m/` счётчик уезжал
   в заголовок, а компенсация отступа не применялась: замер дал зазор 72px
   вместо 26px. Нашли скептики. Теперь условие одно и живёт в одном месте.

   Поиск сюда не попадает автоматически: `gamebound_is_catalog_hero()` содержит
   `! is_search()`, значит и класса на нём не будет. Отдельное `:not(.search)`
   больше не нужно. */
:root:root body.gb-catalog-hero #main > .ct-container[data-vertical-spacing*="top"] {
  padding-top: 14px;
}

@media (max-width: 980px) {
  :root:root body.gb-catalog-hero .hero-section[data-type="type-2"] .page-title { font-size: 23px; }
}

@media (max-width: 760px) {
  /* ⚠️ Поля по бокам обязаны остаться и здесь: без них заголовок каталога
     на телефоне вставал от края экрана, а шапка - от 20px. */
  :root:root body.gb-catalog-hero .hero-section[data-type="type-2"] { --container-padding: 12px var(--gb-gut) 0; }
  :root:root body.gb-catalog-hero .hero-section[data-type="type-2"] .entry-header { margin-bottom: 10px; }
  :root:root body.gb-catalog-hero .hero-section[data-type="type-2"] .page-title { font-size: 20px; }

  :root:root body.gb-catalog-hero #main > .ct-container[data-vertical-spacing*="top"] {
    padding-top: 18px;
  }
}

/* ===========================================================================
   5. КАРТОЧКА ТОВАРА

   Подложка под фото - серый квадрат с мягкой тенью-«подставкой» под коробкой.
   В макете эту роль играют рисунки обложек; с настоящими фото товара
   подложка остаётся та же.
   =========================================================================== */

/* Blocksy собирает карточку своей разметкой, а не стандартной вёрсткой
   WooCommerce. Реальная структура (снята из DOM):
       li.product
         figure > a.ct-media-container > img
         div.gb-pad  (наш, только бейдж)
         h2.woocommerce-loop-product__title
         div.gb-meta
         div.gb-omnibus
         span.price
         ul.entry-meta
         div.ct-woo-card-actions > a.button
   Поэтому подложку делаем из figure, а не из своей обёртки. */

.woocommerce ul.products li.product { position: relative; }

/* Подложка и подрисованная тень убраны намеренно.
   На макете они были нужны, потому что «фото» там были рисунками без фона.
   У настоящих товарных снимков фон уже белый, и серый квадрат под ними
   читается как рамка вокруг рамки, а нарисованная тень не совпадает
   с собственной тенью предмета на фото. */
.woocommerce ul.products li.product figure {
  position: relative;
  background: transparent;
  border-radius: var(--gb-r-blk);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  margin: 0 0 15px;
  overflow: hidden;
}

/* 88% вместо прежних 62%. Меньший размер достался от макета, где картинка
   лежала на серой подложке и поля были частью оформления. Подложку убрали,
   и товар стал выглядеть потерянным в пустой ячейке - особенно вертикальные
   снимки вроде футболки, которые и так вписываются с полями по бокам. */
.woocommerce ul.products li.product figure .ct-media-container {
  position: relative;
  z-index: 1;
  transition: transform .25s ease;
}

/* Blocksy навязывает картинке товара aspect-ratio 4/3 и object-fit: cover -
   квадратная обложка обрезается сверху и снизу. Для коробки настолки это
   особенно плохо: срезается ровно название.
   Держим квадрат и вписываем целиком, а не кадрируем. */
/* То же самое в каталоге: Blocksy ставит соотношение инлайном, и без
   !important вертикальные снимки обрезаются в карточке точно так же. */
/* Тот же приём в каталоге: рамка квадратная, картинка растянута абсолютом
   и вписана через object-fit. Проценты высоты здесь так же не работают. */
/* ⚠️ width: auto здесь обязателен, без него картинка съезжает вправо.
   Blocksy задаёт .ct-media-container { width: 100% }. Для абсолютно
   позиционированного блока это состояние «переопределено»: заданы и left,
   и right, и width - браузер по правилам CSS отбрасывает right. Блок
   начинался с отступом слева и уходил на всю ширину рамки, то есть вылезал
   справа и обрезался.
   Замер до правки (1280 px, все карточки каталога): рамка 270 px,
   контейнер тоже 270 px, но его левый край на 16,2 px правее - то есть
   контейнер вылезал за правый край рамки и обрезался ею. Насколько это было
   видно глазом, зависело от снимка: у квадратных фотографий object-fit
   оставлял поля, у широких срезался край изображения. Перекос был на всех
   карточках, включая блок похожих товаров на странице товара.
   С width: auto работают оба отступа: контейнер 237,6 px, отступы 16,2
   слева и справа, то есть 88% рамки по центру - ровно то, что описано
   в комментарии выше.
   height здесь не задаём: Blocksy высоту не навязывает, вертикальные
   отступы работали и до правки. */
.woocommerce ul.products li.product figure .ct-media-container {
  position: absolute;
  inset: 6%;
  width: auto;
}

.woocommerce ul.products li.product figure img {
  position: absolute !important;
  inset: 0;
  aspect-ratio: auto !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  max-height: none;
  object-fit: contain;
  border-radius: 0;
}

.woocommerce ul.products li.product:hover figure .ct-media-container {
  transform: translateY(-4px);
}

/* Бейдж - отдельный элемент вне figure, поэтому кладём его абсолютом
   поверх подложки. Так он не зависит от того, как Blocksy соберёт фото. */
.woocommerce ul.products li.product .gb-pad {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
}

/* Порядок блоков внутри карточки.
   Blocksy печатает цену не через тот хук, куда цепляется Omnibus, поэтому
   порядок задаём раскладкой, а не приоритетами хуков - так надёжнее и
   не сломается от обновления темы. */
.woocommerce ul.products li.product figure                          { order: 1; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { order: 2; }
.woocommerce ul.products li.product .price                          { order: 4; }
.woocommerce ul.products li.product .gb-omnibus                     { order: 5; }
/* Тот же приём, что и в блочной сетке: кнопка прижата к низу карточки,
   поэтому в ряду они на одной линии при названиях разной длины. */
.woocommerce ul.products li.product .ct-woo-card-actions            { order: 6; margin-top: auto; }

/* Цена всегда на одном уровне: название занимает ровно две строки.
   Раньше резервации не было, и карточка с двухстрочным названием
   получалась длиннее соседней. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  min-height: 2.7em;
}

/* На телефоне ссылка-название высотой в одну строку - неудобная цель
   для пальца. Растягиваем её на всю ширину карточки и добавляем запас
   по вертикали: попасть становится легко, вид не меняется. */
@media (max-width: 760px) {
  .woocommerce ul.products li.product .woocommerce-loop-product__title a,
  .woocommerce ul.products li.product .woocommerce-LoopProduct-link {
    display: block;
    padding: 4px 0;
  }
}

/* Название прижато к цене: резервации под вторую строку нет - под короткими
   названиями она давала заметную дыру. Обрезка на двух строках осталась,
   чтобы длинное название не растянуло карточку.
   Ряд при этом не разъезжается: кнопки выровнены по низу через margin-top:auto
   у .ct-woo-card-actions, поэтому разной остаётся только высота текста. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 15px;
  font-weight: 600;
  /* letter-spacing здесь обязателен, хотя в макете у .nm его нет.
     Blocksy печатает название товара тегом h2, поэтому базовое правило
     заголовков (см. :root:root h1, h2 в разделе «БАЗА») дотягивается и сюда.
     Замер до защиты: название получало -0.375px, то есть -.025em от 15px,
     а в макете 10-funside-v2.html:145 у .nm трекинга нет вовсе. */
  letter-spacing: normal;
  line-height: 1.35;
  margin: 0 0 8px;
  padding: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Цена и название почти одного кегля, различаются насыщенностью.
   Так сделано на funside.it, который заказчик назвал ориентиром: там цена
   идёт тем же размером, что основной текст, и карточка читается спокойно.
   Прежний вариант (21px против 15px) выглядел перекошенным. */
.woocommerce ul.products li.product .price {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  color: var(--gb-ink);
  margin: 0 0 14px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.woocommerce ul.products li.product .price ins {
  text-decoration: none;
  color: var(--gb-sale);
  font-weight: 800;
}

.woocommerce ul.products li.product .price del {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--gb-ink-2);
  opacity: 1;
}

/* Строка Omnibus мельче цены, но не мельче 11px */
.woocommerce ul.products li.product .gb-omnibus { font-size: 12px; }

/* Omnibus: минимальная цена за 30 дней.
   Обязательна при любой скидке - VVTAT за отсутствие штрафует. */
.gb-omnibus {
  font-size: 12.5px;
  color: var(--gb-ink-2);
  margin: -10px 0 13px;
  line-height: 1.4;
}

.woocommerce ul.products li.product .button {
  width: 100%;
  margin-top: auto;
}

/* Ссылку «посмотреть корзину», которую WooCommerce дорисовывает под кнопкой
   после добавления, прячем: её роль выполняет мини-корзина, а так она
   сдвигает карточку и ломает выравнивание ряда. */
.woocommerce ul.products li.product a.added_to_cart,
.wc-block-grid__product a.added_to_cart { display: none; }

/* ===========================================================================
   6. БЕЙДЖИ НА КАРТОЧКЕ
   Nauja · −22% · Išankstinis · Parduota
   =========================================================================== */

/* Позиционированием занимается .gb-pad, бейдж внутри - обычный inline-блок.
   Иначе получается двойной absolute и «−18 %» ломается на две строки. */
.gb-badge {
  display: inline-block;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  padding: 5px 11px;
  border-radius: var(--gb-r-pill);
  background: var(--gb-ink);
  color: #fff;
}

.gb-badge--new  { background: var(--gb-ok); }
.gb-badge--sale { background: var(--gb-sale); }
.gb-badge--pre  { background: var(--gb-pre); }
.gb-badge--out  { background: var(--gb-out); }

/* Стандартный ярлык WooCommerce прячем - у нас свои бейджи.
   На странице товара он тоже английский («SALE»), поэтому убираем везде. */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale { display: none; }

/* У Blocksy свой ярлык «нет в наличии», по-английски и поверх нашего.
   Класс подтверждён в DOM: .out-of-stock-badge. Прячем - иначе на карточке
   два бейджа сразу: «SOLD OUT» и наш «Parduota». */
.woocommerce ul.products li.product .out-of-stock-badge { display: none; }

/* Категория под названием - в макете её на карточке нет.
   Класс подтверждён в DOM: ul.entry-meta > li.meta-categories. */
.woocommerce ul.products li.product .entry-meta,
.woocommerce ul.products li.product .meta-categories { display: none; }

/* Кнопка «Į krepšelį» лежит в своём контейнере - растягиваем на всю ширину */
.woocommerce ul.products li.product .ct-woo-card-actions { width: 100%; }
.woocommerce ul.products li.product .ct-woo-card-actions .button { width: 100%; }

/* Служебный текст WooCommerce для скринридеров не должен быть виден */
.woocommerce .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ===========================================================================
   7. ЗАГОЛОВКИ СЕКЦИЙ
   =========================================================================== */

.gb-sec { padding-top: 58px; }

.gb-sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 20px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

/* ⚠️ Сброс полей заголовка. В макете есть правило `h1,h2,h3,p{margin:0}`
   (10-funside-v2.html:47), а тема его не перенесла - и h2 получал нижнее
   поле от Blocksy. Замер на 1280px: низ ссылки «Visos ...» оказывался
   на 21px ниже низа заголовка, хотя `align-items: flex-end` выравнивает
   их по внешнему краю ВМЕСТЕ с полем. Строка выглядела съехавшей вниз. */
.gb-sec-head h2 {
  font-size: 38px;
  margin: 0;
  /* ⚠️ Заголовок должен уметь СЖИМАТЬСЯ и переноситься на вторую строку.
     Без этого длинный «Populiariausi žaidimai» на телефоне занимал строку
     целиком и выталкивал ссылку «Visos prekės →» под себя, а у коротких
     «Akcijos» и «Naujienos» ссылка стояла рядом - три секции подряд
     выглядели по-разному. Замер 04.09.2026 на 375px: в строке 335px,
     заголовок 246 + зазор 20 + ссылка 111 = 378; без стрелки 360 - то есть
     убирать стрелки бессмысленно, не хватало 43px, стрелка давала 17.
     С `flex: 1 1 0; min-width: 0` заголовок берёт оставшееся место
     и переносится: 375px - две строки, блок 54px вместо 79; 320px - две
     строки, за край не вылезает; /en/ («Most popular games») - то же;
     1280px - высота блока 41px и положение ссылки до пикселя как раньше.
     `min-width: 0` обязателен: без него flex-элемент не сжимается меньше
     ширины своего содержимого, и перенос не срабатывает. */
  flex: 1 1 0;
  min-width: 0;
}

.gb-more {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  padding: 7px 0 4px;
  border-bottom: 2px solid var(--gb-ink);
  white-space: nowrap;
  /* ⚠️ Не `justify-content: space-between`, а `margin-left: auto`.
     На телефоне длинный заголовок («Populiariausi žaidimai») не помещается
     в строку вместе со ссылкой, та переносится на вторую строку и при
     space-between встаёт СЛЕВА - у коротких заголовков справа, у длинных
     слева. Замер на 320-414px: высота блока 96px против 45px, зазор между
     низом заголовка и низом ссылки 69px против 17px. С `margin-left: auto`
     ссылка прижата вправо в обоих случаях. */
  margin-left: auto;
}

.gb-more:hover {
  color: var(--gb-brand);
  border-bottom-color: var(--gb-brand);
}

@media (max-width: 980px) { .gb-sec-head h2 { font-size: 30px; } }
@media (max-width: 760px) {
  .gb-sec { padding-top: 46px; }
  .gb-sec-head h2 { font-size: 25px; }
}

/* ===========================================================================
   7b. ШАПКА

   Стандартную шапку Blocksy прячем - иначе их будет две.
   =========================================================================== */

.ct-header { display: none !important; }

/* --- полоса условий, ТЕПЕРЬ НАД ФУТЕРОМ ---

   ⚠️ Здесь раньше жили правила .gb-bar / .gb-bar--brand / .gb-bar--sky /
   .gb-bar-in / .gb-only-lg - две полосы над шапкой. Полосы переехали вниз
   по просьбе заказчика (22.08.2026), разметка теперь в parts/footer-bar.php,
   и старые правила стали мёртвыми: класса .gb-bar в теме не осталось нигде.
   Оставлять мёртвый CSS вредно - следующий читатель считает его рабочим.

   Внизу полоса одна и голубая: тёмно-синяя цепляла бы взгляд сильнее самого
   футера, а нести ей больше нечего - телефон и почта стоят в реквизитах
   строкой ниже. */
/* ⚠️ Отступ живёт на ПОЛОСЕ, а не на футере, и это следствие замера.

   58px были заданы футеру, чтобы отделить его от содержимого страницы.
   Когда полоса встала перед футером, вышло наоборот: замер на 1280px дал
   0px между контентом и полосой и 58px между полосой и футером - полоса
   прилипла к товарам и оторвалась от подвала, то есть читалась как часть
   страницы.

   Теперь отступ на полосе, а у футера он снимается соседним селектором.
   Соседний, а не голый `.gb-ft { margin-top: 0 }`, специально: если полосу
   однажды уберут, футер сохранит прежний отступ и ничего не слипнется. */
.gb-ftbar {
  margin-top: 58px;
  background: var(--gb-sky);
  color: var(--gb-sky-tx);
  font-size: 14px;
  font-weight: 600;
  padding: 12px var(--gb-gut);
  text-align: center;
}

.gb-ftbar + .gb-ft { margin-top: 0; }

.gb-ftbar-in {
  max-width: var(--gb-max);
  margin: 0 auto;
  display: flex;
  gap: 6px 24px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.gb-ftbar .gb-dot { opacity: .55; }
.gb-ftbar b,
.gb-ftbar .woocommerce-Price-amount { font-weight: 800; }

/* На телефоне разделители мешают: пункты и так переносятся по одному
   на строку, а точка повисает в конце предыдущей. Прячем их и оставляем
   вертикальный ритм. Ровно этот дефект («разделитель повисает в конце
   первой строки») был записан как хвост по верхней полосе - здесь он
   закрыт сразу, а не унаследован. */
/* ⚠️ Разделители прячем до 960px, а не до 620px.

   Проверяющие агенты нашли, что точка «·» повисает в конце строки везде,
   где полоса переносится на две строки, - а это начинается гораздо раньше
   620px: три пункта с суммами требуют около 960px. Ровно этот дефект был
   записан хвостом по старой верхней полосе, и здесь он воспроизвёлся бы
   заново. Ниже 620px пункты идут столбиком, там разделители не нужны тем
   более. */
@media (max-width: 960px) {
  .gb-ftbar .gb-dot { display: none; }
  .gb-ftbar-in { gap: 4px 18px; }
}

@media (max-width: 620px) {
  .gb-ftbar { font-size: 13px; padding: 11px var(--gb-gut); }
  .gb-ftbar-in { flex-direction: column; gap: 5px; }
}

/* На самых узких строка «Nemokamas pristatymas užsakymams nuo 59,00 €»
   не помещается целиком, и сумма переносится одна на следующую строку -
   замер дал высоту полосы 118px против 96px на 375px. Кегль на пункт
   меньше возвращает каждому пункту одну строку. */
@media (max-width: 360px) {
  .gb-ftbar { font-size: 12px; }
}

/* --- шапка --- */
.gb-hd { border-bottom: 1px solid var(--gb-line); background: var(--gb-w); }

/* ⚠️ Селектор составной - .gb-wrap.gb-hd-in, а не просто .gb-hd-in.
   У элемента оба класса, а правило .gb-wrap ниже по файлу задаёт padding
   СОКРАЩЁННОЙ записью `padding: 0 var(--gb-gut)`, которая обнуляет верх
   и низ. Специфичность у обоих (0,1,0), .gb-wrap объявлен позже - значит
   он и выигрывал: шапка шла без вертикальных отступов, логотип и поиск
   стояли вплотную к полосе. Замер: от полосы до логотипа было 5px против
   23px в макете, высота шапки 48px против 84px. Два класса дают (0,2,0)
   и выигрывают по весу, а не по порядку. */
.gb-wrap.gb-hd-in {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding-top: 18px;
  padding-bottom: 18px;
}

/* ЛОГОТИП.

   Название входит в картинку логотипа, поэтому текста рядом со знаком
   больше нет: раньше здесь были знак 38x38 и слово «Game Bound» шрифтом
   интерфейса. Отсюда и правила ниже - они про картинку, а не про строку.

   ⚠️ Размеры не на глаз. Замер читаемости показал, что слово «GAME BOUND»
   внутри логотипа сливается в полоску при высоте меньше 52px; в шапке
   поэтому 58px, в футере 52px. Шапка от этого выросла с 84px до 94px -
   десять пикселей, которые покупатель не замечает. */
/* ⚠️ min-width: 0 обязателен, и это найдено замером.

   Без него flex-элемент отказывается сжиматься ниже размера содержимого,
   и логотип, вместо того чтобы уступить место, НАЕЗЖАЕТ на кнопки.
   Замер на 375px с одним товаром в избранном: у сердечка появляется
   счётчик, ширина кнопки растёт с 44 до 64px, весь блок кнопок до 169px -
   и кнопки заходили на логотип на 6px. Со счётчиком корзины того же
   не происходило, поэтому первая проверка дефект пропустила. */
.gb-brand {
  display: flex;
  align-items: center;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.gb-logo {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}

/* Размер задаётся картинке, а не обёртке: <picture> сам по себе размеров
   не имеет, а тег <img> внутри него - имеет.

   ⚠️ ПОЧЕМУ max-height, А НЕ height. Пропорцию задают атрибуты width/height
   в разметке (192x58), поэтому лого не может сплющиться ни на одной ширине -
   любая пара чисел, выставленная руками, однажды разъедется, и это уже
   случалось в футере, где стояло 173x52.

   А max-height вместо height нужен, чтобы логотип умел УСТУПАТЬ. Когда
   в шапке тесно (счётчик избранного, счётчик корзины, узкий экран), он
   мельчает пропорционально вместе с max-width: 100%, а не лезет на кнопки.
   Когда места хватает - стоит ровно в заданной высоте. */
.gb-logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 58px;
}

/* Логотип в футере: та же картинка, но мельче и с отбивкой до реквизитов.
   В макете отбивка стояла инлайновым стилем (строка 822). */
.gb-ft-brand { margin-bottom: 16px; }

.gb-ft-brand img {
  display: block;
  width: auto;
  height: 52px;
}

/* --- поиск --- */
.gb-srch { position: relative; margin: 0; }

.gb-srch input[type="search"] {
  width: 100%;
  height: 48px;
  border: 0;
  background: var(--gb-field);
  border-radius: var(--gb-r-pill);
  padding: 0 54px 0 22px;
  font: inherit;
  font-size: 15px;
  color: var(--gb-ink);
}

.gb-srch input::placeholder { color: var(--gb-ink-2); opacity: 1; }

/* ⚠️ Селектор с ТЕГОМ - `.gb-srch button.gb-go`, а не `.gb-srch .gb-go`,
   и это не украшательство. Blocksy задаёт всем кнопкам отправки свои
   размеры, и наше правило весом (0,2,0) ему проигрывало: замер живой
   страницы дал min-height 48px и padding 12px 26px, из-за чего круглая
   кнопка 44x44 превращалась в овал 52x48 и налезала на подсказку поля.

   Тот же приём уже применён в теме к кнопке избранного (button.gb-wish)
   и по той же причине. min-height и padding перечислены явно: без них
   чужие значения остаются в силе даже при выигранном width/height. */
.gb-srch button.gb-go {
  position: absolute;
  right: 2px;
  top: 2px;
  width: 44px;
  height: 44px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--gb-ink);
}

.gb-srch button.gb-go:hover { background: #E3E3E0; }

/* --- БУРГЕР ---

   Кнопка и выезжающая панель с категориями. Показывается только там, где
   лента категорий перестаёт помещаться целиком (см. медиазапрос 991px ниже),
   на широких экранах её нет вовсе.

   ⚠️ Всё держится на <details>/<summary>, поэтому открытие и закрытие
   работают без JS. Скрипт в functions.php добавляет только удобства:
   Escape, нажатие мимо панели, блокировку прокрутки страницы и закрытие
   при переходе на широкий экран.

   ⚠️ Специфичность. Blocksy задаёт стили тегам через свой бандл, который
   подключается ПОЗЖЕ дочерней темы, поэтому при равном весе выигрывает он.
   Здесь это не грозит: все селекторы идут через собственные классы gb-*,
   которых у Blocksy нет. Единственное место, где нужен вес, - снятие
   стандартного маркера у <summary>, и оно закрыто -webkit-псевдоэлементом
   плюс list-style. */
.gb-burger { position: relative; display: none; }

.gb-burger-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--gb-r-pill);
  cursor: pointer;
  color: inherit;
  /* Треугольник-маркер <summary> убираем двумя способами сразу: в Safari
     и старом WebKit работает только псевдоэлемент, в остальных list-style. */
  list-style: none;
}

.gb-burger-btn::-webkit-details-marker { display: none; }
.gb-burger-btn::marker { content: ""; }
.gb-burger-btn:hover { background: var(--gb-field); }

/* Иконка меняется на крестик, когда панель открыта: одна кнопка и открывает,
   и закрывает, как в макетах магазинов. */
.gb-burger-close { display: none; }
.gb-burger[open] .gb-burger-open { display: none; }
.gb-burger[open] .gb-burger-close { display: block; }

/* Открытая кнопка должна остаться НАД подложкой, иначе крестик перекрыт
   затемнением и первое же нажатие уходит в «закрыть по клику мимо».
   Работает-то оно и так, но выглядит как неотзывчивая кнопка. */
.gb-burger[open] .gb-burger-btn {
  position: relative;
  z-index: 62;
  background: var(--gb-field);
}

/* Затемнение начинается ПОД шапкой, а не от верха экрана: иначе логотип,
   поиск и кнопки уходят в темноту, и покупатель теряет из виду место, где
   находится. Отступ тот же, что у панели, и из той же переменной. */
.gb-burger-veil {
  position: fixed;
  top: var(--gb-hd-h, 120px);
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(11, 13, 12, .45);
  z-index: 55;
}

/* Страница под открытой панелью не прокручивается. Класс вешает скрипт
   на <html>; без скрипта меню всё равно работает, просто фон под ним
   останется прокручиваемым - это неудобство, а не поломка. */
.gb-noscroll-lock,
.gb-noscroll-lock body { overflow: hidden; }

/* ⚠️ ПАНЕЛЬ НАЧИНАЕТСЯ ПОД ШАПКОЙ, а не от верха экрана.

   Первая версия открывалась от нуля с отступом сверху, и это оказалось
   дефектом: кнопка бургера стоит во ВТОРОМ ряду шапки (рядом с поиском),
   её низ на 122px, а заголовок «KATEGORIJOS» попадал на 167px - крестик
   наезжал прямо на слово, получалось «K✕TEGORIJOS». Поймано снимком
   открытой панели, в разметке этого не видно.

   Лечение не «подобрать отступ побольше»: высота шапки разная на разных
   ширинах, и любое число разъехалось бы. Панель отступает ровно на высоту
   шапки, которую скрипт меряет и кладёт в --gb-hd-h. Запасное значение
   нужно на случай, если скрипт не выполнился: тогда меню всё равно
   открывается, просто отступ приблизительный. */
.gb-burger-panel {
  position: fixed;
  top: var(--gb-hd-h, 120px);
  left: 0;
  bottom: 0;
  width: min(320px, 86vw);
  z-index: 60;
  background: var(--gb-w);
  border-right: 1px solid var(--gb-line);
  /* Низ без отступа: последним стоит липкий ряд языка, у него свой. */
  padding: 22px 20px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: gb-burger-in .18s ease-out;

  /* Колонка флексом ради одного: ряд языка с margin-top: auto прижимается
     к низу панели, когда содержимое короче неё (высокие экраны). */
  display: flex;
  flex-direction: column;
}

/* Дети не сжимаются: иначе при переполнении флекс ужал бы списки
   и пункты налезли бы друг на друга вместо прокрутки. */
.gb-burger-panel > * { flex: 0 0 auto; }

/* ⚠️ Шапка остаётся НАД затемнением, пока панель открыта.

   Первая попытка поднимала z-index у самой .gb-hd - и НЕ сработала, что
   сразу стало видно на снимке: логотип, поиск и кнопки всё равно ушли
   в темноту. Причина в контексте наложения: затемнение лежит ВНУТРИ .gb-hd
   (оно часть <details>), поэтому подъём общего родителя поднимает и его
   тоже, а внутри родителя оно по-прежнему выше соседей.

   Поднимать надо сами соседние элементы, а не их общего родителя. Соседний
   комбинатор здесь корректен: в разметке бургер идёт первым, а логотип,
   поиск и кнопки - следом за ним. */
.gb-burger[open] ~ .gb-brand,
.gb-burger[open] ~ .gb-srch,
.gb-burger[open] ~ .gb-acts {
  position: relative;
  z-index: 56;
}

@keyframes gb-burger-in {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

/* Уважаем системную настройку «меньше движения»: людям с вестибулярными
   нарушениями выезд панели вызывает тошноту, и это не фигура речи. */
@media (prefers-reduced-motion: reduce) {
  .gb-burger-panel { animation: none; }
}

.gb-burger-ttl {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gb-ink-2);
}

.gb-burger-list {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
}

.gb-burger-list li { margin: 0; }

.gb-burger-list a {
  display: block;
  /* 48px по высоте, а не 44: в списке пункты идут вплотную друг к другу,
     и промах мимо пункта попадает в соседний, а не в пустоту. */
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-radius: var(--gb-r-8, 8px);
  font-size: 16px;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
}

.gb-burger-list a:hover,
.gb-burger-list a:focus-visible { background: var(--gb-field); color: var(--gb-brand); }

.gb-burger-list a.gb-is-sale { color: var(--gb-sale); }

/* Последний список перед рядом языка: зазор даёт сам ряд (padding-top). */
.gb-burger-list--sec { margin-bottom: 0; }

.gb-burger-list--sec a { font-size: 15px; font-weight: 600; color: var(--gb-ink-2); }
.gb-burger-list--sec a:hover { color: var(--gb-brand); }

/* --- аккаунт и корзина --- */
.gb-acts { display: flex; align-items: center; gap: 6px; }

.gb-act {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 15px;
  border-radius: var(--gb-r-pill);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
}

.gb-act:hover { background: var(--gb-field); }
.gb-act--cart { background: var(--gb-brand); color: #fff; }
.gb-act--cart:hover { background: var(--gb-brand-d); color: #fff; }

.gb-cnt {
  display: inline-grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  border-radius: var(--gb-r-pill);
  background: var(--gb-sale);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

/* ===========================================================================
   7c. ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКА

   Два места, по одному на брейкпоинт. Почему так - в
   parts/language-switcher.php: в ряд с аккаунтом и корзиной он не влезает
   ни на одной ширине телефона, это посчитано замером в партии 6.

     ≥992px  глобус первым в ряду действий шапки (.gb-acts)
     ≤991px  ряд «Lietuvių / English» в САМОМ НИЗУ бургера, липкий
             (.gb-burger-lang). До 06.09.2026 стоял первым, см. ниже

   ⚠️ В первой строке раньше стояло «глобус справа в ленте категорий
   (.gb-nav)» - устарело 24.08.2026. Вариант с лентой отвергнут замером:
   глобус сдвигал границу «лента влезает целиком» с 976px до ~1080px,
   и в полосе 992-1080px «Išpardavimas» молча обрезался. Селектор
   в правилах ниже - .gb-acts, а не .gb-nav.

   ⚠️ Здесь раньше были правила для .gb-bar--brand - переключатель стоял
   в синей полосе над шапкой. Полосы убраны в партии 6, класса .gb-bar
   в теме не осталось, и те правила стали мёртвыми. Переписаны, а не
   дополнены: мёртвый селектор хуже отсутствующего, потому что выглядит
   рабочим.

   ⚠️ Селекторы составные (.gb-lang > summary), и не для красоты. Blocksy
   оформляет элементы форм и details по-своему, а голый `summary` весит
   (0,0,1) и проигрывает почти всему. Тот же приём уже применён к фильтрам
   каталога и к бургеру - здесь повторён сознательно, чтобы все три
   раскрывающиеся штуки темы вели себя одинаково.
   =========================================================================== */

/* ⚠️ По умолчанию глобуса НЕТ, он появляется только с 992px.

   Ниже этого порога работает ряд языка в бургере, и две видимые копии
   переключателя означали бы два разных ответа на вопрос «какой сейчас
   язык». Порог тот же, на котором Blocksy-шапка переключается на бургер
   (см. медиазапрос 991px ниже) - один порог вместо двух заодно убирает
   диапазон, который никто не проверял глазами. */
.gb-lang { display: none; }

@media (min-width: 992px) {
  .gb-lang { position: relative; display: block; flex: 0 0 auto; }
}

.gb-lang > summary {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 44px;
  padding: 0 12px;
  border-radius: var(--gb-r-pill);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  cursor: pointer;
  color: inherit;

  /* Штатный треугольник убираем в обоих движках: стрелку рисуем свою. */
  list-style: none;
  user-select: none;
  transition: background .15s, color .15s;
}

.gb-lang > summary::-webkit-details-marker { display: none; }
.gb-lang > summary::marker { content: ""; }

.gb-lang > summary:hover,
.gb-lang[open] > summary {
  background: var(--gb-field);
  color: var(--gb-brand);
}

.gb-lang-globe { flex: 0 0 auto; }

/* Код языка. ⚠️ Вес НЕ увеличиваем: раньше здесь стояло 800, и «LT»
   выделялось жирным на фоне соседних «Paskyra» и «Krepšelis» (600) -
   кнопка языка кричала громче корзины, хотя язык переключают один раз
   за визит, а в корзину ходят каждый раз. Текущий язык и так понятен:
   страница целиком на нём. */
.gb-lang-code { font-size: 14px; font-weight: 600; }

.gb-lang-i { flex: 0 0 auto; opacity: .7; transition: transform .18s ease; }
.gb-lang[open] .gb-lang-i { transform: rotate(180deg); }

/* --- выпадающая панель --- */

/* ⚠️ z-index 55, а не больше: мини-корзина стоит на 60 и обязана
   перекрывать язык, а не наоборот. Панель бургера - на 80, но она живёт
   только там, где глобуса нет вовсе. */
.gb-lang-menu {
  position: absolute;
  z-index: 55;
  top: calc(100% + 4px);

  /* ⚠️ Прижата к ПРАВОМУ краю кнопки. Глобус стоит у правого края
     контейнера, и панель, раскрытая влево, всегда остаётся на странице;
     раскрытая вправо - вылезала бы за край на любой ширине.
     max-width - страховка на случай экрана, которого мы не мерили. */
  right: 0;
  min-width: 190px;
  max-width: calc(100vw - 20px);
  padding: 6px;
  background: var(--gb-w);
  color: var(--gb-ink);
  border: 1px solid var(--gb-line);
  border-radius: var(--gb-r-blk);
  box-shadow: 0 14px 30px rgba(11, 13, 12, .16);
  text-align: left;
}

/* ⚠️ Селектор с .gb-acts, а не голый .gb-lang-opt. Ссылки в ряду действий
   оформляются правилом .gb-act, и хотя наш класс другой, запас по весу
   здесь стоит держать осознанно: соседние правила шапки весят (0,1,1),
   и голый класс (0,1,0) проиграл бы первому же из них. Два класса дают
   (0,2,0) и выигрывают по весу, а не по порядку. */
.gb-acts .gb-lang-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  /* 44px - цель нажатия, зафиксированная при приёмке макетов. */
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--gb-r-in);
  font-size: 14px;
  font-weight: 600;
  color: var(--gb-ink);
  text-decoration: none;
}

.gb-acts .gb-lang-opt:hover,
.gb-acts .gb-lang-opt:focus-visible {
  background: var(--gb-field);
  color: var(--gb-brand);
}

/* Текущий язык. ⚠️ Отмечен не только цветом: цвет как единственный признак
   не читается при дальтонизме. Поэтому подложка плюс жирное начертание
   плюс aria-current в разметке. */
.gb-acts .gb-lang-opt.is-on {
  background: var(--gb-brand-lt);
  color: var(--gb-brand-tx);
  font-weight: 800;
}

.gb-lang-tag {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--gb-ink-2);
}

.gb-acts .gb-lang-opt.is-on .gb-lang-tag { color: var(--gb-brand); }

/* --- ряд языка в бургере --- */

/* В САМОМ НИЗУ панели и ЛИПКИЙ. Просьба заказчика 06.09.2026 (язык вниз,
   под категории; Лукаш - в самый низ панели).

   Почему липкий, а не просто последний. Прежний довод «первым» был честным:
   на 375x812 панель 673px, а содержимое с языком внизу 767px - «English»
   уходил за край, и тому, кто литовских категорий не читает, пришлось бы
   листать непонятный список. sticky снимает это целиком: ряд виден у нижнего
   края панели на ЛЮБОЙ высоте экрана, категории и аккаунт прокручиваются
   под ним. Когда всё помещается (высокие экраны), margin-top: auto просто
   прижимает его к низу.

   Фон обязателен: под липким рядом проезжают пункты списка.
   Отступ снизу - у ряда, а не у панели: sticky считается от края
   прокрутки, и отступ панели ряд просто проигнорировал бы. */
.gb-burger-lang {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: auto 0 0;
  padding: 14px 0 16px;
  background: var(--gb-w);
  border-top: 1px solid var(--gb-line);
}

.gb-burger-lang .gb-lang-globe { flex: 0 0 auto; color: var(--gb-ink-2); }

/* Кнопки делят остаток строки поровну. min-width: 0 обязателен - иначе
   длинное название языка растянет свою половину и сожмёт соседнюю. */
.gb-burger-lang-opt {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  /* 44px - цель нажатия, зафиксированная при приёмке макетов. */
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--gb-line);
  border-radius: var(--gb-r-pill);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--gb-ink);
  text-decoration: none;
}

.gb-burger-lang-opt:hover,
.gb-burger-lang-opt:focus-visible { border-color: var(--gb-brand); color: var(--gb-brand); }

/* Текущий язык. ⚠️ Отмечен не только цветом: подложка, рамка и жирное
   начертание плюс aria-current в разметке - цвет как единственный признак
   не читается при дальтонизме. */
.gb-burger-lang-opt.is-on {
  background: var(--gb-brand-lt);
  border-color: var(--gb-brand);
  color: var(--gb-brand-tx);
  font-weight: 800;
}


/* ===========================================================================
   7d. ЮРИДИЧЕСКИЕ СТРАНИЦЫ

   Правила покупки, приватность, доставка и возврат, контакты. Разметку
   собирает local/scripts/import-legal-pages.php из docs/legal/*.txt.

   ⚠️ Здесь раньше был <pre> с дословным текстом: рамки из дефисов вместо
   разделителей, заголовки разделов обычным текстом, реквизиты выровнены
   пробелами и жёсткие переносы строк по ширине 75 знаков. Читалось как
   вывод консоли, а не как страница магазина. Разбор в нормальный HTML
   появился 24.08.2026, эти правила - его оформление.
   =========================================================================== */

/* ⚠️ Узкая колонка - не украшательство, а условие читаемости. Строка
   во всю ширину контейнера (1200px+) - это больше 200 знаков; глаз
   теряет начало следующей строки. 70ch - привычный предел для сплошного
   текста, а юридический документ читают именно сплошняком. */
/* ⚠️ Класс продублирован: .gb-legal-page.gb-legal-page, а не .gb-legal.

   WordPress печатает для блочных страниц правило
   `.is-layout-constrained > :where(...)` с шириной 1320px. Псевдокласс
   :where() веса не добавляет, поэтому правило весит (0,1,0) - ровно
   столько же, сколько одиночный класс, - но объявлено ПОЗЖЕ темы
   и выигрывало. Замер: max-width приходил 1320px вместо 70ch, колонка
   текста растягивалась на всю ширину.

   Дубль класса даёт (0,2,0) и выигрывает по весу, а не по порядку -
   тот же приём, что у .gb-wrap.gb-hd-in в шапке. */
.gb-legal-page.gb-legal-page {
  font-size: 15px;
  line-height: 1.7;
  color: var(--gb-ink);
}

/* ⚠️ Ширину ограничиваем СОДЕРЖИМОМУ, а не самой обёртке - и это обход,
   а не прихоть.

   WordPress центрирует прямых детей .is-layout-constrained собственными
   полями, причём с !important. Сузив обёртку, мы получали колонку посреди
   страницы, тогда как заголовок оставался у левого края: замер дал h1
   на 28px, а текст на 349px - две разные оси на одной странице. Побороть
   это можно было только своим !important, то есть войной важностей.

   Вместо этого обёртка остаётся во всю ширину (пусть центрируется, ей
   всё равно), а предел чтения получают абзацы, заголовки и таблицы.
   Они уже не прямые дети .is-layout-constrained, и правило ядра до них
   не достаёт. */
.gb-legal-page > * { max-width: 70ch; }

.gb-legal-page p { margin: 0 0 16px; }

/* Заголовок раздела. ⚠️ Кегль меньше, чем у h2 витрины: на странице
   правил таких заголовков полтора десятка подряд, и витринный размер
   превращает документ в лестницу из баннеров. */
.gb-legal-page h2 {
  margin: 36px 0 14px;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.01em;
}

.gb-legal-page h2:first-child { margin-top: 0; }

/* Разделительная линия вместо рамки из дефисов, которой раньше
   заканчивался каждый раздел. */
.gb-legal-page h2::after {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  margin-top: 10px;
  background: var(--gb-brand);
}

/* --- таблицы: реквизиты и тарифы --- */

/* ⚠️ Ширина по содержимому, а не 100%. Две короткие колонки, растянутые
   на всю страницу, оставляют посередине пустоту, и глаз не связывает
   ключ со значением. */
.gb-legal-table {
  width: auto;
  margin: 0 0 18px;
  border-collapse: collapse;
  font-size: 14.5px;
}

.gb-legal-table th,
.gb-legal-table td {
  padding: 7px 18px 7px 0;
  text-align: left;
  vertical-align: top;
  border: 0;
  border-bottom: 1px solid var(--gb-line);
}

/* Ключ приглушён: он подпись, а не содержание. Значение - обычным цветом. */
.gb-legal-table th {
  font-weight: 600;
  color: var(--gb-ink-2);
  white-space: nowrap;
}

.gb-legal-table tr:last-child th,
.gb-legal-table tr:last-child td { border-bottom: 0; }

/* ⚠️ На телефоне nowrap у ключа снимаем: «Buveinės adresas:» не помещается
   в узкую колонку и выдавливал значение за край. */
@media (max-width: 620px) {
  .gb-legal-table th { white-space: normal; padding-right: 12px; }
  .gb-legal-table { font-size: 14px; }
}

/* --- списки --- */
.gb-legal-list {
  margin: 0 0 16px;
  padding-left: 20px;
  list-style: disc;
}

.gb-legal-list li { margin: 0 0 7px; }

/* Запасной вид: если разбор не сойдётся со сверкой слов, импорт возвращает
   дословный <pre class="gb-legal-text">.

   ⚠️ ПРАВИЛА ДЛЯ НЕГО ЗДЕСЬ НЕТ, и это не забывчивость: оно уже есть ниже
   по файлу, в разделе «ЮРИДИЧЕСКИЕ СТРАНИЦЫ: дословный текст».

   Здесь раньше стоял второй блок `.gb-legal-text, .gb-legal pre { ... }`,
   и он был мёртвым по двум причинам сразу. Первая: у обоих объявлений
   одинаковая специфичность (0,1,0), а нижнее идёт ПОЗЖЕ и выигрывает -
   из четырёх свойств доезжало только `white-space`, и то дублем. Вторая:
   селектор `.gb-legal pre` не мог сматчиться никогда, потому что откат
   на <pre> возвращается БЕЗ обёртки страницы.

   Два объявления одного класса в одном файле хуже, чем одно: правку
   вносят в то, которое нашли первым, и она молча не действует. */

/* ===========================================================================
   ИЗБРАННОЕ - сердечко из макета 10-funside-v2.html:143

   Два места: круглая кнопка на карточке товара и таблетка со счётчиком
   в шапке. Логика хранения и работы без JS - в parts/wishlist.php.
   =========================================================================== */

.gb-wish {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--gb-line);
  color: var(--gb-ink-2);
  text-decoration: none;
  transition: color .2s, border-color .2s, background .2s;
}

.gb-wish:hover,
.gb-wish:focus-visible {
  color: var(--gb-sale);
  border-color: var(--gb-sale);
}

/* Отмеченное сердце залито. Обводка та же, поэтому переход между
   состояниями читается как заполнение, а не как смена значка. */
.gb-wish.is-on {
  color: var(--gb-sale);
  border-color: var(--gb-sale);
}

.gb-wish.is-on svg { fill: currentColor; }

/* Строка цены: цена слева, сердечко справа - как в утверждённом макете
   (10-funside-v2.html:468, блок .prow). Обёртку печатают два хука,
   см. parts/wishlist.php.

   ⚠️ Отбивка снизу перенесена сюда с самой цены. Раньше отступ 14px стоял
   у .price; теперь цена лежит внутри строки, и отступ должен считаться
   от всей строки - иначе Omnibus подъезжал бы под сердечко. */
.woocommerce ul.products li.product .gb-prow {
  order: 4;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
}

/* Цена занимает всё оставшееся место, сердечко прижато к правому краю.
   min-width: 0 обязателен: без него длинная цена вместе со старой ценой
   распирает строку и выдавливает сердечко за границу карточки. */
/* ⚠️ order: 0 обязателен. Правило `li.product .price { order: 4 }` задано
   для порядка блоков в самой карточке, но селектор у него на потомка -
   значит оно действует и ВНУТРИ этой строки, где цена стала флекс-элементом.
   Форма с сердечком идёт с порядком 0 и сортировалась ПЕРЕД ценой: замер
   показал сердечко у левого края (0..44px), а цену правее (с 56px). */
.woocommerce ul.products li.product .gb-prow .price {
  order: 0;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

/* Сердечко в шапке: таблетка без подписи, только значок и счётчик.

   ⚠️ min-width, а не только padding: замер давал 43x44 - ровно на пиксель
   меньше рекомендованных 44x44, потому что ширину складывали значок 19px
   и два отступа по 12px. Глаз пикселя не заметит, но проверка доступности
   считает это нарушением, а стоит починка одной строки. */
.gb-act--wish {
  padding: 0 12px;
  gap: 7px;
  min-width: 44px;
  justify-content: center;
}

/* ⚠️ Счётчик избранного НЕ использует класс .gb-cnt, хотя выглядит так же.
   Тот класс занят корзиной: он зарегистрирован как фрагмент WooCommerce
   (`span.gb-cnt`), а jQuery при обновлении заменяет ВСЕ совпадения на странице.
   С общим классом добавление товара в корзину подменяло счётчик избранного
   счётчиком корзины - это было воспроизведено. Поэтому вид описан отдельно.

   Цвет красный - как в утверждённом макете, там счётчик у сердечка
   именно такой. Здесь одно время стоял фирменный синий (рассуждение
   было «красный в теме означает скидку»), но заказчик указал на макет.
   Контраст белого на этом фоне 5.85 - норму проходит. */
.gb-wish-cnt {
  display: inline-grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  border-radius: var(--gb-r-pill);
  background: var(--gb-sale);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

/* Пустой список - счётчик не рисуем вовсе, чтобы в шапке не висел ноль. */
.gb-wish-cnt:empty { display: none; }

/* Форма вокруг сердечка не должна влиять на раскладку: она нужна только
   чтобы кнопка работала без JS. */
.gb-wish-form { margin: 0; padding: 0; border: 0; line-height: 0; }

/* Кнопка внутри формы: снимаем наследие браузерных стилей кнопки.

   ⚠️ Высоту и рамку приходится повторять здесь, а не только в .gb-wish.
   Blocksy красит ВСЕ кнопки отправки правилом
   `.button, .ct-button, …, [type="submit"]`, которое задаёт
   min-height: var(--theme-button-min-height) (у нас 48px) и снимает рамку.
   Наша кнопка - submit, поэтому под него попадала: круг 44x44 превращался
   в овал 44x48 и терял обводку. Замер до правки: height 48px, border 0px.
   Селектор button.gb-wish весит (0,1,1) и перебивает (0,1,0) у Blocksy. */
button.gb-wish {
  padding: 0;
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  width: 44px;
  height: 44px;
  min-height: 44px;
  border: 1px solid var(--gb-line);
  background: #fff;
  /* ⚠️ Цвет тоже приходится повторять здесь. Blocksy красит все кнопки
     отправки в var(--theme-button-text-initial-color), а мы сами задали
     его белым для настоящих кнопок. Контур сердца рисуется currentColor,
     поэтому он получался белым на белом кружке - невидимым. Замер до
     правки: color и stroke = rgb(255,255,255). */
  color: var(--gb-ink-2);
}

button.gb-wish:hover,
button.gb-wish:focus-visible,
button.gb-wish.is-on {
  border-color: var(--gb-sale);
  color: var(--gb-sale);
}

.gb-act--cart .gb-cnt { background: #fff; color: var(--gb-brand); }

/* --- мини-корзина --- */
.gb-cart-wrap { position: relative; }

.gb-minicart {
  position: absolute;
  z-index: 60;
  top: calc(100% + 10px);
  right: 0;
  width: min(360px, calc(100vw - 2 * var(--gb-gut)));
  background: var(--gb-w);
  border: 1px solid var(--gb-line);
  border-radius: var(--gb-r-blk);
  box-shadow: 0 16px 36px rgba(11, 13, 12, .14);
  padding: 16px;
}

.gb-minicart[hidden] { display: none; }

.gb-minicart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.gb-minicart-head b { font-size: 15px; font-weight: 800; }

.gb-minicart-x {
  width: 32px;
  height: 32px;
  border: 0;
  background: none;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  color: var(--gb-ink-2);
  cursor: pointer;
}

.gb-minicart-x:hover { background: var(--gb-field); color: var(--gb-ink); }

/* Список товаров внутри панели */
.gb-minicart .woocommerce-mini-cart {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 320px;
  overflow-y: auto;
}

/* В разметке WooCommerce порядок такой: сначала ссылка удаления, потом
   картинка, потом название. Сеткой это не выпрямить, не переставляя узлы,
   поэтому строим на позиционировании: строка - обычный блок с отступами,
   картинка и крестик прижаты к краям. */
.gb-minicart .woocommerce-mini-cart-item {
  position: relative;
  display: block;
  padding: 12px 40px 12px 0;
  border-bottom: 1px solid var(--gb-line);
  text-align: left;
  min-height: 76px;
  overflow: hidden;
}

/* !important нужен по той же причине, что и в каталоге: Blocksy пишет
   картинкам aspect-ratio инлайном, и без перебивки товар в мини-корзине
   растягивался в неверных пропорциях либо не помещался в свои 52px. */
/*
 * Обтекание, а не абсолют.
 *
 * ⚠️ С position: absolute картинка вставала не в левый отступ, а поверх
 * текста: containing block оказывался не тем, и left: 0 отсчитывался уже
 * после padding-left. Выглядело как «картинки нет».
 *
 * У float отсчёт от края содержимого, и порядок в разметке (ссылка
 * удаления, картинка, название) обтеканию не мешает.
 *
 * !important нужен по той же причине, что и в каталоге: Blocksy пишет
 * картинкам aspect-ratio инлайном.
 */
.gb-minicart .woocommerce-mini-cart-item img {
  position: static !important;
  float: left !important;
  width: 52px !important;
  height: 52px !important;
  aspect-ratio: auto !important;
  max-width: none;
  max-height: none;
  object-fit: contain;
  background: transparent;
  border-radius: var(--gb-r-in);
  margin: 0 12px 4px 0;
}

.gb-minicart .woocommerce-mini-cart-item a:not(.remove) {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  line-height: 1.35;
}

.gb-minicart .woocommerce-mini-cart-item a:not(.remove):hover {
  color: var(--gb-brand);
  text-decoration: underline;
}

.gb-minicart .quantity {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: var(--gb-ink-2);
}

/* Крестик удаления - цель нажатия 32px, иначе на телефоне не попасть */
.gb-minicart .woocommerce-mini-cart-item a.remove {
  position: absolute;
  right: 0;
  top: 12px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  color: var(--gb-ink-2);
  background: none;
}

.gb-minicart .woocommerce-mini-cart-item a.remove:hover {
  background: #FDF3F2;
  color: var(--gb-sale);
}

.gb-minicart .woocommerce-mini-cart__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0;
  font-size: 15px;
  font-weight: 800;
}

.gb-minicart .woocommerce-mini-cart__total .amount {
  font-size: 19px;
  font-variant-numeric: tabular-nums;
}

.gb-minicart .woocommerce-mini-cart__buttons {
  display: grid;
  gap: 8px;
  margin: 0;
}

.gb-minicart .woocommerce-mini-cart__buttons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border-radius: var(--gb-r-pill);
  border: 2px solid var(--gb-brand);
  background: var(--gb-w);
  color: var(--gb-brand);
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
}

.gb-minicart .woocommerce-mini-cart__buttons a.checkout {
  background: var(--gb-brand);
  color: #fff;
}

.gb-minicart .woocommerce-mini-cart__buttons a.checkout:hover {
  background: var(--gb-brand-d);
  border-color: var(--gb-brand-d);
}

.gb-minicart .woocommerce-mini-cart__empty-message {
  margin: 0;
  padding: 18px 0;
  text-align: center;
  color: var(--gb-ink-2);
  font-size: 14px;
}

@media (max-width: 440px) {
  /* На узком экране панель прижимаем к краям окна, а не к кнопке */
  .gb-minicart {
    position: fixed;
    top: auto;
    left: var(--gb-gut);
    right: var(--gb-gut);
    width: auto;
  }
}

/* --- меню категорий --- */
.gb-nav { border-bottom: 1px solid var(--gb-line); background: var(--gb-w); }

.gb-nav ul {
  display: flex;
  gap: 0 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gb-nav a {
  display: block;
  padding: 14px 13px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  color: inherit;
  text-decoration: none;
}

.gb-nav a:hover { color: var(--gb-brand); border-bottom-color: var(--gb-brand); }
.gb-nav a.gb-is-sale { color: var(--gb-sale); }
.gb-nav a.gb-is-sale:hover { border-bottom-color: var(--gb-sale); }

/* Меню не переносится, а прокручивается - иначе на планшете
   оно разъезжается на две строки и ломает высоту шапки. */
.gb-noscroll {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.gb-noscroll::-webkit-scrollbar { display: none; }

/* Шапка перестраивается в две строки: логотип с кнопками сверху, поиск
   под ними во всю ширину.

   ⚠️ Порог 900px, а не 760px, как было раньше, и это следствие замера.
   Подсказке «Ieškokite, pvz. „Warhammer“» нужно 198px текста плюс 76px
   внутренних отступов поля, всего 274px. Замер ширины поиска в одну строку
   (то есть при 901px и шире - ниже раскладка уже двухрядная): 901px -> 304px,
   860 -> 263, 820 -> 223, 768 -> 171. Ниже примерно 870px подсказка
   обрезалась. Обрезалась она и до появления логотипа, просто на более узком
   экране: прежняя связка «знак 38px плюс название текстом» занимала 171px
   против нынешних 192px, то есть лого шире на 21px и сдвинуло границу
   вправо. Отдать поиску целую строку раньше честнее, чем показывать
   огрызок поля. */
/* ЛЕНТА КАТЕГОРИЙ УСТУПАЕТ МЕСТО БУРГЕРУ.

   ⚠️ Порог 991px взят замером, а не на глаз. Лента из восьми пунктов
   занимает 936px. Ширина строки контента равна ширине экрана минус два
   поля по 20px, значит лента помещается целиком примерно с 976px и шире.
   До этого она обрезается, и прокрутка у неё скрыта (.gb-noscroll), то есть
   покупатель не видит ни остальных категорий, ни намёка на то, что они есть.
   Замер до правки: на 375px было видно 36% ленты, на 320px - 30%, на 620px -
   62%, на 760px - 77%. Ни на одной из этих ширин признака прокрутки не было.

   Поэтому до 991px включительно категории живут в бургере, где видны все
   восемь и подписи не обрезаны, а лента показывается только там, где влезает
   целиком. Заодно шапка становится короче на 57px - на столько занимала
   строка ленты. */
@media (max-width: 991px) {
  .gb-nav { display: none; }
  .gb-burger { display: block; }
}

/* ⚠️ ПОРОГ ДВУХРЯДНОЙ РАСКЛАДКИ - тот же 991px, а не 900px.

   Сначала здесь стояло 900: до него шапка двухрядная, а на 901-991 бургер
   уже показан, но раскладка ещё однорядная, в четыре колонки. Проверяющие
   агенты нашли, что в этой полосе поиск обрезает подсказку - и это сходится
   с арифметикой: бургер забирает у строки 44px плюс зазор, а поиску нужно
   274px (198px текста плюс 76px внутренних отступов поля). Прежний замер
   давал поиску 304px при 901px, то есть запаса было ровно 30px - ровно
   столько бургер и съел.

   Поэтому двухрядная раскладка начинается там же, где появляется бургер.
   Один порог вместо двух заодно убирает целый диапазон, который никто
   не проверял глазами. */
@media (max-width: 991px) {
  /* Тот же составной селектор и по той же причине: медиазапрос
     специфичность не повышает, поэтому .gb-wrap перебивал и здесь.

     ⚠️ РАСКЛАДКА В ДВА РЯДА, И БУРГЕР ВО ВТОРОМ - это не вкусовщина,
     а следствие арифметики. Заказчик потребовал две вещи сразу: полное
     лого (172px по ширине при высоте 52px) и все три кнопки в шапке
     (аккаунт, избранное, корзина - вместе 151px по замеру). На 375px
     в строке доступно 335px: 172 + 151 + зазор 10 = 333, то есть первый
     ряд занят целиком. Кнопке бургера там места нет вовсе - её 44px
     переполнили бы строку и сплющили лого.

     Во втором ряду бургер помещается свободно: поиску после него
     остаётся 281px при нужных 274px (198px на подсказку «Ieškokite,
     pvz. „Warhammer“» плюс 76px внутренних отступов поля).

     Колонки заданы явно, чтобы бургер занимал ровно свои 44px, а лого
     получало всю оставшуюся ширину до кнопок. */
  .gb-wrap.gb-hd-in {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    row-gap: 12px;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .gb-brand  { grid-row: 1; grid-column: 1 / 3; }
  .gb-acts   { grid-row: 1; grid-column: 3; }
  .gb-burger { grid-row: 2; grid-column: 1; }
  .gb-srch   { grid-row: 2; grid-column: 2 / -1; }

  /* ⚠️ Ссылка логотипа обязана сжаться до самой картинки.

     В двухрядной раскладке бренд попадает в колонку minmax(0, 1fr) и по
     умолчанию растягивается на всю её ширину, а картинка внутри остаётся
     56px. Замер на живом сайте при 375px: ссылка занимает 20..203, картинка
     20..76 - то есть 127 пикселей пустоты, которая ведёт на главную. Тап
     мимо логотипа выбрасывал бы покупателя из карточки товара или корзины,
     а кольцо фокуса с клавиатуры рисовалось бы вокруг пустого прямоугольника.

     Дефект не новый, то же самое было при пороге 760px, но перенос порога
     на 900px расширил зону на планшеты - поэтому чиним здесь. */
  .gb-brand { justify-self: start; }
}

@media (max-width: 620px) {
  /* ЛОГОТИП НА ТЕЛЕФОНЕ - ПОЛНЫЙ, и теперь на любой ширине.

     Заказчик попросил, чтобы везде стояло его лого целиком: знак GB,
     надпись GAME BOUND и мишень. Раньше ниже 375px оно подменялось одним
     знаком, потому что места на полное не хватало.

     ⚠️ Задаём ТОЛЬКО высоту, ширину считает браузер по атрибутам width
     и height картинки (192x58). Так лого физически не может сплющиться:
     любая пара чисел, выставленная руками, рано или поздно разъедется
     с пропорцией - это уже случалось в футере (было 173x52 вместо 172x52).
     Здесь такой ошибки не будет по построению.

     Место под полное лого освободила лента категорий: она ушла в бургер,
     а сам бургер встал во вторую строку рядом с поиском - там ширины
     хватает, и первый ряд остался прежним: логотип и три кнопки. */
  .gb-logo img { max-height: 52px; }

  /* ⚠️ ВСЕ ТРИ КНОПКИ ОСТАЮТСЯ В ШАПКЕ - аккаунт, избранное и корзина.
     Это прямое требование заказчика (22.08.2026). Поэтому они не уезжают
     в бургер, а ужимаются до иконок: подписи скрываются ВИЗУАЛЬНО, а не
     display:none - иначе они выпали бы из дерева доступности, ссылке
     понадобился бы aria-label, а он заменяет доступное имя целиком,
     вместе со счётчиком товаров. Это уже проверялось перепроверкой:
     скринридер переставал сообщать количество. */
  .gb-act--login .gb-lbl,
  .gb-act--cart .gb-lbl {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .gb-act { padding: 0 9px; gap: 6px; }
  .gb-acts { gap: 2px; }
  .gb-wrap.gb-hd-in { gap: 10px; }
}

@media (max-width: 440px) {
  /* На самом узком экране иллюстрация баннера уходит под текст и мельчает -
     иначе на текст остаётся полоска шириной в пару слов. Макет:262-263. */
  .gb-duo article { grid-template-columns: 1fr; }
  .gb-duo svg { width: 72px; height: 72px; }
}

/* САМЫЕ УЗКИЕ ТЕЛЕФОНЫ (320-374px).

   ⚠️ Здесь раньше логотип подменялся знаком GB 56x44, потому что полному
   не хватало места. Теперь подмены нет: заказчик просил лого целиком везде.

   Но арифметику не обмануть, поэтому лого не сплющивается, а МЕЛЬЧАЕТ
   с сохранением пропорции - высота падает, ширину пересчитывает браузер.
   Замер читаемости слова «GAME BOUND» внутри лого (21.08): 52px - минимум
   для спокойного чтения, 46px - «на грани, буквы угадываются», 40px - уже
   полоска. Отсюда две ступени, обе выше границы полоски.

   Арифметика на 360px (поля 2x16 = 32, доступно 328): лого 159 + кнопки
   в ужатом виде ~140 + зазор 8 = 307, помещается с запасом.
   На 320px (доступно 288): лого 152 + кнопки ~128 + 8 = 288, ровно.
   Всё это перепроверено замером на живом сайте, а не только посчитано. */
/* ⚠️ Зазор МЕЖДУ кнопками здесь ноль, а отступы ВНУТРИ них - крупнее.

   Смысл в целях касания. Замер после первой версии этой правки показал,
   что кнопки аккаунта и избранного сжались до 31px по ширине - хуже,
   чем было до неё (35px). Зазор в 2px между кнопками глазу ничего
   не даёт, а отданный кнопкам он расширяет саму цель: промах по сердечку
   попадает тогда в соседнюю кнопку, а не в пустоту.

   ⚠️ Честная граница: 35x44 меньше рекомендованных 44x44. На 320px
   уместить полное читаемое лого И три кнопки по 44px физически нельзя -
   доступно 296px, из них 152 занимает логотип на нижней границе
   читаемости. Заказчик выбрал сохранить все три кнопки и полное лого,
   значит уступать приходится шириной кнопок. Требование WCAG 2.5.8
   (24x24) выполняется с запасом; рекомендация 2.5.5 (44x44) - нет. */
@media (max-width: 374px) {
  /* ⚠️ Поле колонки уменьшается ВМЕСТЕ с шапкой. Шапка тут сознательно
     поджата, чтобы уместить полное лого и три кнопки, а содержимое
     оставалось на 20px - и край страницы получался разным сверху и ниже.
     Замер на 320 и 360px: шапка от 12 и 16px, содержимое от 20px. */
  :root { --gb-gut: 16px; }
  .gb-hd .gb-wrap { padding-left: 16px; padding-right: 16px; }
  .gb-wrap.gb-hd-in { gap: 8px; }
  .gb-logo img { max-height: 48px; }
  .gb-act { padding: 0 8px; gap: 5px; }
  .gb-acts { gap: 0; }
}

@media (max-width: 340px) {
  :root { --gb-gut: 12px; }
  .gb-hd .gb-wrap { padding-left: 12px; padding-right: 12px; }
  .gb-wrap.gb-hd-in { gap: 6px; }
  .gb-logo img { max-height: 46px; }
}

/* ⚠️ ПОЛЕ ПОИСКА НА УЗКИХ ЭКРАНАХ - лечение регрессии, которую внёс бургер.

   Бургер встал в одну строку с поиском и забрал у него 52px (44 кнопка
   плюс зазор). Замер на 320px показал: полю осталось 244px, из них
   на текст 168px при нужных 198px - подсказка «Ieškokite, pvz. „Warhammer“»
   обрезалась на 30px. До правки поиск занимал всю строку и подсказка
   помещалась.

   Текст подсказки НЕ трогаем: он выверен отдельным замером и содержит
   пример из ассортимента. Вместо этого срезаем внутренние отступы поля
   (76px -> 60px) и на один пункт кегль: 198px текста при 15px становятся
   185px при 14px. Замер после: на 320px доступно 186px против нужных 185.

   Кнопка лупы остаётся 44x44 - это цель касания, её ужимать нельзя. */
@media (max-width: 400px) {
  .gb-srch input[type="search"] {
    padding: 0 46px 0 14px;
    font-size: 14px;
  }

  .gb-srch button.gb-go { right: 0; }
}

/* ===========================================================================
   5b. ФИЛЬТРЫ КАТАЛОГА
   =========================================================================== */

/* Blocksy складывает счётчик товаров и сортировку в один flex-ряд
   .woo-listing-top с flex-wrap:nowrap. Форма фильтров попадает туда же,
   и без переноса всё втискивается в одну строку: «Rodomi visi rezultatai»
   вставало вровень с кнопками фильтров и зажималось в узкую колонку.

   Разрешаем перенос и отдаём форме всю ширину - тогда фильтры занимают
   верхнюю строку, а счётчик и сортировка встают своей строкой под ними. */
.woo-listing-top {
  flex-wrap: wrap;
  align-items: center;
  row-gap: 16px;
}

.gb-filters {
  flex: 0 0 100%;
  margin: 0;
}

/* Счётчик прижат влево, сортировка вправо, оба по центру своей строки -
   по умолчанию у них разные вертикальные выравнивания. */
.woocommerce .woocommerce-result-count {
  margin: 0;
  margin-right: auto;
  align-self: center;
  font-size: 13.5px;
  color: var(--gb-ink-2);
}

.woocommerce .woocommerce-ordering {
  margin: 0;
  align-self: center;
}

.gb-filters-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* --- кнопка-триггер панели --- */
.gb-fdrop { position: relative; }

.gb-fdrop > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--gb-line);
  border-radius: var(--gb-r-pill);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  user-select: none;
  white-space: nowrap;
  transition: border-color .15s, background .15s, color .15s;
}

.gb-fdrop > summary::-webkit-details-marker { display: none; }
.gb-fdrop > summary:hover { border-color: var(--gb-brand); color: var(--gb-brand); }

.gb-fdrop[open] > summary {
  border-color: var(--gb-brand);
  color: var(--gb-brand);
}

/* Фильтр с выбранными значениями видно, даже когда панель закрыта */
.gb-fdrop.is-on > summary {
  background: var(--gb-brand-lt);
  border-color: var(--gb-brand);
  color: var(--gb-brand);
}

.gb-fdrop-n {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--gb-r-pill);
  background: var(--gb-brand);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
}

.gb-fdrop-i { transition: transform .18s ease; flex: 0 0 auto; }
.gb-fdrop[open] .gb-fdrop-i { transform: rotate(180deg); }

/* --- выпадающая панель --- */
.gb-fpanel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  left: 0;
  min-width: 240px;
  max-height: 320px;
  overflow-y: auto;
  padding: 8px;
  background: var(--gb-w);
  border: 1px solid var(--gb-line);
  border-radius: var(--gb-r-blk);
  box-shadow: 0 12px 28px rgba(11, 13, 12, .12);
}

.gb-fopt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 10px;
  border-radius: var(--gb-r-in);
  font-size: 14px;
  cursor: pointer;
}

.gb-fopt:hover { background: var(--gb-field); }

.gb-fopt input {
  width: 18px;
  height: 18px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--gb-brand);
  cursor: pointer;
}

.gb-fopt-t { flex: 1 1 auto; }
.gb-fopt-n { font-size: 12px; font-weight: 700; color: var(--gb-ink-2); }

/* Явное правило: атрибут hidden перебивается правилами Blocksy для button,
   и кнопка остаётся видимой даже при включённом JS. */
.gb-fapply[hidden] { display: none !important; }

.gb-fapply {
  width: 100%;
  min-height: 40px;
  margin-top: 6px;
  border: 0;
  border-radius: var(--gb-r-pill);
  background: var(--gb-brand);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

/* --- сброс --- */
.gb-fclear {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gb-sale);
  text-decoration: none;
  padding: 0 6px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.gb-fclear:hover { text-decoration: underline; }

/* --- выбранное отдельной строкой --- */
.gb-fsel {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.gb-ftag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: var(--gb-r-pill);
  background: var(--gb-brand);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.gb-ftag:hover { background: var(--gb-brand-d); color: #fff; }
.gb-ftag span[aria-hidden] { font-size: 16px; line-height: 1; opacity: .8; }

@media (max-width: 620px) {
  /* На узком экране панель прижимаем к краю формы, иначе она вылезает */
  .gb-fpanel { left: auto; right: 0; min-width: 220px; }
  .gb-fdrop:first-child .gb-fpanel { left: 0; right: auto; }
}

/* ===========================================================================
   5e. ПОСТРАНИЧНАЯ НАВИГАЦИЯ
   =========================================================================== */

/* Пагинацию рисует Blocksy как nav.ct-pagination, а не штатной разметкой
   WooCommerce - класс подтверждён в DOM. Правила для .woocommerce-pagination
   здесь не сработали бы вообще. */

nav.ct-pagination,
.woocommerce nav.woocommerce-pagination { margin: 36px 0 0; }

/* Структура Blocksy (снята из DOM): сетка из трёх колонок, номера лежат
   внутри вложенного div, «Kitas» - отдельным соседом. Списка нет вообще,
   поэтому правила на ul здесь ни при чём - они оставлены только для
   штатной разметки WooCommerce, если Blocksy её когда-нибудь отдаст. */
nav.ct-pagination > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

.woocommerce nav.woocommerce-pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  border: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: 0;
  margin: 0;
  overflow: visible;
}

/* Цель нажатия 44px - то же правило, что у кнопок и фильтров */
nav.ct-pagination .page-numbers,
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--gb-line);
  border-radius: var(--gb-r-pill);
  font-size: 14px;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  background: var(--gb-w);
  transition: border-color .15s, background .15s, color .15s;
}

nav.ct-pagination a.page-numbers:hover,
.woocommerce nav.woocommerce-pagination ul li a:hover {
  border-color: var(--gb-brand);
  color: var(--gb-brand);
  background: var(--gb-w);
}

nav.ct-pagination .page-numbers.current,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--gb-brand);
  border-color: var(--gb-brand);
  color: #fff;
}

/* ===========================================================================
   5c. «НИЧЕГО НЕ НАЙДЕНО»
   =========================================================================== */

.gb-empty {
  border: 1px solid var(--gb-line);
  border-radius: var(--gb-r-blk);
  padding: 40px 32px;
  text-align: center;
}

.gb-empty b { display: block; font-size: 21px; font-weight: 800; margin-bottom: 8px; }

.gb-empty p {
  font-size: 15px;
  color: var(--gb-ink-2);
  max-width: 52ch;
  margin: 0 auto 20px;
  line-height: 1.55;
}

.gb-empty-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 22px;
}

.gb-empty-cats a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--gb-line);
  border-radius: var(--gb-r-pill);
  font-size: 13.5px;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
}

.gb-empty-cats a:hover { border-color: var(--gb-brand); color: var(--gb-brand); }

/* ===========================================================================
   5d. ХЛЕБНЫЕ КРОШКИ

   Крошки рисует Blocksy. Приводим к токенам темы: у него они капсом
   и крупнее, чем нужно - на карточке товара они перетягивают внимание
   с названия и цены.
   =========================================================================== */

.ct-breadcrumbs,
.ct-breadcrumbs * {
  /* Blocksy задаёт капс на вложенных элементах, поэтому сбрасываем и на них */
  text-transform: none;
  letter-spacing: 0;
}

.ct-breadcrumbs {
  font-size: 13px;
  color: var(--gb-ink-2);
  margin-bottom: 14px;
}

.ct-breadcrumbs a {
  color: var(--gb-ink-2);
  text-decoration: none;
}

.ct-breadcrumbs a:hover {
  color: var(--gb-brand);
  text-decoration: underline;
}

/* Последний пункт - текущая страница, её не подсвечиваем как ссылку */
.ct-breadcrumbs .last-item { color: var(--gb-ink); font-weight: 600; }

/* ===========================================================================
   6b. СТРАНИЦА ТОВАРА
   =========================================================================== */

/* Фото товара на той же серой подложке, что и в каталоге -
   иначе переход из каталога в карточку выглядит как другой сайт. */
.woocommerce div.product div.images img {
  background: var(--gb-field);
  border-radius: var(--gb-r-blk);
}

.woocommerce div.product .product_title {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.1;
  margin-bottom: 14px;
}

.woocommerce div.product p.price {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--gb-ink);
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.woocommerce div.product p.price ins { text-decoration: none; color: var(--gb-sale); }
.woocommerce div.product p.price del { font-size: 18px; font-weight: 500; color: var(--gb-ink-2); opacity: 1; }

.gb-omnibus--single { font-size: 13px; margin: 0 0 18px; }

/* --- условия доставки в карточке --- */
.gb-ship {
  list-style: none;
  margin: 22px 0;
  padding: 18px 20px;
  border: 1px solid var(--gb-line);
  border-radius: var(--gb-r-blk);
  background: var(--gb-w);
}

.gb-ship li {
  position: relative;
  padding-left: 24px;
  margin: 0 0 9px;
  font-size: 14px;
  line-height: 1.5;
}

.gb-ship li:last-child { margin-bottom: 0; }

.gb-ship li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--gb-brand);
  border-bottom: 2px solid var(--gb-brand);
  transform: rotate(-45deg);
}

/* --- юридический блок: гарантия, GPSR, безопасность --- */
.gb-legal {
  margin: 26px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--gb-line);
}

.gb-legal-row { margin-bottom: 16px; }
.gb-legal-row:last-child { margin-bottom: 0; }

.gb-legal-row b {
  display: block;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gb-ink-2);
  margin-bottom: 5px;
}

.gb-legal-row p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--gb-ink-2);
  margin: 0;
}

/* Предупреждение администратору. Покупателю не видно - блок рендерится
   только для пользователей с правами управления магазином. */
.gb-legal-row--warn {
  background: #FDF3F2;
  border-left: 3px solid var(--gb-sale);
  border-radius: var(--gb-r-in);
  padding: 12px 14px;
}

.gb-legal-row--warn b,
.gb-legal-row--warn p { color: var(--gb-sale); }

/* --- связанные товары --- */

/* Blocksy прячет блок на телефоне и планшете своими классами ct-hidden-*.
   Возвращаем: именно на телефоне «Panašūs produktai» - основной способ
   попасть на другой товар, листать каталог обратно там неудобно. */
.related.products.ct-hidden-sm,
.related.products.ct-hidden-md,
.up-sells.ct-hidden-sm,
.up-sells.ct-hidden-md { display: block !important; }

.woocommerce .related.products,
.woocommerce .up-sells {
  margin-top: 58px;
  padding-top: 38px;
  border-top: 1px solid var(--gb-line);
}

.woocommerce .related.products > h2,
.woocommerce .up-sells > h2 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.025em;
  margin: 0 0 24px;
}

/* --- отзывы --- */

.woocommerce #reviews h2,
.woocommerce #reviews h3 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.02em;
  /* ⚠️ Интерлиньяж задан явно, и это исправление после перепроверки.
     Без него h2 забирал 1.08 из базового правила заголовков, а соседний h3
     («Palikite atsiliepimą») оставался на 1.5 от Blocksy - два заголовка
     подряд с разным ритмом строк. Особенно заметно на телефоне: в h2
     WooCommerce печатает название товара, и он там многострочный. */
  line-height: 1.3;
  margin: 0 0 14px;
}

.woocommerce #reviews .commentlist {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}

.woocommerce #reviews .commentlist li {
  border: 1px solid var(--gb-line);
  border-radius: var(--gb-r-blk);
  padding: 20px;
  margin: 0 0 12px;
}

.woocommerce #reviews .comment-text { margin: 0; }

.woocommerce #reviews .star-rating { color: var(--gb-gold); }

.woocommerce #review_form_wrapper {
  border: 1px solid var(--gb-line);
  border-radius: var(--gb-r-blk);
  padding: 24px;
}

.woocommerce #review_form .comment-form-rating .stars a { color: var(--gb-gold); }

.woocommerce #review_form textarea {
  width: 100%;
  min-height: 120px;
  border: 1px solid var(--gb-line);
  border-radius: var(--gb-r-in);
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
}

.woocommerce #review_form textarea:focus {
  border-color: var(--gb-brand);
  outline: 2px solid var(--gb-brand-lt);
}

.woocommerce #reviews .woocommerce-noreviews {
  color: var(--gb-ink-2);
  font-size: 15px;
}

/* --- галерея --- */

/* ⚠️ Главная картинка товара.
   Blocksy навязывает ей aspect-ratio 3/4 и object-fit: cover, то есть режет
   квадратное фото в портрет - товар выглядит «приближенным», у коробки
   срезаются края. Селекторы вида `div.images img` сюда не достают: галерею
   Blocksy собирает через .ct-media-container. Классы сняты из DOM.

   Держим квадрат и вписываем целиком: у товарных фото предмет обычно
   не занимает весь кадр, и кадрирование съедает как раз поля. */
.woocommerce div.product .woocommerce-product-gallery__image,
.woocommerce div.product .woocommerce-product-gallery .ct-media-container {
  aspect-ratio: 1 / 1;
  height: auto;
  background: transparent;
  border-radius: var(--gb-r-blk);
  overflow: hidden;
  display: grid;
  place-items: center;
}

/* ⚠️ !important здесь вынужденно и обосновано.
   Blocksy пишет картинке `aspect-ratio: 3/4` ИНЛАЙНОМ, прямо в атрибут
   style. Инлайн перебивает любой селектор, каким бы специфичным он ни был,
   поэтому обычными правилами это не снять - проверено, правило совпадало,
   но проигрывало.

   Из-за этого вертикальные снимки (коробка Warhammer, футболка) получали
   высоту 672px внутри квадратного контейнера 504px и обрезались снизу
   через overflow: hidden.

   Убираем навязанное соотношение и вписываем по меньшей стороне. */
.woocommerce div.product .woocommerce-product-gallery__image,
.woocommerce div.product .woocommerce-product-gallery .ct-media-container {
  position: relative;
}

/* Увеличение по наведению. Плагин WooCommerce дорисовывает внутрь рамки
   вторую картинку в натуральную величину и возит её за курсором; рамке нужен
   курсор-подсказка, а дорисованной картинке - слой выше основной, иначе она
   окажется под ней и эффекта не видно. Инициализация - в functions.php,
   раздел «СТРАНИЦА ТОВАРА». */
.woocommerce div.product .woocommerce-product-gallery .ct-media-container[data-gb-zoom] {
  cursor: zoom-in;
}

/* Область увеличения: прозрачный слой ровно по видимой части снимка.
   Размеры и положение считает скрипт (см. functions.php, «СТРАНИЦА ТОВАРА»),
   потому что они зависят от пропорций конкретной фотографии. Без этого слоя
   плагин считал бы точку увеличения от квадратной рамки, и у вертикального
   снимка увеличивалось бы не то место, на которое наведён курсор. */
.woocommerce div.product .woocommerce-product-gallery .gb-zoom-area {
  position: absolute;
  display: block;
  overflow: hidden;
  z-index: 2;
}

.woocommerce div.product .woocommerce-product-gallery .zoomImg {
  z-index: 2;
}

/* ===========================================================================
   СТРЕЛКИ ЛИСТАНИЯ ГАЛЕРЕИ

   Blocksy рисует их 40x40 со значком 16x10 внутри и почти незаметной тенью
   (замер: box-shadow с прозрачностью 0.03). Лукаш показал пример магазина
   с крупными стрелками, и он прав: 40px это меньше цели касания 44px,
   а бледная тень на светлом фото делает кнопку почти невидимой.

   ⚠️ Про увеличение под стрелкой - его гасить не понадобилось, оно гаснет
   само. Проверено замером: слой увеличения лежит НИЖЕ стрелок, поэтому
   наведение на стрелку выводит курсор из зоны увеличения, копия исчезает,
   а нажатие доходит до стрелки и переключает фото. Нужно было убедиться,
   что порядок наложения именно такой, - он такой.
   =========================================================================== */
.woocommerce div.product .flexy-arrow-prev,
.woocommerce div.product .flexy-arrow-next {
  width: 52px;
  height: 52px;
  background-color: var(--gb-w);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px 24px;
  box-shadow: 0 6px 20px rgba(11, 13, 12, .22);
}

/* ⚠️ Значок Blocksy прячем и рисуем свой фоном.

   Тема кладёт внутрь кнопки готовый SVG - стрелку с хвостом (16x10).
   Лукаш попросил простые уголки, как в примере, который он показал.
   Содержимое чужого SVG средствами CSS не заменить, поэтому его скрываем,
   а уголок рисуем фоном - тем же приёмом, что и значок лупы ниже.
   Фон в data-URI не требует отдельного запроса и не зависит от шрифта. */
.woocommerce div.product .flexy-arrow-prev svg,
.woocommerce div.product .flexy-arrow-next svg {
  display: none;
}

.woocommerce div.product .flexy-arrow-prev {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='24' viewBox='0 0 15 24' fill='none' stroke='%230B0D0C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 3 3 12l8 9'/%3E%3C/svg%3E");
}

.woocommerce div.product .flexy-arrow-next {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='24' viewBox='0 0 15 24' fill='none' stroke='%230B0D0C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 3l8 9-8 9'/%3E%3C/svg%3E");
}

/* На узкой карточке 52px съедали бы заметную долю фото, поэтому чуть меньше -
   но всё ещё выше цели касания 44px. */
@media (max-width: 620px) {
  .woocommerce div.product .flexy-arrow-prev,
  .woocommerce div.product .flexy-arrow-next {
    width: 48px;
    height: 48px;
    background-size: 13px 21px;
  }
}

/* ===========================================================================
   КНОПКА ПОЛНОЭКРАННОГО ПРОСМОТРА

   Blocksy печатает её как ссылку с эмодзи внутри:
   <a class="woocommerce-product-gallery__trigger">🔍</a>. Эмодзи рисуется
   шрифтом системы, поэтому на Windows, Android и macOS выглядит по-разному,
   а рядом с фирменной вёрсткой смотрится случайной. Заменяем на свой значок:
   текст гасим нулевым кеглем, лупу рисуем фоном.

   ⚠️ Значок именно фоном, а не псевдоэлементом с символом: любой символ
   снова зависел бы от шрифта. SVG внутри data-URI не зависит ни от чего
   и не требует отдельного запроса.
   =========================================================================== */
.woocommerce div.product .woocommerce-product-gallery__trigger {
  /* 44px - цель касания. У Blocksy было 40. */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--gb-w);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230B0D0C' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.5 16.5 21 21'/%3E%3Cpath d='M8 11h6M11 8v6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: 0 2px 10px rgba(11, 13, 12, .18);
  /* гасим эмодзи, оставленный темой */
  font-size: 0;
  line-height: 0;
  color: transparent;
  transition: transform .15s ease;
}

.woocommerce div.product .woocommerce-product-gallery__trigger:hover,
.woocommerce div.product .woocommerce-product-gallery__trigger:focus-visible {
  transform: scale(1.06);
  background-color: var(--gb-w);
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce div.product .woocommerce-product-gallery__trigger { transition: none; }
  .woocommerce div.product .woocommerce-product-gallery__trigger:hover { transform: none; }
}

/*
 * Картинка растянута абсолютом на всю рамку, вписывание делает object-fit.
 *
 * ⚠️ Почему не max-height: 100%: высота рамки задана через aspect-ratio,
 * то есть выводится из ширины. Процентная max-height к такой высоте
 * не разрешается и просто игнорируется - картинка оставалась 680px
 * в квадрате 504px и обрезалась снизу. С абсолютным позиционированием
 * и inset: 0 высота определена, и contain работает как задумано.
 */
/* ⚠️ :not(.zoomImg) обязателен. Плагин увеличения дорисовывает внутрь той же
   рамки вторую картинку в натуральную величину - без исключения правило
   вписывало и её тоже, width/height 100% с !important побеждали инлайновые
   размеры плагина, и увеличение получалось ровно однократным. Замер до
   исключения: рамка 556x556, увеличенная картинка 556x556, кратность 1.00. */
.woocommerce div.product .woocommerce-product-gallery__image img:not(.zoomImg),
.woocommerce div.product .woocommerce-product-gallery .ct-media-container img:not(.zoomImg) {
  position: absolute !important;
  inset: 0;
  aspect-ratio: auto !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  max-height: none;
  object-fit: contain;
  background: transparent;
  border-radius: 0;
}

.woocommerce div.product .flex-control-thumbs {
  display: flex;
  gap: 10px;
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.woocommerce div.product .flex-control-thumbs li {
  width: auto;
  margin: 0;
  float: none;
}

.woocommerce div.product .flex-control-thumbs img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  background: transparent;
  border: 1px solid var(--gb-line);
  border-radius: var(--gb-r-in);
  opacity: 1;
  cursor: pointer;
}

.woocommerce div.product .flex-control-thumbs img.flex-active,
.woocommerce div.product .flex-control-thumbs img:hover {
  border-color: var(--gb-brand);
}

/* --- вкладки товара --- */

.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--gb-r-pill);
  background: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--gb-line);
  border-radius: var(--gb-r-pill);
  font-size: 14px;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  background: var(--gb-brand);
  border-color: var(--gb-brand);
  color: #fff;
}

/* ⚠️ Тот же белый цвет, но с большей специфичностью - иначе он не доезжает.
   Правило выше проигрывает вот этому из темы Blocksy:
     .woocommerce div.product div.woocommerce-tabs ul.tabs li.active a
   У него на один селектор элемента больше (div.woocommerce-tabs против
   нашего .woocommerce-tabs), и грузится оно позже. В итоге фон применялся,
   а текст оставался тёмно-синим: замер на живой странице дал цвет
   rgb(26,44,94) на фоне rgb(34,58,122) - контраст 1.25, читать невозможно.
   Префикс :root добавляет вес, не меняя того, к чему правило цепляется.
   После правки замерено: белый на rgb(34,58,122), контраст 10.75.

   Строки :hover и :focus - страховка, а не лечение найденного: своего
   правила для наведения на активную вкладку у Blocksy сейчас нет, и потемнения
   под курсором я не наблюдал. Оставлены на случай, если оно появится
   с обновлением темы: цена - две строки, а цена ошибки - опять нечитаемая
   вкладка. */
:root .woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
:root .woocommerce div.product .woocommerce-tabs ul.tabs li.active a:hover,
:root .woocommerce div.product .woocommerce-tabs ul.tabs li.active a:focus {
  color: #fff;
}

/* --- таблица характеристик --- */
.woocommerce div.product .woocommerce-product-attributes th {
  font-weight: 600;
  color: var(--gb-ink-2);
  font-size: 14px;
}

.woocommerce div.product .woocommerce-product-attributes td { font-size: 14px; }

/* ===========================================================================
   7c. ГЛАВНАЯ СТРАНИЦА
   =========================================================================== */

.gb-home { padding-bottom: 20px; }

/* --- круги категорий --- */
.gb-cats {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  padding: 34px 0 4px;
}

/* ⚠️ ПРИЗНАК ПРОКРУТКИ. Лента кружков прокручивается, но полоса прокрутки
   у неё скрыта (.gb-noscroll), и на телефоне видно три кружка из восьми -
   замер дал 33% на 320px и 40% на 375px. Ничто не подсказывало, что лента
   продолжается.

   Затухание у правого края включает скрипт (functions.php) и только тогда,
   когда прокручивать действительно есть что; домотали до конца - затухание
   снимается. Признак, который врёт, хуже отсутствующего.

   Маской, а не наложенным градиентом: градиенту нужна обёртка с position,
   а обёртки в разметке нет ни на главной, ни на 404. Маска же применяется
   к самому элементу и не прокручивается вместе с содержимым. */
.gb-cats.is-scrollable {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 52px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 52px), transparent);
}

.gb-cats.is-scrollable.is-end {
  -webkit-mask-image: none;
  mask-image: none;
}

.gb-cat {
  flex: 0 0 auto;
  width: 106px;
  text-align: center;
  color: inherit;
  text-decoration: none;
}

.gb-cat i {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  margin: 0 auto 11px;
  border: 2px solid var(--gb-line);
  border-radius: 50%;
  background: var(--gb-w);
  transition: border-color .2s, background .2s;
}

/* ⚠️ ФОТО КАТЕГОРИИ вместо иконки.
   Владелец может загрузить картинку в штатное поле «Изображение» у категории,
   и она встаёт в кружок. Обрезаем в круг: пропорции у загруженного файла
   какие угодно, а кружок обязан остаться кружком.
   object-fit: cover, а не contain - иначе вокруг картинки останутся поля,
   и ряд перестанет быть ровным. */
.gb-cat i { overflow: hidden; }

.gb-cat i .gb-cat-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.gb-cat:hover i { border-color: var(--gb-brand); background: var(--gb-brand-lt); }
.gb-cat span { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.gb-cat:hover span { color: var(--gb-brand); }

/* Распродажа выделяется красным - как и в меню категорий */
.gb-cat--sale:hover i { border-color: var(--gb-sale); background: #FDF3F2; }
.gb-cat--sale:hover span { color: var(--gb-sale); }

/* --- hero --- */
.gb-hero {
  background: var(--gb-brand-lt);
  border-radius: var(--gb-r-blk);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.04fr 1fr;
  align-items: center;
  margin-top: 30px;
}

.gb-hero-t { padding: 52px 20px 52px 48px; min-width: 0; }
.gb-hero h1 { font-size: 44px; margin: 0 0 15px; }

.gb-hero-p {
  font-size: 16.5px;
  color: var(--gb-brand-tx);
  max-width: 44ch;
  margin: 0 0 28px;
}

.gb-hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }

.gb-hero-a { width: 100%; height: 100%; display: block; }

.gb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 26px;
  border-radius: var(--gb-r-pill);
  font-size: 15px;
  font-weight: 700;
  border: 2px solid var(--gb-brand);
  background: var(--gb-brand);
  color: #fff;
  text-decoration: none;
  transition: background .2s, border-color .2s;
}

.gb-btn:hover { background: var(--gb-brand-d); border-color: var(--gb-brand-d); color: #fff; }

/* Контурная кнопка на светлом фоне - вторая кнопка героя из макета
   (10-funside-v2.html:379, .btn--ghost).

   ⚠️ Одноимённое правило .gb-btn--ghost в разделе «КНОПКИ» выше сюда
   не годится: у него специфичность (0,1,0), ровно как у .gb-btn, но объявлено
   оно РАНЬШЕ - значит .gb-btn перекрывает и фон, и цвет, и кнопка получилась
   бы сплошной синей, неотличимой от первой. Здесь два класса подряд дают
   (0,2,0) и выигрывают по весу, а не по порядку.

   Свой :hover обязателен по той же причине: без него сработал бы .gb-btn:hover
   и залил бы контурную кнопку тёмно-синим, чего в макете нет. */
.gb-btn.gb-btn--ghost {
  background: transparent;
  color: var(--gb-brand);
}

.gb-btn.gb-btn--ghost:hover {
  background: var(--gb-w);
  border-color: var(--gb-brand);
  color: var(--gb-brand);
}

/* --- два баннера --- */
.gb-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

/* ⚠️ Если баннер остался один, он занимает всю ширину, а не половину
   с пустотой рядом. Так бывает по-настоящему: баннер купона показывается
   только когда товар-купон опубликован, и стоит владельцу снять его
   с публикации - половина ряда осталась бы пустой. Нашла враждебная
   перепроверка. */
.gb-duo article:only-child { grid-column: 1 / -1; }

/* Две колонки: текст слева, иллюстрация справа по центру вертикали.
   Раскладка обязательна вместе с картинкой - без неё SVG падает под текст
   и баннер становится вдвое выше, чем в макете (10-funside-v2.html:161). */
.gb-duo article {
  border-radius: var(--gb-r-blk);
  padding: 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
}

.gb-duo svg { width: 96px; height: 96px; flex: 0 0 auto; }

.gb-duo--sun { background: var(--gb-sun); }
.gb-duo--sky { background: var(--gb-sky-lt); }
.gb-duo h2 { font-size: 25px; margin: 0 0 8px; }
.gb-duo p { font-size: 14.5px; color: #4A4F4A; margin: 0 0 20px; }
.gb-duo--sky p { color: var(--gb-brand-tx); }
.gb-duo .gb-btn { border-color: var(--gb-ink); background: var(--gb-ink); }
.gb-duo .gb-btn:hover { background: var(--gb-brand); border-color: var(--gb-brand); }

/* --- турниры --- */
.gb-tour {
  background: var(--gb-brand);
  color: #fff;
  border-radius: var(--gb-r-blk);
  padding: 46px 40px;
}

/* Подложка секции тёмно-синяя, поэтому цвет заголовка задаём явно:
   без этого он наследует чернильный и сливается с фоном. */
.gb-tour h2 { font-size: 34px; margin: 0 0 10px; color: #fff; }
.gb-tour .gb-lead { color: #C9D4F2; max-width: 62ch; font-size: 15.5px; margin: 0; }

/* Кнопки на синей подложке: обычная синяя тут не читается */
.gb-tour-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }

.gb-btn--light {
  background: var(--gb-w);
  border-color: var(--gb-w);
  color: var(--gb-brand);
}

.gb-btn--light:hover {
  background: var(--gb-brand-lt);
  border-color: var(--gb-brand-lt);
  color: var(--gb-brand-d);
}

.gb-btn--ghost-light {
  background: transparent;
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
}

.gb-btn--ghost-light:hover {
  background: rgba(255, 255, 255, .12);
  border-color: #fff;
  color: #fff;
}

.gb-evs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 30px 0 0;
}

.gb-ev {
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: var(--gb-r-in);
  padding: 22px;
}

.gb-ev .gb-d { font-size: 13px; font-weight: 700; color: #9FD6F2; margin-bottom: 9px; }
.gb-ev b { display: block; font-size: 17px; font-weight: 700; margin-bottom: 7px; }
.gb-ev p { font-size: 14px; color: #C9D4F2; line-height: 1.5; margin: 0; }

/* --- отзывы --- */
.gb-revs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

.gb-rev {
  border: 1px solid var(--gb-line);
  border-radius: var(--gb-r-blk);
  padding: 28px;
}

.gb-stars { color: var(--gb-gold); margin-bottom: 15px; letter-spacing: 2px; }
.gb-rev p { font-size: 15.5px; line-height: 1.6; margin: 0 0 18px; }
.gb-rev b { font-size: 14.5px; }
.gb-rev span { font-size: 13px; color: var(--gb-ink-2); }

/* --- почему мы --- */
.gb-trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  margin-top: 58px;
  padding-top: 38px;
  border-top: 1px solid var(--gb-line);
}

.gb-trust i {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gb-brand-lt);
  color: var(--gb-brand);
  margin-bottom: 13px;
}

.gb-trust b { display: block; font-size: 15px; margin-bottom: 5px; }
.gb-trust span { font-size: 13.5px; color: var(--gb-ink-2); line-height: 1.5; }

@media (max-width: 1180px) {
  .gb-hero h1 { font-size: 38px; }
  .gb-hero-t { padding: 44px 18px 44px 36px; }
  .gb-cats { gap: 16px; }
}

@media (max-width: 980px) {
  .gb-hero { grid-template-columns: 1fr; }
  .gb-hero-t { padding: 38px 26px 30px; }
  .gb-hero-p { max-width: none; }
  .gb-tour h2 { font-size: 28px; }
  .gb-evs, .gb-revs { grid-template-columns: 1fr; }
  .gb-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gb-cats { justify-content: flex-start; }
}

@media (max-width: 760px) {
  .gb-duo { grid-template-columns: 1fr; }
  .gb-duo article { padding: 26px; }
  .gb-hero h1 { font-size: 30px; }
  .gb-hero-p { font-size: 15.5px; }
  .gb-tour { padding: 32px 22px; }
  .gb-tour h2 { font-size: 25px; }

  /* Иллюстрация героя прячется только на телефонах, а не на всём, что уже
     ниже 980px, как было раньше. Порог выбран замерами высоты героя,
     а не на глаз (доля первого экрана вместе с картинкой):
       320x700  - 0.95      360x640  - 1.05      375x812 - 0.84
       768x1024 - 0.81
     На 360px, самой ходовой ширине Android, герой с картинкой перерастает
     экран целиком - это ровно то, из-за чего её и скрыли. На планшете
     она стоит 0.81 экрана и вреда не делает, а в утверждённом макете
     (10-funside-v2.html:220) она видна на всех ширинах.
     Отсюда компромисс: телефоны без картинки, планшеты и шире - с ней. */
  .gb-hero-a { display: none; }
}

/* ⚠️ Второй порог - по ВЫСОТЕ, и он добавлен после перепроверки.
   Порога по ширине мало: телефон в альбомной ориентации даёт 812x375 или
   926x428, то есть ширину планшета при высоте меньше телефонной. Там герой
   с иллюстрацией занял бы больше двух экранов. Ширина сама по себе
   не говорит, сколько места по вертикали, поэтому спрашиваем про высоту. */
@media (max-height: 600px) {
  .gb-hero-a { display: none; }
}

@media (max-width: 440px) {
  .gb-trust { grid-template-columns: 1fr; }
  .gb-cat { width: 92px; }
  .gb-cat i { width: 76px; height: 76px; }
}

/* ===========================================================================
   7d. ЮРИДИЧЕСКИЕ СТРАНИЦЫ

   Тексты выводятся дословно из черновиков, поэтому это <pre>. Задача стилей -
   сделать его читаемым: обычный шрифт вместо моноширинного и перенос строк,
   иначе на телефоне появится горизонтальная прокрутка.
   =========================================================================== */

.gb-legal-text {
  font-family: var(--gb-font);
  font-size: 14.5px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  color: var(--gb-ink);
  max-width: 78ch;
}

@media (max-width: 760px) {
  .gb-legal-text { font-size: 13.5px; line-height: 1.65; }
}

/* ===========================================================================
   6c. КОРЗИНА И ЧЕКАУТ

   От Montonio зависит только блок выбора способа доставки - он появится
   после одобрения заявки. Всё остальное: раскладка, типографика, кнопки,
   поля - делается сейчас, потому что это вторая по посещаемости часть
   магазина после каталога.
   =========================================================================== */

/* Блоки корзины и оформления идут с классом alignwide и своей шириной
   1550px, то есть шире контейнера сайта (1320px). На широком экране
   таблица товаров уезжала левее шапки и заголовка, и страница выглядела
   съехавшей. Приводим к общей ширине. */
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content,
.woocommerce-account .entry-content {
  /*
   * Содержимое стояло от левого края, а шапка и футер по центру, отчего
   * страница выглядела съехавшей. Причина: .entry-content той же ширины
   * 1320px, но с margin-left: 0. Центрируем и добавляем те же поля, чтобы
   * товар встал в одну вертикаль с логотипом и колонками футера.
   */
  max-width: var(--gb-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gb-gut);
  padding-right: var(--gb-gut);
}

/* Блок корзины приходит с alignwide и своей шириной 1550px, то есть шире
   контейнера сайта. Ограничиваем родительским. */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart.alignwide,
.wp-block-woocommerce-checkout.alignwide {
  max-width: 100%;
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0;
  padding-right: 0;
}

/* Заголовок страницы выравниваем по тому же контейнеру, иначе он
   висит отдельно от содержимого.

   ⚠️ Поля здесь были и стали лишними. Пока колонка Blocksy считалась
   по 90vw, заголовок приходилось отбивать самим. После правки в разделе 20
   контейнер уже отбит, и эти поля складывались с ним: заголовок корзины
   стоял на 56px при содержимом на 28px. Оставлены только ограничение
   ширины и центрирование. */
.woocommerce-cart .entry-header,
.woocommerce-checkout .entry-header,
.woocommerce-account .entry-header {
  max-width: var(--gb-max);
  margin-left: auto;
  margin-right: auto;
}

/* Таблица корзины */
.woocommerce table.shop_table {
  border: 1px solid var(--gb-line);
  border-radius: var(--gb-r-blk);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

.woocommerce table.shop_table th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gb-ink-2);
  font-weight: 700;
  border-bottom: 1px solid var(--gb-line);
}

.woocommerce table.shop_table td { border-top: 1px solid var(--gb-line); }

.woocommerce table.shop_table img,
.wc-block-cart-item__image img {
  border-radius: var(--gb-r-in);
  background: var(--gb-field);
}

/* Итоги: выделены подложкой, как в макете выделены баннеры */
.woocommerce .cart_totals,
.wp-block-woocommerce-cart-order-summary-block {
  background: var(--gb-field);
  border-radius: var(--gb-r-blk);
  padding: 24px;
}

.woocommerce .cart_totals h2,
.wc-block-components-totals-item__label {
  font-size: 15px;
  font-weight: 800;
}

/* Итоговая сумма - самое крупное на странице после названия */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.woocommerce .order-total .amount {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

/* Кнопки чекаута - те же, что везде */
.woocommerce .checkout-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  min-height: 52px;
  border-radius: var(--gb-r-pill);
  background: var(--gb-brand);
  border: 2px solid var(--gb-brand);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

.woocommerce .checkout-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
  background: var(--gb-brand-d);
  border-color: var(--gb-brand-d);
}

/* Поля формы: те же скругления и высота, что у поиска */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.wc-block-components-text-input input,
.wc-block-components-select__container select {
  min-height: 48px;
  border: 1px solid var(--gb-line);
  border-radius: var(--gb-r-in);
  padding: 0 14px;
  font-size: 15px;
}

.woocommerce form .form-row input.input-text:focus,
.wc-block-components-text-input input:focus {
  border-color: var(--gb-brand);
  outline: 2px solid var(--gb-brand-lt);
}

/* Количество: цель нажатия не меньше 44px */
.wc-block-components-quantity-selector,
.woocommerce .quantity input.qty {
  border-radius: var(--gb-r-pill);
  min-height: 44px;
}

/*
 * ⚠️ ШИРИНА КОНТЕЙНЕРА - продолжение той же правки, и без неё она ломала
 * вёрстку. Кнопки «минус» и «плюс» ниже увеличены до 44px каждая, поле
 * ввода занимает 40px, итого содержимому нужно 128px плюс рамки. А ширину
 * контейнера задаёт WooCommerce, и она осталась прежней.
 *
 * Замер на 375px в корзине: контейнер 116..223 (107px), а кнопка «плюс»
 * 201..245 - то есть она вылезала за правую границу рамки на 22px и висела
 * снаружи. Заказчик это и заметил: «значок плюса выходит за границу».
 *
 * Лечение - разрешить контейнеру расти под содержимое. Именно min-width,
 * а не фиксированная ширина: если WooCommerce однажды изменит размер поля
 * ввода, ничего снова не разъедется.
 */
:root .wc-block-components-quantity-selector {
  width: auto;
  min-width: 132px;
  max-width: none;
}

/*
 * ⚠️ Префикс :root здесь обязателен, и это найдено замером на телефоне.
 *
 * Голый `.wc-block-components-quantity-selector__button` весит (0,1,0),
 * а WooCommerce задаёт ширину правилом
 * `.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button`
 * весом (0,2,0) - и выигрывает. Замер на 375px: кнопки «минус» и «плюс»
 * рисовались 30x42 вместо обещанных 44, то есть правило не работало вовсе,
 * хотя выглядело написанным.
 *
 * Цель нажатия меньше 44px на телефоне - это промахи; у «минуса» рядом
 * с «плюсом» промах меняет количество товара не в ту сторону.
 */
:root .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
  min-width: 44px;
  width: 44px;
  /* Высота тоже: после правки ширины замер дал 44x42 - двух пикселей
     не хватало, потому что 44px стояли только у контейнера. */
  min-height: 44px;
}

/*
 * Крестик удаления товара из корзины. WooCommerce рисует его 24x24 -
 * нижняя граница WCAG 2.5.8 и совсем мало для пальца, особенно рядом
 * с кнопками количества: промах по «минусу» меняет число, промах
 * по крестику удаляет товар целиком.
 *
 * Сам значок не трогаем, увеличиваем только область нажатия.
 */
:root .wc-block-cart-item__remove-link {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/*
 * ⚠️ Таблица корзины не помещалась в экран телефона.
 *
 * Замер на 375px: контейнер `.wc-block-components-main` шириной 335,
 * а таблица `.wc-block-cart-items` - 365, правый край уезжал на 385.
 * Из-за этого обрезалась плашка «Išsaugoti 5,20 €» - ровно то, что
 * покупателю в строке со скидкой интереснее всего.
 *
 * ⚠️ Горизонтальной прокрутки при этом НЕ появлялось, страница её гасит, -
 * поэтому обычная проверка «нет ли прокрутки» этот дефект не ловила.
 * Нашлось только замером правого края конкретных элементов.
 *
 * Причина обычная для <table>: она не сжимается по контейнеру, если
 * содержимому нужно больше места.
 */
:root .wc-block-cart-items,
:root .wc-block-cart-items__row {
  width: 100%;
  max-width: 100%;
}

/*
 * `table-layout: fixed` сам по себе задачу не решил, но оставлен: без него
 * таблица считает ширину по содержимому и не сжимается по контейнеру
 * (замер: контейнер 335, таблица 385).
 */
:root .wc-block-cart-items { table-layout: fixed; }

/*
 * ⚠️ ВОТ ЭТО и чинит корзину на телефоне.
 *
 * Строка корзины у WooCommerce - не таблица, а CSS-grid, и колонки заданы
 * жёсткими пикселями: замер на 375px дал `80px 132px 31px 94px`. В сумме
 * с отступами это 405 при доступных 355, поэтому последняя колонка -
 * цена товара и плашка «Išsaugoti 5,20 €» - уезжала за правый край экрана.
 *
 * ⚠️ Горизонтальной прокрутки при этом НЕ появлялось, её гасит страница,
 * так что обычная проверка «нет ли прокрутки» дефект пропускала. Нашлось
 * только замером правого края конкретных элементов на 375px.
 *
 * Цена в корзине - не украшение: покупатель на телефоне не видел, сколько
 * стоит то, что он собирается купить.
 *
 * Лечение: средняя колонка (название товара) становится гибкой и отдаёт
 * место остальным. Проверено замером: картинка остаётся 64px, как и была,
 * цена и плашка помещаются целиком - правый край 355 при экране 375.
 */

/*
 * Подпись способа доставки под строкой «Pristatymas» в итогах корзины.
 * WooCommerce рисует её 9.95px - мельче 11px, то есть ниже порога
 * читаемости, который держим на всей витрине. Замер на телефоне: это
 * был единственный такой элемент на странице.
 *
 * ⚠️ Селектор повторяет цепочку WooCommerce. Его правило
 * `.wc-block-components-totals-shipping .wc-block-components-totals-shipping__via`
 * весит (0,2,0) и задаёт 0.875em; короткое `:root .…__via` весит столько же,
 * а при равном весе решает порядок подключения - и bundle плагина грузится
 * позже нашей темы. Проверено: правило было в файле и не применялось.
 */
:root .wc-block-components-totals-shipping .wc-block-components-totals-shipping__via {
  font-size: 12px;
}

/*
 * ⚠️ Селектор длинный намеренно, и медиазапрос шире, чем кажется нужным.
 *
 * WooCommerce задаёт колонки правилом
 * `.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row`
 * весом (0,3,1). Короткое `:root .wc-block-cart-items__row` (0,2,0) ему
 * проигрывает - проверено: правило лежало в файле, грузилось браузером
 * и не применялось вовсе, колонки оставались прежними.
 *
 * Медиазапрос 699px, а не 480: у WooCommerce мобильная раскладка корзины
 * включается именно до 699px. Возьмись мы за 480 - на планшете в книжной
 * ориентации осталась бы прежняя, ломающаяся раскладка.
 */
@media (max-width: 699px) {
  :root .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row {
    grid-template-columns: 80px minmax(0, 1fr) auto;
  }
}

/* Сообщения WooCommerce приводим к палитре темы */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
  border-radius: var(--gb-r-blk);
  border-left-width: 3px;
  font-size: 14.5px;
}

.woocommerce-message,
.wc-block-components-notice-banner.is-success { border-left-color: var(--gb-ok); }

.woocommerce-info,
.wc-block-components-notice-banner.is-info { border-left-color: var(--gb-brand); }

.woocommerce-error,
.wc-block-components-notice-banner.is-error { border-left-color: var(--gb-sale); }

/* Блочная сетка товаров (пустая корзина, рекомендации) идёт со своим
   оформлением WooCommerce: синие ссылки-названия, обведённые бейджи,
   мелкие кнопки. Приводим к тем же правилам, что и карточки каталога,
   иначе одна и та же игра выглядит на двух страницах по-разному. */

/* Классы сняты из DOM: это старая разметка wc-block-grid, а не новая
   wc-block-product-template. Селекторы «по логике» здесь не работают. */

/* Ширину колонок считает сам WooCommerce (класс has-N-columns) -
   свой gap сюда добавлять нельзя, иначе ряд ломается на 3 карточки. */

/* Префикс .wc-block-grid поднимает вес селектора: без него правила
   WooCommerce перебивают наши по специфичности, а не по порядку. */
.wc-block-grid .wc-block-grid__product {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 0;
  border: 0;
}

/* Бейдж лежит внутри ссылки, а не внутри картинки, поэтому точкой отсчёта
   делаем ссылку - иначе он остаётся рамкой в правом верхнем углу. */
.wc-block-grid__product-link {
  position: relative;
  display: block;
  text-decoration: none;
}

/* Подложка под фото - та же, что в каталоге: серый квадрат с тенью
   под предметом. Без неё одна и та же игра выглядит на двух страницах
   по-разному, и блок читается как чужой. */
/* Без подложки и тени - как в каталоге, см. комментарий выше. */
.wc-block-grid__product-image {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  background: transparent;
  border-radius: var(--gb-r-blk);
  overflow: hidden;
  margin: 0 0 13px;
}

.wc-block-grid__product-image img {
  position: relative;
  z-index: 1;
  width: 88%;
  height: auto;
  margin: 0;
  transition: transform .25s ease;
}

.wc-block-grid__product:hover .wc-block-grid__product-image img {
  transform: translateY(-4px);
}

/* Название чёрное, как в каталоге. Через .wc-block-grid__product-link,
   потому что цвет ссылки перебивает правило на самом заголовке. */
/* ⚠️ Префикс :root обязателен, и это исправление после перепроверки.
   Без него селектор весит (0,2,0), а базовое правило заголовков -
   :root:root h1, :root:root h2 - весит (0,2,1) и выигрывает по третьей
   колонке. То есть «страховка» ниже не срабатывала бы вовсе: если
   WooCommerce печатает название товара заголовочным тегом, оно получило бы
   и трекинг, и вес 800, и интерлиньяж 1.08 - карточка в блочной сетке
   выглядела бы иначе, чем такая же карточка в каталоге. С префиксом
   выходит (0,3,0), и правило выигрывает. */
:root .wc-block-grid__product .wc-block-grid__product-title,
:root .wc-block-grid__product-link .wc-block-grid__product-title {
  color: var(--gb-ink);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.35;
  text-align: left;
  margin: 0 0 6px;
}

.wc-block-grid__product-link:hover .wc-block-grid__product-title {
  color: var(--gb-brand);
  text-decoration: underline;
}

.wc-block-grid .wc-block-grid__product .wc-block-grid__product-price {
  text-align: left;
  display: block;
  margin: 0 0 4px;
  font-size: 16px;
}

.wc-block-grid__product-price {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--gb-ink);
}

.wc-block-grid__product-price ins {
  text-decoration: none;
  color: var(--gb-sale);
  font-weight: 800;
}

.wc-block-grid__product-price del {
  font-size: 14px;
  font-weight: 500;
  color: var(--gb-ink-2);
  opacity: 1;
}

.wc-block-grid__product-image img {
  background: var(--gb-field);
  border-radius: var(--gb-r-blk);
}

/* Ярлык скидки - бейдж-пилюля в углу подложки, как в каталоге,
   а не обведённая рамка в правом верхнем углу карточки. */
.wc-block-grid .wc-block-grid__product .wc-block-grid__product-onsale {
  position: absolute;
  top: 12px;
  left: 12px;
  right: auto;
  z-index: 2;
  margin: 0;
  background: var(--gb-sale);
  border: 0;
  border-radius: var(--gb-r-pill);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  padding: 5px 11px;
  min-height: 0;
  min-width: 0;
  white-space: nowrap;
}

/* Кнопка во всю ширину и прижата к низу - тогда в ряду они на одной линии,
   как в каталоге. */
/* Кнопка прижата к низу, чтобы в ряду они были на одной линии независимо
   от того, заняло название одну строку или две. Специфичность поднята
   намеренно: у .wp-block-button своё правило margin-top, и оно перебивало -
   высота карточек совпадала, а кнопки стояли на разной высоте. */
.wc-block-grid .wc-block-grid__product .wc-block-grid__product-add-to-cart {
  margin-top: auto;
  padding-top: 12px;
  width: 100%;
}

/* Название фиксируем в две строки: тогда блок «картинка + название»
   одинаков у всех карточек, и цена начинается на одном уровне. */
.wc-block-grid .wc-block-grid__product .wc-block-grid__product-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}

.wc-block-grid__product-add-to-cart .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border-radius: var(--gb-r-pill);
  background: var(--gb-brand);
  border: 2px solid var(--gb-brand);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
  background: var(--gb-brand-d);
  border-color: var(--gb-brand-d);
}

/* ===========================================================================
   6d. ЛИЧНЫЙ КАБИНЕТ
   =========================================================================== */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--gb-line);
  border-radius: var(--gb-r-pill);
  font-size: 14px;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--gb-brand);
  border-color: var(--gb-brand);
  color: #fff;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  border-color: var(--gb-brand);
  color: var(--gb-brand);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a:hover { color: #fff; }

/* --- внутренние страницы кабинета ---
   Классы сняты со сгенерированной разметки шаблонов WooCommerce, а не
   угаданы: эти страницы видны только авторизованному, и подбирать селекторы
   на глаз здесь особенно легко промахнуться. */

/* Заказы */
.woocommerce-orders-table.shop_table {
  width: 100%;
  border: 1px solid var(--gb-line);
  border-radius: var(--gb-r-blk);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

.woocommerce-orders-table__header {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gb-ink-2);
  font-weight: 700;
  padding: 14px 16px;
  text-align: left;
}

.woocommerce-orders-table__cell {
  padding: 14px 16px;
  border-top: 1px solid var(--gb-line);
  font-size: 14.5px;
}

.woocommerce-orders-table__cell-order-number a { font-weight: 700; }

.woocommerce-orders-table__cell-order-actions .button {
  min-height: 40px;
  padding: 8px 16px;
  font-size: 13.5px;
}

/* Адреса */
.woocommerce-Addresses.col2-set {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.woocommerce-Addresses .col-1,
.woocommerce-Addresses .col-2 {
  width: auto;
  float: none;
  margin: 0;
}

.woocommerce-Address {
  border: 1px solid var(--gb-line);
  border-radius: var(--gb-r-blk);
  padding: 22px;
  height: 100%;
}

.woocommerce-Address-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.woocommerce-Address-title h2,
.woocommerce-Address-title .title h3 {
  font-size: 16px;
  font-weight: 800;
  margin: 0;
}

.woocommerce-Address-title .edit {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gb-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.woocommerce-Address address {
  font-style: normal;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--gb-ink-2);
}

/* Форма данных учётной записи */
.woocommerce-EditAccountForm {
  max-width: 640px;
  border: 1px solid var(--gb-line);
  border-radius: var(--gb-r-blk);
  padding: 26px;
}

.woocommerce-EditAccountForm fieldset {
  border: 0;
  border-top: 1px solid var(--gb-line);
  margin: 22px 0 0;
  padding: 22px 0 0;
}

.woocommerce-EditAccountForm legend {
  font-size: 15px;
  font-weight: 800;
  padding: 0;
}

.woocommerce-EditAccountForm .form-row-first,
.woocommerce-EditAccountForm .form-row-last {
  width: 100%;
  float: none;
}

@media (min-width: 700px) {
  .woocommerce-EditAccountForm .woocommerce-form-row--first,
  .woocommerce-EditAccountForm .woocommerce-form-row--last {
    display: inline-block;
    width: calc(50% - 8px);
    vertical-align: top;
  }

  .woocommerce-EditAccountForm .woocommerce-form-row--first { margin-right: 12px; }
}

@media (max-width: 760px) {
  .woocommerce-Addresses.col2-set { grid-template-columns: 1fr; }

  /* Таблица заказов на телефоне превращается в карточки - иначе она
     не помещается и уезжает горизонтальной прокруткой. */
  .woocommerce-orders-table.shop_table_responsive thead { display: none; }

  .woocommerce-orders-table.shop_table_responsive tr {
    display: block;
    border-top: 1px solid var(--gb-line);
    padding: 8px 0;
  }

  .woocommerce-orders-table.shop_table_responsive td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border: 0;
    padding: 6px 16px;
    text-align: right;
  }

  .woocommerce-orders-table.shop_table_responsive td::before {
    content: attr(data-title) ":";
    font-weight: 600;
    color: var(--gb-ink-2);
    text-align: left;
  }
}

/* Формы входа и регистрации.
   Селекторы намеренно без предка .woocommerce: на странице аккаунта этой
   обёртки нет, и общие правила кнопок сюда не доставали - кнопка входа
   оставалась синей блоксовской, 40px и почти без скругления. */
.woocommerce-form-login,
.woocommerce-form-register {
  max-width: 460px;
  margin: 0 auto;
  padding: 28px;
  border: 1px solid var(--gb-line);
  border-radius: var(--gb-r-blk);
}

.woocommerce-form-login__submit,
.woocommerce-form-register__submit,
.woocommerce-Button.button,
button.woocommerce-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  height: auto;
  padding: 12px 26px;
  border: 2px solid var(--gb-brand);
  border-radius: var(--gb-r-pill);
  background: var(--gb-brand);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.woocommerce-form-login__submit:hover,
.woocommerce-form-register__submit:hover,
.woocommerce-Button.button:hover,
button.woocommerce-button:hover {
  background: var(--gb-brand-d);
  border-color: var(--gb-brand-d);
  color: #fff;
}

.woocommerce-form-login label,
.woocommerce-form-register label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

.woocommerce-form-login input.input-text,
.woocommerce-form-register input.input-text {
  width: 100%;
}

.woocommerce-LostPassword a,
.woocommerce-privacy-policy-text a {
  color: var(--gb-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Две формы рядом на широком экране: вход и регистрация равнозначны,
   и прокручивать до второй незачем. */
@media (min-width: 900px) {
  .woocommerce-account .u-columns.col2-set {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
  }

  .woocommerce-account .u-columns.col2-set .col-1,
  .woocommerce-account .u-columns.col2-set .col-2 {
    width: auto;
    float: none;
    margin: 0;
  }

  .woocommerce-form-login,
  .woocommerce-form-register { max-width: none; }
}

/* ===========================================================================
   7e. СТРАНИЦА 404
   =========================================================================== */

.gb-404 { padding: 60px 0 20px; text-align: center; }

/* ⚠️ Цвет цифры «404» добавлен в палитру отдельным токеном, и это осознанно.
   Здесь стоял --gb-brand-lt (#EAEFFA) - на фоне страницы это контраст 1.11,
   то есть цифра почти исчезала: на ярком экране и на солнце её не видно
   вовсе. Замер на живой странице, не на глаз.
   --gb-brand-md - тот же фирменный синий, разбавленный белым. Контраст
   стал 3.36, то есть проходит требование для крупного текста (нужно 3.0),
   и при этом цифра осталась водяным знаком, а не вторым заголовком: смысл несёт
   заголовок «Tokio puslapio nėra» под ней, у него контраст 14.08. */
.gb-404-code {
  font-size: 68px;
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--gb-brand-md);
  margin: 0;
  line-height: 1;
}

.gb-404 h1 { font-size: 34px; margin: 6px 0 12px; }

.gb-404-t {
  font-size: 16px;
  color: var(--gb-ink-2);
  max-width: 52ch;
  margin: 0 auto 26px;
  line-height: 1.55;
}

.gb-404-s {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.gb-404-s input[type="search"] {
  width: min(420px, 100%);
  height: 48px;
  border: 0;
  background: var(--gb-field);
  border-radius: var(--gb-r-pill);
  padding: 0 22px;
  font: inherit;
  font-size: 15px;
  color: var(--gb-ink);
}

/* Круги категорий на 404 центрируем: их меньше, чем на главной,
   и прижатые влево они выглядят обрезанными. */
.gb-404 .gb-cats { justify-content: center; }

@media (max-width: 760px) {
  .gb-404 { padding-top: 40px; }
  .gb-404-code { font-size: 54px; }
  .gb-404 h1 { font-size: 26px; }
  .gb-404 .gb-cats { justify-content: flex-start; }
}

/* ===========================================================================
   8. ФУТЕР

   Реквизиты и телефон обязаны быть на каждой странице.
   Стандартный футер Blocksy прячем - иначе их будет два.
   =========================================================================== */

.ct-footer { display: none !important; }

.gb-wrap {
  max-width: var(--gb-max);
  margin: 0 auto;
  padding: 0 var(--gb-gut);
}

.gb-ft {
  border-top: 1px solid var(--gb-line);
  margin-top: 58px;
  padding: 46px 0 28px;
  font-size: 14px;
  background: var(--gb-w);
}

.gb-ft-c {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 34px;
}

.gb-ft h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--gb-ink-2);
  margin: 0 0 15px;
  font-weight: 700;
}

.gb-ft ul { list-style: none; margin: 0; padding: 0; }
.gb-ft li { margin-bottom: 2px; }

.gb-ft li a {
  display: inline-block;
  padding: 6px 0;
  color: inherit;
  text-decoration: none;
}

.gb-ft li a:hover { color: var(--gb-brand); text-decoration: underline; }

.gb-req { color: var(--gb-ink-2); line-height: 1.8; margin: 0; }
.gb-req b { color: var(--gb-ink); }
.gb-req a { color: inherit; text-decoration: none; }
.gb-req a:hover { color: var(--gb-brand); text-decoration: underline; }

/* Подсветка незаполненного телефона (.gb-ph) удалена: телефон получен
   от заказчика и подставлен в футер и во все юридические тексты, правило
   больше ни к чему не применялось. */

/* ===========================================================================
   УСЛОВИЯ ДОСТАВКИ В КОРЗИНЕ И НА КАССЕ

   Блок печатает PHP перед содержимым блочной страницы, живое число обновляет
   подписка на хранилище блоков. Разметка и объяснение - в functions.php.
   =========================================================================== */

.gb-freeship {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0 0 24px;
  padding: 14px 18px;
  border: 1px solid var(--gb-line);
  border-radius: 12px;
  background: var(--gb-brand-lt);
  color: var(--gb-brand-tx);
  font-size: 15px;
}

.gb-freeship-txt { margin: 0; }
.gb-freeship-txt b { font-weight: 800; }

.gb-freeship-bar {
  display: block;
  height: 6px;
  border-radius: 99px;
  background: rgba(34, 58, 122, .16);
  overflow: hidden;
}

.gb-freeship-bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--gb-brand);
  transition: width .25s ease;
}

/* Порог взят - меняем и цвет, а не только текст: цветом это читается
   с одного взгляда, текстом надо вчитываться. */
.gb-freeship.is-reached {
  background: #EAF6EC;
  border-color: #BEE0C4;
  color: #1E5B2A;
}

.gb-freeship.is-reached .gb-freeship-bar { background: rgba(30, 91, 42, .16); }
.gb-freeship.is-reached .gb-freeship-bar i { background: #2E7D3A; }

@media (prefers-reduced-motion: reduce) {
  .gb-freeship-bar i { transition: none; }
}

/* Нижняя строка футера. ⚠️ Раньше это был flex-ряд «копирайт слева,
   способы оплаты справа». Заказчик попросил поднять способы оплаты НАД
   копирайтом (22.08.2026), и это заодно чинит поведение на телефоне:
   в прежнем ряду при переносе плашки прилипали к юридической строке
   и читались как её продолжение. Теперь это две отдельные строки. */
.gb-ft-b {
  border-top: 1px solid var(--gb-line);
  margin-top: 30px;
  padding-top: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: var(--gb-ink-2);
  font-size: 13px;
  text-align: center;
}

.gb-copy { display: block; }

.gb-pays {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Плашка одна на все значки: у Visa внутренняя пропорция 780x500,
   у Apple Pay 24x24 - без общей рамки они выстроились бы разного размера
   и ряд поехал бы. Рамка фиксирована, значок вписывается внутрь. */
.gb-pays li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 30px;
  margin: 0;
  padding: 0 6px;
  border: 1px solid var(--gb-line);
  border-radius: 7px;
  background: var(--gb-w);
}

/* ⚠️ Высота задана числом, ширина - auto. Пара `width:auto; height:auto`
   для SVG без собственных width/height ненадёжна: браузер переходит
   на запасной алгоритм размера и может отдать нули - именно это и вышло
   в первой версии, плашки стояли пустыми. Фиксируем высоту, ширину
   считает пропорция из viewBox. */
.gb-pays img {
  display: block;
  width: auto;
  height: 18px;
  max-width: 100%;
  /* contain, а не заливка: логотип нельзя ни растягивать, ни обрезать -
     это прямое требование правил использования знаков. */
  object-fit: contain;
}

/* ⚠️ Правила текстовой плашки (.gb-pays-txt, .gb-pays-long, .gb-pays-short)
   удалены: банковские ссылки теперь обозначены значком, как и остальные
   способы оплаты. Мёртвый CSS вреден - следующий читатель считает его
   рабочим. */

/* На телефоне плашки ужимаются: замер на 375px показал, что восемь подписей
   в обычном виде занимают 681px и ложатся в ТРИ строки при доступных 335px.
   С уменьшенным кеглем и отступами - в две.

   ⚠️ В одну строку восемь способов помещаются только значками: даже по 42px
   на каждый - это меньше, чем нужно слову «Mastercard» (98px). Значки здесь
   поставить нельзя, пока нет официальных файлов от платёжных систем
   (объяснение - в parts/footer.php). Когда Montonio выдаст свой набор,
   строка станет одной. */
@media (max-width: 620px) {
  .gb-pays { gap: 6px; }

  .gb-pays li { width: 42px; height: 28px; }
  .gb-pays img { height: 16px; }
}

/* ⚠️ Порог 359px, а не 340px, и это следствие замера.

   Сначала здесь стояло 340. Ряд из четырёх значков по 42px и плашки банков
   требует 303px, а доступная ширина - экран минус два поля по 20px. На 341px
   это 301px: не хватало ровно двух пикселей, и ряд ломался на две строки.
   Полоса 341-359px оказалась дырой между порогами - ровно тот случай,
   который видно только замером по шагам, а не на трёх «типовых» ширинах.

   Ужимаем ещё на шаг. Замер после: 271px занято из 288 доступных на 320px. */
@media (max-width: 359px) {
  .gb-pays { gap: 5px; }

  /* ⚠️ Кегль подписи 11px, а НЕ меньше. Первая версия ставила 10px, чтобы
     ряд влез, и замер тут же поймал нарушение правила проекта «ничего
     мельче 11px». Место отыграно у значков: 36px вместо 38px. */
  .gb-pays li { width: 36px; height: 26px; }
  .gb-pays img { height: 14px; }
}

@media (max-width: 980px) { .gb-ft-c { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .gb-ft-c { grid-template-columns: 1fr; } }

/* ===========================================================================
   19. ФОРМА ОБРАТНОЙ СВЯЗИ И ПОДАРОЧНЫЙ КУПОН

   Обе вещи появились там, где раньше стояли кнопки-обещания: «Parašyti mums»
   вела на mailto: без ящика, «Pirkti kuponą» - в общий каталог без товара.
   =========================================================================== */

.gb-contact {
  margin: 46px 0 0;
  padding: 32px;
  background: var(--gb-field);
  border-radius: var(--gb-r-blk);
  /* ⚠️ Карточка стоит ВНУТРИ колонки, поэтому её собственное поле 32px
     складывается с полем колонки 28px - это так и задумано: панель видна
     как панель. Левый край САМОЙ панели при этом совпадает с шапкой. */
}

.gb-contact h2 { font-size: 28px; margin: 0 0 10px; }

.gb-contact-lead {
  margin: 0 0 22px;
  color: var(--gb-ink-2);
  max-width: 62ch;
}

.gb-contact-form { max-width: 620px; }

.gb-field { margin: 0 0 16px; }

.gb-field label {
  display: block;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 6px;
}

.gb-field .gb-opt { font-weight: 400; color: var(--gb-ink-2); }

/* ⚠️ `:root:root` обязателен. Без него правило Blocksy для
   `input[type="text"]` перебивало наше по специфичности: текстовое поле
   выходило белым, а однострочные - прозрачными, и в одной форме соседние
   поля выглядели по-разному. Это правило проекта номер пять: не гоняться
   за селекторами Blocksy, а поднимать вес. */
:root:root .gb-field input,
:root:root .gb-field textarea {
  width: 100%;
  border: 1px solid var(--gb-line);
  border-radius: var(--gb-r-in);
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  background: var(--gb-w);
  /* ⚠️ Высота 48px, как у кнопок. Замер до правки: поля выходили 40px,
     а в проекте принят порог 44px для целей касания - на телефоне
     в сорокапиксельное поле промахиваются. */
  min-height: 48px;
  /* ⚠️ 16px на телефоне обязателен: Safari на iOS приближает страницу
     при фокусе в поле с кеглем меньше 16px, и вернуть масштаб покупатель
     уже не может. Здесь 15px, поэтому ниже стоит медиазапрос. */
}

.gb-field textarea { min-height: 150px; resize: vertical; }

:root:root .gb-field input:focus,
:root:root .gb-field textarea:focus {
  border-color: var(--gb-brand);
  outline: 2px solid var(--gb-brand-lt);
  outline-offset: 0;
}

/* ⚠️ Порог 900, а не 760. Safari приближает страницу при фокусе в поле
   с кеглем меньше 16px, и планшет в портрете (768px) под прежний
   медиазапрос не попадал. Возвращать масштаб покупателю потом нечем. */
@media (max-width: 900px) {
  .gb-contact { padding: 22px 18px; }
  :root:root .gb-field input,
  :root:root .gb-field textarea { font-size: 16px; }
}

/* Ловушка для роботов. Не display:none - часть рассыльщиков это видит
   и поле пропускает; убираем из потока и из порядка обхода. */
.gb-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.gb-contact-note {
  font-size: 14px;
  color: var(--gb-ink-2);
  margin: 0 0 18px;
}

.gb-contact-note a { text-decoration: underline; }

.gb-contact-ok,
.gb-contact-err {
  border-radius: var(--gb-r-in);
  padding: 14px 16px;
  margin: 0 0 18px;
  font-weight: 700;
}

.gb-contact-ok {
  background: #E4F1EA;
  color: var(--gb-ok);
  border-left: 4px solid var(--gb-ok);
}

.gb-contact-err {
  background: #FBE9E7;
  color: #8C1F14;
  border-left: 4px solid var(--gb-sale);
}

.gb-contact-err ul { margin: 6px 0 0; padding-left: 18px; list-style: disc; }
.gb-contact-err li { font-weight: 400; }

/* --- условия купона на странице товара --- */

.gb-gift-terms {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  font-size: 15px;
  color: var(--gb-ink-2);
}

.gb-gift-terms li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 7px;
}

.gb-gift-terms li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 8px;
  width: 9px;
  height: 9px;
  background: var(--gb-brand);
  border-radius: 2px;
}

/* --- коды купонов: страница «спасибо», кабинет --- */

.gb-gift-codes {
  margin: 26px 0;
  padding: 22px 24px;
  border: 2px solid var(--gb-brand);
  border-radius: var(--gb-r-blk);
  background: var(--gb-brand-lt);
}

.gb-gift-codes h2 { font-size: 20px; margin: 0 0 10px; }

/* ===========================================================================
   20. КОЛОНКА КОНТЕНТА СОВПАДАЕТ С ШАПКОЙ

   ⚠️ Замер до правки, ширина 1280: логотип в шапке начинается от 28px,
   сетка каталога - от 64px, заголовок корзины - от 92px. Три разных левых
   края на одной странице; глазом это читается как «съехавшая» вёрстка.

   Причина не в наших стилях. Blocksy считает свою колонку так:
       --theme-container-edge-spacing: 90vw
       --theme-container-width:        min(100%, calc(90vw - 0px * 2))
       --theme-normal-container-max-width: 1290px
   то есть 90% ширины окна с потолком 1290. Наша обёртка `.gb-wrap` -
   это max-width 1320 и поля по 28. Ширины разные, значит и края разные.

   ⚠️ Правим ПЕРЕМЕННЫЕ Blocksy, а не её селекторы. Это правило проекта
   (MASTER-PROMPT, «CSS Blocksy выигрывает специфичностью и порядком»):
   её динамический CSS подключается ПОСЛЕ нашего, и гоняться за селекторами
   бессмысленно. Переменные при этом достаются всем её контейнерам разом -
   каталогу, товару, корзине, кассе, кабинету, юридическим страницам.

   ⚠️ Именно `100%`, а не `100vw`. `100vw` включает ширину полосы прокрутки,
   а `.gb-wrap` считается от ширины содержимого. На Windows, где полоса
   занимает место, края разъехались бы снова - примерно на семь пикселей.
   =========================================================================== */

:root:root {
  /*
   * ⚠️ Ширина 100% и ПОЛЯ, а не «ширина минус поля». Разница видна только
   * на вложенных блоках, и она принципиальна.
   *
   * Первая попытка задавала `--theme-container-edge-spacing: calc(100% - 56px)`.
   * Столбец вставал верно, но Blocksy тем же значением считает и вложенные
   * `.is-width-constrained` - заголовок страницы поиска и корзины. Внутри
   * уже суженного контейнера они сужались ВТОРОЙ раз, и заголовок уезжал
   * на 28px правее содержимого. Замер поймал это на `/?s=...`,
   * `/krepselis/` и `/mano-paskyra/`.
   *
   * При ширине 100% вложенный блок просто занимает родителя, а отступ
   * от края даёт один-единственный внешний контейнер - ровно так же, как
   * у нашей `.gb-wrap`.
   */
  --theme-container-width: 100%;
  --theme-normal-container-max-width: var(--gb-max);
  --theme-narrow-container-max-width: var(--gb-max);
}

/* Отбиваем ВНЕШНИЕ обёртки Blocksy теми же полями, что и `.gb-wrap`.
   Их три вида, и на разных страницах внешней оказывается разная:
     .ct-container          - каталог, категория, поиск;
     .ct-container-narrow   - заголовок каталога;
     .hero-section.is-width-constrained - заголовок корзины, кабинета
                              и юридических страниц (там снаружи
                              .ct-container-full во всю ширину). */
:root:root .ct-container,
:root:root .ct-container-narrow,
:root:root .is-width-constrained {
  padding-left: var(--gb-gut);
  padding-right: var(--gb-gut);
}

/* ⚠️ А вот ВЛОЖЕННЫЕ отбивать второй раз нельзя. На странице поиска
   заголовок лежит внутри `.ct-container`, и с полями у обоих он уезжал
   на 56px при содержимом на 28px. Замер поймал это на `/?s=...`. */
:root:root .ct-container .is-width-constrained,
:root:root .ct-container .ct-container-narrow,
:root:root .ct-container-narrow .is-width-constrained,
:root:root .is-width-constrained .is-width-constrained,
:root:root .is-width-constrained .ct-container,
:root:root .is-width-constrained .ct-container-narrow {
  padding-left: 0;
  padding-right: 0;
}

/* ⚠️ Содержимое обычных страниц лежит НЕ в контейнере, а прямо в
   `.ct-container-full` во всю ширину. Замер: на `/kontaktai/` и на юридических
   страницах заголовок стоял на 28px, а текст под ним - от нуля, от самого
   края экрана. Снимок это показал сразу, а проверка раскладки пропустила:
   она мерила первый заголовок, а не первый абзац. Тест исправлен вместе
   с этим правилом. */
:root:root .ct-container-full .entry-content {
  max-width: var(--gb-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gb-gut);
  padding-right: var(--gb-gut);
}

:root:root .ct-container .entry-content,
:root:root .ct-container-narrow .entry-content,
:root:root .is-width-constrained .entry-content {
  padding-left: 0;
  padding-right: 0;
}

/* ⚠️ Блочная сетка товаров WooCommerce приходит с `margin: 0 -8px` -
   это компенсация полей у карточек, которых у нас нет. В итоге сетка
   «рекомендуем» в пустой корзине вылезала на 8px левее колонки: замер
   на 1280 дал левый край 20 при колонке от 28, и так на всех ширинах.
   Поймано проверкой раскладки после того, как её научили смотреть края
   всего содержимого, а не только первого заголовка. */
:root:root .wc-block-grid__products {
  margin-left: 0;
  margin-right: 0;
}

/* ---------------------------------------------------------------------------
   Активная вкладка на странице товара.

   ⚠️ Замер: серый текст rgb(101,103,102) на полупрозрачной плашке
   rgba(34,58,122,.37) поверх светлого фона даёт контраст 1.89 при норме 4.5.
   Подпись активной вкладки читалась хуже неактивной - у той 18.82.
   Так выглядит вкладка по умолчанию у Blocksy; на витрине это видно
   на КАЖДОЙ странице товара.

   Красим в фирменный синий с белым текстом - тот же приём, что у кнопок,
   контраст 10.73. Неактивные не трогаем, они и так читаются.
   --------------------------------------------------------------------------- */

:root:root .woocommerce-tabs ul.tabs li.active > a,
:root:root .woocommerce-tabs ul.tabs li.active > a:hover {
  background: var(--gb-brand);
  color: #fff;
  border-color: var(--gb-brand);
}

/* ---------------------------------------------------------------------------
   21. РЕЖИМ ВИТРИНЫ: МАГАЗИН НЕ ПРИНИМАЕТ ЗАКАЗЫ

   Логика в parts/shop-mode.php. Здесь только вид плашки и снятие кнопки
   перехода к оплате внутри блочной корзины.

   ⚠️ Кнопку печатает сам блок WooCommerce, вынуть её фильтром нельзя -
   поэтому она снимается стилем. Это ОФОРМЛЕНИЕ, а не защита: заказ
   закрыт на сервере в трёх местах (классическая касса, Store API,
   страница оплаты заказа), и спрятанная кнопка ни на что не влияет.

   ⚠️ Имя класса снято с живой корзины, а не выведено из логики:
   wp-block-woocommerce-proceed-to-checkout-block. Блок экспресс-оплаты
   гасим тем же правилом - у Montonio таких кнопок нет, но чужой плагин
   мог бы их добавить.
   --------------------------------------------------------------------------- */

body.gb-shop-closed .wp-block-woocommerce-proceed-to-checkout-block,
body.gb-shop-closed .wp-block-woocommerce-cart-express-payment-block,
body.gb-shop-closed .wc-block-cart__submit,
body.gb-shop-closed .wc-block-cart__submit-container {
  display: none !important;
}

/* ⚠️ Мини-корзина в шапке - отдельная разметка (виджет WooCommerce, а не блок),
   и кнопка «Apmokėjimas» в ней остаётся после снятия блочной. Найдено осмотром
   живой панели, а не по коду: в свёрнутом виде обе кнопки имеют нулевой размер
   и в замер «видимых ссылок» не попадают. Кнопку «Peržiūrėti krepšelį» рядом
   оставляем - корзина работает. */
body.gb-shop-closed .woocommerce-mini-cart__buttons .checkout {
  display: none !important;
}

/* Плашка «заказов пока не принимаем».

   Подложка светло-синяя, а не красная: красный на витрине означает скидку
   и ошибку, а здесь ничего не сломалось - магазин готовится. Полоса слева
   даёт заметность без крика. Замер контраста: заголовок 16.92, текст 8.98
   при норме 4.5. */
.gb-closed {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--gb-brand-lt);
  border-left: 4px solid var(--gb-brand);
  border-radius: var(--gb-r-in);
  padding: 22px 24px;
  margin: 0 0 24px;
}

.gb-closed > svg { flex: 0 0 auto; margin-top: 1px; color: var(--gb-brand); }

.gb-closed b {
  display: block;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.015em;
  margin-bottom: 6px;
  color: var(--gb-ink);
}

.gb-closed p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--gb-brand-tx);
  max-width: 62ch;
}

.gb-closed-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* Кнопка меньшего размера - плашка не должна выглядеть тяжелее содержимого
   страницы. Мельче делаем только кегль и отступы, а высота остаётся 44px:
   это порог цели касания, ниже него на телефоне промахиваются.
   ⚠️ Здесь стояло пояснение про 42px и «осознанное отступление по высоте» -
   оно от прежней версии правила и противоречило коду (в нём 44px), да ещё
   и утверждало, что 42 больше 44. Убрано, чтобы никто не «привёл код
   в соответствие» с неверным описанием. */
.gb-closed .gb-btn--sm { min-height: 44px; padding: 10px 20px; font-size: 14px; }

/* Мини-корзина: текст короче, потому что панель узкая - полная фраза
   ломает её высоту. */
.gb-mini-closed {
  background: var(--gb-brand-lt);
  border-radius: var(--gb-r-in);
  padding: 10px 12px;
  margin: 4px 0 12px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--gb-brand-tx);
}

@media (max-width: 560px) {
  .gb-closed { padding: 18px 18px; gap: 12px; }
  .gb-closed b { font-size: 16px; }
}

/* ---------------------------------------------------------------------------
   22. ТУРНИРЫ: СЧЁТЧИК МЕСТ, ПУСТОЕ СОСТОЯНИЕ, СТРАНИЦА СОБЫТИЯ

   Сам блок .gb-tour / .gb-evs / .gb-ev уже был в файле - его намеренно
   оставили при удалении секции 17.08.2026, чтобы её можно было вернуть.
   Здесь только то, чего в нём не было: счётчик мест, пустое состояние
   и страница отдельного события с формой.

   ⚠️ Счётчик всегда читается как «Liko N vietos» слева и «X iš Y» справа.
   Формулировки «Užsiregistravo N» нет намеренно: человеку важно, сколько
   мест осталось ЕМУ, а не сколько уже занято.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   СЕТКА СОБЫТИЙ ПО ИХ ЧИСЛУ

   🔴 Выше стоит жёсткое `repeat(3, ...)` - оно осталось со времён, когда даты
   событий были вписаны в код и их всегда было ровно три. Теперь события
   заводит владелец, и их бывает одно. Замер 29.08.2026 при одном событии:
   карточка 369px из 1224px, то есть 68% блока - пустая тёмно-синяя плашка.

   ⚠️ Одна карточка НЕ растягивается во всю ширину: строка описания длиной
   в экран читается плохо, и карточка перестаёт выглядеть карточкой. Она
   встаёт по центру в разумной ширине - так видно, что это решение, а не
   что справа что-то не загрузилось.

   ⚠️ Класс ставит PHP (parts/events.php), а не `auto-fit`: число событий
   там известно точно, а `auto-fit` считает по свободному месту и на одной
   карточке дал бы ровно ту растяжку, которой мы избегаем.
   --------------------------------------------------------------------------- */
/*
 * 🔴 ТОЛЬКО НА ШИРОКОМ ЭКРАНЕ, И ЭТО НЕ ФОРМАЛЬНОСТЬ.
 *
 * Правило `@media (max-width: 980px) { .gb-evs { grid-template-columns: 1fr } }`
 * стоит выше, но у него специфичность 0,1,0, а у `.gb-evs.gb-evs--2` -
 * 0,2,0. Медиазапрос специфичности НЕ добавляет, поэтому класс по числу
 * карточек перебивал телефонную раскладку. Замер 29.08.2026 на 375px
 * при двух турнирах: колонки 136,5px + 136,5px, карточка 137px шириной
 * и 638px высотой - дата, описание и кнопка втиснуты в 90px. Найдено
 * пятой волной враждебной перепроверки.
 *
 * `min-width: 981px` возвращает телефону общее правило «одна колонка».
 */
@media (min-width: 981px) {
  .gb-evs.gb-evs--1 { grid-template-columns: minmax(0, 560px); justify-content: center; }
  .gb-evs.gb-evs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------------
   ТО ЖЕ САМОЕ ДЛЯ ОТЗЫВОВ

   🔴 У отзывов была ровно та же жёсткая тройка, и по той же причине:
   выдуманных отзывов всегда было три. Настоящие пишут покупатели, и первый
   приходит один. Замер 29.08.2026 при одном отзыве: карточка 392px из
   1224px, справа 832px пустоты - главная выглядела сломанной ровно в тот
   день, когда магазин получил первый настоящий отзыв.

   ⚠️ Первый отзыв - хорошая новость, и выглядеть она должна как новость,
   а не как незагрузившийся блок.
   --------------------------------------------------------------------------- */
@media (min-width: 981px) {
  .gb-revs.gb-revs--1 { grid-template-columns: minmax(0, 560px); justify-content: center; }
  .gb-revs.gb-revs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- счётчик мест внутри синей карточки события --- */
.gb-ev { display: flex; flex-direction: column; }
.gb-ev p { margin: 0 0 16px; }

.gb-seats { margin-top: auto; }

/* Правило кнопки карточки живёт ниже, у ряда «кнопка события» - там же,
   где задана её ширина. Дублировать его здесь нельзя: специфичность
   совпадает, и побеждает то, что идёт позже по файлу. */

.gb-seats-t {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 7px;
}

.gb-seats-t em { font-style: normal; }
.gb-seats-t span { color: #9FD6F2; font-weight: 600; white-space: nowrap; }

.gb-seats-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .20);
  overflow: hidden;
}

.gb-seats-bar i { display: block; height: 100%; background: #7FC6EC; border-radius: 999px; }

/* Мало мест - жёлтая. Красная тут неуместна: ничего не сломалось,
   просто места заканчиваются. Контраст жёлтой к синей подложке 5.9. */
.gb-seats-bar.is-low i { background: #FFD166; }
.gb-seats-bar.is-full i { background: rgba(255, 255, 255, .45); }

.gb-seats-min { font-size: 12.5px; color: #9FD6F2; margin-top: 8px; line-height: 1.4; }

/* 🔴 КНОПКА ВСЕГДА ПРИЖАТА К НИЗУ КАРТОЧКИ.
   Низ карточки держал блок счётчика (`.gb-seats { margin-top: auto }`),
   но у события без ограничения мест и без минимума этого блока нет вовсе -
   и кнопка вставала сразу под описанием. Замер 29.08.2026: в одном ряду
   кнопка такого события оказалась на 126px выше соседних.

   ⚠️ Когда счётчик есть, низ прижимает по-прежнему он, а кнопка идёт под ним
   обычным отступом: `margin-top: auto` у обоих поделил бы свободное место
   пополам, и счётчик уехал бы в середину карточки.

   ⚠️ Оба правила стоят ЗДЕСЬ, а не выше по файлу, где описан счётчик.
   Специфичность у `.gb-ev .gb-btn` и `.gb-ev > .gb-btn` одинаковая (0,2,0),
   и при равном весе побеждает то правило, которое идёт позже. Попытка
   задать отступ раньше по файлу молча ничего не меняла - проверено. */
.gb-ev .gb-btn { margin-top: auto; width: 100%; }
.gb-ev .gb-seats + .gb-btn { margin-top: 14px; }

/* --- пустое состояние: событий пока нет --- */
.gb-ev-empty {
  margin-top: 26px;
  border: 1px dashed rgba(255, 255, 255, .34);
  border-radius: var(--gb-r-in);
  padding: 30px 26px;
  display: flex;
  gap: 18px;
  align-items: center;
}

.gb-ev-empty svg { flex: 0 0 auto; color: #9FD6F2; }
.gb-ev-empty b { display: block; font-size: 18px; font-weight: 700; margin-bottom: 5px; }
.gb-ev-empty p { margin: 0; font-size: 14.5px; color: #C9D4F2; max-width: 60ch; }

/* --- страница события --- */
.gb-ev-page {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 34px;
  align-items: start;
  padding: 40px 0 10px;
}

.gb-ev-head h1 { font-size: 34px; margin: 0 0 12px; }

.gb-ev-meta {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  font-size: 14.5px;
  color: var(--gb-ink-2);
  margin-bottom: 22px;
}

.gb-ev-meta div { display: flex; gap: 8px; align-items: center; }
.gb-ev-meta svg { color: var(--gb-brand); flex: 0 0 auto; }

.gb-ev-photo { margin: 0 0 24px; }
.gb-ev-photo img { width: 100%; height: auto; border-radius: var(--gb-r-blk); display: block; }

.gb-ev-body p { font-size: 15.5px; line-height: 1.6; max-width: 68ch; }

/* --- форма записи --- */
.gb-ev-form {
  border: 1px solid var(--gb-line);
  border-radius: var(--gb-r-blk);
  padding: 26px;
}

.gb-ev-form h3 { font-size: 20px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; }
.gb-ev-sub { font-size: 14px; color: var(--gb-ink-2); margin: 0 0 18px; }
.gb-ev-form .gb-field { margin: 0 0 14px; }
.gb-ev-form .gb-field label { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 6px; }

.gb-ev-form input[type="text"],
.gb-ev-form input[type="email"] {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--gb-line);
  border-radius: var(--gb-r-in);
  background: var(--gb-field);
  font: inherit;
  font-size: 15px;
  color: var(--gb-ink);
}

.gb-ev-form .gb-hint { display: block; font-size: 12.5px; color: var(--gb-ink-2); margin-top: 5px; line-height: 1.4; }
.gb-ev-form .gb-btn { width: 100%; }
.gb-ev-legal { font-size: 12.5px; color: var(--gb-ink-2); line-height: 1.45; margin: 12px 0 0; }

/* 🔴 ПАРА КНОПОК «Taip, atšaukti / Ne, palikti» - В РЯД И С ЗАЗОРОМ.
   Правило строкой выше растягивает любую кнопку формы на всю ширину, а
   модификатор `gb-btn--sm` действует только внутри `.gb-closed`. Замер
   29.08.2026 на экране подтверждения отмены: обе кнопки по 382px, зазор
   между ними 0px - они слипались в один столбик, и промахнуться мимо
   «Ne, palikti» было слишком легко. Цена промаха - отменённая бронь.

   ⚠️ `flex-wrap` оставлен: на узком экране кнопки честно переносятся,
   но зазор между ними сохраняется. */
.gb-ev-form .gb-msg-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.gb-ev-form .gb-msg-actions .gb-btn {
  width: auto;
  flex: 1 1 140px;
  min-height: 44px;
  padding: 10px 18px;
  font-size: 14px;
}

/* Счётчик мест на светлом фоне - тот же смысл, другая подложка. */
.gb-seats-lt {
  background: var(--gb-brand-lt);
  border-radius: var(--gb-r-in);
  padding: 16px 18px;
  margin-bottom: 18px;
}

.gb-seats-lt .t {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--gb-brand);
  margin-bottom: 8px;
}

.gb-seats-lt .t em { font-style: normal; }
.gb-seats-lt .t span { font-weight: 600; color: var(--gb-brand-tx); font-size: 13px; white-space: nowrap; }
.gb-seats-lt .bar { height: 8px; border-radius: 999px; background: #CFDBF3; overflow: hidden; }
.gb-seats-lt .bar i { display: block; height: 100%; background: var(--gb-brand); border-radius: 999px; }

/* На светлом фоне жёлтый не читается - берём тёмно-оранжевый,
   контраст к подложке 4.6. */
.gb-seats-lt .bar.is-low i { background: #C77700; }
.gb-seats-lt .min { font-size: 12.5px; color: var(--gb-brand-tx); margin-top: 9px; line-height: 1.45; }

/* --- сообщения о результате записи --- */
.gb-msg {
  display: flex;
  flex-direction: column;
  border-radius: var(--gb-r-in);
  padding: 18px 20px;
  margin: 0 0 18px;
}

.gb-msg b { font-size: 16.5px; font-weight: 800; letter-spacing: -.015em; margin-bottom: 5px; }
.gb-msg p { margin: 0; font-size: 14px; line-height: 1.55; }

.gb-msg--ok { background: #E9F6F1; }
.gb-msg--ok b, .gb-msg--ok p { color: #0B3A29; }
.gb-msg--info { background: var(--gb-brand-lt); }
.gb-msg--info b { color: var(--gb-ink); }
.gb-msg--info p { color: var(--gb-brand-tx); }
.gb-msg--warn { background: var(--gb-sun); }
.gb-msg--warn b, .gb-msg--warn p { color: #4A3800; }

@media (max-width: 980px) {
  .gb-ev-page { grid-template-columns: 1fr; gap: 26px; padding-top: 28px; }
  .gb-ev-head h1 { font-size: 26px; }
  .gb-ev-empty { flex-direction: column; align-items: flex-start; gap: 14px; padding: 24px 20px; }
}

/* ---------------------------------------------------------------------------
   23. ОТЗЫВЫ: КНОПКА «ВСЕ ОТЗЫВЫ», ПУСТОЕ СОСТОЯНИЕ, СТРАНИЦА

   Сетка .gb-revs и карточка .gb-rev уже были - блок отзывов стоял на главной
   с выдуманными отзывами. Здесь добавлено то, чего в нём не было: подпись
   товара под отзывом, кнопка на остальные отзывы, пустое состояние
   и страница /atsiliepimai/.

   ⚠️ Кнопка по центру и БЕЗ стрелки - в отличие от ссылок «Visos naujienos →»
   и «Visos akcijos →» в углу заголовка. Так просил Лукаш, и так она заметнее:
   отзывы читают не все, а тем, кто читает, нужен явный переход.
   --------------------------------------------------------------------------- */

.gb-rev-prod {
  display: block;
  font-size: 12.5px;
  color: var(--gb-brand);
  font-weight: 600;
  margin-top: 10px;
  text-decoration: none;
}

.gb-rev-prod:hover { text-decoration: underline; }

.gb-revs-more { display: flex; justify-content: center; margin-top: 28px; }
.gb-revs-more .gb-btn { min-width: 260px; }

/* Пустое состояние: секция остаётся на витрине всегда, поэтому она обязана
   выглядеть законченной, а не сломанной. */
.gb-rev-empty {
  border: 1px dashed var(--gb-line);
  border-radius: var(--gb-r-blk);
  padding: 40px 30px;
  text-align: center;
}

.gb-rev-ico {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gb-brand-lt);
  color: var(--gb-brand);
  margin-bottom: 14px;
}

.gb-rev-empty b {
  display: block;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.015em;
  margin-bottom: 6px;
}

.gb-rev-empty p { margin: 0 auto; font-size: 15px; color: var(--gb-ink-2); max-width: 56ch; }

/* Звёзды: видимая часть скрыта от скринридера, а сам блок несёт aria-label
   с оценкой словами - иначе читалка произносит пять одинаковых символов.

   🔴 ЦВЕТ И КЕГЕЛЬ ЗДЕСЬ ОБЯЗАТЕЛЬНЫ, И ВОТ ПОЧЕМУ.

   У НАСТОЯЩЕГО отзыва звёзды лежат внутри <span> (он нужен для aria),
   а выше объявлено `.gb-rev span { font-size: 13px; color: var(--gb-ink-2) }` -
   правило, написанное когда-то под город в подписи ВЫДУМАННОГО отзыва.
   Его специфичность (0,1,1) выше, чем у `.gb-stars` (0,1,0), поэтому оно
   перекрашивало звёзды в серый и ужимало их до 13px.

   Замер 29.08.2026 на живой главной с настоящим отзывом:
     .gb-stars       -> rgb(143,98,0)  16px   золотой, верно
     .gb-stars span  -> rgb(92,98,93)  13px   серый, неверно

   ⚠️ И этого НЕ ВИДНО на витрине разработчика: выдуманные отзывы печатают
   звёзды текстом без <span> и остаются золотыми. Дефект проявлялся ровно
   тогда, когда у магазина появлялся первый живой отзыв, - заполненные ★
   переставали отличаться от пустых ☆, и оценка переставала читаться
   как оценка. Найдено враждебной перепроверкой. */
.gb-rev .gb-stars span {
	letter-spacing: 2px;
	color: inherit;
	font-size: inherit;
}

/* --- страница всех отзывов --- */
.gb-revs-page { padding: 40px 0 10px; }
.gb-revs-page h1 { font-size: 34px; margin: 0 0 10px; }
.gb-revs-lead { font-size: 15.5px; color: var(--gb-ink-2); margin: 0 0 28px; max-width: 70ch; }

/* --- переключатель страниц отзывов ---
   Цель попадания - 44px, как у остальных кнопок витрины: меньше пальцем
   не попасть. Отсюда min-width/min-height, а не только padding. */
.gb-revs-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 36px 0 8px;
}
.gb-revs-nav__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.gb-revs-nav__list li { margin: 0; }
.gb-revs-nav a,
.gb-revs-nav__now {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--gb-line);
  border-radius: var(--gb-r-in);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}
/* 🔴 Ссылки страниц выглядят КНОПКАМИ, а не карточками.
   Здесь стояла граница var(--gb-line) и обычный цвет текста var(--gb-ink).
   Замер в браузере: контраст такой границы к белому 1.27:1, а порог WCAG
   1.4.11 для границ элементов управления - 3:1. Ровно ту же светлую границу
   носит карточка отзыва .gb-rev, поэтому номера читались как маленькие
   карточки, и что по ним можно щёлкнуть, выяснялось только наведением.
   Берём тот же вид, что у вторичной кнопки сайта .gb-btn--ghost - белый фон,
   фирменная граница, фирменный текст: именно ею сделана кнопка «Visi
   atsiliepimai», которая на эту страницу и ведёт. Нашла враждебная
   перепроверка 30.08.2026. */
.gb-revs-nav a {
  color: var(--gb-brand);
  background: var(--gb-w);
  border-color: var(--gb-brand);
}
/* ⚠️ При наведении НЕ заливаем фирменным: так выглядит текущая страница,
   и наведённая ссылка стала бы неотличима от неё. Темним рамку и текст -
   тем же цветом, каким темнеет основная кнопка сайта. */
.gb-revs-nav a:hover,
.gb-revs-nav a:focus-visible {
  background: var(--gb-brand-lt);
  border-color: var(--gb-brand-d);
  color: var(--gb-brand-d);
}
/* Текущая страница - не ссылка: щёлкать по ней некуда, и это видно. */
.gb-revs-nav__now {
  background: var(--gb-brand);
  border-color: var(--gb-brand);
  color: var(--gb-w);
  cursor: default;
}
.gb-revs-nav__gap {
  min-width: 24px;
  text-align: center;
  color: var(--gb-ink-2);
}
.gb-revs-nav__step { white-space: nowrap; }

@media (max-width: 980px) {
  .gb-revs-page { padding-top: 28px; }
  .gb-revs-page h1 { font-size: 26px; }
  .gb-revs-more .gb-btn { width: 100%; min-width: 0; }
  /* На узком экране слова «Ankstesnis/Kitas» вместе с номерами не влезают
     в один ряд и переносятся - выстраиваем их отдельной строкой сверху
     и снизу, чтобы ряд номеров не рвался посередине. */
  .gb-revs-nav { gap: 6px; }
  .gb-revs-nav__list { order: 2; width: 100%; justify-content: center; }
  .gb-revs-nav__step { order: 1; }
  .gb-revs-nav__step[rel="next"] { order: 3; }
}

/* ===========================================================================
   24. iPHONE: ПОЛЯ ВВОДА НЕ ДОЛЖНЫ ПРИБЛИЖАТЬ СТРАНИЦУ

   Safari на iPhone и iPad при фокусе на поле со шрифтом МЕНЬШЕ 16px
   приближает страницу, а после ввода на части версий iOS назад не отъезжает.
   Android этого не делает. Замер 04.09.2026 в симуляторе iPhone 15: фокус
   на поле поиска - страница уехала в приближение, логотип и «RPG» обрезаны
   по краям.

   Лечение одно, которое Safari уважает: шрифт поля не меньше 16px. Запрет
   масштабирования через viewport не годится - iOS его игнорирует для рук
   с 2016 года, а Android честно отбирает у людей щипок.

   Что было мельче 16px на 375px (замер 04.09.2026):
     поиск в шапке              15px, а до 400px - 14px
     количество товара          14,4px (0.9em от WooCommerce)
     вход и регистрация         15px (.form-row input.input-text)
     сортировка каталога        14px (на телефоне скрыта за кнопкой)
     поиск на странице 404      15px
   Уже 16px и приближения не дают: форма контактов и форма записи на турнир
   (правило `:root:root .gb-field` до 900px), выбор номинала купона.

   Правило до 900px - как у формы контактов, чтобы iPad в портрете тоже
   попадал. На компьютере ничего не меняется, там остаются 15px по макету.
   Размеры полей не трогаем: высота поиска 48px, окошка количества 44px,
   полей входа 48px - до и после одинаковы. Меняется только кегль текста
   внутри: в поиске на 2px, в остальных на 1-1,6px, пустые поля неотличимы.

   ⚠️ Блок стоит В КОНЦЕ файла намеренно: селекторы те же, что у правил
   выше (`.gb-srch input[type="search"]` на строке ~944 и ~2115,
   `.form-row input.input-text` ~3438, `.gb-404-s input` ~4122), и при равной
   специфичности побеждает то, что позже. Перенесёшь выше - перестанет
   работать молча.

   ⚠️ Сортировка каталога - селектор нарочно длиннее остальных. Её 14px
   ставит Blocksy в `woocommerce.min.css` правилом
   `.woo-listing-top .woocommerce-ordering select` (вес 0,2,1), и этот файл
   грузится ПОСЛЕ нашего. Замер 04.09.2026: `.woocommerce select.orderby`
   того же веса проигрывал по порядку, поле оставалось 14px. С третьим
   классом вес 0,3,1 и порядок уже не важен. На телефоне этот select и есть
   кнопка со стрелками 34x34 - нажатие открывает системный список, и без
   правки страница приближалась ровно так же, как от поля поиска.
   =========================================================================== */

@media (max-width: 900px) {
  .gb-srch input[type="search"],
  .gb-404-s input[type="search"],
  .woocommerce form .form-row input.input-text,
  .woocommerce form .form-row select,
  .woocommerce .quantity input.qty,
  .woocommerce .woocommerce-ordering select.orderby {
    font-size: 16px;
  }
}

/* ===========================================================================
   25. КНОПКА «‹ Grįžti» ПОД ШАПКОЙ

   Просьба заказчика 06.09.2026: с любой внутренней страницы должен быть
   удобный шаг назад, а не только логотип. Ориентир - gameroom.lt
   («‹ Grįžti į paieškos rezultatus»), у нас проще: одно слово и стрелка.
   Что делает нажатие и почему не крошки - parts/back-link.php.

   Стоит первой внутри <main>, в той же колонке .gb-wrap, что и шапка,
   поэтому её левый край совпадает с логотипом на любой ширине
   (это меряет gb_layout_test.py). Вид - «призрачная» таблетка, как кнопки
   фильтров каталога: заметна, но не спорит с названием товара и ценой.

   На телефоне высота 44px - цель нажатия из приёмки макетов; на компьютере
   40px, там мышь.
   =========================================================================== */

.gb-back { padding: 14px 0 22px; }

/* Зазор под кнопкой один на всех страницах - 22px, и даёт его сама кнопка.
   Поэтому у того, что идёт следом, верхний отступ снимается: у контейнеров
   Blocksy (50px на карточке товара, корзине, юридических страницах) и у нашей
   404 (40px). У заголовка категории (type-2) своего отступа нет, ему
   и снимать нечего. Замер 06.09.2026 до правки: кнопка - крошки товара
   50px, кнопка - «Krepšelis» 50px, кнопка - «Warhammer 40,000» 12px.
   :root:root - потому что динамический CSS Blocksy грузится после нашего. */
:root:root .gb-back + .ct-container,
:root:root .gb-back + .ct-container-narrow,
:root:root .gb-back + .ct-container-full,
:root:root .gb-back + .gb-404 {
  padding-top: 0;
}

/* Заголовок каталога и категории (type-2) свой верхний отступ берёт из
   --container-padding (раздел 4b: 16px, на каталоге 12px). После кнопки
   он лишний: замер 06.09.2026 давал 34px вместо 22. Верх в ноль, бока
   и низ как в 4b. Вес выше правила 4b на один класс, поэтому побеждает. */
:root:root .gb-back + .hero-section[data-type="type-2"],
:root:root body.gb-catalog-hero .gb-back + .hero-section[data-type="type-2"] {
  --container-padding: 0 var(--gb-gut) 0;
}

.gb-back-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 40px;
  padding: 0 16px 0 10px;
  border: 1px solid var(--gb-line);
  border-radius: var(--gb-r-pill);
  background: var(--gb-w);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: var(--gb-ink);
  text-decoration: none;
}

.gb-back-link svg { flex: 0 0 auto; }

.gb-back-link:hover,
.gb-back-link:focus-visible {
  border-color: var(--gb-brand);
  color: var(--gb-brand);
}

@media (max-width: 991px) {
  .gb-back-link { min-height: 44px; }
}

/* ===========================================================================
   26. ШИРОКИЕ ЭКРАНЫ: КОЛОНКА ТЯНЕТСЯ, КАРТОЧЕК В РЯД БОЛЬШЕ

   Макет 10 рисовался под ноутбук: колонка 1320px (--gb-max) с полями 28px.
   На мониторе 1920px это 300px пустоты с каждой стороны. Лукаш сравнил
   с funside.it и gameboard.lt (06.09.2026): у ориентира заказчика поля
   ~64px, а содержимое тянется, и на широком экране в ряд встаёт больше
   товаров. Делаем так же, не трогая ноутбук и телефон.

   Правило одно: карточка товара держится в 280-330px, а колонка растёт
   за экраном; как только карточки стали бы шире, добавляется ещё одна
   в ряд. Числа (замер 06.09.2026 по ширине содержимого = колонка минус
   два поля):
     до 1439      колонка 1320, поля 28, 4 в ряд    карточка до 298px
     1440-1599    колонка до 1880, поля 48, 4 в ряд   318-343px
     1600-1899    5 в ряд                              282-322px
     от 1900      6 в ряд                              277-279px
   Телефон (до 760: 2 в ряд) и планшет не меняются.

   ⚠️ Секции главной («Naujienos», «Populiariausi», «Akcijos») и связанные
   товары печатают ШЕСТЬ карточек (front-page.php, functions.php), а лишние
   прячутся здесь по ширине: иначе на 5-6 колонках ряд из четырёх карточек
   стоял бы с дырой справа. Каталог не трогаем: там 12 на страницу
   и неполный последний ряд - норма.

   ⚠️ Блок стоит В КОНЦЕ файла намеренно: :root с теми же переменными
   объявлен в начале, побеждает порядок.
   =========================================================================== */

@media (min-width: 1440px) {
  :root {
    --gb-max: 1880px;
    --gb-gut: 48px;
  }
}

@media (min-width: 1600px) {
  .woocommerce ul.products { grid-template-columns: repeat(5, minmax(0, 1fr)); }

  /* Иллюстрация героя растёт вместе с колонкой (svg на 100% ширины):
     на 1920 карточка-герой вытягивалась до 639px при 438px на ноутбуке.
     Потолок 470px держит карточку около 500px, рисунок центрируется сам
     (preserveAspectRatio у svg). */
  .gb-hero-a { max-height: 470px; }
}

@media (min-width: 1900px) {
  .woocommerce ul.products { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Секции главной и связанные товары: показываем ровно один ряд. */
@media (max-width: 1599.98px) {
  .gb-sec ul.products li.product:nth-child(n + 5),
  .related ul.products li.product:nth-child(n + 5) { display: none; }
}

@media (min-width: 1600px) and (max-width: 1899.98px) {
  .gb-sec ul.products li.product:nth-child(n + 6),
  .related ul.products li.product:nth-child(n + 6) { display: none; }
}