/* ==========================================================================
   Золотий Мандарин — надстройка над темой OPC100247_5 (Shopcroc)
   Подключается ПОСЛЕ stylesheet.css и перекрывает его точечно.
   Палитра снята пипеткой с макетов заказчика.
   ========================================================================== */

:root {
  /* Акцент — с кнопок «Замовити консультацію» и «Розрахувати» */
  --gm-accent:        #F16E14;
  --gm-accent-hover:  #D95D1D;
  --gm-accent-soft:   #FFE9D2;

  /* Поверхности */
  --gm-bg:            #FFFFFF;
  --gm-surface:       #F9F6F1;   /* тёплая подложка из макета карточки */
  --gm-bar:           #1F1F1F;   /* верхняя информационная полоса */
  --gm-line:          #E6E1D8;

  /* Текст */
  --gm-ink:           #1B1B19;
  --gm-ink-muted:     #6E6259;
  --gm-ink-invert:    #F5F2ED;

  /* Типографика */
  --gm-font-display:  'Arsenal', 'Inter', Arial, sans-serif;
  --gm-font-text:     'Inter', Arial, Helvetica, sans-serif;

  /* Ритм */
  --gm-gap:           24px;
  --gm-radius:        6px;
  --gm-radius-lg:     12px;
}

/* --------------------------------------------------------------------------
   1. База
   -------------------------------------------------------------------------- */

body {
  font-family: var(--gm-font-text);
  color: var(--gm-ink);
  background: var(--gm-bg);
}

h1, h2, h3, h4, h5,
.product-title,
.box-heading,
.gm-section__title {
  font-family: var(--gm-font-display);
  color: var(--gm-ink);
  font-weight: 700;
  letter-spacing: -0.01em;
}

a { color: var(--gm-ink); }
a:hover, a:focus { color: var(--gm-accent); }

:focus-visible {
  outline: 2px solid var(--gm-accent);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   2. Кнопки
   -------------------------------------------------------------------------- */

.btn-primary,
.gm-btn,
#button-cart,
.cart_button,
.shop_button {
  background: var(--gm-accent);
  border: 1px solid var(--gm-accent);
  color: #fff;
  font-family: var(--gm-font-text);
  font-weight: 600;
  border-radius: var(--gm-radius);
  box-shadow: none;
  text-shadow: none;
  transition: background-color .15s ease, border-color .15s ease;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.gm-btn:hover, .gm-btn:focus,
#button-cart:hover, #button-cart:focus,
.cart_button:hover, .cart_button:focus {
  background: var(--gm-accent-hover);
  border-color: var(--gm-accent-hover);
  color: #fff;
}

.gm-btn--ghost {
  background: transparent;
  border: 1px solid var(--gm-line);
  color: var(--gm-ink);
}

.gm-btn--ghost:hover,
.gm-btn--ghost:focus {
  background: var(--gm-surface);
  border-color: var(--gm-ink-muted);
  color: var(--gm-ink);
}

/* --------------------------------------------------------------------------
   3. Шапка
   -------------------------------------------------------------------------- */

/* 3.1 Верхняя полоса: род деятельности, телефоны, соцсети */
.gm-topbar {
  background: var(--gm-bg);
  border-bottom: 1px solid var(--gm-line);
  font-size: 13px;
  color: var(--gm-ink-muted);
}

.gm-topbar__inner {
  display: flex;
  align-items: center;
  gap: var(--gm-gap);
  min-height: 38px;
  flex-wrap: wrap;
}

.gm-topbar__activity {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.gm-topbar__official {
  color: var(--gm-accent);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 12px;
  white-space: nowrap;
}

.gm-topbar__phones {
  display: flex;
  gap: 20px;
  margin-left: auto;
  flex-wrap: wrap;
}

.gm-phone {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}

.gm-phone__label { color: var(--gm-ink-muted); }

.gm-phone__value {
  font-weight: 600;
  color: var(--gm-ink);
  font-variant-numeric: tabular-nums;
}

.gm-phone__value:hover { color: var(--gm-accent); }

.gm-social {
  display: flex;
  gap: 10px;
  align-items: center;
}

.gm-social a {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--gm-ink-muted);
  font-size: 14px;
}

.gm-social a:hover {
  color: #fff;
  background: var(--gm-accent);
}

/* 3.2 Основная строка: логотип, навигация, корзина, язык, CTA */
.gm-header {
  background: var(--gm-bg);
  border-bottom: 1px solid var(--gm-line);
}

.gm-header__inner {
  display: flex;
  align-items: center;
  gap: var(--gm-gap);
  min-height: 84px;
}

.gm-header__logo { flex: 0 0 auto; }
.gm-header__logo img { max-height: 56px; width: auto; }

.gm-header__nav { flex: 1 1 auto; min-width: 0; }

.gm-header__tools {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 0 0 auto;
}

/* Навигация */
.gm-header__nav .nav.navbar-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  float: none;
}

.gm-header__nav .nav.navbar-nav > li { float: none; }

.gm-header__nav .nav.navbar-nav > li > a {
  font-family: var(--gm-font-text);
  font-size: 14px;
  font-weight: 600;
  color: var(--gm-ink);
  padding: 10px 12px;
  background: transparent;
  border-bottom: 2px solid transparent;
}

.gm-header__nav .nav.navbar-nav > li > a:hover,
.gm-header__nav .nav.navbar-nav > li.active > a {
  color: var(--gm-accent);
  border-bottom-color: var(--gm-accent);
  background: transparent;
}

/* Корзина */
.gm-header__cart #cart > .btn,
.gm-header__cart .btn-cart {
  background: transparent;
  border: 0;
  color: var(--gm-ink);
  padding: 6px 10px;
}

.gm-header__cart .gm-cart-count {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--gm-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* 3.3 Строка поиска на всю ширину */
.gm-searchbar {
  background: var(--gm-bg);
  border-bottom: 1px solid var(--gm-line);
  padding: 14px 0;
}

.gm-searchbar #searchbox {
  display: flex;
  width: 100%;
}

.gm-searchbar #searchbox input[name="search"] {
  flex: 1 1 auto;
  height: 46px;
  border: 1px solid var(--gm-line);
  border-right: 0;
  border-radius: var(--gm-radius) 0 0 var(--gm-radius);
  padding: 0 16px;
  font-size: 15px;
  color: var(--gm-ink);
  background: var(--gm-bg);
  box-shadow: none;
}

.gm-searchbar #searchbox input[name="search"]::placeholder {
  color: var(--gm-ink-muted);
}

.gm-searchbar #searchbox input[name="search"]:focus {
  border-color: var(--gm-accent);
  outline: none;
}

.gm-searchbar #searchbox .input-group-btn { flex: 0 0 auto; }

.gm-searchbar #searchbox .btn {
  width: 58px;
  height: 46px;
  border-radius: 0 var(--gm-radius) var(--gm-radius) 0;
  background: var(--gm-accent);
  border: 1px solid var(--gm-accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.gm-searchbar #searchbox .btn:hover {
  background: var(--gm-accent-hover);
  border-color: var(--gm-accent-hover);
}

.gm-searchbar #searchbox .btn::before {
  font-family: 'Font Awesome 5 Free', FontAwesome;
  font-weight: 900;
  content: '\f002';
  font-size: 17px;
}

/* --------------------------------------------------------------------------
   4. Заголовки секций
   -------------------------------------------------------------------------- */

.box .box-heading,
.gm-section__title {
  font-size: 26px;
  line-height: 1.2;
  margin: 0 0 4px;
}

.box .sub_title,
.box .sub_title_latest,
.gm-section__lead {
  font-family: var(--gm-font-text);
  font-size: 14px;
  color: var(--gm-ink-muted);
  margin-bottom: 18px;
}

/* --------------------------------------------------------------------------
   5. Карточка товара — блоки из макета
   -------------------------------------------------------------------------- */

/* 5.1 Подзаголовок под названием (категория товара) */
.gm-product__subtitle {
  font-family: var(--gm-font-text);
  font-size: 16px;
  color: var(--gm-ink-muted);
  margin: -4px 0 18px;
}

/* 5.2 Полоса преимуществ под галереей */
.gm-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 18px;
  margin: 26px 0;
}

.gm-feature {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.gm-feature__icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gm-accent-soft);
  color: var(--gm-accent);
  font-size: 17px;
}

.gm-feature__title {
  font-family: var(--gm-font-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 3px;
}

.gm-feature__note {
  font-size: 12.5px;
  color: var(--gm-ink-muted);
  line-height: 1.35;
  margin: 0;
}

/* 5.3 Таблица характеристик */
.gm-specs {
  background: var(--gm-bg);
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius-lg);
  overflow: hidden;
}

.gm-specs table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 14px;
}

.gm-specs td {
  padding: 11px 18px;
  border-top: 1px solid var(--gm-line);
  vertical-align: top;
  line-height: 1.4;
}

.gm-specs tr:first-child td { border-top: 0; }
.gm-specs tr:nth-child(even) td { background: var(--gm-surface); }

.gm-specs td:first-child {
  color: var(--gm-ink-muted);
  width: 52%;
}

.gm-specs td:last-child { font-weight: 500; }

/* 5.4 Калькулятор потребности материала */
.gm-calc {
  background: var(--gm-surface);
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius-lg);
  padding: 20px 22px;
  margin: 30px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 20px;
}

.gm-calc__head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  flex: 1 1 260px;
  min-width: 240px;
}

.gm-calc__icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: var(--gm-radius);
  background: var(--gm-accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.gm-calc__title {
  font-family: var(--gm-font-display);
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 3px;
}

.gm-calc__note {
  font-size: 13px;
  color: var(--gm-ink-muted);
  margin: 0;
  line-height: 1.35;
}

.gm-calc__field { flex: 0 1 150px; }

.gm-calc__label {
  display: block;
  font-size: 13px;
  color: var(--gm-ink-muted);
  margin-bottom: 6px;
}

.gm-calc__field input {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius);
  background: var(--gm-bg);
  font-size: 15px;
  color: var(--gm-ink);
}

.gm-calc__field input:focus {
  border-color: var(--gm-accent);
  outline: none;
}

.gm-calc__result {
  flex: 0 1 170px;
  padding: 6px 0;
}

.gm-calc__value {
  font-family: var(--gm-font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.gm-calc__value[data-empty="1"] { color: var(--gm-ink-muted); }

.gm-calc__unit {
  font-size: 15px;
  font-weight: 400;
  color: var(--gm-ink-muted);
  margin-left: 4px;
}

.gm-calc__submit { flex: 0 0 auto; }

.gm-calc__submit .gm-btn {
  height: 42px;
  padding: 0 26px;
  font-size: 14px;
  letter-spacing: .02em;
}

.gm-calc__error {
  flex: 1 1 100%;
  font-size: 13px;
  color: var(--gm-accent-hover);
  margin: 0;
}

/* --------------------------------------------------------------------------
   6. Мобильные
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
  .gm-header__inner { flex-wrap: wrap; min-height: 0; padding: 12px 0; }
  .gm-header__nav { order: 3; flex-basis: 100%; }
  .gm-header__tools { margin-left: auto; }
  .gm-topbar__phones { margin-left: 0; flex-basis: 100%; }
}

@media (max-width: 767px) {
  .gm-topbar { font-size: 12px; }
  .gm-topbar__official { display: none; }
  .gm-header__logo img { max-height: 44px; }
  .box .box-heading, .gm-section__title { font-size: 21px; }
  .gm-calc { padding: 16px; gap: 14px; }
  .gm-calc__field, .gm-calc__result { flex-basis: 100%; }
  .gm-calc__submit { flex-basis: 100%; }
  .gm-calc__submit .gm-btn { width: 100%; }
  .gm-specs td { padding: 9px 12px; font-size: 13.5px; }
  .gm-specs td:first-child { width: 50%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   7. Главная — секции по макету
   ========================================================================== */

.gm-section { padding: 54px 0; }
.gm-section--flush { padding: 34px 0; }

.gm-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gm-gap);
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.gm-section__head .gm-section__title { margin-bottom: 0; }

.gm-section__more {
  font-size: 14px;
  font-weight: 600;
  color: var(--gm-accent);
  white-space: nowrap;
}

.gm-section__more:hover { color: var(--gm-accent-hover); }

/* --------------------------------------------------------------------------
   7.1 Герой
   -------------------------------------------------------------------------- */

.gm-hero {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #14110E;
}

.gm-hero__media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}

/* Затемнение слева, чтобы текст читался на любой фотографии */
.gm-hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(12, 10, 8, .92) 0%,
    rgba(12, 10, 8, .78) 34%,
    rgba(12, 10, 8, .28) 62%,
    rgba(12, 10, 8, .06) 100%
  );
}

.gm-hero .container { position: relative; z-index: 2; }

.gm-hero__body { max-width: 560px; padding: 60px 0; }

.gm-hero__eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gm-accent);
  margin: 0 0 18px;
}

.gm-hero__title {
  font-family: var(--gm-font-display);
  font-size: clamp(38px, 5.4vw, 68px);
  line-height: 1.04;
  font-weight: 700;
  color: #fff;
  margin: 0 0 20px;
  letter-spacing: -0.02em;
}

.gm-hero__title-accent { color: var(--gm-accent); }

.gm-hero__lead {
  font-size: 17px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .82);
  margin: 0 0 30px;
  max-width: 44ch;
}

.gm-hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 34px;
}

.gm-btn--lg {
  height: 52px;
  padding: 0 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  border-radius: var(--gm-radius);
}

.gm-btn--ondark {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .38);
  color: #fff;
  font-weight: 600;
}

.gm-btn--ondark:hover,
.gm-btn--ondark:focus {
  background: rgba(255, 255, 255, .1);
  border-color: #fff;
  color: #fff;
}

.gm-hero__marks {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gm-hero__marks li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: rgba(255, 255, 255, .8);
}

.gm-hero__marks i { color: var(--gm-accent); font-size: 15px; }

/* --------------------------------------------------------------------------
   7.2 Плитки разделов
   -------------------------------------------------------------------------- */

.gm-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px;
}

.gm-tile {
  background: var(--gm-bg);
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.gm-tile__media {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--gm-surface);
  overflow: hidden;
}

.gm-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gm-tile__body { padding: 18px 20px 20px; }

.gm-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--gm-radius);
  background: var(--gm-accent-soft);
  color: var(--gm-accent);
  font-size: 15px;
  margin-bottom: 12px;
}

.gm-tile__title {
  font-size: 18px;
  line-height: 1.25;
  margin: 0 0 7px;
}

.gm-tile__note {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--gm-ink-muted);
  margin: 0;
}

/* --------------------------------------------------------------------------
   7.3 Полоса гарантий
   -------------------------------------------------------------------------- */

.gm-guarantees {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 4px;
  background: var(--gm-surface);
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius-lg);
  padding: 6px;
}

.gm-guarantee {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 18px;
}

.gm-guarantee__icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gm-bg);
  color: var(--gm-accent);
  font-size: 17px;
}

.gm-guarantee__title {
  font-family: var(--gm-font-text);
  font-size: 14.5px;
  font-weight: 600;
  margin: 0 0 3px;
}

.gm-guarantee__note {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--gm-ink-muted);
  margin: 0;
}

/* --------------------------------------------------------------------------
   7.4 Популярные категории
   -------------------------------------------------------------------------- */

.gm-cats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
}

.gm-cat {
  display: block;
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius-lg);
  overflow: hidden;
  background: var(--gm-bg);
}

.gm-cat__media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--gm-surface);
}

.gm-cat__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gm-cat__name {
  display: block;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--gm-ink);
}

.gm-cat:hover { border-color: var(--gm-accent); }
.gm-cat:hover .gm-cat__name { color: var(--gm-accent); }

/* --------------------------------------------------------------------------
   7.5 Мобильные — секции главной
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
  .gm-hero { min-height: 480px; }
  .gm-hero__media { background-position: center; }
  .gm-hero__veil {
    background: linear-gradient(
      180deg,
      rgba(12, 10, 8, .74) 0%,
      rgba(12, 10, 8, .86) 100%
    );
  }
  .gm-hero__body { max-width: none; padding: 46px 0; }
  .gm-section { padding: 38px 0; }
}

@media (max-width: 767px) {
  .gm-hero { min-height: 0; }
  .gm-hero__lead { font-size: 15.5px; }
  .gm-hero__actions { gap: 10px; }
  .gm-btn--lg { width: 100%; }
  .gm-hero__marks { gap: 12px; }
  .gm-hero__marks li { font-size: 13px; flex-basis: 100%; }
  .gm-guarantee { padding: 14px; }
  .gm-cats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .gm-cat__name { padding: 11px 12px; font-size: 13px; }
}

/* ==========================================================================
   8. Правки после первой примерки
   ========================================================================== */

/* 8.1 Меню в шапке — горизонтально.
   Тема раскладывает его вертикально через свои обёртки,
   поэтому сбрасываем всю цепочку, а не только li > a. */

.gm-header__nav .nav-container,
.gm-header__nav .nav-inner,
.gm-header__nav #menu,
.gm-header__nav #res-menu,
.gm-header__nav .main-menu {
  float: none;
  width: auto;
  max-width: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  display: block;
}

.gm-header__nav .nav-responsive,
.gm-header__nav .res-menu-close { display: none; }

.gm-header__nav ul.nav.navbar-nav {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  float: none;
  width: auto;
}

.gm-header__nav ul.nav.navbar-nav > li {
  float: none !important;
  display: block;
  width: auto !important;
  position: relative;
  border: 0;
}

.gm-header__nav ul.nav.navbar-nav > li > a {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-size: 13.5px;
  padding: 9px 10px;
  line-height: 1.2;
  text-transform: none;
}

/* Длинные названия категорий в меню не должны рвать шапку */
.gm-header__nav ul.nav.navbar-nav > li > a .icon-title {
  display: inline-block;
  max-width: 15ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.gm-header__nav ul.nav.navbar-nav > li > a .img-icon { display: none; }

/* Выпадающие подменю — обратно в абсолют, поверх контента */
.gm-header__nav ul.nav.navbar-nav > li ul {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 120;
  min-width: 230px;
  background: var(--gm-bg);
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius);
  padding: 6px 0;
  display: none;
  list-style: none;
  margin: 0;
}

.gm-header__nav ul.nav.navbar-nav > li:hover > ul { display: block; }

.gm-header__nav ul.nav.navbar-nav > li ul li a {
  display: block;
  padding: 8px 16px;
  font-size: 13.5px;
  white-space: normal;
  text-transform: none;
}

.gm-header__nav ul.nav.navbar-nav > li ul li a:hover {
  background: var(--gm-surface);
  color: var(--gm-accent);
}

/* 8.2 Убрать capitalize из темы на кнопках */
.gm-btn,
.btn-primary,
#button-cart,
.cart_button,
.gm-header__cta,
.gm-section__more {
  text-transform: none;
}

/* 8.3 Карточки категорий — одинаковая высота подписи */
.gm-cat {
  display: flex;
  flex-direction: column;
}

.gm-cat__name {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
}

/* 8.4 Мобильное меню — обратно в столбик */
@media (max-width: 991px) {
  .gm-header__nav ul.nav.navbar-nav {
    flex-direction: column !important;
    align-items: stretch;
    gap: 0;
  }
  .gm-header__nav ul.nav.navbar-nav > li > a {
    display: block;
    padding: 11px 4px;
    border-bottom: 1px solid var(--gm-line);
  }
  .gm-header__nav ul.nav.navbar-nav > li > a .icon-title { max-width: none; }
  .gm-header__nav ul.nav.navbar-nav > li ul { position: static; display: block; border: 0; padding-left: 14px; }
}

/* 8.5 Навигация — отдельная полоса под шапкой */
.gm-navbar {
  background: var(--gm-bg);
  border-bottom: 1px solid var(--gm-line);
}

.gm-navbar .gm-header__nav { width: 100%; }

/* В своей полосе места достаточно — обрезку названий снимаем */
.gm-header__nav ul.nav.navbar-nav > li > a .icon-title {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
}

/* 8.6 Меню: плотнее, чтобы длинные названия помещались в одну строку */
.gm-navbar .gm-header__nav ul.nav.navbar-nav {
  justify-content: flex-start;
  gap: 0;
}

.gm-navbar .gm-header__nav ul.nav.navbar-nav > li > a {
  font-size: 12.5px;
  letter-spacing: 0;
  padding: 11px 11px;
}

/* 8.7 Пустая полоса от хлебных крошек темы */
.content-top-breadcum { display: none; }

/* 8.8 Инструменты в шапке — прижать вправо */
.gm-header__inner .gm-header__tools { margin-left: auto; }


/* ==========================================================================
   9. Страница категории и листинг товаров
   Дописывается в конец goldmandarin.css
   Селекторы взяты из фактической разметки темы:
   product/category.twig и extension/module/category.twig
   ========================================================================== */

/* --------------------------------------------------------------------------
   9.1 Боковая колонка — модуль категорий
   -------------------------------------------------------------------------- */

/* У темы в .box-heading пустой div с чёрным фоном — отсюда чёрная плашка */
#column-left .box .heading,
#column-right .box .heading { display: none; }

#column-left .box,
#column-right .box {
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius-lg);
  overflow: hidden;
  margin-bottom: 22px;
  background: var(--gm-bg);
}

#column-left .box-content,
#column-right .box-content { padding: 0; }

.category-box-heading {
  font-family: var(--gm-font-display);
  font-size: 16px;
  font-weight: 700;
  padding: 14px 18px;
  background: var(--gm-surface);
  border-bottom: 1px solid var(--gm-line);
  color: var(--gm-ink);
}

ul.box-category {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  max-height: 520px;
  overflow-y: auto;
}

ul.box-category li { border: 0; }

ul.box-category > li > a {
  display: block;
  padding: 8px 18px;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--gm-ink);
  border-left: 2px solid transparent;
}

ul.box-category > li > a:hover {
  background: var(--gm-surface);
  color: var(--gm-accent);
}

ul.box-category > li > a.active {
  color: var(--gm-accent);
  font-weight: 600;
  border-left-color: var(--gm-accent);
  background: var(--gm-surface);
}

ul.box-category ul {
  list-style: none;
  margin: 0;
  padding: 0 0 4px;
}

ul.box-category ul li a {
  display: block;
  padding: 6px 18px 6px 30px;
  font-size: 13px;
  color: var(--gm-ink-muted);
}

ul.box-category ul li a:hover,
ul.box-category ul li a.active { color: var(--gm-accent); }

/* Полоса прокрутки в длинном списке категорий */
ul.box-category::-webkit-scrollbar { width: 8px; }
ul.box-category::-webkit-scrollbar-thumb {
  background: var(--gm-line);
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   9.2 Заголовок и описание категории
   -------------------------------------------------------------------------- */

#content .page-title {
  font-size: 30px;
  line-height: 1.15;
  margin: 6px 0 18px;
}

#content .breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0 0 10px;
  font-size: 13px;
  text-align: left;
}

#content .breadcrumb > li + li:before { color: var(--gm-ink-muted); }
#content .breadcrumb a { color: var(--gm-ink-muted); }
#content .breadcrumb a:hover { color: var(--gm-accent); }

.category_thumb {
  margin-bottom: 22px;
  align-items: flex-start;
}

.category_img img {
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius);
  padding: 0;
}

.category_description {
  font-size: 14px;
  line-height: 1.55;
  color: var(--gm-ink-muted);
}

/* --------------------------------------------------------------------------
   9.3 Подкатегории — плашками
   -------------------------------------------------------------------------- */

h3.refine-search {
  font-size: 15px;
  font-weight: 600;
  color: var(--gm-ink-muted);
  margin: 0 0 12px;
  font-family: var(--gm-font-text);
}

.category_list ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
}

.category_list ul li { width: auto; float: none; }

.category_list ul li a {
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid var(--gm-line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--gm-ink);
  background: var(--gm-bg);
  text-transform: none;
}

.category_list ul li a:hover {
  border-color: var(--gm-accent);
  color: var(--gm-accent);
  background: var(--gm-accent-soft);
}

/* --------------------------------------------------------------------------
   9.4 Панель сортировки
   -------------------------------------------------------------------------- */

.category_filter {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 16px;
  margin: 0 0 24px;
  background: var(--gm-surface);
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius-lg);
}

.category_filter > div { float: none; width: auto; padding: 0; }

.btn-list-grid .btn-group { display: flex; gap: 6px; }

.btn-list-grid .btn {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gm-bg);
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius);
  color: var(--gm-ink-muted);
  box-shadow: none;
}

.btn-list-grid .btn:hover,
.btn-list-grid .btn.active {
  background: var(--gm-accent);
  border-color: var(--gm-accent);
  color: #fff;
}

.category_filter .compare-total { margin-right: auto; }

.category_filter .compare-total a {
  font-size: 13px;
  color: var(--gm-ink-muted);
}

.category_filter .compare-total a:hover { color: var(--gm-accent); }

.category_filter .pagination-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.category_filter .sort-by-wrapper,
.category_filter .show-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.category_filter label.control-label {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--gm-ink-muted);
  white-space: nowrap;
}

.category_filter select.form-control {
  height: 36px;
  padding: 0 10px;
  font-size: 13px;
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius);
  background-color: var(--gm-bg);
  color: var(--gm-ink);
  box-shadow: none;
  width: auto;
  min-width: 130px;
}

.category_filter select.form-control:focus {
  border-color: var(--gm-accent);
  outline: none;
}

.category_filter .show-wrapper select.form-control { min-width: 72px; }

/* --------------------------------------------------------------------------
   9.5 Сетка товаров
   -------------------------------------------------------------------------- */

.product_combine {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 22px;
  margin-bottom: 28px;
}

.product_combine > .product-layout {
  width: auto;
  float: none;
  padding: 0;
}

.product_combine .product-block {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius-lg);
  overflow: hidden;
  background: var(--gm-bg);
}

.product_combine .product-block:hover { border-color: var(--gm-accent); }

.product_combine .product-block-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.product_combine .image_cover {
  position: relative;
  background: var(--gm-surface);
}

.product_combine .image_cover .image { aspect-ratio: 4 / 3; }

.product_combine .image_cover .image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.product_combine .percentsaving {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  min-width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--gm-accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.product_combine .product-details {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.product_combine .caption { padding: 0; flex: 1 1 auto; }

.product_combine .caption h4,
.product_combine .caption .name {
  font-family: var(--gm-font-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 8px;
}

.product_combine .caption h4 a { color: var(--gm-ink); }
.product_combine .caption h4 a:hover { color: var(--gm-accent); }

.product_combine p.price {
  font-family: var(--gm-font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--gm-ink);
  margin: 0 0 8px;
}

.product_combine p.price .price-new { color: var(--gm-ink); }

.product_combine p.price .price-old {
  font-family: var(--gm-font-text);
  font-size: 14px;
  font-weight: 400;
  color: var(--gm-ink-muted);
  text-decoration: line-through;
  margin-left: 7px;
}

/* Описание в карточке: у товаров там технические данные из
   oc_product_description, поэтому обрезаем до двух строк,
   иначе карточки разной высоты и текст лезет сплошняком */
.product_combine p.description {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--gm-ink-muted);
  margin: 0 0 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product_combine .cart_button,
.product_combine .stock_status {
  width: 100%;
  height: 40px;
  margin-top: auto;
  font-size: 13.5px;
  font-weight: 600;
  text-transform: none;
}

.product_combine .stock_status {
  background: var(--gm-surface);
  border-color: var(--gm-line);
  color: var(--gm-ink-muted);
  cursor: not-allowed;
}

.product_combine .stock_status:hover {
  background: var(--gm-surface);
  border-color: var(--gm-line);
  color: var(--gm-ink-muted);
}

/* Кнопки избранного и быстрого просмотра */
.product_combine .product_hover_block {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
}

.product_combine .product_hover_block .action {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* --------------------------------------------------------------------------
   9.6 Пагинация
   -------------------------------------------------------------------------- */

.pagination-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid var(--gm-line);
  font-size: 13px;
  color: var(--gm-ink-muted);
}

.pagination > li > a,
.pagination > li > span {
  border: 1px solid var(--gm-line);
  color: var(--gm-ink);
  background: var(--gm-bg);
  margin: 0 3px;
  border-radius: var(--gm-radius);
  padding: 7px 13px;
}

.pagination > li > a:hover {
  border-color: var(--gm-accent);
  color: var(--gm-accent);
  background: var(--gm-bg);
}

.pagination > li.active > span,
.pagination > li.active > span:hover {
  background: var(--gm-accent);
  border-color: var(--gm-accent);
  color: #fff;
}

/* --------------------------------------------------------------------------
   9.7 Мобильные
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
  #content .page-title { font-size: 24px; }
  .product_combine { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
}

@media (max-width: 767px) {
  .category_filter { padding: 10px 12px; gap: 10px; }
  .category_filter .compare-total { margin-right: 0; order: 3; flex-basis: 100%; }
  .category_filter .pagination-right { flex-basis: 100%; gap: 10px; }
  .category_filter select.form-control { min-width: 0; flex: 1 1 auto; }
  .product_combine { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .product_combine .product-details { padding: 11px 12px 12px; }
  .product_combine p.price { font-size: 16px; }
  .category_list ul { gap: 6px; margin-bottom: 18px; }
  .category_list ul li a { padding: 7px 13px; font-size: 12.5px; }
  ul.box-category { max-height: 320px; }
}
/* ==========================================================================
   10. Правки листинга после примерки
   ========================================================================== */

/* 10.1 Миниатюры крупнее и без полос по краям.
   contain оставлял фон подложки видимым, потому что фото товаров
   разного соотношения. cover заполняет карточку целиком. */
.product_combine .image_cover { background: var(--gm-bg); }

.product_combine .image_cover .image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.product_combine .image_cover .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Карточки чуть шире — миниатюра крупнее при той же сетке */
.product_combine {
  grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
}

/* 10.2 Названия товаров в две строки, дальше многоточие —
   иначе «КС-01 Клеевая Смесь Эластичная Тиксотропная Армированная»
   растягивает карточку на шесть строк */
.product_combine .caption h4 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}

/* 10.3 Панель сортировки: подписи наезжали на селекты */
.category_filter .pagination-right {
  margin-left: auto;
  flex-wrap: nowrap;
}

.category_filter .sort-by-wrapper > div,
.category_filter .show-wrapper > div {
  float: none;
  width: auto;
  padding: 0;
  text-align: left;
}

.category_filter .sort-by-wrapper select.form-control { min-width: 170px; }

/* 10.4 Иконки избранного и быстрого просмотра — только при наведении */
.product_combine .product_hover_block {
  opacity: 0;
  transition: opacity .15s ease;
}

.product_combine .product-block:hover .product_hover_block { opacity: 1; }

@media (max-width: 767px) {
  .product_combine { grid-template-columns: repeat(2, 1fr); }
  .product_combine .product_hover_block { opacity: 1; }
  .category_filter .pagination-right { flex-wrap: wrap; margin-left: 0; }
  .category_filter .sort-by-wrapper select.form-control { min-width: 0; }
}


/* ==========================================================================
   11. Шапка v2 — структура по макету заказчика
   Дописывается в конец goldmandarin.css.
   Перекрывает раздел 3 (шапка v1) — старые правила остаются в файле,
   но новые селекторы .gm-head / .gm-main / .gm-nav их не используют.
   ========================================================================== */

/* Ряды v1 больше не выводятся шаблоном, но на случай кеша — скрыть */
.gm-header, .gm-navbar, .gm-searchbar { display: none; }

.gm-head { background: var(--gm-bg); }

/* --------------------------------------------------------------------------
   11.1 Ряд 1 — активность, телефоны, соцсети
   -------------------------------------------------------------------------- */

.gm-topbar {
  border-bottom: 1px solid var(--gm-line);
  font-size: 12.5px;
  color: var(--gm-ink-muted);
}

.gm-topbar__inner {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 40px;
  flex-wrap: wrap;
}

.gm-topbar__activity {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.gm-topbar__activity i { color: var(--gm-accent); font-size: 13px; }

.gm-topbar__official {
  color: var(--gm-accent);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 12px;
  white-space: nowrap;
}

.gm-topbar__phones {
  display: flex;
  gap: 26px;
  margin-left: auto;
  flex-wrap: wrap;
}

.gm-phone { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.gm-phone i { color: var(--gm-ink-muted); font-size: 12px; }
.gm-phone__label { color: var(--gm-ink-muted); }

.gm-phone__value {
  font-weight: 600;
  color: var(--gm-ink);
  letter-spacing: .01em;
}

.gm-phone__value:hover { color: var(--gm-accent); }

/* Соцсети — кружки в фирменных цветах, как в макете */
.gm-social { display: flex; gap: 8px; align-items: center; }

.gm-social__link {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
}

.gm-social__link:hover { color: #fff; opacity: .85; }
.gm-social__link--fb { background: #1877F2; }
.gm-social__link--tt { background: #111; }
.gm-social__link--ig { background: linear-gradient(45deg, #F9CE34, #EE2A7B, #6228D7); }
.gm-social__link--yt { background: #FF0000; }

/* --------------------------------------------------------------------------
   11.2 Ряд 2 — логотип, навигация, инструменты
   -------------------------------------------------------------------------- */

.gm-main { border-bottom: 1px solid var(--gm-line); }

.gm-main__inner {
  display: flex;
  align-items: center;
  gap: 26px;
  min-height: 76px;
}

/* Логотип: знак + текстовый блок в две строки с подписью */
.gm-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.gm-logo:hover { color: inherit; }
.gm-logo__mark { height: 50px; width: auto; flex: 0 0 auto; }

.gm-logo__text { display: block; line-height: 1.1; }

.gm-logo__title {
  display: block;
  font-family: var(--gm-font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--gm-ink);
}

.gm-logo__note {
  display: block;
  margin-top: 4px;
  font-size: 10.5px;
  line-height: 1.25;
  color: var(--gm-ink-muted);
}

/* Навигация страниц */
.gm-nav { flex: 1 1 auto; min-width: 0; }

.gm-nav__list {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gm-nav__item { position: static; }
.gm-nav__item--mega { position: relative; }

.gm-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gm-ink);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  text-transform: none;
}

.gm-nav__link:hover,
.gm-nav__item:hover > .gm-nav__link {
  color: var(--gm-accent);
  border-bottom-color: var(--gm-accent);
}

.gm-nav__link i { font-size: 11px; opacity: .7; }

/* Выпадающее с деревом категорий под «Продукція» */
.gm-nav__mega {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 200;
  min-width: 320px;
  max-width: 420px;
  background: var(--gm-bg);
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius);
  box-shadow: 0 10px 34px rgba(20, 17, 14, .12);
  padding: 8px 0;
  max-height: 70vh;
  overflow-y: auto;
  display: none;
}

.gm-nav__item--mega:hover > .gm-nav__mega { display: block; }

/* Внутри лежит штатный {{ menu }} — распрямляем его в вертикальный список */
.gm-nav__mega .nav-container,
.gm-nav__mega .nav-inner,
.gm-nav__mega .main-menu,
.gm-nav__mega #menu {
  float: none; width: auto; background: none; border: 0; padding: 0; margin: 0;
}

.gm-nav__mega .nav-responsive,
.gm-nav__mega .res-menu-close,
.gm-nav__mega .top_level.home { display: none; }

.gm-nav__mega ul.nav.navbar-nav {
  display: block !important;
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
}

.gm-nav__mega ul.nav.navbar-nav > li {
  float: none !important;
  width: auto !important;
  display: block;
}

.gm-nav__mega ul.nav.navbar-nav > li > a {
  display: block;
  padding: 9px 18px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--gm-ink);
  text-transform: none;
  border: 0;
  white-space: normal;
}

.gm-nav__mega ul.nav.navbar-nav > li > a:hover {
  background: var(--gm-surface);
  color: var(--gm-accent);
}

.gm-nav__mega .img-icon { display: none; }
.gm-nav__mega .dropdown-menu.megamenu { display: none !important; }

/* Инструменты справа */
.gm-tools {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
  margin-left: auto;
}

.gm-tools__phone {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gm-ink);
  white-space: nowrap;
}

.gm-tools__phone i { color: var(--gm-ink-muted); font-size: 13px; }
.gm-tools__phone:hover { color: var(--gm-accent); }

.gm-tools__btn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--gm-ink);
  font-size: 16px;
}

.gm-tools__btn:hover { color: var(--gm-accent); }

/* Корзина: иконка со счётчиком, без суммы — как в макете */
.gm-tools__cart { position: relative; }

.gm-tools__cart #cart > .btn,
.gm-tools__cart .btn-cart {
  background: transparent;
  border: 0;
  padding: 0 4px;
  color: var(--gm-ink);
  font-size: 16px;
  box-shadow: none;
}

.gm-tools__cart #cart > .btn:hover { color: var(--gm-accent); }

.gm-tools__cart #cart-total {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--gm-accent);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-indent: -9999px;
}

/* Счётчик рисуем из data-атрибута, если тема его отдаёт;
   иначе остаётся просто оранжевая точка */
/* лічильник малюється з .gm-tools__cart[data-count] — див. розділ 31 */

/* Переключатель языка — компактный, текстом */
.gm-tools__lang form { margin: 0; }

.gm-tools__lang .btn-group > .btn,
.gm-tools__lang .dropdown-toggle {
  background: transparent;
  border: 0;
  padding: 6px 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gm-ink);
  box-shadow: none;
  text-transform: uppercase;
}

.gm-tools__lang .dropdown-toggle:hover { color: var(--gm-accent); }
.gm-tools__lang img { display: none; }

.gm-account-menu { min-width: 190px; padding: 6px 0; }
.gm-account-menu > li > a { padding: 8px 16px; font-size: 13.5px; }
.gm-account-menu > li > a:hover { background: var(--gm-surface); color: var(--gm-accent); }

/* Кнопка консультации */
.gm-cta {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 18px;
  border-radius: var(--gm-radius);
  background: var(--gm-accent);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-transform: none;
}

.gm-cta:hover { background: var(--gm-accent-hover); color: #fff; }

/* --------------------------------------------------------------------------
   11.3 Ряд 3 — поиск, выровнен по началу навигации
   -------------------------------------------------------------------------- */

.gm-searchrow {
  border-bottom: 1px solid var(--gm-line);
  padding: 12px 0 14px;
}

.gm-searchrow__inner {
  max-width: 740px;
  margin-left: 188px;
}

.gm-searchrow #searchbox { display: flex; width: 100%; }

.gm-searchrow #searchbox input[name="search"] {
  flex: 1 1 auto;
  height: 42px;
  border: 1px solid var(--gm-line);
  border-right: 0;
  border-radius: var(--gm-radius) 0 0 var(--gm-radius);
  padding: 0 14px;
  font-size: 14px;
  color: var(--gm-ink);
  background: var(--gm-bg);
  box-shadow: none;
}

.gm-searchrow #searchbox input[name="search"]::placeholder { color: var(--gm-ink-muted); }
.gm-searchrow #searchbox input[name="search"]:focus { border-color: var(--gm-accent); outline: none; }

.gm-searchrow #searchbox .input-group-btn { flex: 0 0 auto; }

.gm-searchrow #searchbox .btn {
  width: 52px;
  height: 42px;
  border-radius: 0 var(--gm-radius) var(--gm-radius) 0;
  background: var(--gm-accent);
  border: 1px solid var(--gm-accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.gm-searchrow #searchbox .btn:hover {
  background: var(--gm-accent-hover);
  border-color: var(--gm-accent-hover);
}

.gm-searchrow #searchbox .btn::before {
  font-family: 'Font Awesome 5 Free', FontAwesome;
  font-weight: 900;
  content: '\f002';
  font-size: 16px;
}

/* --------------------------------------------------------------------------
   11.4 Адаптив
   -------------------------------------------------------------------------- */

/* Навигация в один ряд держится примерно до 1400px.
   Ниже — переносим её под логотип, чтобы не сжимать инструменты. */
@media (max-width: 1400px) {
  .gm-main__inner { flex-wrap: wrap; gap: 14px 20px; padding: 12px 0; min-height: 0; }
  .gm-nav { order: 3; flex-basis: 100%; }
  .gm-nav__list { flex-wrap: wrap; }
  .gm-nav__link { padding: 8px 10px; }
  .gm-searchrow__inner { margin-left: 0; max-width: none; }
  .gm-tools__phone { font-size: 13px; }
}

@media (max-width: 991px) {
  .gm-topbar__phones { margin-left: 0; flex-basis: 100%; gap: 18px; }
  .gm-topbar__official { display: none; }
  .gm-logo__mark { height: 42px; }
  .gm-logo__title { font-size: 15px; }
  .gm-logo__note { display: none; }
  .gm-cta { font-size: 12.5px; padding: 0 14px; }
}

@media (max-width: 767px) {
  .gm-topbar__activity { font-size: 11.5px; }
  .gm-topbar__phones { gap: 12px; }
  .gm-phone__label { display: none; }
  .gm-tools { gap: 10px; }
  .gm-tools__phone span { display: none; }
  .gm-cta { display: none; }
  .gm-nav__list { gap: 0; }
  .gm-nav__item { flex: 1 1 auto; }
  .gm-nav__link { width: 100%; justify-content: center; font-size: 13px; padding: 9px 6px; }
  .gm-nav__mega { position: static; max-width: none; min-width: 0; box-shadow: none; }
}
/* ==========================================================================
   12. Шапка v2 — правки после примерки
   ========================================================================== */

/* 12.1 Навигация не должна выдавливать инструменты.
   Отдаём ей ровно свободное место и разрешаем сжиматься. */
.gm-main__inner { flex-wrap: nowrap; }

.gm-nav {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
}

.gm-nav__list { flex-wrap: nowrap; }

.gm-tools {
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: 10px;
}

/* 12.2 Соцсети — кружки. Тема навешивает свои border-radius на ссылки. */
.gm-social__link {
  border-radius: 50% !important;
  flex: 0 0 auto;
}

/* 12.3 Корзина: тема пишет в #cart-total текстом «Товаров: 0 (0.00 Грн.)».
   Прячем текст, показываем только точку-счётчик. */
.gm-tools__cart #cart-total {
  text-indent: 0;
  font-size: 0;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
}

.gm-tools__cart #cart-total::after { content: ''; }

/* 12.4 Язык: скрываем подпись «Язык», оставляем код */
.gm-tools__lang .dropdown-toggle span:not(.caret) { display: none; }

.gm-tools__lang .dropdown-toggle::before {
  content: 'УКР';
  font-size: 13px;
  font-weight: 600;
}

/* 12.5 Поиск — от начала навигации, как в макете */
.gm-searchrow__inner { margin-left: 208px; max-width: 700px; }

@media (max-width: 1500px) {
  .gm-nav__link { padding: 9px 9px; font-size: 13.5px; }
  .gm-tools { gap: 11px; }
  .gm-tools__phone { font-size: 13px; }
}

@media (max-width: 1280px) {
  .gm-main__inner { flex-wrap: wrap; }
  .gm-nav { order: 3; flex-basis: 100%; overflow: visible; }
  .gm-nav__list { flex-wrap: wrap; }
  .gm-searchrow__inner { margin-left: 0; max-width: none; }
}

/* 12.6 Логотип одной картинкой — текст входит в сам файл */
.gm-logo__mark { height: 54px; max-width: 250px; object-fit: contain; }

/* 12.7 Меню не обрезаем: пусть переносится, чем теряет пункты */
.gm-nav { overflow: visible; flex: 1 1 auto; }
.gm-nav__list { flex-wrap: wrap; row-gap: 0; }

/* Телефон в инструментах дублирует верхнюю полосу — на средних
   экранах скрываем, чтобы освободить место навигации */
@media (max-width: 1600px) {
  .gm-tools__phone { display: none; }
}

/* Подпись под логотипом входит в сам файл логотипа */
.gm-logo__text { display: none; }
/* ==========================================================================
   13. Блоки главной: Рекомендуем, Новинки, Хіти, Категорії
   Все они делят разметку темы: .box > .box-content > .box-product >
   .product-items|.slider-item > .product-block
   Дописывается в конец goldmandarin.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   13.1 Заголовки блоков
   -------------------------------------------------------------------------- */

.box.featured,
.box.latest,
.box.bestseller,
.box.ProductbyCategory {
  margin: 0 0 8px;
  padding: 46px 0 10px;
}

.box .sub_title,
.box .sub_title_latest {
  display: block;
  text-align: center;
  font-family: var(--gm-font-text);
  font-size: 13px;
  color: var(--gm-ink-muted);
  margin: 0 0 6px;
  order: -1;
}

.box .box-heading {
  text-align: center;
  font-family: var(--gm-font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--gm-ink);
  margin: 0 0 26px;
  padding: 0;
  background: none;
  border: 0;
}

/* --------------------------------------------------------------------------
   13.2 Сетка карточек — общая для всех модулей
   -------------------------------------------------------------------------- */

.box .box-content { padding: 0; }

.box .box-product.productbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 22px;
  border: 0;
  padding: 0;
}

.box .box-product.productbox-grid > .product-items,
.box .box-product.productbox-grid > .slider-item {
  width: auto;
  float: none;
  padding: 0;
  border: 0;
  margin: 0;
}

/* Карусель: у неё разметку задаёт owl, сетку не навязываем */
.box .box-product.product-carousel .slider-item { padding: 0 8px; }

/* Карточка */
.box .product-block {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius-lg);
  overflow: hidden;
  background: var(--gm-bg);
}

.box .product-block:hover { border-color: var(--gm-accent); }

.box .product-block-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.box .image_cover {
  position: relative;
  background: var(--gm-bg);
}

.box .image_cover .image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.box .image_cover .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.box .percentsaving {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  min-width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--gm-accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.box .product-details {
  padding: 13px 15px 15px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  text-align: left;
}

.box .product-details .caption { padding: 0; flex: 1 1 auto; }

.box .product-details h4,
.box .product-details .name {
  font-family: var(--gm-font-text);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 7px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}

.box .product-details h4 a { color: var(--gm-ink); }
.box .product-details h4 a:hover { color: var(--gm-accent); }

.box .product-details p.price {
  font-family: var(--gm-font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--gm-ink);
  margin: 0 0 10px;
}

.box .product-details p.price .price-new { color: var(--gm-ink); }

.box .product-details p.price .price-old {
  font-family: var(--gm-font-text);
  font-size: 13px;
  font-weight: 400;
  color: var(--gm-ink-muted);
  text-decoration: line-through;
  margin-left: 6px;
}

.box .product-details p.description {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--gm-ink-muted);
  margin: 0 0 11px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Кнопка всегда видна, а не только при наведении */
.box .product-block .cart_button,
.box .product-block .stock_status {
  width: 100%;
  height: 40px;
  margin-top: auto;
  font-size: 13.5px;
  font-weight: 600;
  text-transform: none;
  opacity: 1;
  visibility: visible;
  position: static;
}

.box .product-block .stock_status {
  background: var(--gm-surface);
  border-color: var(--gm-line);
  color: var(--gm-ink-muted);
  cursor: not-allowed;
}

/* Иконки избранного и быстрого просмотра — по наведению */
.box .product_hover_block {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  opacity: 0;
  transition: opacity .15s ease;
}

.box .product-block:hover .product_hover_block { opacity: 1; }

.box .product_hover_block .action {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* --------------------------------------------------------------------------
   13.3 Табы категорий — без полосы на всю ширину
   -------------------------------------------------------------------------- */

.ProductbyCategory .htabs {
  background: transparent;
  border: 0;
  margin-bottom: 26px;
}

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

.ProductbyCategory .etabs .tab {
  float: none;
  width: auto;
  margin: 0;
  background: none;
  border: 0;
}

.ProductbyCategory .etabs .tab a {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border: 1px solid var(--gm-line);
  border-radius: 999px;
  background: var(--gm-bg);
  color: var(--gm-ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-transform: none;
  white-space: nowrap;
  height: auto;
}

.ProductbyCategory .etabs .tab a:hover {
  border-color: var(--gm-accent);
  color: var(--gm-accent);
  background: var(--gm-accent-soft);
}

.ProductbyCategory .etabs .tab a.active,
.ProductbyCategory .etabs .tab.active a {
  background: var(--gm-accent);
  border-color: var(--gm-accent);
  color: #fff;
}

/* Иконки темы не подходят каталогу: футболка, монитор, кресло.
   Выводим только подписи. */
.ProductbyCategory .etabs .tab .img-icon { display: none; }

.ProductbyCategory .etabs .tab .icon-title {
  white-space: normal;
  max-width: 22ch;
}

.ProductbyCategory .product-column .container,
.ProductbyCategory .htabs .container { padding-left: 0; padding-right: 0; }

.ProductbyCategory .product-column .row,
.ProductbyCategory .htabs .row { margin-left: 0; margin-right: 0; }

.ProductbyCategory .box-product.notproduct { display: none; }

/* --------------------------------------------------------------------------
   13.4 Популярные категории — выравнивание и заглушки
   -------------------------------------------------------------------------- */

.gm-section__head { padding-right: 2px; }

/* Заглушка ocStore вместо фото категории читается как ошибка.
   Пока фото не заведены, показываем ровную подложку. */
.gm-cat__media img[src*="placeholder"],
.gm-cat__media img[src*="no_image"] {
  object-fit: contain;
  padding: 26%;
  opacity: .25;
  background: var(--gm-surface);
}

/* --------------------------------------------------------------------------
   13.5 Мобильные
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
  .box.featured, .box.latest, .box.bestseller, .box.ProductbyCategory { padding: 32px 0 8px; }
  .box .box-heading { font-size: 22px; margin-bottom: 20px; }
  .box .box-product.productbox-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
}

@media (max-width: 767px) {
  .box .box-product.productbox-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .box .product-details { padding: 11px 12px 12px; }
  .box .product-details p.price { font-size: 16px; }
  .box .product_hover_block { opacity: 1; }
  .ProductbyCategory .etabs { gap: 6px; }
  .ProductbyCategory .etabs .tab a { padding: 8px 13px; font-size: 12.5px; }
}

/* ==========================================================================
   14. Блоки главной — правки по фактическим вычисленным стилям
   ========================================================================== */

/* 14.1 Тема задаёт блокам float и фиксированную ширину — сбрасываем */
.box.featured,
.box.latest,
.box.bestseller,
.box.ProductbyCategory {
  float: none;
  width: 100%;
  clear: both;
}

.box .box-product.productbox-grid,
.box .box-product.product-carousel {
  float: none;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.box .box-product.productbox-grid > .product-items,
.box .box-product.productbox-grid > .slider-item {
  float: none;
  width: auto;
  max-width: none;
  margin: 0;
}

/* 14.2 Отрицательные отступы .row внутри модулей выносили блок за контейнер */
.box .box-content > .row,
.ProductbyCategory .product-column > .container > .row,
.ProductbyCategory .htabs > .container > .row {
  margin-left: 0;
  margin-right: 0;
}

.ProductbyCategory .product-column > .container,
.ProductbyCategory .htabs > .container {
  width: 100%;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* 14.3 Табы: тема даёт ссылкам float и ширину в процентах */
.ProductbyCategory .htabs {
  display: block;
  background: transparent;
}

.ProductbyCategory .etabs {
  float: none;
  width: 100%;
}

.ProductbyCategory .etabs .tab a {
  float: none;
  width: auto;
  max-width: 260px;
  height: auto;
  min-height: 0;
}

/* Подпись категории лежит внутри .img-icon — прячем только картинку,
   а не весь элемент, иначе пропадает текст */
.ProductbyCategory .etabs .tab .img-icon {
  display: none !important;
}

.ProductbyCategory .etabs .tab .icon-title {
  display: inline-block !important;
  white-space: normal;
  max-width: 24ch;
  line-height: 1.25;
}

/* ==========================================================================
   15. Блоки главной — финальная правка по вычисленным значениям
   ========================================================================== */

/* 15.1 Класс row висит на самом .box-content, а не на вложенном div.
   Отсюда margin-left:-15px и вылет за контейнер на 30px. */
.box .box-content.row,
.box .box-content {
  margin-left: 0;
  margin-right: 0;
}

/* 15.2 Табы: ширину пилюле задаёт тема в процентах — снимаем полностью */
.ProductbyCategory .etabs .tab a {
  width: auto !important;
  max-width: none;
  min-width: 0;
  flex: 0 0 auto;
  padding: 10px 18px;
  white-space: normal;
  text-align: center;
}

.ProductbyCategory .etabs .tab a .icon-title {
  display: inline !important;
  white-space: normal;
  max-width: none;
  font-size: 13px;
  line-height: 1.3;
}

/* Активный таб тема помечает классом selected, а не active */
.ProductbyCategory .etabs .tab a.selected {
  background: var(--gm-accent);
  border-color: var(--gm-accent);
  color: #fff;
}

.ProductbyCategory .etabs .tab a.selected .icon-title { color: #fff; }

/* 15.3 Оранжевую полосу красит .etabs, а не .htabs.
   Из-за неё белый текст неактивных табов сливался с белой пилюлей. */
.ProductbyCategory .etabs {
  background: transparent !important;
  padding: 0;
}

.ProductbyCategory .etabs .tab a {
  background: var(--gm-bg) !important;
  color: var(--gm-ink) !important;
  border: 1px solid var(--gm-line);
}

.ProductbyCategory .etabs .tab a .icon-title { color: inherit !important; }

.ProductbyCategory .etabs .tab a:hover {
  background: var(--gm-accent-soft) !important;
  color: var(--gm-accent) !important;
  border-color: var(--gm-accent);
}

.ProductbyCategory .etabs .tab a.selected {
  background: var(--gm-accent) !important;
  color: #fff !important;
  border-color: var(--gm-accent);
}
/* ==========================================================================
   16. Товарные блоки — своя разметка (gm-block / gm-plist / gm-p)
   Шаблоны модулей заменены на собственные, поэтому правила темы
   (float, проценты, инлайновые цвета) на эти классы не действуют
   и !important не нужен.
   Дописывается в конец goldmandarin.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   16.1 Блок и заголовок
   -------------------------------------------------------------------------- */

.gm-block {
  padding: 46px 0 6px;
  clear: both;
}

.gm-block__lead {
  text-align: center;
  font-size: 13px;
  color: var(--gm-ink-muted);
  margin: 0 0 6px;
}

.gm-block__title {
  text-align: center;
  font-family: var(--gm-font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--gm-ink);
  margin: 0 0 26px;
}

.gm-block__empty {
  text-align: center;
  color: var(--gm-ink-muted);
  font-size: 14px;
  padding: 26px 0;
  margin: 0;
}

/* --------------------------------------------------------------------------
   16.2 Сетка: отступы и равная высота
   -------------------------------------------------------------------------- */

.gm-plist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 20px;
  align-items: stretch;
}

/* --------------------------------------------------------------------------
   16.3 Карточка
   -------------------------------------------------------------------------- */

.gm-p {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--gm-bg);
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius-lg);
  overflow: hidden;
}

.gm-p:hover { border-color: var(--gm-accent); }

/* Фото не растягиваем и не обрезаем: contain вписывает кадр целиком.
   У каталога вертикальные снимки плитки рядом с рендерами на белом,
   поэтому фиксированная рамка одной высоты и поле вокруг. */
.gm-p__media {
  position: relative;
  display: block;
  height: 210px;
  padding: 12px;
  background: var(--gm-bg);
  flex: 0 0 auto;
}

.gm-p__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.gm-p__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  min-width: 40px;
  height: 40px;
  padding: 0 6px;
  border-radius: 50%;
  background: var(--gm-accent);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.gm-p__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 12px 14px 14px;
  border-top: 1px solid var(--gm-line);
}

.gm-p__name {
  font-family: var(--gm-font-text);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}

.gm-p__name a { color: var(--gm-ink); }
.gm-p__name a:hover { color: var(--gm-accent); }

.gm-p__price {
  margin: 0 0 12px;
  min-height: 1.5em;
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
}

.gm-p__new {
  font-family: var(--gm-font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--gm-ink);
}

.gm-p__old {
  font-size: 13px;
  color: var(--gm-ink-muted);
  text-decoration: line-through;
}

.gm-p__btn {
  width: 100%;
  height: 40px;
  margin-top: auto;
  border: 1px solid var(--gm-accent);
  border-radius: var(--gm-radius);
  background: var(--gm-accent);
  color: #fff;
  font-family: var(--gm-font-text);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease;
}

.gm-p__btn:hover {
  background: var(--gm-accent-hover);
  border-color: var(--gm-accent-hover);
}

.gm-p__btn--off {
  background: var(--gm-surface);
  border-color: var(--gm-line);
  color: var(--gm-ink-muted);
  cursor: not-allowed;
}

.gm-p__btn--off:hover {
  background: var(--gm-surface);
  border-color: var(--gm-line);
}

/* --------------------------------------------------------------------------
   16.4 Табы категорий
   -------------------------------------------------------------------------- */

.gm-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 0 24px;
}

.gm-tabs__btn {
  padding: 10px 18px;
  border: 1px solid var(--gm-line);
  border-radius: 999px;
  background: var(--gm-bg);
  color: var(--gm-ink);
  font-family: var(--gm-font-text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  max-width: 300px;
}

.gm-tabs__btn:hover {
  border-color: var(--gm-accent);
  color: var(--gm-accent);
  background: var(--gm-accent-soft);
}

.gm-tabs__btn.is-active {
  background: var(--gm-accent);
  border-color: var(--gm-accent);
  color: #fff;
}

.gm-tabs__panel { display: none; }
.gm-tabs__panel.is-active { display: block; }

/* --------------------------------------------------------------------------
   16.5 Мобильные
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
  .gm-block { padding: 32px 0 6px; }
  .gm-block__title { font-size: 22px; margin-bottom: 20px; }
  .gm-plist { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
  .gm-p__media { height: 170px; }
}

@media (max-width: 767px) {
  .gm-plist { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .gm-p__media { height: 148px; padding: 9px; }
  .gm-p__body { padding: 10px 11px 12px; }
  .gm-p__new { font-size: 16px; }
  .gm-tabs { gap: 6px; }
  .gm-tabs__btn { padding: 8px 13px; font-size: 12.5px; }
}
/* ==========================================================================
   17. Футер
   Своя разметка (gm-footer), правила темы на неё не действуют.
   Дописывается в конец goldmandarin.css
   ========================================================================== */

.gm-footer {
  background: #1B1B19;
  color: rgba(245, 242, 237, .72);
  font-size: 13.5px;
  line-height: 1.55;
  margin-top: 60px;
}

/* --------------------------------------------------------------------------
   17.1 Сетка колонок
   -------------------------------------------------------------------------- */

.gm-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  padding: 52px 0 44px;
}

.gm-footer__title {
  font-family: var(--gm-font-display);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 16px;
  letter-spacing: .01em;
}

/* --------------------------------------------------------------------------
   17.2 Колонка с контактами
   -------------------------------------------------------------------------- */

.gm-footer__about {
  margin: 0 0 20px;
  max-width: 42ch;
  color: rgba(245, 242, 237, .6);
}

.gm-footer__contacts {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
}

.gm-footer__contacts li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin-bottom: 11px;
}

.gm-footer__contacts i {
  flex: 0 0 auto;
  width: 15px;
  margin-top: 4px;
  color: var(--gm-accent);
  font-size: 13px;
  text-align: center;
}

.gm-footer__contacts a {
  color: rgba(245, 242, 237, .86);
  font-weight: 500;
}

.gm-footer__contacts a:hover { color: var(--gm-accent); }

/* Соцсети — приглушённые кружки, в цвет бренда при наведении */
.gm-footer__social { display: flex; gap: 9px; }

.gm-fsoc {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: rgba(245, 242, 237, .8);
  font-size: 13px;
}

.gm-fsoc:hover { color: #fff; }
.gm-fsoc--fb:hover { background: #1877F2; }
.gm-fsoc--tt:hover { background: #000; }
.gm-fsoc--ig:hover { background: linear-gradient(45deg, #F9CE34, #EE2A7B, #6228D7); }
.gm-fsoc--yt:hover { background: #FF0000; }

/* --------------------------------------------------------------------------
   17.3 Колонки ссылок
   -------------------------------------------------------------------------- */

.gm-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gm-footer__links li { margin-bottom: 9px; }

.gm-footer__links a {
  color: rgba(245, 242, 237, .72);
  display: inline-block;
}

.gm-footer__links a:hover {
  color: var(--gm-accent);
  padding-left: 3px;
}

/* --------------------------------------------------------------------------
   17.4 Нижняя полоса
   -------------------------------------------------------------------------- */

.gm-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 18px 0;
}

.gm-footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.gm-footer__copy {
  margin: 0;
  font-size: 13px;
  color: rgba(245, 242, 237, .5);
}

.gm-footer__bottom-inner a { color: rgba(245, 242, 237, .6); }
.gm-footer__bottom-inner a:hover { color: var(--gm-accent); }

/* --------------------------------------------------------------------------
   17.5 Мобильные
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
  .gm-footer { margin-top: 40px; }
  .gm-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    padding: 38px 0 32px;
  }
  .gm-footer__col--brand { grid-column: 1 / -1; }
}

@media (max-width: 575px) {
  .gm-footer__grid { grid-template-columns: 1fr; gap: 26px; }
  .gm-footer__about { max-width: none; }
  .gm-footer__bottom-inner { justify-content: center; text-align: center; }
}

/* ==========================================================================
   18. Переключатель языка (своя разметка gm-lang)
   Тема выводила его через ul.language-menu и раскрывала своим CSS,
   который мы перекрыли — отсюда неработающий выпадающий список.
   Дописывается в конец goldmandarin.css
   ========================================================================== */

.gm-lang { position: relative; margin: 0; }

.gm-lang__current {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 6px;
  background: transparent;
  border: 0;
  color: var(--gm-ink);
  font-family: var(--gm-font-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.gm-lang__current:hover { color: var(--gm-accent); }
.gm-lang__current i { font-size: 11px; opacity: .7; }

.gm-lang__list {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 220;
  min-width: 150px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: var(--gm-bg);
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius);
  box-shadow: 0 8px 26px rgba(20, 17, 14, .12);
  display: none;
}

.gm-lang.is-open .gm-lang__list { display: block; }

.gm-lang__item {
  display: block;
  width: 100%;
  padding: 8px 16px;
  background: transparent;
  border: 0;
  text-align: left;
  font-family: var(--gm-font-text);
  font-size: 13.5px;
  color: var(--gm-ink);
  cursor: pointer;
}

.gm-lang__item:hover { background: var(--gm-surface); color: var(--gm-accent); }

.gm-lang__item.is-active {
  color: var(--gm-accent);
  font-weight: 600;
}

/* Отменяем костыль из раздела 12.4: код языка теперь выводит шаблон */
.gm-tools__lang .dropdown-toggle::before { content: none; }
.gm-tools__lang .dropdown-toggle span:not(.caret) { display: inline; }
/* ==========================================================================
   19. Страница категории по макету заказчика
   Своя разметка (gm-catpage / gm-cgrid / gm-ct), правила темы не мешают.
   Дописывается в конец goldmandarin.css
   ========================================================================== */

.gm-catpage {
  background: var(--gm-bg);
  border: 1px solid var(--gm-line);
  border-radius: 18px;
  padding: 26px 26px 22px;
  margin: 26px 0 0;
}

/* --------------------------------------------------------------------------
   19.1 Заголовок с иконкой и линиями по бокам
   -------------------------------------------------------------------------- */

.gm-catpage__head {
  text-align: center;
  margin-bottom: 24px;
}

.gm-catpage__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 8px;
  color: var(--gm-accent);
  font-size: 18px;
}

.gm-catpage__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-family: var(--gm-font-display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: .01em;
  margin: 0 0 18px;
}

/* Декоративные линии слева и справа от заголовка */
.gm-catpage__title::before,
.gm-catpage__title::after {
  content: '';
  height: 1px;
  flex: 1 1 auto;
  max-width: 150px;
  background: linear-gradient(90deg, transparent, var(--gm-line));
}

.gm-catpage__title::after {
  background: linear-gradient(90deg, var(--gm-line), transparent);
}

/* --------------------------------------------------------------------------
   19.2 Плашки свойств
   -------------------------------------------------------------------------- */

.gm-catprops {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gm-catprop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 17px;
  border: 1px solid var(--gm-line);
  border-radius: 999px;
  background: var(--gm-bg);
  font-size: 13px;
  font-weight: 500;
  color: var(--gm-ink);
  white-space: nowrap;
}

.gm-catprop i { color: var(--gm-accent); font-size: 13px; }

/* --------------------------------------------------------------------------
   19.3 Подкатегории
   -------------------------------------------------------------------------- */

.gm-catsubs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
}

.gm-catsub {
  display: inline-block;
  padding: 8px 15px;
  border: 1px solid var(--gm-line);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gm-ink);
}

.gm-catsub:hover {
  border-color: var(--gm-accent);
  color: var(--gm-accent);
  background: var(--gm-accent-soft);
}

/* --------------------------------------------------------------------------
   19.4 Сетка плиток: фото на всю карточку, подпись поверх
   -------------------------------------------------------------------------- */

.gm-cgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

.gm-ct {
  position: relative;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  background: var(--gm-surface);
  aspect-ratio: 1 / 1;
}

.gm-ct__media {
  position: absolute;
  inset: 0;
  display: block;
}

.gm-ct__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .25s ease;
}

.gm-ct:hover .gm-ct__media img { transform: scale(1.04); }

/* Подпись поверх градиента — фото у товаров разной яркости,
   сплошной градиент держит читаемость на любом. */
.gm-ct__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 26px 10px 9px;
  background: linear-gradient(180deg, rgba(12, 10, 8, 0) 0%, rgba(12, 10, 8, .82) 62%);
}

.gm-ct__name {
  flex: 1 1 auto;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gm-ct__go {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--gm-accent);
  color: var(--gm-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
}

.gm-ct:hover .gm-ct__go {
  background: var(--gm-accent);
  color: #fff;
}

/* --------------------------------------------------------------------------
   19.5 Нижний блок преимуществ
   -------------------------------------------------------------------------- */

.gm-catadv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0;
  border: 1px solid var(--gm-line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--gm-bg);
}

.gm-catadv__item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px 18px;
  border-left: 1px solid var(--gm-line);
}

.gm-catadv__item:first-child { border-left: 0; }

.gm-catadv__icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gm-accent);
  font-size: 18px;
}

.gm-catadv__title {
  font-family: var(--gm-font-text);
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 2px;
  line-height: 1.25;
}

.gm-catadv__note {
  font-size: 12.5px;
  color: var(--gm-ink-muted);
  margin: 0;
  line-height: 1.3;
}

/* --------------------------------------------------------------------------
   19.6 Пагинация, описание, пустая категория
   -------------------------------------------------------------------------- */

.gm-catpage__pag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  font-size: 13px;
  color: var(--gm-ink-muted);
}

.gm-catpage__empty {
  text-align: center;
  color: var(--gm-ink-muted);
  padding: 18px 0;
  margin: 0;
}

.gm-catdesc {
  margin: 22px 0 0;
  padding: 22px 26px;
  background: var(--gm-bg);
  border: 1px solid var(--gm-line);
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--gm-ink-muted);
}

.gm-catdesc h1, .gm-catdesc h2, .gm-catdesc h3 {
  font-size: 19px;
  color: var(--gm-ink);
  margin: 0 0 12px;
}

/* --------------------------------------------------------------------------
   19.7 Мобильные
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
  .gm-catpage { padding: 20px 16px 18px; border-radius: 14px; }
  .gm-catpage__title { font-size: 22px; gap: 12px; }
  .gm-catpage__title::before, .gm-catpage__title::after { max-width: 60px; }
  .gm-cgrid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
  .gm-catadv__item { border-left: 0; border-top: 1px solid var(--gm-line); }
  .gm-catadv__item:first-child { border-top: 0; }
}

@media (max-width: 575px) {
  .gm-catpage__title { font-size: 18px; }
  .gm-catpage__title::before, .gm-catpage__title::after { display: none; }
  .gm-cgrid { grid-template-columns: repeat(2, 1fr); }
  .gm-catprop { padding: 7px 13px; font-size: 12px; }
}

/* ==========================================================================
   20. Категория — плитки крупнее
   ========================================================================== */

/* 20.1 Плитка шире: 6 в ряд на широком экране вместо 8-9 */
.gm-cgrid {
  grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
  gap: 16px;
}

.gm-ct { border-radius: 12px; }

/* Подпись крупнее под увеличенную плитку */
.gm-ct__bar { padding: 32px 12px 11px; }

.gm-ct__name { font-size: 13.5px; }

.gm-ct__go { width: 26px; height: 26px; font-size: 10px; }

@media (max-width: 991px) {
  .gm-cgrid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
}

@media (max-width: 575px) {
  .gm-cgrid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   21. Карточки на главной — гибрид плитки из категории и цены с кнопкой
   Заменяет раздел 16.3: старые правила .gm-p остаются в файле,
   но разметка модулей теперь использует .gm-h.
   ========================================================================== */

.gm-h {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* --------------------------------------------------------------------------
   21.1 Плитка с фото — как в категории
   -------------------------------------------------------------------------- */

.gm-h__tile {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: var(--gm-surface);
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
}

.gm-h__media {
  position: absolute;
  inset: 0;
  display: block;
}

.gm-h__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .25s ease;
}

.gm-h:hover .gm-h__media img { transform: scale(1.04); }

.gm-h__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  min-width: 40px;
  height: 40px;
  padding: 0 6px;
  border-radius: 50%;
  background: var(--gm-accent);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.gm-h__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 32px 12px 11px;
  background: linear-gradient(180deg, rgba(12, 10, 8, 0) 0%, rgba(12, 10, 8, .82) 62%);
}

.gm-h__name {
  flex: 1 1 auto;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gm-h__go {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--gm-accent);
  color: var(--gm-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

.gm-h:hover .gm-h__go { background: var(--gm-accent); color: #fff; }

/* --------------------------------------------------------------------------
   21.2 Полоса с ценой и кнопкой
   -------------------------------------------------------------------------- */

.gm-h__foot {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding-top: 10px;
}

.gm-h__price {
  margin: 0 0 9px;
  min-height: 1.4em;
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
}

.gm-h__new {
  font-family: var(--gm-font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--gm-ink);
}

.gm-h__old {
  font-size: 13px;
  color: var(--gm-ink-muted);
  text-decoration: line-through;
}

.gm-h__btn {
  width: 100%;
  height: 38px;
  margin-top: auto;
  border: 1px solid var(--gm-accent);
  border-radius: var(--gm-radius);
  background: var(--gm-accent);
  color: #fff;
  font-family: var(--gm-font-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease;
}

.gm-h__btn:hover {
  background: var(--gm-accent-hover);
  border-color: var(--gm-accent-hover);
}

.gm-h__btn--off {
  background: var(--gm-surface);
  border-color: var(--gm-line);
  color: var(--gm-ink-muted);
  cursor: not-allowed;
}

.gm-h__btn--off:hover { background: var(--gm-surface); border-color: var(--gm-line); }

/* --------------------------------------------------------------------------
   21.3 Сетка под новый размер плиток
   -------------------------------------------------------------------------- */

.gm-plist {
  grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
  gap: 16px;
}

@media (max-width: 991px) {
  .gm-plist { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .gm-h__name { font-size: 12.5px; }
}

@media (max-width: 575px) {
  .gm-plist { grid-template-columns: repeat(2, 1fr); }
  .gm-h__new { font-size: 16px; }
}
/* ==========================================================================
   22. Карточка товара по макету заказчика
   Своя разметка (gm-prod / gm-gal / gm-tabsbox / gm-buy).
   Дописывается в конец goldmandarin.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   22.1 Хлебные крошки
   -------------------------------------------------------------------------- */

.gm-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 22px 0 16px;
  padding: 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.gm-crumbs li + li::before {
  content: '›';
  margin-right: 8px;
  color: var(--gm-ink-muted);
}

.gm-crumbs a { color: var(--gm-ink-muted); }
.gm-crumbs a:hover { color: var(--gm-accent); }
.gm-crumbs li:last-child a { color: var(--gm-ink); }

/* --------------------------------------------------------------------------
   22.2 Две колонки
   -------------------------------------------------------------------------- */

.gm-prod {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}

.gm-prod__title {
  font-family: var(--gm-font-display);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 4px;
}

.gm-prod__sub {
  font-size: 16px;
  color: var(--gm-ink-muted);
  margin: 0 0 20px;
}

/* --------------------------------------------------------------------------
   22.3 Галерея
   -------------------------------------------------------------------------- */

.gm-gal { margin-bottom: 24px; }

.gm-gal__big {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  background: var(--gm-surface);
  aspect-ratio: 3 / 2;
}

.gm-gal__big img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gm-gal__thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.gm-gal__thumb {
  flex: 0 0 auto;
  width: 106px;
  aspect-ratio: 1 / 1;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  background: var(--gm-surface);
}

.gm-gal__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gm-gal__thumb:hover { border-color: var(--gm-accent); }

.gm-gal__thumbs::-webkit-scrollbar { height: 6px; }
.gm-gal__thumbs::-webkit-scrollbar-thumb {
  background: var(--gm-line);
  border-radius: 3px;
}

/* --------------------------------------------------------------------------
   22.4 Отзывы-ссылки под галереей
   -------------------------------------------------------------------------- */

.gm-prod__rev {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  margin-top: 4px;
}

.gm-prod__revlink { color: var(--gm-ink-muted); }
.gm-prod__revlink:hover { color: var(--gm-accent); }
.gm-prod__revsep { color: var(--gm-line); }

/* --------------------------------------------------------------------------
   22.5 Табы справа
   -------------------------------------------------------------------------- */

.gm-tabsbox {
  background: var(--gm-bg);
  border: 1px solid var(--gm-line);
  border-radius: 14px;
  overflow: hidden;
}

.gm-tabsbox__nav {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--gm-line);
  background: var(--gm-bg);
}

.gm-tabsbox__btn {
  padding: 15px 18px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  font-family: var(--gm-font-text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--gm-ink-muted);
  cursor: pointer;
  white-space: nowrap;
}

.gm-tabsbox__btn:hover { color: var(--gm-ink); }

.gm-tabsbox__btn.is-active {
  color: var(--gm-ink);
  border-bottom-color: var(--gm-accent);
}

.gm-tabsbox__panel { display: none; }
.gm-tabsbox__panel.is-active { display: block; }

/* Таблица характеристик внутри табов — без внешней рамки,
   она уже есть у контейнера */
.gm-tabsbox__panel .gm-specs {
  border: 0;
  border-radius: 0;
}

.gm-tabsbox__text,
.gm-tabsbox__panel > #review,
.gm-tabsbox__panel > form {
  padding: 18px 20px;
  font-size: 14px;
  line-height: 1.6;
}

.gm-tabsbox__h {
  font-family: var(--gm-font-display);
  font-size: 17px;
  margin: 0 20px 12px;
}

/* --------------------------------------------------------------------------
   22.6 Калькулятор в карточке
   -------------------------------------------------------------------------- */

.gm-prod__calc { margin-top: 28px; }
.gm-prod__calc .gm-calc { margin: 0; }

/* --------------------------------------------------------------------------
   22.7 Опции, цена, покупка
   -------------------------------------------------------------------------- */

.gm-buy {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr) minmax(0, 260px);
  gap: 26px;
  align-items: start;
  margin-top: 24px;
  padding: 24px 26px;
  background: var(--gm-bg);
  border: 1px solid var(--gm-line);
  border-radius: 14px;
}

.gm-buy__now {
  font-family: var(--gm-font-display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 4px;
}

.gm-buy__old {
  font-size: 15px;
  color: var(--gm-ink-muted);
  text-decoration: line-through;
  margin: 0 0 4px;
}

.gm-buy__tax {
  font-size: 12.5px;
  color: var(--gm-ink-muted);
  margin: 0 0 10px;
}

.gm-buy__stock {
  font-size: 13.5px;
  font-weight: 600;
  color: #228B22;
  margin: 0;
}

.gm-buy__stock--off { color: var(--gm-ink-muted); }

.gm-buy__h {
  font-family: var(--gm-font-display);
  font-size: 16px;
  margin: 0 0 14px;
}

.gm-buy__opt { margin-bottom: 14px; }

.gm-buy__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--gm-ink);
  margin-bottom: 6px;
}

.gm-buy__opt.required .gm-buy__label::after {
  content: ' *';
  color: var(--gm-accent);
}

.gm-buy__opt select.form-control,
.gm-buy__opt input.form-control,
.gm-buy__opt textarea.form-control {
  height: 40px;
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius);
  font-size: 14px;
  box-shadow: none;
  background: var(--gm-bg);
}

.gm-buy__opt textarea.form-control { height: auto; }

.gm-buy__radios {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.gm-buy__radio {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 8px 13px;
  border: 1px solid var(--gm-line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.gm-buy__radio:hover { border-color: var(--gm-accent); }

.gm-buy__radio input { margin: 0; }

.gm-buy__qty {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.gm-buy__qty .gm-buy__label { margin: 0; white-space: nowrap; }

.gm-buy__qty input.form-control {
  width: 72px;
  height: 42px;
  text-align: center;
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius);
  font-size: 15px;
  box-shadow: none;
}

.gm-buy__add {
  width: 100%;
  height: 46px;
  border: 1px solid var(--gm-accent);
  border-radius: var(--gm-radius);
  background: var(--gm-accent);
  color: #fff;
  font-family: var(--gm-font-text);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease;
}

.gm-buy__add:hover {
  background: var(--gm-accent-hover);
  border-color: var(--gm-accent-hover);
}

.gm-buy__links {
  display: flex;
  gap: 14px;
  margin-top: 12px;
}

.gm-buy__link {
  background: none;
  border: 0;
  padding: 0;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--gm-ink-muted);
  cursor: pointer;
}

.gm-buy__link:hover { color: var(--gm-accent); }

.gm-buy__model {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--gm-ink-muted);
}

.gm-buy__model span { font-weight: 600; color: var(--gm-ink); }

/* --------------------------------------------------------------------------
   22.8 Мобильные
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
  .gm-prod { grid-template-columns: 1fr; gap: 24px; }
  .gm-buy { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 767px) {
  .gm-crumbs { font-size: 11px; margin: 14px 0 12px; }
  .gm-prod__title { font-size: 24px; }
  .gm-prod__sub { font-size: 14px; margin-bottom: 16px; }
  .gm-gal__thumb { width: 78px; }
  .gm-tabsbox__btn { padding: 12px 13px; font-size: 12px; }
  .gm-buy { padding: 18px 16px; }
  .gm-buy__now { font-size: 24px; }
}

/* 22.9 Активная миниатюра и курсор на большом фото */
.gm-gal__big { cursor: zoom-in; }
.gm-gal__thumb.is-active { border-color: var(--gm-accent); }

/* ==========================================================================
   23. Карточка — главное фото шире и панорамнее
   ========================================================================== */

/* 23.1 Левая колонка шире правой, как в макете */
@media (min-width: 1200px) {
  .gm-prod { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
}
/* 23.2 Панорамное соотношение вместо 3:2.
   Фото у товаров сняты по-разному, поэтому cover с центром по верхней
   трети: у плитки и кладки интересное обычно выше середины кадра. */
.gm-gal__big { aspect-ratio: 21 / 10; }

.gm-gal__big img { object-position: center 40%; }

/* 23.3 Миниатюры под новую ширину */
.gm-gal__thumb { width: 118px; aspect-ratio: 4 / 3; }

@media (max-width: 1199px) {
  .gm-gal__big { aspect-ratio: 16 / 9; }
}

@media (max-width: 767px) {
  .gm-gal__big { aspect-ratio: 4 / 3; }
  .gm-gal__thumb { width: 86px; }
}

/* 23.4 Главное фото повыше: 21:10 давало слишком узкую полосу */
.gm-gal__big { aspect-ratio: 16 / 9; }

@media (max-width: 1199px) {
  .gm-gal__big { aspect-ratio: 3 / 2; }
}

/* ==========================================================================
   24. Логотип крупнее
   ========================================================================== */

.gm-logo__mark {
  height: 84px;
  max-width: 350px;
  width: auto;
}

/* Строка шапки подрастает под логотип: было 76px, логотип 84 */
.gm-main__inner { min-height: 100px; }

@media (max-width: 1400px) {
  .gm-main__inner { min-height: 0; }
}

@media (max-width: 991px) {
  .gm-logo__mark { height: 58px; max-width: 240px; }
}

@media (max-width: 575px) {
  .gm-logo__mark { height: 46px; max-width: 190px; }
}

/* ========== 25. Плитки кольорів у блоці покупки ========== */
.gm-buy__radios.gm-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:12px}
.gm-buy__radios.gm-tiles .gm-tile{display:flex;flex-direction:column;gap:6px;align-items:stretch;
  border:2px solid transparent;border-radius:4px;padding:0;margin:0;cursor:pointer;background:none;width:auto}
.gm-buy__radios.gm-tiles .gm-tile input{position:absolute;opacity:0;pointer-events:none}
.gm-tile__img{display:block;border:1px solid var(--gm-line);border-radius:3px;overflow:hidden;
  background:var(--gm-surface)}
.gm-tile__img img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.gm-buy__radios.gm-tiles .gm-tile > span:not(.gm-tile__img){font-size:13px;line-height:1.25;
  text-align:center;color:var(--gm-ink);padding:0}
.gm-buy__radios.gm-tiles .gm-tile:hover .gm-tile__img{border-color:var(--gm-accent)}
.gm-buy__radios.gm-tiles .gm-tile:has(input:checked){border-color:var(--gm-accent)}
.gm-buy__radios.gm-tiles .gm-tile:has(input:checked) > span:not(.gm-tile__img){color:var(--gm-accent);font-weight:700}
.gm-buy__sum{margin:10px 0 0;font-size:16px;font-weight:700;color:var(--gm-ink)}
.gm-buy__sum span{font-weight:400;color:var(--gm-ink-muted)}
@media (max-width:767px){
  .gm-buy__radios.gm-tiles{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
}

/* ---- 25.1 Ціна за одиницю, кількість, підсумок ---- */
.gm-buy__unit{margin:-10px 0 14px;font-size:13px;font-weight:700;text-transform:uppercase;
  letter-spacing:.02em;color:var(--gm-ink-muted)}
.gm-qty{display:inline-flex;align-items:stretch;gap:6px}
.gm-qty .gm-step{width:36px;padding:0;border:1px solid var(--gm-line);background:var(--gm-bg);
  border-radius:3px;font-size:18px;line-height:1;cursor:pointer;color:var(--gm-ink)}
.gm-qty .gm-step:hover{border-color:var(--gm-accent);color:var(--gm-accent)}
.gm-qty__input{width:76px;text-align:center}
.gm-buy__rate{margin:12px 0 8px;font-size:13px;font-weight:700;text-transform:uppercase;
  color:var(--gm-ink)}
.gm-buy__sum{margin:0 0 14px;background:var(--gm-accent);color:#fff;border-radius:3px;
  padding:11px 16px;text-align:center;font-size:18px;font-weight:700;min-height:20px}
.gm-buy__sum:empty{display:none}


/* ---- 25.2 Кількість: перенос рядків, підсумок на всю ширину ---- */
.gm-buy__qty{flex-wrap:wrap;align-items:center}
.gm-buy__qty > label{flex:1 0 100%;margin-bottom:6px}
.gm-buy__qty .gm-qty{flex:0 0 auto}
.gm-buy__qty #gm-rate,
.gm-buy__qty #gm-sum{flex:1 0 100%;box-sizing:border-box;max-width:100%}
.gm-buy__rate{margin:12px 0 8px}
.gm-buy__sum{margin:0 0 14px}


/* ==========================================================================
   27. Кошик
   Розмітка штатна (Bootstrap), тому працюємо тільки селекторами.
   ========================================================================== */
#checkout-cart{padding:28px 0 48px}
#checkout-cart .page-title{font-family:var(--gm-font-head);font-size:30px;margin:0 0 22px}

#checkout-cart .alert{border-radius:3px;border:1px solid var(--gm-line);
  background:var(--gm-surface);color:var(--gm-ink);padding:12px 16px;font-size:14px}
#checkout-cart .alert-success{border-color:#2e7d32;background:#f1f8f2}
#checkout-cart .alert-danger{border-color:#c62828;background:#fdf3f3}
#checkout-cart .alert i{color:var(--gm-accent);margin-right:6px}

/* --- таблиця товарів: десктоп --- */
#checkout-cart .full-view{display:block;border:1px solid var(--gm-line);border-radius:3px;overflow-x:auto}
#checkout-cart .shopping-cart.responsive{display:none}
#checkout-cart table.shopping-cart{width:100%;margin:0;border:0;border-collapse:collapse}
#checkout-cart table.shopping-cart > thead > tr > td{background:var(--gm-surface);
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  color:var(--gm-ink-muted);padding:12px 14px;border:0;border-bottom:1px solid var(--gm-line);
  white-space:nowrap}
#checkout-cart table.shopping-cart > tbody > tr > td{padding:14px;border:0;
  border-bottom:1px solid var(--gm-line);vertical-align:middle;font-size:14px}
#checkout-cart table.shopping-cart > tbody > tr:last-child > td{border-bottom:0}
#checkout-cart table.shopping-cart .img-thumbnail{width:78px;height:78px;object-fit:cover;
  border:1px solid var(--gm-line);border-radius:3px;padding:0;background:var(--gm-surface)}
#checkout-cart table.shopping-cart a{color:var(--gm-ink);font-weight:600}
#checkout-cart table.shopping-cart a:hover{color:var(--gm-accent)}
#checkout-cart table.shopping-cart small{display:inline-block;color:var(--gm-ink-muted);font-size:12.5px}
#checkout-cart table.shopping-cart td.text-right{font-weight:700;white-space:nowrap}

/* --- кількість: поле + оновити + видалити --- */
#checkout-cart .input-group.btn-block{display:flex;gap:6px;max-width:170px!important;width:auto}
#checkout-cart .input-group .form-control{width:60px;flex:0 0 60px;height:38px;text-align:center;
  border:1px solid var(--gm-line);border-radius:3px;box-shadow:none;font-size:15px}
#checkout-cart .input-group-btn{display:flex;gap:6px;width:auto;font-size:0}
#checkout-cart .input-group-btn .btn{width:38px;height:38px;padding:0;border-radius:3px;
  display:inline-flex;align-items:center;justify-content:center;font-size:14px;border:1px solid transparent}
#checkout-cart .input-group-btn .btn-primary{background:var(--gm-accent);border-color:var(--gm-accent);color:#fff}
#checkout-cart .input-group-btn .btn-primary:hover{filter:brightness(.93)}
#checkout-cart .input-group-btn .btn-danger{background:var(--gm-bg);border-color:var(--gm-line);color:var(--gm-ink-muted)}
#checkout-cart .input-group-btn .btn-danger:hover{border-color:#c62828;color:#c62828;background:var(--gm-bg)}

/* --- підсумки --- */
#checkout-cart .col-sm-offset-8 table.table-bordered{width:100%;border:1px solid var(--gm-line);
  border-radius:3px;border-collapse:separate;border-spacing:0;overflow:hidden;background:var(--gm-surface)}
#checkout-cart .col-sm-offset-8 table td{border:0;border-bottom:1px solid var(--gm-line);
  padding:11px 14px;font-size:14px}
#checkout-cart .col-sm-offset-8 table tr:last-child td{border-bottom:0;background:var(--gm-bg);
  font-size:17px;font-weight:700}
#checkout-cart .col-sm-offset-8 table td strong{font-weight:600;color:var(--gm-ink-muted)}
#checkout-cart .col-sm-offset-8 table tr:last-child td strong{color:var(--gm-ink);font-weight:700}

/* --- кнопки --- */
#checkout-cart .buttons{display:flex;justify-content:space-between;align-items:center;
  gap:14px;flex-wrap:wrap;margin-top:26px}
#checkout-cart .buttons .pull-left,
#checkout-cart .buttons .pull-right{float:none!important}
#checkout-cart .buttons .btn{height:46px;padding:0 26px;display:inline-flex;align-items:center;
  border-radius:3px;font-size:15px;font-weight:700;text-transform:none;border:1px solid transparent}
#checkout-cart .buttons .btn-default{background:var(--gm-bg);border-color:var(--gm-line);color:var(--gm-ink)}
#checkout-cart .buttons .btn-default:hover{border-color:var(--gm-accent);color:var(--gm-accent)}
#checkout-cart .buttons .btn-checkout{background:var(--gm-accent);color:#fff}
#checkout-cart .buttons .btn-checkout:hover{filter:brightness(.93);color:#fff}

#checkout-cart h3{font-family:var(--gm-font-head);font-size:20px;margin:34px 0 8px}
#checkout-cart .panel-group .panel{border:1px solid var(--gm-line);border-radius:3px;box-shadow:none}
#checkout-cart .panel-group .panel-heading{background:var(--gm-surface);border-bottom:1px solid var(--gm-line)}

/* --- мобільна версія: таблиця на товар, поле-значення --- */
@media (max-width: 767px){
  #checkout-cart{padding:18px 0 36px}
  #checkout-cart .page-title{font-size:23px}
  #checkout-cart .full-view{display:none}
  #checkout-cart .shopping-cart.responsive{display:table;width:100%;margin:0 0 14px;
    border:1px solid var(--gm-line);border-radius:3px;border-collapse:collapse;overflow:hidden}
  #checkout-cart .shopping-cart.responsive td{padding:10px 12px;border:0;
    border-bottom:1px solid var(--gm-line);font-size:14px;text-align:left!important;vertical-align:middle}
  #checkout-cart .shopping-cart.responsive tr td:first-child{width:38%;background:var(--gm-surface);
    font-size:12px;font-weight:700;text-transform:uppercase;color:var(--gm-ink-muted)}
  #checkout-cart .shopping-cart.responsive tr:last-child td{border-bottom:0}
  #checkout-cart .shopping-cart.responsive .img-thumbnail{width:92px;height:92px}
  #checkout-cart .buttons{flex-direction:column-reverse;align-items:stretch}
  #checkout-cart .buttons .btn{width:100%;justify-content:center}
  #checkout-cart .col-sm-offset-8{margin-left:0}
}

/* ==========================================================================
   28. Форми — спільна база (чекаут, кабінет, контакти, відгуки)
   ========================================================================== */
.gm-page{padding:28px 0 48px}
#checkout-checkout,#common-success,#information-contact,#information-information,
#account-login,#account-register,#account-account,#account-forgotten,
#product-search,#product-compare,#account-wishlist,#information-sitemap{padding:28px 0 48px}

#checkout-checkout h1,#common-success h1,#information-contact h1,#information-information h1,
#account-login h1,#account-register h1,#account-account h1,#account-forgotten h1,
#product-search h1,#product-compare h1,#account-wishlist h1,#information-sitemap h1{
  font-family:var(--gm-font-head);font-size:30px;margin:0 0 22px}
#checkout-checkout h2,#account-login h2,#account-register h2,#information-contact h2{
  font-family:var(--gm-font-head);font-size:20px;margin:0 0 14px}

/* поля */
#checkout-checkout .form-control,#account-login .form-control,#account-register .form-control,
#information-contact .form-control,#account-forgotten .form-control,#account-account .form-control{
  height:44px;border:1px solid var(--gm-line);border-radius:3px;box-shadow:none;
  font-size:15px;padding:10px 14px;color:var(--gm-ink);background:var(--gm-bg)}
#checkout-checkout textarea.form-control,#information-contact textarea.form-control{height:auto;min-height:120px}
#checkout-checkout .form-control:focus,#account-login .form-control:focus,
#account-register .form-control:focus,#information-contact .form-control:focus{
  border-color:var(--gm-accent);box-shadow:none;outline:0}
#checkout-checkout select.form-control,#account-register select.form-control{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--gm-ink-muted) 50%),
                   linear-gradient(135deg,var(--gm-ink-muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 19px,calc(100% - 13px) 19px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}

/* підписи */
#checkout-checkout .control-label,#account-register .control-label,
#information-contact .control-label,#account-login .control-label{
  font-size:13.5px;font-weight:600;color:var(--gm-ink);padding-top:12px;text-align:left}
#checkout-checkout .form-group.required .control-label:before,
#account-register .form-group.required .control-label:before,
#information-contact .form-group.required .control-label:before{
  content:'*';color:var(--gm-accent);margin-right:4px}
#checkout-checkout .form-group,#account-register .form-group,#information-contact .form-group{margin-bottom:16px}
#checkout-checkout .text-danger,#account-register .text-danger,#information-contact .text-danger{
  display:block;margin-top:5px;font-size:12.5px;color:#c62828}
#checkout-checkout .radio,#checkout-checkout .checkbox{margin:6px 0}
#checkout-checkout .radio label,#checkout-checkout .checkbox label{font-size:14.5px;font-weight:400}

/* повідомлення */
#checkout-checkout .alert,#account-login .alert,#information-contact .alert{
  border-radius:3px;border:1px solid var(--gm-line);background:var(--gm-surface);
  color:var(--gm-ink);padding:12px 16px;font-size:14px}
#checkout-checkout .alert-danger{border-color:#c62828;background:#fdf3f3}
#checkout-checkout .alert-warning{border-color:var(--gm-accent);background:#fff7f0}

/* ==========================================================================
   29. Чекаут: акордеон із семи панелей
   ========================================================================== */
#checkout-checkout .panel-group{margin:0}
#checkout-checkout .panel.panel-default{border:1px solid var(--gm-line);border-radius:3px;
  box-shadow:none;margin:0 0 12px;background:var(--gm-bg)}
#checkout-checkout .panel-heading{background:var(--gm-surface);border-bottom:0;padding:0;border-radius:3px}
#checkout-checkout .panel-title{margin:0;font-size:16px;font-weight:700;font-family:var(--gm-font-text)}
#checkout-checkout .panel-title .accordion-toggle{display:flex;align-items:center;
  justify-content:space-between;gap:12px;padding:16px 18px;color:var(--gm-ink);text-decoration:none}
#checkout-checkout .panel-title .accordion-toggle:hover{color:var(--gm-accent)}
#checkout-checkout .panel-title .fa-caret-down{color:var(--gm-accent);transition:transform .2s}
#checkout-checkout .panel-collapse.in + .panel-heading .fa-caret-down,
#checkout-checkout .panel-heading .accordion-toggle[aria-expanded="true"] .fa-caret-down{transform:rotate(180deg)}
#checkout-checkout .panel-body{border-top:1px solid var(--gm-line);padding:20px 18px}

/* кнопки в панелях */
#checkout-checkout .buttons,#account-login .buttons,#information-contact .buttons,
#account-register .buttons,#common-success .buttons{display:flex;justify-content:flex-end;
  gap:12px;flex-wrap:wrap;margin-top:20px}
#checkout-checkout .buttons .pull-right,#information-contact .buttons .pull-right,
#common-success .buttons .pull-right{float:none!important}
#checkout-checkout .btn-primary,#account-login .btn-primary,#account-register .btn-primary,
#information-contact .btn-primary,#common-success .btn-primary{
  height:46px;padding:0 26px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--gm-accent);border:1px solid var(--gm-accent);color:#fff;border-radius:3px;
  font-size:15px;font-weight:700;text-transform:none}
#checkout-checkout .btn-primary:hover,#account-login .btn-primary:hover,
#information-contact .btn-primary:hover{filter:brightness(.93);color:#fff}
#checkout-checkout .btn-default,#account-login .btn-default{height:46px;padding:0 22px;
  display:inline-flex;align-items:center;background:var(--gm-bg);border:1px solid var(--gm-line);
  color:var(--gm-ink);border-radius:3px;font-size:15px;font-weight:600;text-transform:none}
#checkout-checkout .btn-default:hover{border-color:var(--gm-accent);color:var(--gm-accent)}

/* підсумкова таблиця в панелі підтвердження */
#checkout-checkout #collapse-checkout-confirm table{width:100%;border:1px solid var(--gm-line);
  border-radius:3px;border-collapse:collapse;overflow:hidden}
#checkout-checkout #collapse-checkout-confirm thead td{background:var(--gm-surface);
  font-size:12px;font-weight:700;text-transform:uppercase;color:var(--gm-ink-muted);
  padding:11px 13px;border:0;border-bottom:1px solid var(--gm-line)}
#checkout-checkout #collapse-checkout-confirm tbody td,
#checkout-checkout #collapse-checkout-confirm tfoot td{padding:11px 13px;border:0;
  border-bottom:1px solid var(--gm-line);font-size:14px}
#checkout-checkout #collapse-checkout-confirm tfoot tr:last-child td{background:var(--gm-surface);
  font-size:16px;font-weight:700;border-bottom:0}

@media (max-width: 767px){
  #checkout-checkout,#common-success,#information-contact{padding:18px 0 36px}
  #checkout-checkout h1,#common-success h1,#information-contact h1{font-size:23px}
  #checkout-checkout .panel-title .accordion-toggle{padding:14px}
  #checkout-checkout .panel-body{padding:16px 14px}
  #checkout-checkout .buttons .btn,#information-contact .buttons .btn{width:100%}
  #checkout-checkout .control-label{padding-top:0;margin-bottom:4px}
}

/* ---- 25.3 Одиниця виміру: єдиний варіант, компактно ---- */
.gm-unit-one{margin-top:10px}
.gm-unit-one .gm-buy__radios{gap:0}
.gm-unit-one label{border-color:var(--gm-accent);color:var(--gm-accent);font-weight:700}

/* ---- 25.4 Повідомлення про додавання і помилки опцій ---- */
.gm-toast{position:fixed;right:18px;bottom:18px;z-index:2000;max-width:340px;
  background:var(--gm-ink);color:#fff;border-radius:4px;padding:13px 17px;font-size:14px;
  line-height:1.4;box-shadow:0 8px 28px rgba(0,0,0,.24);transition:opacity .3s,transform .3s}
.gm-toast a{color:#fff;text-decoration:underline}
.gm-toast--err{background:#c62828}
.gm-toast.is-out{opacity:0;transform:translateY(8px)}
.gm-buy__opt.has-error label{border-color:#c62828}
.gm-buy__err{margin:6px 0 0;color:#c62828;font-size:12.5px}
.gm-buy__add.is-loading{opacity:.6;pointer-events:none}
@media (max-width:767px){.gm-toast{left:12px;right:12px;bottom:12px;max-width:none}}

/* ==========================================================================
   30. Міні-кошик у шапці
   ========================================================================== */
#cart .dropdown-menu.cart-menu{width:380px;min-width:380px;max-width:calc(100vw - 24px);
  padding:0;margin-top:10px;border:1px solid var(--gm-line);border-radius:4px;
  box-shadow:0 14px 40px rgba(0,0,0,.14);background:var(--gm-bg);overflow:hidden}
#cart .cart-menu > li{padding:0;list-style:none}
#cart .cart-menu > li + li{border-top:1px solid var(--gm-line)}

/* товари */
#cart .cart-menu table.table-striped{width:100%;margin:0;background:none;table-layout:fixed}
#cart .cart-menu table.table-striped > tbody > tr{background:none!important}
#cart .cart-menu table.table-striped td{border:0;border-bottom:1px solid var(--gm-line);
  padding:12px 8px;vertical-align:middle;font-size:13.5px;line-height:1.35}
#cart .cart-menu table.table-striped tr:last-child td{border-bottom:0}
#cart .cart-menu table.table-striped td:nth-child(1){width:62px;padding-left:14px}
#cart .cart-menu table.table-striped td:nth-child(2){width:auto;text-align:left}
#cart .cart-menu table.table-striped td:nth-child(3){width:42px;text-align:right;
  color:var(--gm-ink-muted);white-space:nowrap}
#cart .cart-menu table.table-striped td:nth-child(4){width:92px;text-align:right;
  font-weight:700;white-space:nowrap}
#cart .cart-menu table.table-striped td:nth-child(5){width:40px;padding-right:12px;text-align:right}

#cart .cart-menu .img-thumbnail{width:52px;height:52px;object-fit:cover;padding:0;
  border:1px solid var(--gm-line);border-radius:3px;background:var(--gm-surface)}
#cart .cart-menu td a{color:var(--gm-ink);font-weight:600;display:block;
  overflow:hidden;text-overflow:ellipsis}
#cart .cart-menu td a:hover{color:var(--gm-accent)}
#cart .cart-menu small{color:var(--gm-ink-muted);font-size:12px;font-weight:400}
#cart .cart-menu .btn-danger.btn-xs{width:26px;height:26px;padding:0;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-size:11px;
  background:var(--gm-surface);border:1px solid var(--gm-line);color:var(--gm-ink-muted)}
#cart .cart-menu .btn-danger.btn-xs:hover{border-color:#c62828;color:#c62828;background:var(--gm-bg)}

/* підсумки */
#cart .cart-menu table.table-bordered{width:100%;margin:0;border:0;background:var(--gm-surface)}
#cart .cart-menu table.table-bordered td{border:0;padding:9px 14px;font-size:13.5px;
  text-align:right;white-space:nowrap}
#cart .cart-menu table.table-bordered td:first-child{text-align:right;color:var(--gm-ink-muted);
  font-weight:400}
#cart .cart-menu table.table-bordered td strong{font-weight:600}
#cart .cart-menu table.table-bordered tr:last-child td{font-size:15px;font-weight:700;
  color:var(--gm-ink);padding-top:4px;padding-bottom:12px}
#cart .cart-menu table.table-bordered tr:last-child td strong{font-weight:700}

/* кнопки */
#cart .cart-menu .button-container{display:flex;gap:10px;margin:0;padding:14px;
  border-top:1px solid var(--gm-line);background:var(--gm-bg);text-align:left!important}
#cart .cart-menu .button-container a{flex:1 1 50%;display:inline-flex;align-items:center;
  justify-content:center;height:42px;border-radius:3px;font-size:14px;text-align:center}
#cart .cart-menu .button-container a:first-child{background:var(--gm-bg);
  border:1px solid var(--gm-line);color:var(--gm-ink)}
#cart .cart-menu .button-container a:first-child:hover{border-color:var(--gm-accent);color:var(--gm-accent)}
#cart .cart-menu .button-container a:last-child{background:var(--gm-accent);color:#fff;
  border:1px solid var(--gm-accent)}
#cart .cart-menu .button-container a:last-child:hover{filter:brightness(.93);color:#fff}
#cart .cart-menu .button-container a strong{font-weight:700}

/* порожній кошик */
#cart .cart-menu > li > p.text-center{margin:0;padding:26px 16px;color:var(--gm-ink-muted);font-size:14px}

@media (max-width:767px){
  #cart .dropdown-menu.cart-menu{width:calc(100vw - 24px);min-width:0;
    position:fixed;right:12px;left:12px;top:auto}
  #cart .cart-menu table.table-striped td:nth-child(3){display:none}
  #cart .cart-menu .button-container{flex-direction:column}
  #cart .cart-menu .button-container a{flex:1 1 auto;width:100%}
}

/* ==========================================================================
   31. Лічильник кошика — число з data-count, який пише gm_cart.js
   ========================================================================== */
.gm-tools__cart #cart-total{display:none!important}

.gm-tools__cart[data-count]:not([data-count=""])::after{
  content:attr(data-count);
  position:absolute;top:-5px;right:-7px;
  min-width:18px;height:18px;padding:0 5px;
  border-radius:9px;background:var(--gm-accent);color:#fff;
  font-size:11px;font-weight:700;line-height:18px;text-align:center;
  box-shadow:0 0 0 2px var(--gm-bg);pointer-events:none}

/* ---- 31.1 Лічильник рівно на іконці кошика ---- */
.gm-tools__cart{position:relative;display:inline-flex;align-items:center;flex:0 0 auto}
.gm-tools__cart #cart{position:relative;display:inline-flex}
.gm-tools__cart #cart > .btn{position:relative}
/* бейдж вішаємо на кнопку з іконкою, а не на зовнішній контейнер */
.gm-tools__cart[data-count]:not([data-count=""])::after{content:none}
.gm-tools__cart[data-count]:not([data-count=""]) #cart > .btn::after{
  content:attr(data-gm-count);
  position:absolute;top:-4px;right:-6px;
  min-width:17px;height:17px;padding:0 4px;
  border-radius:9px;background:var(--gm-accent);color:#fff;
  font-size:10.5px;font-weight:700;line-height:17px;text-align:center;
  box-shadow:0 0 0 2px var(--gm-bg);pointer-events:none}


/* кошик зсуваємо без впливу на сусідів: margin-left розтягував увесь ряд */
.gm-tools__cart{transform:translateX(10px)}

/* ---- 31.3 Кнопка консультації — рівно по правому краю контейнера ---- */
.gm-cta{margin-right:0}
.gm-main__inner .gm-tools{margin-left:auto;margin-right:0}
.gm-main__inner > :last-child{margin-right:0}


/* ==========================================================================
   33. Навігація: мегаменю (десктоп) і шторка (мобайл)
   Єдиний блок. Замінює колишні розділи 26, 26.1, 26.2, 31.2, 32, 32.1-32.6.
   ========================================================================== */

/* --- спільне --- */
.gm-burger{display:none}
.gm-mnav-overlay{display:none}
.gm-mega__pic{display:none}

.gm-mega__head{display:block;margin:0 0 9px;padding-bottom:8px;
  border-bottom:1px solid var(--gm-line)}
.gm-mega__title{display:block;font-size:12.5px;font-weight:700;line-height:1.3;
  text-transform:uppercase;color:var(--gm-ink);word-break:break-word}
.gm-mega__head:hover .gm-mega__title{color:var(--gm-accent)}
.gm-mega__list{list-style:none;margin:0;padding:0}
.gm-mega__list li{margin:0 0 3px}
.gm-mega__list a{display:block;font-size:13px;line-height:1.3;padding:2px 0;
  color:var(--gm-ink-muted);text-transform:lowercase;white-space:normal}
.gm-mega__list a::first-letter{text-transform:uppercase}
.gm-mega__list a:hover{color:var(--gm-accent)}
.gm-mega__col--flat .gm-mega__head{border-bottom:0;margin-bottom:0}

/* --- ДЕСКТОП: панель під шапкою --- */
@media (min-width:992px){
  .gm-head{position:relative}
  .gm-main{position:static}
  .gm-nav{position:static}
  .gm-nav__item--mega{position:static}
  .gm-nav__link{padding-bottom:12px}

  .gm-nav__mega{
    position:absolute;left:0;right:0;top:100%;z-index:200;
    display:none;width:auto;max-width:none;min-width:0;margin:0;padding:0;
    background:var(--gm-bg);border:0;border-top:2px solid var(--gm-accent);
    box-shadow:0 18px 44px rgba(0,0,0,.13)}
  .gm-nav__item--mega.is-hover > .gm-nav__mega{display:block}
  .gm-nav__item--mega.is-hover > .gm-nav__link{color:var(--gm-accent)}

  .gm-mega{padding:24px 0 26px}
  .gm-mega__grid{max-width:1440px;margin:0 auto;padding:0 24px;
    display:grid;grid-template-columns:repeat(6,1fr);gap:0 24px;align-items:start}
}

@media (min-width:992px) and (max-width:1199px){
  .gm-mega__grid{grid-template-columns:repeat(3,1fr);gap:22px 24px}
}

/* --- МОБАЙЛ: одна строка шапки + шторка --- */
@media (max-width:991px){
  .gm-topbar{display:none}
  .gm-searchrow{display:none}
  .gm-tools__search,.gm-search-toggle,.gm-tools__account{display:none}

  .gm-main__inner{display:flex;align-items:center;justify-content:space-between;
    gap:10px;min-height:56px;padding:8px 0}

  .gm-burger{display:flex;flex-direction:column;justify-content:space-between;
    flex:0 0 42px;width:42px;height:42px;padding:10px 8px;border:0;background:none;cursor:pointer}
  .gm-burger span{display:block;width:100%;height:2px;background:#2b2b2b;border-radius:2px}
  body.gm-menu-open .gm-burger span:nth-child(1){transform:translateY(9px) rotate(45deg)}
  body.gm-menu-open .gm-burger span:nth-child(2){opacity:0}
  body.gm-menu-open .gm-burger span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

  .gm-logo{flex:1 1 auto;display:flex;justify-content:center;margin:0;min-width:0}
  .gm-logo__mark{height:34px;width:auto}
  .gm-logo__title,.gm-logo__note{display:none}
  .gm-tools{flex:0 0 42px;display:flex;justify-content:flex-end;gap:0;margin:0}
  .gm-tools__cart{transform:none;margin:0}
  .gm-cta{display:none}

  /* шторка */
  .gm-nav{position:fixed;top:0;left:0;bottom:0;z-index:1000;
    width:86%;max-width:320px;box-sizing:border-box;
    background:var(--gm-bg);overflow-y:auto;overflow-x:hidden;
    padding:16px 0 40px;transform:translateX(-100%);transition:transform .25s ease;
    visibility:hidden;box-shadow:none}
  body.gm-menu-open{overflow:hidden}
  body.gm-menu-open .gm-nav{transform:translateX(0);visibility:visible;
    box-shadow:0 0 40px rgba(0,0,0,.28)}
  body.gm-menu-open .gm-mnav-overlay{display:block;position:fixed;inset:0;z-index:999;
    background:rgba(0,0,0,.45)}

  .gm-nav__list{display:flex;flex-direction:column;gap:0;margin:0;padding:0;list-style:none}
  .gm-nav__item{flex:1 0 auto;position:static}
  .gm-nav__link{display:flex;justify-content:space-between;align-items:center;
    width:100%;padding:13px 16px;font-size:15px;border-bottom:1px solid var(--gm-line)}

  /* мегаменю всередині шторки — простий список, без сітки */
  .gm-nav__mega{display:none;position:static;width:auto;max-width:100%;
    margin:0;padding:0;border:0;box-shadow:none;background:var(--gm-surface);overflow:hidden}
  .gm-nav__item.is-open > .gm-nav__mega{display:block}
  .gm-nav__item.is-open > .gm-nav__link{color:var(--gm-accent)}

  .gm-mega{padding:8px 0}
  .gm-mega__grid{display:block;max-width:100%;margin:0;padding:0 16px;gap:0}
  .gm-mega__col{margin:0 0 14px}
  .gm-mega__col:last-child{margin-bottom:4px}
  .gm-mega__list{padding-left:8px}

  /* поиск, телефоны, соцсети, язык — перенесены скриптом gm_mnav.js */
  .gm-mnav__extra{display:grid;gap:16px;padding:16px;margin-top:8px;
    border-top:1px solid var(--gm-line)}
  .gm-mnav__extra .gm-topbar__phones{display:flex;flex-direction:column;
    align-items:flex-start;gap:10px;margin:0;flex-basis:auto}
  .gm-mnav__extra .gm-phone{display:flex;flex-direction:column;gap:2px}
  .gm-mnav__extra .gm-phone__label{display:block;font-size:12px;color:var(--gm-ink-muted)}
  .gm-mnav__extra .gm-phone__value{font-size:16px;font-weight:700}
  .gm-mnav__extra .gm-social{display:flex;gap:10px}
  .gm-mnav__extra .gm-tools__lang{margin:0}
}

/* ==========================================================================
   34. Картка товару на мобайлі — один стовпчик
   ========================================================================== */
@media (max-width: 991px){
  .gm-prod{display:grid;grid-template-columns:1fr;gap:20px}
  .gm-prod__main{min-width:0}
  .gm-prod__side{min-width:0}
  .gm-prod__title{font-size:22px;line-height:1.2}

  .gm-gal{margin-bottom:16px}
  .gm-gal__big img{width:100%;height:auto;display:block}
  .gm-gal__thumbs{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;
    -webkit-overflow-scrolling:touch}
  .gm-gal__thumb{flex:0 0 68px;width:68px}

  .gm-tabsbox{margin-top:4px}
  .gm-tabsbox__nav{display:flex;overflow-x:auto;gap:0;-webkit-overflow-scrolling:touch}
  .gm-tabsbox__btn{flex:0 0 auto;white-space:nowrap;font-size:13px;padding:11px 14px}
  .gm-tabsbox__panel{padding:14px 0}
  .gm-tabsbox__panel .gm-specs td,
  .gm-tabsbox__panel .gm-specs th{font-size:13.5px;padding:9px 10px}

  .gm-buy{display:grid;grid-template-columns:1fr;gap:16px}
  .gm-buy__price{order:1}
  .gm-buy__opts{order:2;min-width:0}
  .gm-buy__cart{order:3}
  .gm-buy__now{font-size:26px}
  .gm-buy__radios.gm-tiles{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px}
  .gm-buy__add{width:100%;justify-content:center}
  .gm-buy__links{display:flex;gap:14px;flex-wrap:wrap}
  .gm-buy__qty{flex-wrap:wrap}
  .gm-buy__sum{width:100%;box-sizing:border-box}

  .gm-prod__calc{margin-top:20px}
}

/* ---- 33.1 Лого строго по центру мобільної шапки ---- */
@media (max-width: 991px){
  .gm-main__inner{position:relative}
  .gm-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    flex:0 0 auto;margin:0;z-index:1}
  .gm-burger{position:relative;z-index:2}
  .gm-tools{position:relative;z-index:2;flex:0 0 auto;margin-left:auto}
}

/* ==========================================================================
   35. Блоки товарів на головній — тільки плитка, як у категорії
   Ціна і кнопка «Купити» прибрані: на головній вони не потрібні,
   до того ж у 1304 товарів ціна нульова і показувала «0.00 грн.».
   ========================================================================== */
.gm-h__foot{display:none}

/* ==========================================================================
   36. Картка товару за макетом: панель покупки праворуч, таби знизу
   ========================================================================== */
.gm-prod__side .gm-buy{display:block;border:1px solid var(--gm-line);border-radius:10px;
  padding:22px;background:var(--gm-bg)}
.gm-buy__head{margin-bottom:16px}
.gm-buy__coll{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gm-accent)}
.gm-buy__title{font-family:var(--gm-font-head);font-size:30px;line-height:1.15;margin:0 0 6px}
.gm-buy__sub{margin:0 0 14px;color:var(--gm-ink-muted);font-size:15px}

.gm-chips{display:flex;flex-wrap:wrap;gap:10px}
.gm-chip{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;
  border:1px solid var(--gm-line);border-radius:8px;background:var(--gm-surface);
  font-size:13.5px;font-weight:600}
.gm-chip i{color:var(--gm-accent);font-size:15px}

.gm-buy__hint{margin:2px 0 0;font-size:12.5px;color:var(--gm-ink-muted)}
.gm-buy__sample{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;height:48px;margin-top:10px;border:1px solid var(--gm-accent);border-radius:6px;
  background:var(--gm-bg);color:var(--gm-accent);font-size:15px;font-weight:700;cursor:pointer}
.gm-buy__sample:hover{background:var(--gm-accent);color:#fff}
.gm-prod__side .gm-buy__add{width:100%;height:52px;justify-content:center;font-size:16px}

.gm-use{margin:34px 0 0}
.gm-use__title{font-family:var(--gm-font-head);font-size:24px;margin:0 0 16px}
.gm-use__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.gm-use__card{display:flex;align-items:center;gap:12px;padding:16px;
  border:1px solid var(--gm-line);border-radius:10px;background:var(--gm-bg)}
.gm-use__icon{flex:0 0 40px;width:40px;height:40px;border-radius:8px;
  background:var(--gm-surface);display:inline-flex;align-items:center;justify-content:center}
.gm-use__icon i{color:var(--gm-accent);font-size:17px}
.gm-use__name{font-size:14.5px;font-weight:600;line-height:1.3}

.gm-prod__tabs{margin-top:34px}

@media (max-width:991px){
  .gm-prod__side .gm-buy{padding:16px;border-radius:8px}
  .gm-buy__title{font-size:22px}
  .gm-chip{padding:8px 11px;font-size:12.5px}
  .gm-use__title{font-size:20px}
}

/* ---- 36.1 Панель покупки: один стовпчик, порядок як у макеті ---- */
.gm-prod__side .gm-buy{
  display:flex;flex-direction:column;align-items:stretch;
  grid-template-columns:none;gap:0}
.gm-prod__side .gm-buy > *{width:auto;max-width:100%;min-width:0;float:none}

.gm-prod__side .gm-buy__head{order:1;margin:0 0 14px}
.gm-prod__side .gm-buy__opts{order:2;margin:0 0 18px}
.gm-prod__side .gm-buy__price{order:3;margin:0 0 14px;
  padding-top:14px;border-top:1px solid var(--gm-line)}
.gm-prod__side .gm-buy__cart{order:4}

.gm-prod__side .gm-buy__now{margin:0;font-size:30px;line-height:1.1;white-space:nowrap}
.gm-prod__side .gm-buy__unit{margin:2px 0 0}
.gm-prod__side .gm-buy__hint{margin:4px 0 0;white-space:normal}
.gm-prod__side .gm-buy__tax{margin:6px 0 0;font-size:12.5px;color:var(--gm-ink-muted)}
.gm-prod__side .gm-buy__stock{margin:8px 0 0}
.gm-prod__side .gm-buy__h{margin:0 0 10px;font-size:15px}
.gm-prod__side .gm-buy__qty{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px}
.gm-prod__side .gm-buy__qty > label{flex:1 0 100%;margin:0 0 4px}

/* ---- 36.2 Головне фото без обрізання + плитки кольорів по 5 у ряд ---- */
.gm-gal__big{height:auto;aspect-ratio:auto;overflow:visible}
.gm-gal__big img{width:100%;height:auto;max-height:none;object-fit:contain;display:block}

.gm-prod__side .gm-buy__radios.gm-tiles{
  grid-template-columns:repeat(5,1fr);gap:8px}
.gm-prod__side .gm-tiles .gm-tile{gap:4px;border-width:2px}
.gm-prod__side .gm-tiles .gm-tile > span:not(.gm-tile__img){font-size:11.5px;line-height:1.2}

@media (max-width:1199px){
  .gm-prod__side .gm-buy__radios.gm-tiles{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:767px){
  .gm-prod__side .gm-buy__radios.gm-tiles{grid-template-columns:repeat(3,1fr);gap:8px}
}

/* ---- 36.3 Блок ціни: три смислові рівні замість чотирьох повторів ---- */
.gm-prod__side .gm-buy__price{padding:16px;border:0;border-radius:8px;
  background:var(--gm-surface);margin-bottom:16px}
.gm-prod__side .gm-buy__now{font-size:32px;font-weight:700;line-height:1}
.gm-prod__side .gm-buy__unit{display:inline;margin:0 0 0 6px;font-size:13px;
  font-weight:600;color:var(--gm-ink-muted);text-transform:uppercase}
.gm-prod__side .gm-buy__hint{margin:8px 0 0;font-size:12.5px;line-height:1.35;
  color:var(--gm-ink-muted)}
.gm-prod__side .gm-buy__stock{margin:10px 0 0;padding-top:10px;
  border-top:1px solid var(--gm-line);font-size:13.5px;font-weight:600}

/* кількість і підсумок */
.gm-prod__side .gm-buy__qty{gap:8px;margin:0 0 14px}
.gm-prod__side .gm-buy__rate{margin:0 0 6px;font-size:13px;font-weight:400;
  color:var(--gm-ink-muted);text-transform:none}
.gm-prod__side .gm-buy__rate:empty{display:none}
.gm-prod__side .gm-buy__sum{position:relative;padding:14px 16px;font-size:20px;border-radius:8px}
.gm-prod__side .gm-buy__sum::before{content:'Разом';position:absolute;left:16px;top:50%;
  transform:translateY(-50%);font-size:12px;font-weight:600;opacity:.85;text-transform:uppercase}
.gm-prod__side .gm-buy__sum{text-align:right;padding-left:90px}

/* кнопки в один розмір */
.gm-prod__side .gm-buy__add{width:100%;height:52px}
.gm-prod__side .gm-buy__sample{height:50px;margin-top:10px}
.gm-prod__side .gm-buy__links{margin-top:14px;padding-top:12px;
  border-top:1px solid var(--gm-line)}
.gm-prod__side .gm-buy__model{margin:10px 0 0;font-size:13px;color:var(--gm-ink-muted)}

/* ---- 36.4 Ціна і площа в один рядок, як у макеті ---- */
.gm-prod__side .gm-buy__price{display:flex;align-items:flex-end;justify-content:space-between;
  gap:18px;padding:0;margin:4px 0 16px;background:none;border:0}
.gm-price__left{min-width:0}
.gm-prod__side .gm-buy__now{margin:0;font-size:30px;font-weight:700;line-height:1.1;white-space:normal}
.gm-prod__side .gm-buy__unit,
.gm-prod__side .gm-buy__tax,
.gm-prod__side .gm-buy__stock,
.gm-prod__side .gm-buy__rate,
.gm-prod__side .gm-buy__sum{display:none}
.gm-prod__side .gm-buy__hint{margin:6px 0 0;font-size:12.5px;line-height:1.35;color:var(--gm-ink-muted)}

.gm-price__qty{flex:0 0 auto;display:block;margin:0}
.gm-price__qty > label{display:block;margin:0 0 6px;font-size:12.5px;font-weight:600;
  color:var(--gm-ink-muted);text-align:center}
.gm-price__qty .gm-qty{display:inline-flex;align-items:stretch;gap:0;
  border:1px solid var(--gm-line);border-radius:8px;overflow:hidden;background:var(--gm-bg)}
.gm-price__qty .gm-step{width:40px;height:44px;border:0;background:none;font-size:18px;
  color:var(--gm-ink-muted);border-radius:0}
.gm-price__qty .gm-step:hover{background:var(--gm-surface);color:var(--gm-accent)}
.gm-price__qty .gm-qty__input{width:56px;height:44px;border:0;border-left:1px solid var(--gm-line);
  border-right:1px solid var(--gm-line);border-radius:0;font-size:16px;font-weight:600}
.gm-price__qty .gm-buy__round{display:none}

/* кнопки під рядком ціни */
.gm-prod__side .gm-buy__add{width:100%;height:54px;border-radius:8px;font-size:16px;gap:10px}
.gm-prod__side .gm-buy__sample{height:52px;border-radius:8px;margin-top:10px}

@media (max-width:767px){
  .gm-prod__side .gm-buy__price{flex-wrap:wrap;gap:12px}
  .gm-price__qty{flex:1 0 100%}
  .gm-price__qty > label{text-align:left}
}

/* ---- 36.5 Лайтбокс: прибираємо білу підкладку під фото ---- */
.mfp-figure{padding:0}
.mfp-figure::after{background:transparent;box-shadow:none;top:0;bottom:0}
.mfp-img{padding:0;max-height:88vh!important;border-radius:4px}
.mfp-bg{background:#101010;opacity:.93}
.mfp-title{color:#fff;padding-top:10px;font-size:14px}
.mfp-counter{color:rgba(255,255,255,.7)}
.mfp-close{color:#fff;opacity:.9;font-size:30px}

/* ---- 36.6 Лайтбокс: біле дає .mfp-content з теми ---- */
.mfp-content,
.mfp-container .mfp-content,
.mfp-content .mfp-figure,
.mfp-content figure{background:transparent!important;box-shadow:none!important;padding:0!important}
.mfp-content img.mfp-img{background:transparent!important;padding:0!important;
  max-height:88vh!important;display:block;margin:0 auto}
.mfp-iframe-scaler,.mfp-figure small{background:transparent!important}

/* ---- 36.7 Галерея вирівняна з панеллю праворуч ---- */
.gm-prod{align-items:start}
.gm-prod__main{padding-top:0;margin-top:0}
.gm-prod__main > :first-child{margin-top:0}
.gm-gal{margin-top:0}
.gm-gal__big{margin-top:0}
.gm-prod__side{padding-top:0;margin-top:0}
.gm-prod__side .gm-buy{margin-top:0}

/* ---- 36.8 Лайтбокс: біле дає figure всередині .mfp-figure ---- */
.mfp-wrap .mfp-figure figure,
.mfp-wrap figure{margin:0;padding:0;background:transparent!important;
  box-shadow:none!important;line-height:0}
.mfp-wrap .mfp-figure{line-height:0}
.mfp-wrap .mfp-figure::after{display:none}
.mfp-wrap .mfp-img{display:block;margin:0 auto;padding:0!important;
  background:transparent!important;max-height:88vh!important}
.mfp-wrap .mfp-bottom-bar{margin-top:8px;line-height:1.4}

/* ---- 36.9 Lightbox 2.6 (другий лайтбокс теми) — біла підкладка ---- */
.lb-outerContainer,
.lb-container,
.lb-dataContainer,
.lb-data,
.lb-image{background:transparent!important;box-shadow:none!important;border:0!important}
.lb-outerContainer{border-radius:4px}
.lb-image{border:0!important;border-radius:4px}
.lb-dataContainer{padding-top:8px}
.lb-data .lb-caption{color:#fff;font-size:14px;font-weight:600}
.lb-data .lb-number{color:rgba(255,255,255,.7)}
.lb-data .lb-close{opacity:.9}
.lightboxOverlay{background:#101010!important;opacity:.93!important}

/* ---- 36.10 Головне фото: контейнер по висоті картинки, без полів ---- */
.gm-gal__big{display:block;height:auto;min-height:0;aspect-ratio:auto;
  background:none;overflow:hidden;border-radius:8px;line-height:0}
.gm-gal__big img{width:100%;height:auto;max-height:none;
  display:block;border-radius:8px}