/* =========================================================================
   MYO — основные стили
   Значения взяты замерами с прежнего сайта (см. дизайн-система-myo.md),
   а не подобраны на глаз.
   ========================================================================= */

:root {
  /* Палитра */
  --c-ink:        #161619;
  --c-black:      #000000;
  --c-white:      #ffffff;
  --c-grey:       #838889;
  --c-grey-mid:   #a2a5a6;
  --c-grey-light: #e3e7e8;
  --c-overlay:    rgba(22, 22, 25, .2);
  --c-accent:     #ae967c;   /* кнопка «В корзину» в карточке товара */
  --c-border:     #cdcfd0;   /* рамки полей и блока количества */

  /* Шрифты */
  --f-base:    Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --f-display: "Roboto Condensed", Roboto, Arial, sans-serif;

  /* Типографика */
  --fs-small:   14px;
  --fs-medium:  16px;
  --fs-base:    20px;
  --fs-h2-mob:  28px;
  --fs-h2:      40px;
  --fs-h1:      60px;
  --lh-base:    1.5556;

  /* Раскладка */
  --container-max: calc(100% - 60px);
  --container-w:   1214px;
  --header-h:      120px;
  --header-h-mob:  68px;

  /* Сетка товаров — по замерам боевого каталога */
  --grid-gap:        4px;
  --grid-gap-mob:    4px;   /* замер боевого: зазор на мобильном тот же, что на десктопе */
  --card-pad:        0;      /* поля карточки: 0 — плотная сетка по просьбе клиента */
  --card-text-inset: 10px;   /* отступ названия и цены от края карточки */
  --card-img-ratio:  680 / 982;
  --card-gap-media:  14px;   /* от картинки до названия */
  --card-gap-title:  6px;    /* от названия до цены */

  --transition: .25s ease;
}

/* ---------- Сброс ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--f-base);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  font-weight: 400;
  color: var(--c-ink);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--c-black); font-family: var(--f-display); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font: inherit; cursor: pointer; }

h1, h2, h3, h4 { margin: 0 0 .5em; }

h1 {
  font-family: var(--f-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-base);
  font-weight: 500;
  color: var(--c-black);
}

h2 {
  font-family: var(--f-base);
  font-size: var(--fs-h2);
  line-height: 1;
  font-weight: 500;
  color: var(--c-ink);
}

/* ---------- Доступность ---------- */

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link:focus {
  position: fixed; top: 8px; left: 8px; z-index: 1000;
  width: auto; height: auto; clip: auto;
  padding: 12px 20px; background: var(--c-ink); color: var(--c-white);
}

/* ---------- Контейнер ---------- */

.container {
  width: var(--container-w);
  max-width: var(--container-max);
  margin-inline: auto;
}

/* ---------- Шапка ---------- */

.site-header {
  background: var(--c-white);
  position: static;
}

/* Замер боевой: шапка не центрируется по контейнеру 1214, а растянута
   с полями по 60px — меню начинается с 60, правый край тоже в 60. */
.site-header__inner {
  width: 100%;
  max-width: none;
  padding: 0 60px;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.site-header__burger {
  display: none;
  background: none; border: 0; padding: 8px;
  color: var(--c-black);
}

.site-nav .menu {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  margin: 0; padding: 0;
}

.site-nav .menu li { position: relative; }

/* Подменю — мега-меню: горизонтальная полоса во всю ширину окна,
   а не вертикальный список. Замеры боевой: полоса 1440x52, начинается
   на 20px ниже шапки, пункты идут в строку от левого края 60,
   ссылки Roboto Condensed 16px w500 с полями 14/16. */
.site-header { position: relative; }
.site-nav .menu > li { position: static; }

.site-nav .sub-menu {
  position: absolute;
  /* Фон начинается сразу под шапкой (120), чтобы не было просвета,
     а сами пункты — с отметки 140, как на боевом: даёт верхнее поле 20. */
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 500;
  margin: 0;
  padding: 20px 60px 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  background: var(--c-white);
  /* Замер боевой: тень едва заметная, с отрицательным разбросом. */
  box-shadow: 0 5px 30px -10px rgba(0, 0, 0, .06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.site-nav .menu > li:hover > .sub-menu,
.site-nav .menu > li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Замер боевой: поля стоят на пункте (14/16/12), ссылка без полей,
   интерлиньяж 22.4px при кегле 16 — это 1.4, а не 1.5. */
.site-nav .sub-menu li {
  display: block;
  position: static;
  padding: 14px 16px 12px;
  /* Высота пункта 52 = 14 + 26 + 12. Строка считается по 26,
     хотя интерлиньяж самой ссылки 22.4 — так на боевом. */
  line-height: 26px;
}

.site-nav .sub-menu a {
  /* Строчная, как на боевом: тогда высоту пункта задаёт его строка (26),
     а не интерлиньяж ссылки (22.4), и пункт выходит 52. */
  display: inline;
  padding: 0;
  font-family: var(--f-display);
  font-size: var(--fs-medium);
  /* На боевом в CSS стоит 500, но это начертание там не загружено,
     и текст фактически рисуется обычным. Повторяем результат, а не запись:
     замер одного текста дал одинаковую ширину при 400 и 500. */
  font-weight: 400;
  line-height: 1.4;
  color: var(--c-black);
  white-space: nowrap;
}
.site-nav .sub-menu a:hover { text-decoration: underline; }

.site-nav a,
.site-header__brand-heroes {
  font-family: var(--f-display);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: var(--lh-base);
  color: var(--c-black);
  text-transform: none;
  letter-spacing: 0;
}

/* Логотип отцентрирован по окну, а не зажат раскладкой flex:
   замер боевой даёт left 661 при ширине 119 — ровно центр 1440. */
.site-header__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  flex: 0 0 auto;
  z-index: 2;
}

/* Логотип — картинка 119x70 по замеру боевого сайта. */
.site-header__logo .custom-logo,
.custom-logo-link img {
  width: 119px;
  height: 70px;
  object-fit: contain;
  display: block;
}

.site-logo--text {
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.site-header__action {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--c-black);
  background: none; border: 0; padding: 4px;
}

.site-header__cart-count {
  min-width: 18px; height: 18px;
  margin-left: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-base);
  font-size: 11px; font-weight: 600;
  color: var(--c-white); background: var(--c-ink);
  border-radius: 50%;
}

.site-search { padding: 20px 0; border-top: 1px solid var(--c-grey-light); }


/* Стрелка у пунктов с подменю — как на боевом (там это span.caret).
   Рисуем средствами CSS, без иконочного шрифта. */
.site-nav .menu > li.menu-item-has-children > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.site-nav .menu > li.menu-item-has-children > a::after {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s ease;
}
/* На боевом стрелка не переворачивается при раскрытии — transform: none. */

/* Brand Heroes справа — тот же шрифт, что у пунктов меню. */
.site-header__brand-heroes {
  margin-right: 10px;
  white-space: nowrap;
}

/* Счётчик избранного — как у корзины. */
.site-header__wishlist-count {
  min-width: 18px; height: 18px;
  margin-left: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-base);
  font-size: 11px; font-weight: 600;
  color: var(--c-white); background: var(--c-ink);
  border-radius: 50%;
}

/* ---------- Мобильное меню ---------- */

/* Замер боевого при 375: панель раскрывается ПОД шапкой (та остаётся видимой),
   сверху поиск высотой 44, пункты кеглем 20 с полями 15/15 и отступом слева 20,
   шаг между пунктами 54. Ниже — разделитель и строки корзины, избранного и входа. */
.mobile-nav {
  position: fixed;
  top: var(--header-h-mob);
  left: 0; right: 0; bottom: 0;
  z-index: 900;
  background: var(--c-white);
  padding: 0 20px;
  overflow-y: auto;
}
.mobile-nav[hidden] { display: none; }

.mobile-nav__search { padding: 16px 0; border-bottom: 1px solid var(--c-grey-light); }
.mobile-nav__search .search-form { display: flex; align-items: center; gap: 10px; height: 44px; }
.mobile-nav__search .search-form__field {
  flex: 1 1 auto;
  border: 0;
  font-family: var(--f-display);
  font-size: var(--fs-base);
  outline: none;
}
.mobile-nav__search .search-form__submit { order: -1; background: none; border: 0; padding: 0; }

.mobile-nav .menu {
  list-style: none;
  margin: 15px 0 0;
  padding: 0;
}
.mobile-nav .menu > li { border: 0; padding: 15px 0; }
.mobile-nav .menu a {
  display: block;
  padding: 0;
  font-family: var(--f-display);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.2;
  color: var(--c-black);
}

/* Вложенные пункты на мобильном скрыты — на боевом в списке видны
   только пять пунктов верхнего уровня с шагом 54. Раскрываются по нажатию
   на стрелку рядом с названием. */
.mobile-nav .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0 0 0 16px;
  position: static;
  display: none;
  opacity: 1; visibility: visible; transform: none;
  background: none; box-shadow: none; width: auto;
}
.mobile-nav .menu > li.is-open > .sub-menu { display: block; margin-top: 10px; }
.mobile-nav .sub-menu li { padding: 8px 0; }
.mobile-nav .sub-menu a { font-size: var(--fs-medium); }

/* Стрелка раскрытия у пунктов с вложенными. */
.mobile-nav .menu > li.menu-item-has-children { position: relative; }
.mobile-nav__toggle {
  position: absolute;
  top: 8px; right: 0;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0;
  color: var(--c-black);
}
.mobile-nav__toggle::after {
  content: '';
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s ease;
}
.mobile-nav .menu > li.is-open .mobile-nav__toggle::after {
  transform: rotate(-135deg) translateY(2px);
}

.mobile-nav__extra {
  list-style: none;
  margin: 30px 0 40px;
  padding: 30px 0 0;
  border-top: 1px solid var(--c-grey-light);
}
.mobile-nav__extra li { padding: 15px 0; }
.mobile-nav__extra a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--f-display);
  font-size: var(--fs-base);
  font-weight: 400;
  color: var(--c-black);
}
.mobile-nav__meta { display: inline-flex; align-items: center; gap: 6px; }

/* Бургер превращается в крестик, когда меню раскрыто. */
.site-header__burger .icon--close { display: none; }
.site-header__burger[aria-expanded="true"] .icon--menu { display: none; }
.site-header__burger[aria-expanded="true"] .icon--close { display: block; }

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

.button,
button.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wp-block-button__link {
  display: inline-block;
  font-family: var(--f-base);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: var(--lh-base);
  color: var(--c-white);
  background: var(--c-ink);
  border: 0; border-radius: 0;
  padding: 14px 30px;
  text-decoration: none;
  transition: background var(--transition);
}

.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background: var(--c-black);
  color: var(--c-white);
  text-decoration: none;
}

/* ---------- Сетка товаров ---------- */
/* Замеры боевого каталога при 1440px:
   li.product = calc(25% - 4px), поля 20px, картинка 680/982,
   14px под картинкой, 6px между названием и ценой.
   Раскладка на flex, а не grid — как в оригинале. */

/* Каталог во всю ширину окна — как на боевом. */
.shop-main--full { width: 100%; max-width: none; }

.woocommerce ul.products {
  display: flex;
  flex-wrap: wrap;
  gap: var(--grid-gap);
  list-style: none;
  margin: 0; padding: 0;
  width: 100%;
}
/* WooCommerce вешает на список клиринговые псевдоэлементы. Во флексе они
   становятся полноценными элементами нулевой ширины и сдвигают первый ряд
   на величину зазора — карточки первой строки не совпадают с остальными. */
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }
/* И свой нижний отступ у карточки (2.992em) — расстояние между рядами
   задаёт зазор сетки, а не он. Стиль WooCommerce подключается после нашего,
   поэтому в селектор добавлен .type-product: с равной специфичностью
   победил бы он. */
.woocommerce ul.products li.product.type-product,
ul.products li.product.type-product { margin: 0; }

.woocommerce ul.products li.product {
  flex: 0 0 auto;
  width: calc(25% - var(--grid-gap));
  max-width: calc(25% - var(--grid-gap));
  margin: 0;
  padding: var(--card-pad);
  text-align: start;
}

/* Карточка выводится одним блоком: ссылка -> медиа -> тело.
   Всё span-ами, чтобы вложенность была корректной внутри <a>. */
.product-card__link {
  display: block;
  text-decoration: none;
  font-family: var(--f-base);
}
.product-card__link:hover { text-decoration: none; }

.product-card__media {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--card-img-ratio);
}

/* Снимок всегда заполняет блок заданной пропорции и обрезается по центру —
   даже если у товара картинка другого соотношения сторон. Селектор длиннее
   нужного нарочно: стиль WooCommerce (height: auto у картинок в сетке)
   подключается после нашего и при равной специфичности победил бы. */
.product-card__img,
.woocommerce ul.products li.product .product-card__img,
ul.products li.product .product-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  margin: 0;
}

.product-card__img--hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .35s ease;
}

li.product:hover .product-card__img--hover,
li.product:focus-within .product-card__img--hover { opacity: 1; }

/* Название и цена отступают внутрь ещё на 20 относительно картинки —
   так на боевом в каталоге; на главной, где у карточки нет полей,
   этот отступ вдвое меньше. */
.product-card__body {
  display: block;
  padding: var(--card-gap-media) var(--card-text-inset, 20px) 0;
}

.product-card__title {
  display: block;
  font-family: var(--f-base);
  font-size: var(--fs-medium);
  font-weight: 400;
  line-height: 1.5556;
  color: var(--c-ink);
  margin-bottom: var(--card-gap-title);
}

.product-card__price {
  display: block;
  font-family: var(--f-base);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: var(--lh-base);
  color: var(--c-ink);
  /* Замер боевого: под ценой 34px = 20 поля карточки + 14 собственный отступ. */
  margin-bottom: var(--card-gap-media);
}
.product-card__price .woocommerce-Price-amount { font-weight: 500; }
.product-card__price del { color: var(--c-grey); margin-right: 6px; }

/* Кнопку покупки в каталоге не показываем — как на боевом. */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button { display: none; }

.woocommerce ul.products li.product .price,
.price {
  font-family: var(--f-base);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: var(--lh-base);
  color: var(--c-ink);
}

.badge--sale {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-family: var(--f-base);
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-white); background: var(--c-ink);
  padding: 4px 10px;
}

/* ---------- Карточка товара ---------- */
/* Замеры боевой карточки при 1440px:
   обёртка 1360 (100% - 80), галерея и описание по 680 (50/50),
   отступ описания слева 110, название Roboto Condensed 32/37.33 (низ 17),
   цена Roboto 30/46.67 (поля 15 сверху, 35 снизу), кнопка 299x80. */

.single-product .container {
  width: calc(100% - 80px);
  max-width: none;
}

.single-product div.product {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0;
}

/* Своя разметка галереи — селектор .product-gallery, а не woocommerce-. */
.single-product .product-gallery,
.single-product .woocommerce-product-gallery {
  flex: 0 0 50%;
  max-width: 50%;
  margin: 0;
}

.single-product .entry-summary,
.single-product .summary {
  flex: 0 0 50%;
  max-width: 50%;
  margin: 0;
  padding-left: 110px;
}

.single-product .product_title {
  font-family: var(--f-display);
  font-size: 32px;
  line-height: 1.1667;
  font-weight: 400;
  color: var(--c-ink);
  margin: 0 0 17px;
}

/* Специфичность не ниже, чем у WooCommerce (.woocommerce div.product p.price),
   иначе кегль остаётся дефолтным 1.25em = 25px. */
.woocommerce div.product .summary .price,
.woocommerce div.product .entry-summary .price,
.woocommerce div.product p.price {
  font-family: var(--f-base);
  font-size: 30px;
  line-height: 1.5556;
  font-weight: 400;
  color: var(--c-ink);
  margin: 15px 0 35px;
}

/* Кнопка «В корзину»: замер боевой — 227x60, фон #AE967C, прописными.
   Ширина не задаётся жёстко, её определяет текст плюс поля. */
/* :not(...) — чтобы правило не захватывало кнопку избранного,
   у неё тот же класс .button, но оформление другое. */
.woocommerce div.product form.cart .button:not(.add-to-wishlist-button),
.single-product .single_add_to_cart_button {
  display: inline-block;
  width: auto;
  height: 60px;
  line-height: 60px;
  padding: 0 40px;
  font-family: var(--f-base);
  font-size: var(--fs-small);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--c-white);
  background-color: var(--c-accent);
  border: 0;
  border-radius: 0;
}

.woocommerce div.product form.cart .button:not(.add-to-wishlist-button):hover,
.single-product .single_add_to_cart_button:hover {
  background-color: #9c8469;
  color: var(--c-white);
}

.woocommerce div.product form.cart .button.disabled,
.woocommerce div.product form.cart .button:disabled {
  opacity: 1;
  cursor: not-allowed;
}

/* Блок количества: 116x60, рамка 1px, поле по центру без рамки. */
.woocommerce div.product form.cart .quantity {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 116px;
  height: 60px;
  border: 1px solid var(--c-border);
}

.woocommerce div.product form.cart .quantity input.qty {
  width: 34px;
  border: 0;
  background: none;
  text-align: center;
  font-family: var(--f-base);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-ink);
  padding: 0;
}

.woocommerce div.product form.cart { display: flex; flex-wrap: wrap; align-items: center; }
.woocommerce div.product form.cart.variations_form { display: block; }
.woocommerce div.product form.cart.variations_form .woocommerce-variation-add-to-cart {
  display: flex; align-items: center; flex-wrap: wrap;
}

/* Выбор варианта. Замеры боевого: подпись «Размер» 14px отдельной строкой,
   под ней список 137x30 без рамки — только нижняя черта, фон прозрачный.
   У WooCommerce это таблица, поэтому строку и ячейку значения переводим
   в блоки, иначе список встаёт справа от подписи и растягивается. */
.woocommerce div.product form.cart table.variations th,
.woocommerce div.product form.cart table.variations td {
  font-family: var(--f-base);
  font-size: var(--fs-small);
  font-weight: 400;
  padding: 0;
  border: 0;
  text-align: left;
  vertical-align: middle;
}
.woocommerce div.product form.cart table.variations {
  /* Замеры боевого: от цены до подписи 47, от подписи до списка 23,
     от списка до ряда с кнопкой 50. */
  margin: 7px 0 50px;
}
.woocommerce div.product form.cart table.variations tr { display: block; }
.woocommerce div.product form.cart table.variations td.value {
  display: block;
  width: auto;
  padding-top: 17px;
}

.woocommerce div.product form.cart table.variations select {
  font-family: var(--f-base);
  font-size: var(--fs-small);
  width: 137px;
  height: 30px;
  padding: 3px 20px 4px 0;
  border: 0;
  border-bottom: 1px solid var(--c-border);
  border-radius: 0;
  background-color: transparent;
  min-width: 0;
}

/* Ряд покупки: [количество 116] [В корзину, тянется] [Избранное 195].
   Замер боевой: ряд 570, кнопка получает flex: 1 и выходит 227. */
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart,
.woocommerce div.product form.cart {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /* 116 (количество) + 16 + 227 (кнопка) + 16 + 195 (избранное) = 570 */
  gap: 16px;
}

.woocommerce div.product form.cart .button:not(.add-to-wishlist-button),
.single-product .single_add_to_cart_button {
  flex: 1 1 0;
  min-width: 160px;
}

/* Избранное — кнопка с рамкой, не заливка. Замер: 195x60, рамка 1px. */
.woocommerce div.product form.cart a.add-to-wishlist-button,
.woocommerce div.product .summary a.add-to-wishlist-button,
.single-product a.add-to-wishlist-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: 60px;
  min-width: 195px;
  padding: 0 40px;
  margin: 0;
  font-family: var(--f-base);
  font-size: var(--fs-small);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--c-ink);
  background: transparent;
  border: 1px solid var(--c-ink);
  border-radius: 0;
  white-space: nowrap;
}

.woocommerce div.product form.cart a.add-to-wishlist-button:hover,
.single-product a.add-to-wishlist-button:hover {
  background: var(--c-ink);
  color: var(--c-white);
  text-decoration: none;
}

/* Краткое описание — Roboto 14px (замер боевой). */
.woocommerce div.product .woocommerce-product-details__short-description {
  font-family: var(--f-base);
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: 1.5556;
  color: var(--c-ink);
  margin: 0 0 15px;
}

/* Артикул и категории — Roboto 11px w500 прописными. */
.woocommerce div.product .product_meta,
.woocommerce div.product .product_meta a {
  font-family: var(--f-base);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5556;
  text-transform: uppercase;
  color: var(--c-ink);
}

/* Вкладки — Roboto 11px w500 прописными, активная чёрная. */
.woocommerce div.product .woocommerce-tabs .tabs {
  display: flex;
  gap: 30px;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--c-grey-light);
}
.woocommerce div.product .woocommerce-tabs .tabs li { margin: 0; padding: 0; border: 0; background: none; }
.woocommerce div.product .woocommerce-tabs .tabs li a {
  display: block;
  font-family: var(--f-base);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5556;
  text-transform: uppercase;
  color: var(--c-grey);
  padding: 0 0 8px;
  text-decoration: none;
}
/* У WooCommerce активная вкладка жирная (700) — на боевом она такая же, как обычная. */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs .tabs li.active a {
  color: var(--c-black);
  font-weight: 500;
}

/* Похожие товары — 4 в ряд, как в оригинале (раньше это чинилось патчем). */
.related.products ul.products li.product {
  width: calc(25% - var(--grid-gap));
  max-width: calc(25% - var(--grid-gap));
}

@media (max-width: 991px) {
  .single-product .product-gallery,
  .single-product .woocommerce-product-gallery,
  .single-product .entry-summary,
  .single-product .summary {
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 0;
  }
  .single-product .entry-summary,
  .single-product .summary { margin-top: 30px; }
}

@media (max-width: 767px) {
  /* Замеры боевой карточки при 375: контейнер 295 (100% - 80),
     галерея шире контейнера — 335 (100% - 40), название 24px,
     описание без левого поля, количество и кнопка во всю ширину
     друг под другом, избранное — квадрат 50x50. */
  .single-product .container { width: calc(100% - 80px); }

  .single-product .product-gallery {
    width: calc(100% + 40px);
    max-width: none;
    margin-left: -20px;
  }

  .single-product .product_title { font-size: 24px; }

  .woocommerce div.product form.cart .quantity,
  .woocommerce div.product form.cart .button:not(.add-to-wishlist-button),
  .single-product .single_add_to_cart_button {
    width: 100%;
    min-width: 0;
    flex: 1 1 100%;
  }

  .woocommerce div.product a.add-to-wishlist-button,
  .single-product a.add-to-wishlist-button {
    width: 50px;
    min-width: 50px;
    height: 50px;
    padding: 0;
    font-size: 0;
  }
}


/* ---------- Галерея товара ---------- */
/* Замеры боевой: блок 680, миниатюры 120 слева, зазор 10, главное фото 550x794.
   Пропорция кадра та же, что в каталоге — 680/982. */

.product-gallery {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.product-gallery__thumbs {
  flex: 0 0 120px;
  width: 120px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 794px;
  overflow-y: auto;
  scrollbar-width: none;
}
.product-gallery__thumbs::-webkit-scrollbar { display: none; }

.product-gallery__thumb {
  padding: 0;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  aspect-ratio: var(--card-img-ratio);
  overflow: hidden;
  flex: 0 0 auto;
}
.product-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-gallery__thumb.is-active { border-color: var(--c-ink); }

.product-gallery__main {
  flex: 1 1 auto;
  position: relative;
  aspect-ratio: var(--card-img-ratio);
  overflow: hidden;
}

.product-gallery__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease;
}
.product-gallery__slide.is-active { opacity: 1; visibility: visible; }
.product-gallery__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Зум при наведении. На боевом это делает плагин jQuery от WooCommerce:
   подкладывает увеличенную копию и водит её за курсором. Здесь тот же
   эффект средствами CSS — масштаб плюс точка отсчёта под курсором.
   Масштабируем сам слайд, а не картинку внутри: к <img> трансформация
   в этой вёрстке не применяется, проверено опытом. */
.product-gallery__slide {
  transform-origin: center center;
  transition: opacity .3s ease, transform .25s ease;
}

.product-gallery__main { cursor: zoom-in; }
.product-gallery__main.is-zoomed { cursor: zoom-out; }
/* Сам масштаб проставляет скрипт инлайном: var() внутри transform
   разворачивается не во всех браузерах — проверено, значение схлопывалось
   в единицу. Здесь оставляем только скорость. */
.product-gallery__main.is-zoomed .product-gallery__slide.is-active {
  transition: transform .15s ease-out;
}

.product-gallery--single .product-gallery__main { flex: 1 1 100%; }

/* Подсказка «открыть во весь экран» — правый нижний угол главного фото.
   Кнопка лежит внутри .product-gallery__main, поэтому клик по ней
   попадает в тот же обработчик, что и клик по фотографии. */
.product-gallery__expand {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--c-ink);
  cursor: zoom-in;
  opacity: 0;
  transition: opacity .2s ease;
}
.product-gallery__main:hover .product-gallery__expand,
.product-gallery__expand:focus-visible { opacity: 1; }

/* На тач-устройствах наведения нет — показываем всегда. */
@media (hover: none) {
  .product-gallery__expand { opacity: 1; }
}

/* -------------------------------------------------------------------------
   Полноэкранный просмотр фотографии
   ---------------------------------------------------------------------- */

.myo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  animation: myo-fade-in .2s ease;
}
.myo-lightbox[hidden] { display: none; }

.myo-lightbox__figure {
  margin: 0;
  max-width: calc(100vw - 160px);
  max-height: calc(100vh - 120px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.myo-lightbox__figure img {
  max-width: 100%;
  max-height: calc(100vh - 120px);
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.myo-lightbox__close,
.myo-lightbox__nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-ink);
  cursor: pointer;
}
.myo-lightbox__close { top: 24px; right: 28px; width: 44px; height: 44px; }
.myo-lightbox__nav { top: 50%; transform: translateY(-50%); width: 56px; height: 56px; }
.myo-lightbox__nav--prev { left: 16px; }
.myo-lightbox__nav--next { right: 16px; }
.myo-lightbox__nav[hidden] { display: none; }

.myo-lightbox__counter {
  position: absolute;
  bottom: 26px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--c-ink);
}

@media (max-width: 767px) {
  .myo-lightbox__figure { max-width: 100vw; max-height: calc(100vh - 100px); }
  .myo-lightbox__figure img { max-height: calc(100vh - 100px); }
  .myo-lightbox__close { top: 12px; right: 12px; }
  .myo-lightbox__nav { width: 44px; height: 44px; }
  .myo-lightbox__nav--prev { left: 2px; }
  .myo-lightbox__nav--next { right: 2px; }
}


/* Крошки на карточке — в правой колонке над названием. */
.breadcrumbs--product { padding: 0 0 20px; }

@media (max-width: 767px) {
  .product-gallery { flex-direction: column-reverse; }

  /* В вертикальной раскладке flex: 1 1 auto не даёт блоку высоты —
     слайды лежат абсолютом, содержимого у него нет, и он схлопывается.
     Поэтому ширину задаём явно, а высоту считает соотношение сторон. */
  .product-gallery__main {
    flex: 0 0 auto;
    width: 100%;
  }

  .product-gallery__thumbs {
    flex-direction: row;
    width: 100%;
    flex: 0 0 auto;
    max-height: none;
    overflow-x: auto;
  }
  .product-gallery__thumb { flex: 0 0 80px; width: 80px; }
}

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

/* Замер боевой: Roboto 11px w500, цвет #838889. */
.breadcrumbs,
.woocommerce .woocommerce-breadcrumb {
  font-family: var(--f-base);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5556;
  color: var(--c-grey);
  padding: 20px 0;
}
.breadcrumbs a,
.woocommerce .woocommerce-breadcrumb a {
  font-family: var(--f-base);
  font-size: 11px;
  font-weight: 500;
  color: var(--c-grey);
}
.breadcrumbs__sep { margin: 0 8px; }

/* ---------- Корзина и оформление ---------- */
/* Замеры боевых страниц при 1440px:
   контейнер 1140 по центру, итоги 1058 с отступом 41,
   кнопки высотой 60 с полями 0/40, заголовки таблицы Roboto 11 w600 прописными,
   поля формы 360x49 с нижней границей 2px #cdcfd0,
   строки формы 570 в две колонки, подписи Roboto 20 w500. */

/* Только контейнер содержимого: у шапки тот же класс .container,
   и без уточнения меню на корзине становилось уже, чем на других страницах. */
.woocommerce-cart .site-content > .container,
.woocommerce-checkout .site-content > .container {
  width: 1140px;
  max-width: calc(100% - 40px);
}

/* --- таблица корзины --- */

.woocommerce table.shop_table {
  border: 0;
  border-collapse: collapse;
  width: 100%;
}

.woocommerce table.shop_table th {
  font-family: var(--f-base);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-align: left;
  padding: 0 0 15px;
  border: 0;
  color: var(--c-ink);
}

/* Ячейки строки товара. Замеры боевой: название 20px w400 с левым полем 40,
   цена и подытог 20px w500 с полями 20, миниатюра 130x188. */
.woocommerce table.shop_table td {
  border: 0;
  border-top: 1px solid var(--c-grey-light);
  padding: 20px;
  font-family: var(--f-base);
  font-size: var(--fs-base);
  color: var(--c-ink);
  vertical-align: middle;
}

.woocommerce table.shop_table td.product-name,
.woocommerce table.shop_table td.product-name a {
  font-family: var(--f-base);
  font-size: var(--fs-base);
  font-weight: 400;
  color: var(--c-ink);
}
.woocommerce table.shop_table td.product-name { padding: 20px 20px 20px 40px; }

.woocommerce table.shop_table td.product-price,
.woocommerce table.shop_table td.product-subtotal {
  font-size: var(--fs-base);
  font-weight: 500;
}

.woocommerce table.shop_table td.product-thumbnail { width: 130px; padding: 20px 0; }
.woocommerce table.shop_table td.product-thumbnail img { width: 130px; height: auto; }

/* WooCommerce красит крестик в #a00 через !important — перебить можно
   только тем же !important. */
.woocommerce table.shop_table td.product-remove a.remove,
.woocommerce table.shop_table td.product-remove a.remove:hover {
  color: var(--c-grey-mid) !important;
  background: none !important;
}
.woocommerce table.shop_table td.product-remove a.remove:hover { color: var(--c-ink) !important; }

.woocommerce table.shop_table td.product-remove a {
  color: var(--c-grey-mid);
  font-size: var(--fs-base);
  text-decoration: none;
}

/* Блок количества в корзине. Замеры боевого: 82x31 без рамки —
   «минус» 16, поле 40, «плюс» 16, промежутки по 5. */
.woocommerce table.shop_table .quantity {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  width: 82px;
  height: 31px;
  border: 0;
}
.woocommerce table.shop_table .quantity .qty-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: #838889;
  cursor: pointer;
}
.woocommerce table.shop_table .quantity .qty-button:hover { color: var(--c-ink); }
.woocommerce table.shop_table .quantity input.qty {
  width: 40px;
  border: 0;
  background: none;
  text-align: center;
  font-family: var(--f-base);
  font-size: 14px;
  font-weight: 400;
  color: var(--c-ink);
  padding: 0;
}

/* «Обновить корзину» — без заливки, прописными. */
.woocommerce table.shop_table button[name="update_cart"],
.woocommerce table.shop_table input[name="update_cart"],
.woocommerce button[name="update_cart"],
.woocommerce input[name="update_cart"] {
  background: transparent;
  color: var(--c-ink);
  font-family: var(--f-base);
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  border: 0;
  padding: 0;
  height: auto;
  line-height: 2;
  width: auto;
}

/* Когда работает скрипт автопересчёта, строка с кнопкой «Обновить
   корзину» не нужна: количество применяется само. Класс ставит JS,
   поэтому без скриптов кнопка остаётся на месте. Купоны выключены,
   больше в этой ячейке ничего нет — прячем строку целиком. */
.woocommerce-cart form.cart-form--auto td.actions { display: none; }
.woocommerce-cart form.cart-form--auto tr.cart-actions-row { display: none; }

/* Пока сервер считает — гасим таблицу, чтобы не кликали по старым числам. */
.woocommerce-cart .woocommerce.is-updating {
  opacity: .55;
  pointer-events: none;
  transition: opacity .15s ease;
}

/* --- итоги --- */

/* Специфичность не ниже, чем у WooCommerce
   (.woocommerce-page .cart-collaterals .cart_totals — float:right, width:48%),
   иначе итоги уезжают вправо на половину ширины. */
/* Замеры боевой при 1440: карточка итогов 1140 в рамке 1px #161619
   с полями 30/40/40, внутри 1058. Заголовок «Сумма корзины» слева,
   суммы и кнопка — колонкой 350 у правого края. */
.woocommerce .cart-collaterals,
.woocommerce-page .cart-collaterals {
  width: 100%;
  margin-top: 51px;
  border: 1px solid var(--c-ink);
  padding: 30px 40px 40px;
}

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals {
  width: auto;
  float: none;
  margin-left: 0;
  margin-right: 0;
}

/* Таблицу итогов разбираем в блоки со строками-флексами. В табличной
   раскладке ширину колонок диктует строка доставки, и пары «подпись —
   сумма» прижимались влево вместо правого края карточки.
   Замеры боевой: пара 350 (136 + 214) у правого края, подпись доставки 370. */
.woocommerce .cart_totals table,
.woocommerce .cart_totals table tbody {
  display: block;
  width: 100%;
}
.woocommerce .cart_totals table tr {
  display: flex;
  width: 100%;
}
.woocommerce .cart_totals table tr.cart-subtotal,
.woocommerce .cart_totals table tr.order-total { justify-content: flex-end; }

.woocommerce .cart_totals table tr.cart-subtotal th,
.woocommerce .cart_totals table tr.order-total th {
  flex: 0 0 136px;
  text-align: left;
}
.woocommerce .cart_totals table tr.cart-subtotal td,
.woocommerce .cart_totals table tr.order-total td {
  flex: 0 0 214px;
  text-align: right;
}
.woocommerce .cart_totals table tr.woocommerce-shipping-totals th { flex: 0 0 370px; }
.woocommerce .cart_totals table tr.woocommerce-shipping-totals td { flex: 1 1 auto; }

/* Кнопка оформления — той же колонкой 350 справа. */
.woocommerce .cart_totals .wc-proceed-to-checkout {
  display: flex;
  justify-content: flex-end;
  padding: 0;
}
.woocommerce .cart_totals .wc-proceed-to-checkout .checkout-button { width: 350px; }

/* Заголовок стоит слева на одной строке с «Подытогом» — выносим его
   из потока, иначе таблица начинается ниже. */
.woocommerce .cart_totals { position: relative; }

/* Замер боевой: заголовок итогов Roboto 18px w500 обычным регистром. */
.entry-content .woocommerce .cart_totals h2,
.woocommerce .cart_totals h2 {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--f-base);
  font-size: 18px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  margin: 0 0 15px;
}

/* Таблица во всю ширину карточки: так строке доставки хватает места
   под список способов и примечание. Суммы при этом собраны в пару
   «подпись — значение» шириной 350 у правого края, как на боевом. */
.woocommerce .cart_totals table,
.woocommerce-page .cart_totals table {
  width: 100%;
  max-width: 100%;
  border: 0;
  border-collapse: collapse;
}

/* У WooCommerce подписи итогов жирные (700) — на боевом 500. */
.woocommerce .cart_totals table th,
.woocommerce-page .cart_totals table th,
.woocommerce-page .cart_totals table tr th {
  width: 136px;
  font-family: var(--f-base);
  font-size: var(--fs-small);
  font-weight: 500;
  text-transform: uppercase;
  text-align: left;
  padding: 0;
  border: 0;
}

.woocommerce .cart_totals table td,
.woocommerce-page .cart_totals table td {
  padding: 0;
  border: 0;
  font-family: var(--f-base);
  font-size: var(--fs-base);
  font-weight: 400;
}

/* Кнопки. Класс .alt у WooCommerce красится в фиолетовый (#7f54b3) правилом
   .woocommerce a.button.alt — перебиваем той же специфичностью. */
/* Кнопки корзины и оформления. Замер боевой: «Оформить заказ» 350x60,
   а не во всю ширину блока — ровно как таблица итогов. */
.woocommerce-cart a.button.alt,
.woocommerce-cart button.button.alt,
.woocommerce-checkout button.button.alt,
.woocommerce-checkout input.button.alt,
.woocommerce a.checkout-button.button.alt,
.woocommerce #place_order,
.woocommerce .checkout-button {
  display: inline-block;
  width: 350px;
  max-width: 100%;
  height: 60px;
  line-height: 60px;
  padding: 0 40px;
  font-family: var(--f-base);
  font-size: var(--fs-small);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--c-white);
  background-color: var(--c-ink);
  border: 0; border-radius: 0;
  text-align: center;
}

.woocommerce-cart a.button.alt:hover,
.woocommerce-cart button.button.alt:hover,
.woocommerce-checkout button.button.alt:hover,
.woocommerce #place_order:hover,
.woocommerce .checkout-button:hover {
  background-color: var(--c-black);
  color: var(--c-white);
}

/* Заголовок корзины и оформления. Замер боевой: Roboto Condensed 80px w400,
   цвет #161619, до таблицы 233px. */
.woocommerce-cart .page-title,
.woocommerce-checkout .page-title {
  font-family: var(--f-display);
  font-size: 80px;
  font-weight: 400;
  line-height: 1.1667;
  color: var(--c-ink);
  /* Замер боевой: от низа заголовка до таблицы 233px. */
  margin: 0 0 233px;
}

/* --- поля оформления --- */

/* На боевом колонки покупателя идут во всю ширину, а не парой по 48%,
   как ставит WooCommerce по умолчанию. */
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2,
.woocommerce-page .col2-set .col-1,
.woocommerce-page .col2-set .col-2 {
  width: 100%;
  float: none;
  padding: 0;
}

/* Специфичность не ниже, чем у .woocommerce form .form-row,
   иначе ширина и отступы остаются дефолтными. */
.woocommerce-checkout form.checkout .form-row,
.woocommerce form.checkout .form-row {
  width: 570px;
  max-width: 100%;
  float: left;
  display: flex;
  flex-direction: column;
  margin: 0 0 20px;
  padding: 0 20px 0 0;
}

.woocommerce-checkout form.checkout .form-row-wide,
.woocommerce form.checkout .form-row-wide { width: 100%; }

.woocommerce-checkout .form-row label {
  display: block;
  font-family: var(--f-base);
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--c-ink);
  text-transform: none;
  margin-bottom: 0;
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row .select2-selection {
  font-family: var(--f-base);
  font-size: var(--fs-medium);
  color: var(--c-ink);
  background: var(--c-white);
  border: 0;
  border-bottom: 2px solid #cdcfd0;
  border-radius: 0;
  padding: 14px 0;
  width: 100%;
  outline: none;
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus {
  border-bottom-color: var(--c-ink);
}

/* Звёздочки обязательности прячем — вместо них пояснение перед формой
   (перенесено из сниппета «Обязательный телефон»). */
.woocommerce-checkout .form-row label .required,
.woocommerce-checkout .form-row label abbr.required,
.woocommerce-checkout .form-row label .optional { display: none !important; }

.checkout-notice {
  clear: both;
  background: #f8f8f8;
  border-left: 4px solid #333;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-family: var(--f-base);
  font-size: var(--fs-small);
  color: #333;
  border-radius: 2px;
}

#customer_details::after,
.woocommerce-checkout .form-row::after { content: ''; display: table; clear: both; }

#order_review { clear: both; }

@media (max-width: 767px) {
  /* Замеры боевой корзины при 375: контейнер 335 (100% - 40),
     заголовок 40px вместо 80, миниатюра 77x111,
     итоги и кнопка 293 с отступом 21 по бокам. */
  .woocommerce-cart .site-content > .container,
  .woocommerce-checkout .site-content > .container { width: calc(100% - 40px); }

  /* Кегль именно 40: --fs-h2 ниже переопределяется на 28 для всей мобильной,
     а заголовок корзины на боевом остаётся 40. */
  .woocommerce-cart .page-title,
  .woocommerce-checkout .page-title {
    font-size: 40px;
    margin-bottom: 40px;
  }

  /* WooCommerce на узких экранах разбирает таблицу корзины в столбик:
     строки становятся блоками, миниатюра прячется, к ячейкам добавляются
     подписи через ::before. Боевой сайт этого не делает — там остаётся
     настоящая таблица, только мельче. Возвращаем табличную раскладку. */
  .woocommerce table.shop_table_responsive,
  .woocommerce-page table.shop_table_responsive { display: table; }
  .woocommerce table.shop_table_responsive thead,
  .woocommerce-page table.shop_table_responsive thead { display: table-header-group; }
  .woocommerce table.shop_table_responsive tbody,
  .woocommerce-page table.shop_table_responsive tbody { display: table-row-group; }
  .woocommerce table.shop_table_responsive tr,
  .woocommerce-page table.shop_table_responsive tr { display: table-row; }
  /* Woo в мобильном блоке ставит ячейкам text-align и фон через !important —
     перебиваем тем же, иначе весь текст уезжает вправо и строки полосатятся. */
  .woocommerce table.shop_table_responsive tr td,
  .woocommerce-page table.shop_table_responsive tr td {
    display: table-cell;
    clear: none;
    text-align: left !important;
    background-color: transparent !important;
  }
  /* Подписи в таблице итогов Woo прячет — на боевом они видны, 176 против 117. */
  .woocommerce table.shop_table_responsive tr th,
  .woocommerce-page table.shop_table_responsive tr th { display: table-cell; }
  /* Селекторы длиннее правила выше по ячейкам таблицы: иначе то, что
     возвращает выравнивание влево, забирает и колонку сумм.
     Раскладку оставляем автоматической, как на боевом: ширина подписи
     176 — это лишь пожелание, на длинных суммах колонка сумм забирает
     своё, и сумма не переносится. */
  .entry-content .woocommerce .cart_totals h2,
  .woocommerce .cart_totals h2,
  .woocommerce-page .cart_totals h2 {
    font-size: 24px;
    font-weight: 500;
    margin: 0 0 20px;
  }
  /* Поля строк на боевом обнулены: подытог укладывается в 31 по высоте.
     Рамки ячеек тоже снимаем — разделители теперь на самих строках,
     иначе от общего правила по ячейкам таблицы остаются обрывки линий. */
  .woocommerce .cart_totals table.shop_table_responsive tr th,
  .woocommerce .cart_totals table.shop_table_responsive tr td,
  .woocommerce-page .cart_totals table.shop_table_responsive tr th,
  .woocommerce-page .cart_totals table.shop_table_responsive tr td {
    padding: 0;
    border: 0;
  }
  .woocommerce .cart_totals table.shop_table_responsive tr th,
  .woocommerce-page .cart_totals table.shop_table_responsive tr th {
    flex: 0 0 176px;
    width: 176px;
    text-align: left !important;
    font-size: 14px;
  }
  .woocommerce .cart_totals table.shop_table_responsive tr td,
  .woocommerce-page .cart_totals table.shop_table_responsive tr td {
    text-align: right !important;
    font-size: 20px;
  }
  .woocommerce table.shop_table_responsive tr td::before,
  .woocommerce-page table.shop_table_responsive tr td::before { content: none; }
  .woocommerce table.shop_table_responsive tr td.product-thumbnail,
  .woocommerce-page table.shop_table_responsive tr td.product-thumbnail { display: table-cell; }
  .woocommerce table.shop_table_responsive tr td.product-price,
  .woocommerce table.shop_table_responsive tr td.product-subtotal,
  .woocommerce-page table.shop_table_responsive tr td.product-price,
  .woocommerce-page table.shop_table_responsive tr td.product-subtotal { text-align: right; }


  /* Замеры боевого при 375: миниатюра 77x111 в ячейке 77 с полями 20/0,
     название 165, количество 93 — итого ровно 335 без прокрутки. */
  .woocommerce table.shop_table td { padding: 20px 0; }
  .woocommerce table.shop_table thead th { font-size: 11px; font-weight: 600; padding: 0 0 15px; }
  .woocommerce table.shop_table td.product-name { padding: 20px 20px 20px 30px; font-size: 20px; }
  .woocommerce table.shop_table td.product-name > a { font-size: 16px; font-weight: 500; }
  .woocommerce table.cart th.product-thumbnail,
  .woocommerce #content table.cart th.product-thumbnail { display: table-cell; }
  .woocommerce table.shop_table td.product-thumbnail,
  .woocommerce table.shop_table th.product-thumbnail,
  .woocommerce table.shop_table td.product-thumbnail img { width: 77px; }
  .woocommerce table.shop_table th.product-quantity,
  .woocommerce table.shop_table td.product-quantity { width: 93px; text-align: right !important; }
  /* На боевом при 375 количество стоит столбиком: «−», поле, «+»;
     блок 40 в ширину, около 79 в высоту, прижат к правому краю. */
  .woocommerce table.shop_table .quantity {
    flex-direction: column;
    gap: 7px;
    width: 40px;
    height: auto;
  }
  .woocommerce table.shop_table .quantity .qty-button { width: 40px; }
  /* «Обновить корзину»: Woo растягивает её на всю ширину, на боевом это
     обычная ссылка-надпись 142x28, прижатая вправо. */
  .woocommerce table.shop_table td.actions { padding: 30px 0 20px; }
  .woocommerce table.shop_table td.actions .button,
  .woocommerce table.shop_table td.actions button[name="update_cart"],
  .woocommerce table.shop_table td.actions input[name="update_cart"] {
    float: right;
    width: auto;
    height: 28px;
    padding: 0;
    line-height: 2;
  }

  /* Колонки, которых на мобильной нет. Ссылку удаления внутри названия
     при этом оставляем — она и заменяет колонку «Удалить». */
  .woocommerce table.shop_table th.product-price,
  .woocommerce table.shop_table td.product-price,
  .woocommerce table.shop_table th.product-subtotal,
  .woocommerce table.shop_table td.product-subtotal,
  .woocommerce table.shop_table th.product-remove,
  .woocommerce table.shop_table > tbody > tr > td.product-remove { display: none; }

  .woocommerce table.shop_table td.product-name .product-price {
    display: block;
    font-size: 16px;
    font-weight: 400;
    line-height: 25px;
    color: var(--c-ink);
  }
  .woocommerce table.shop_table td.product-name .product-remove { display: block; }
  .woocommerce table.shop_table td.product-name .product-remove a.remove {
    font-size: 12px;
    font-weight: 400;
    color: #a2a5a6 !important;
    text-decoration: none;
    background: none;
    width: auto;
    height: auto;
    line-height: 1.2;
  }

  /* Итоги на мобильной — карточка в рамке. Замеры боевого: рамка 1px
     #161619, поля 15/20/20, внутренний блок ровно 293. Отступ 21 слева
     получается сам: 20 поля + 1 рамка. */
  .woocommerce .cart-collaterals,
  .woocommerce-page .cart-collaterals {
    border: 1px solid var(--c-ink);
    padding: 15px 20px 20px;
  }
  .woocommerce .cart-collaterals .cart_totals,
  .woocommerce-page .cart-collaterals .cart_totals {
    margin-left: 0;
    margin-right: 0;
  }
  .woocommerce .cart_totals table,
  .woocommerce-page .cart_totals table { width: 100%; }

  /* Строка доставки на узком экране разворачивается: подпись 18px обычным
     регистром отдельной строкой, под ней способы и примечание во всю ширину. */
  /* Таблицу итогов на мобильной разбираем в блоки: строки — флексы,
     строка доставки — обычный блок в две строки. В табличной раскладке
     ячейка доставки остаётся в колонке 176 и текст жмётся. */
  .woocommerce .cart_totals table.shop_table_responsive,
  .woocommerce .cart_totals table.shop_table_responsive tbody { display: block; }
  .woocommerce .cart_totals table.shop_table_responsive tr {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
  }
  .woocommerce .cart_totals table.shop_table_responsive tr.woocommerce-shipping-totals { display: block; }
  .woocommerce .cart_totals table.shop_table_responsive tr.woocommerce-shipping-totals th,
  .woocommerce .cart_totals table.shop_table_responsive tr.woocommerce-shipping-totals td {
    display: block;
    width: auto;
    text-align: left !important;
  }
  .woocommerce .cart_totals table.shop_table_responsive tr.woocommerce-shipping-totals th {
    font-size: 18px;
    font-weight: 500;
    text-transform: none;
    padding: 30px 0 0;
  }
  .woocommerce .cart_totals table.shop_table_responsive tr.woocommerce-shipping-totals td {
    font-size: 20px;
    padding: 30px 0;
  }
  /* Разделители: строки теперь блочные, рамка на них рисуется во всю ширину. */
  .woocommerce .cart_totals table.shop_table_responsive tr.woocommerce-shipping-totals,
  .woocommerce .cart_totals table.shop_table_responsive tr.order-total {
    border-top: 1px solid #e3e7e8;
  }
  .woocommerce .cart_totals table.shop_table_responsive tr.order-total { padding-top: 20px; }

  /* Сумма не должна переноситься: колонка подписи фиксирована в 176,
     а на длинных числах текст просто заходит левее. */
  .woocommerce .cart_totals table.shop_table_responsive tr.cart-subtotal td,
  .woocommerce .cart_totals table.shop_table_responsive tr.order-total td { white-space: nowrap; }

  /* Способ доставки на боевом помечен галочкой в рамке. */
  .woocommerce .cart_totals ul#shipping_method li label,
  .woocommerce .cart_totals .woocommerce-shipping-methods label {
    display: inline-flex;
    align-items: center;
    gap: 11px;
  }
  .woocommerce .cart_totals ul#shipping_method li label::before,
  .woocommerce .cart_totals .woocommerce-shipping-methods label::before {
    content: '';
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border: 1px solid var(--c-ink);
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23161619' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l5 5 9-10'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
  }
  .woocommerce .cart_totals .woocommerce-shipping-methods li {
    font-size: 20px;
    padding: 0;
    list-style: none;
  }
  .woocommerce .cart_totals .woocommerce-shipping-destination {
    font-size: 16px;
    margin: 0 0 10px;
  }

  .woocommerce-cart a.button.alt,
  .woocommerce a.checkout-button.button.alt,
  .woocommerce .checkout-button { width: 100%; }

  /* Оформление: поля во всю ширину, блок заказа тоже. */
  /* На мобильной боевой оставляет выбор варианта таблицей: подпись слева,
     список справа, кегль 20 — в столбик он уходит только на десктопе. */
  .woocommerce div.product form.cart table.variations { width: 100%; }
  .woocommerce div.product form.cart table.variations tr { display: table-row; }
  .woocommerce div.product form.cart table.variations td.value {
    /* Ширина ячейки фиксирована, а таблица во всю колонку — список
       прижимается к правому краю, как на боевом. */
    display: table-cell;
    width: 148px;
    padding-top: 0;
    text-align: right;
  }
  .woocommerce div.product form.cart table.variations th,
  .woocommerce div.product form.cart table.variations td,
  .woocommerce div.product form.cart table.variations select { font-size: 20px; }
  .woocommerce div.product form.cart table.variations select {
    width: 148px;
    height: 39px;
    /* Список — блочный элемент, выравнивание текста его не двигает,
       поэтому прижимаем автоотступом. */
    display: block;
    margin-left: auto;
  }

  .woocommerce-checkout form.checkout .form-row { width: 100%; float: none; padding-right: 0; }
  .woocommerce-checkout form.checkout .form-row input.input-text,
  .woocommerce-checkout form.checkout .form-row textarea { width: 100%; }
  .woocommerce-checkout #order_review .woocommerce-checkout-review-order-table,
  .woocommerce-checkout #payment { width: 100%; }
  .woocommerce-checkout #order_review { margin-top: 40px; }
  /* «Платёжные реквизиты» и «Ваш заказ» на боевом остаются 40px, хотя
     --fs-h2 на мобильной опущен до 28 — задаём кегль явно. */
  body.woocommerce-checkout #customer_details h3,
  body.woocommerce-checkout .woocommerce-billing-fields h3,
  body.woocommerce-checkout .woocommerce-additional-fields h3,
  body.woocommerce-checkout #order_review_heading { font-size: 40px; }
}


/* Цена и ссылка удаления живут внутри ячейки названия ради мобильной
   раскладки; на десктопе для них есть отдельные колонки. Правило заперто
   в min-width, иначе оно шло бы ниже мобильного блока и побеждало его. */
@media (min-width: 768px) {
  .woocommerce table.shop_table td.product-name .product-price,
  .woocommerce table.shop_table td.product-name .product-remove { display: none; }
}


/* --- оформление заказа: замеры боевого --- */

/* Заголовки разделов «Детали оплаты» и «Ваш заказ» — Roboto 40px w400. */
.woocommerce-checkout #customer_details h3,
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3,
.woocommerce-checkout #order_review_heading {
  font-family: var(--f-base);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.5556;
  text-transform: none;
  color: var(--c-ink);
  margin: 0 0 20px;
}

/* Поле ввода — 360 в ширину, а не во всю строку. */
.woocommerce-checkout form.checkout .form-row input.input-text,
.woocommerce-checkout form.checkout .form-row textarea {
  width: 360px;
  max-width: 100%;
}

/* Подпись способа оплаты — 16px. */
.woocommerce-checkout .wc_payment_method label {
  font-family: var(--f-base);
  font-size: var(--fs-medium);
  font-weight: 400;
}

/* Кнопка «Подтвердить заказ» — во всю ширину блока заказа (945),
   в отличие от «Оформить заказ» в корзине (350). */
.woocommerce-checkout #place_order,
.woocommerce #place_order {
  width: 100%;
  max-width: none;
  display: block;
}

/* Строка с кнопкой заказа — не 570, как остальные строки формы, а во всю
   ширину блока оплаты. Иначе кнопка зажимается до 542. */
/* Специфичность не ниже, чем у .woocommerce-checkout #payment div.form-row,
   иначе остаётся отступ 14px и кнопка выходит уже блока. */
.woocommerce-checkout #payment div.form-row.place-order,
.woocommerce-checkout form.checkout .form-row.place-order,
.woocommerce form.checkout .form-row.place-order {
  width: 100%;
  float: none;
  padding: 0;
}

/* Блок заказа — 945 в ширину (замер боевой), кнопка растягивается по нему. */
.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table,
.woocommerce-checkout #payment {
  width: 945px;
  max-width: 100%;
}

/* Расстояния: от заголовка до формы 255, от формы до блока заказа 155. */
/* На оформлении заказа заголовок стоит по центру и без хлебных крошек;
   между шапкой и заголовком на боевом 60 и на десктопе, и на мобильной. */
.woocommerce-checkout .page-title {
  text-align: center;
  margin: 60px 0 40px;
}

/* Плашка входа занимает левую колонку, а не всю ширину: на боевом 570. */
.woocommerce .woocommerce-form-login-toggle {
  width: 570px;
  max-width: 100%;
}
/* Никакого дополнительного отступа сверху: нужные 70 от заголовка до плашки
   уже даёт нижний отступ заголовка страницы. Раньше здесь стояло поле 30 —
   оно опускало плашку на 373 вместо 343, как на боевом. */

/* Плашка «Уже покупали?» — на боевом голубая с белым текстом,
   ссылка внутри чёрная. Значения сняты с боевого: #81cfe5, поля 18. */
.woocommerce .woocommerce-form-login-toggle .woocommerce-info,
.woocommerce .woocommerce-form-login-toggle .wc-block-components-notice-banner.is-info {
  background: #81cfe5;
  color: #fff;
  border: 0;
  padding: 18px;
  font-size: 14px;
  text-align: center;
}
.woocommerce .woocommerce-form-login-toggle .woocommerce-info::before { content: none; }
.woocommerce .woocommerce-form-login-toggle .woocommerce-info {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* На боевом плашка 76 в высоту на десктопе и 78 на мобильной,
     где текст переносится в две строки. */
  min-height: 76px;
  padding: 18px 60px;
}
.woocommerce .woocommerce-form-login-toggle .myo-notice-close {
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  line-height: 0;
}
.woocommerce .woocommerce-form-login-toggle .woocommerce-info a,
.woocommerce .woocommerce-form-login-toggle .wc-block-components-notice-banner.is-info a {
  color: #000;
  font-weight: 500;
  text-decoration: none;
}
.woocommerce-checkout #order_review { margin-top: 93px; }

/* ---------- Текстовые страницы ---------- */
/* Раньше задавалось через классы Elementor — теперь по своей разметке. */

.page-content .entry-content {
  font-family: var(--f-base);
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: 1.6;
  color: #333;
}
.page-content .entry-content p { margin: 0 0 1.2em; }

/* ---------- Подвал ---------- */

/* Замер боевой: подвал тёмный #161619, ссылки Roboto 14px белые. */
/* Замеры боевого подвала при 1440: высота 97 (поля 40 сверху и 35 снизу),
   контейнер 1320 по центру, слева копирайт, правее ссылки с шагом 38. */
.site-footer {
  background: var(--c-ink);
  color: var(--c-white);
  border-top: 0;
  padding: 40px 0 35px;
}
.site-footer > .container {
  width: calc(100% - 120px);
  max-width: none;
}

.site-footer a,
.site-footer__nav .menu a {
  font-family: var(--f-base);
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: 1.5556;
  color: var(--c-white);
}
.site-footer a:hover { color: var(--c-white); text-decoration: underline; }

.site-footer__widgets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-bottom: 24px;
}

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

.site-footer__nav .menu {
  display: flex; gap: 38px;
  list-style: none; margin: 0; padding: 0;
}
/* Пункт наследует кегль 20, и множитель 1.5556 давал строку 31 —
   подвал становился на 9 выше. Кегль пункта тот же, что у ссылки. */
.site-footer__nav .menu li {
  font-size: var(--fs-small);
  line-height: 1.5556;
}

/* На десктопе копирайт стоит первым. В разметке он идёт после меню —
   так на мобильной ссылки оказываются сверху, как на боевом. */
@media (min-width: 768px) {
  .site-footer__bottom { justify-content: flex-start; }
  .site-footer__copy {
    order: -1;
    min-width: 417px;
  }
}

.site-footer__copy {
  font-family: var(--f-base);
  font-size: var(--fs-small);
  color: var(--c-grey);
  margin: 0;
}

/* ---------- Главная ---------- */
/* Замеры боевой главной при 1440px:
   карусель 1440x1010 во всю ширину, отступ до заголовка 80,
   «Новинки» Roboto 40/40 w500 с полями 20 по бокам, отступ до сетки 20,
   сетка во всю ширину по 5 в ряд (карточка 284, gap 4),
   два баннера по 718x478 с зазором 5. */

.home .site-content > .container,
.page-template-front .site-content > .container { width: 100%; max-width: none; }

.home-section { margin: 0; }
.home-section--heading { padding: 80px 20px 20px; }

/* Селектор с .page-content: иначе побеждает типографика обычной страницы. */
.home-section--heading h2,
.home .page-content .wp-block-heading,
.home .page-content > .entry-content h2 {
  font-family: var(--f-base);
  font-size: var(--fs-h2);
  line-height: 1;
  font-weight: 500;
  color: var(--c-ink);
  margin: 0;
  text-align: start;
}

/* Подборка на главной отличается от каталога дважды:
   пять в ряд вместо четырёх И поля карточки 0 вместо 20.
   Из-за нулевых полей картинки стоят в 4px друг от друга,
   а не в 44 — сетка выглядит заметно плотнее. Замер боевой:
   карточка 284, картинка тоже 284, между картинками 4. */
.home .woocommerce ul.products li.product,
.home ul.products li.product {
  width: calc(20% - var(--grid-gap));
  max-width: calc(20% - var(--grid-gap));
  padding: 0;
}

/* Пара баннеров: 50/50 с зазором 5px, во всю ширину. */
.home-banners {
  display: flex;
  gap: 5px;
  margin-top: 80px;
}
/* Замер боевой: .konte-banner:hover img { transform: scale(1.1) }
   при transition: transform 1s — медленный, едва заметный наезд. */
.home-banners__item {
  flex: 1 1 0;
  display: block;
  line-height: 0;
  overflow: hidden;
}
.home-banners__item img {
  width: 100%;
  height: auto;
  /* Пропорции заданы явно: картинки ленивые, и без зарезервированной
     высоты блок остаётся нулевым, а загрузка так и не начинается. */
  aspect-ratio: 718 / 478;
  object-fit: cover;
  display: block;
  transform: none;
  transition: transform 1s;
}
.home-banners__item:hover img { transform: scale(1.1); }

/* Рекламные баннеры — заготовки «Два рекламных баннера» и «Широкий
   рекламный баннер» в редакторе. Собраны из родных блоков, поэтому
   правила пишем по классам, а не по своей разметке. */

.promo-banners {
  margin-top: 80px;
}
.promo-banners .wp-block-columns.promo-banners__row {
  gap: 5px;
  margin: 0;
}
.promo-banners .wp-block-column { flex-basis: 0; flex-grow: 1; }

.promo-banners .promo-banners__item {
  margin: 0;
  line-height: 0;
  overflow: hidden;
}
.promo-banners .promo-banners__item img {
  width: 100%;
  height: auto;
  aspect-ratio: 718 / 478;
  object-fit: cover;
  display: block;
  transform: none;
  transition: transform 1s;
}
.promo-banners .promo-banners__item:hover img { transform: scale(1.05); }

.promo-banners--wide .promo-banners__item img { aspect-ratio: 1440 / 430; }

@media (max-width: 767px) {
  .promo-banners { margin-top: 40px; }
  .promo-banners .wp-block-columns.promo-banners__row {
    flex-direction: column;
    gap: 8px;
  }
}

@media (max-width: 767px) {
  /* Замеры боевой главной при 375: картинка слайдера 375x250 (768/512),
     над ней 40, под ней 50; заголовок «Новинки» по центру во всю ширину,
     от него до сетки 20; сетка с зазором 8 и карточкой 179.5. */
  .home-section--heading {
    padding: 50px 0 20px;
    text-align: center;
  }
  .home-section--heading h2,
  .home .wp-block-heading { text-align: center; }

  /* На боевом пара баннеров на мобильной не показывается, но отведённое
     под них место остаётся: от сетки до подвала там 235. */
  /* Подвал на мобильной складывается в столбик: сначала ссылки по центру
     в колонке 295, под ними копирайт. Замеры боевого: поля 40 сверху и 35
     снизу, блок ссылок 107, копирайт 42 — итого 224. */
  .site-footer { padding: 40px 0 35px; }
  .site-footer__bottom {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .site-footer__nav {
    width: 295px;
    max-width: 100%;
    padding: 10px 0;
  }
  .site-footer__nav .menu {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 24px;
  }

  .site-footer__copy {
    width: 100%;
    padding: 10px 0;
    text-align: center;
  }

  .home-banners { display: none; }
  .home .site-main,
  .page-template-front .site-main { padding-bottom: 235px; }

  .home .woocommerce ul.products,
  .home ul.products {
    gap: 8px;
    justify-content: flex-start;
    padding: 0;
  }
  .home .woocommerce ul.products li.product,
  .home ul.products li.product {
    width: calc(50% - 8px);
    max-width: calc(50% - 8px);
  }

  /* В карточке на мобильной отступы от картинки до названия и под ценой
     по 10, а не 14: карточка выходит 332, как на боевом. */
  .home ul.products li.product,
  ul.products li.product { --card-gap-media: 10px; }

  /* Слайдер на мобильной: стрелок нет (листается свайпом), точки стоят
     под картинкой, а не поверх неё. Замеры боевого: картинка 375x250,
     над ней 40, под ней 50 — в этой полосе и лежат точки. */
  .home .myo-slider,
  .page-template-front .myo-slider {
    aspect-ratio: auto;
    margin-top: 40px;
    padding-bottom: 50px;
  }
  /* Селекторы с запасом: сам блок слайдера описан ниже по файлу
     и при равной специфичности перебил бы эти правила. */
  .myo-slider .myo-slider__img { height: auto; }
  .myo-slider .myo-slider__dots { bottom: 20px; }
}

/* ---------- Слайдер (замена Revolution Slider) ---------- */

.myo-slider {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--slider-ratio, 1440 / 1010);
}

.myo-slider__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.myo-slider__track {
  display: flex;
  transition: transform .5s ease;
  will-change: transform;
}
.myo-slider__slide { flex: 0 0 100%; position: relative; }
.myo-slider__dots {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px;
}
.myo-slider__dot {
  width: 8px; height: 8px; border-radius: 50%;
  border: 0; padding: 0;
  background: var(--c-overlay);
}
.myo-slider__dot[aria-current="true"] { background: var(--c-ink); }

/* =========================================================================
   Адаптив
   ========================================================================= */

@media (max-width: 991px) {
  .woocommerce ul.products li.product {
    width: calc(33.333% - var(--grid-gap));
    max-width: calc(33.333% - var(--grid-gap));
  }
  .site-footer__widgets { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  /* На узких экранах поля по бокам 20, а не 30: так на боевом. */
  :root {
    --fs-h2: var(--fs-h2-mob);
    --container-w: calc(100% - 40px);
    --container-max: calc(100% - 40px);
  }

  /* Мобильная шапка. Замер боевого при 375: высота 68, бургер 20x22
     с отступом 20 слева, логотип тот же 119x70 по центру, справа
     ТОЛЬКО корзина — кабинета, поиска и избранного на мобильном нет. */
  .site-header__inner {
    height: var(--header-h-mob);
    padding: 0 20px;
  }
  .site-header__burger { display: inline-flex; padding: 0; }
  .site-nav--left { display: none; }
  .site-header__brand-heroes { display: none; }

  .site-header__actions .site-header__action:not(.site-header__cart),
  .site-header__search-toggle,
  .site-header__wishlist { display: none; }

  .site-header__logo { z-index: 1; }

  h2 { font-size: var(--fs-h2-mob); line-height: 1; }

  .woocommerce ul.products {
    gap: var(--grid-gap-mob);
  }
  /* Замер боевого при 375: карточка 184x320, поля те же 20px,
     картинка 144x207 — то есть от десктопа отличается только число колонок. */
  .woocommerce ul.products li.product {
    width: calc(50% - var(--grid-gap-mob));
    max-width: calc(50% - var(--grid-gap-mob));
    padding: var(--card-pad);
  }

  .site-footer__widgets { grid-template-columns: 1fr; }
  /* Раскладку подвала на мобильной задаёт блок выше (столбик по центру);
     это правило шло ниже и возвращало выравнивание по левому краю. */
}

/* ---------- Страница без заголовка (Brand Heroes) ---------- */
/* Замеры боевой при 1440: контент 1140 по центру, от шапки 130,
   заголовок Roboto Condensed 80 по центру с отступом 20 снизу.
   Ряд: два столбца по 560 без зазора, у ряда и у столбцов поля 10 —
   картинка и текст выходят по 540, между ними 20. */

.page-content--plain {
  width: 1140px;
  max-width: 100%;
  margin-inline: auto;
  padding-top: 60px;
  padding-bottom: 60px;
}

/* Замер боевого: Roboto Condensed 60/60 w500 по левому краю,
   поля 10 — как у рядов ниже, поэтому текст начинается с 160. */
.brand-heroes__title {
  /* На боевом от шапки до заголовка 130, а не общие для шаблона 60. */
  margin-top: 70px;
  font-family: var(--f-display);
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: 1;
  text-align: left;
  padding: 10px;
}

.brand-heroes__row {
  gap: 0;
  padding: 10px;
  margin: 0;
}
.brand-heroes__row .wp-block-column { padding: 10px; }
.brand-heroes__row figure { margin: 0; }
.brand-heroes__row img {
  width: 100%;
  height: auto;
  display: block;
}
.brand-heroes__row p {
  font-family: var(--f-base);
  font-size: 20px;
  line-height: 1.5556;
  color: var(--c-ink);
  margin: 0;
}

@media (max-width: 767px) {
  /* Замеры боевой при 375: заголовок начинается со 168, столбцы встают
     друг под друга, между картинкой и текстом 50. */
  .page-content--plain { padding-top: 100px; }
  .brand-heroes__row .wp-block-column + .wp-block-column { padding-top: 40px; }
}

/* ---------- Страница с картинкой слева («О нас») ---------- */
/* Замеры боевой при 1440x900: экран делится пополам, слева картинка
   720x900 (во всю высоту окна), справа контент шириной 550, начинается
   с 830 — то есть с отступом 110 от середины и 60 от правого края,
   по вертикали по центру. Шапка прозрачная и лежит поверх картинки. */

/* Страница занимает окно целиком, подвал стоит сразу под ней:
   на боевом высота документа ровно во весь экран. */
.page-template-split {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.page-template-split .site-content {
  flex: 1 1 auto;
  display: flex;
}

.split-page {
  display: flex;
  flex: 1 1 auto;
}

.split-page__media {
  flex: 0 0 50%;
  position: relative;
  overflow: hidden;
}
.split-page__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.split-page__content {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  padding: 170px 60px 100px 110px;
}
.split-page__inner { width: 100%; }

.about-page__logo { margin: 0; }
.about-page__logo img {
  width: 300px;
  height: auto;
  display: block;
}
.about-page__text {
  font-family: var(--f-base);
  font-size: 16px;
  line-height: 1.5556;
  color: var(--c-ink);
  margin: 36px 0 0;
}

/* Шапка на этой странице лежит поверх картинки и не занимает место. */
.page-template-split .site-header,
.page-template-templates-split .site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  background: transparent;
}

@media (max-width: 767px) {
  /* Замеры боевой при 375: картинка сверху во всю ширину и 406 в высоту
     (половина экрана), под ней контент с полями 40 сверху и снизу. */
  .split-page { flex-direction: column; min-height: 0; }
  .split-page__media {
    flex: 0 0 auto;
    height: 50vh;
  }
  .split-page__content {
    flex: 0 0 auto;
    padding: 40px 20px;
  }
  .about-page__text { font-size: 16px; }
}

/* ---------- Обычная страница (политики и подобные) ---------- */
/* Замеры боевой при 1440: контейнер 1140 по центру, от шапки 60,
   заголовок Roboto Condensed 80 w400 по центру, до текста 80,
   текст 20/31.11 с полями абзаца 20 сверху и 30 снизу,
   подзаголовки 40 w500. */

.page-content {
  width: 1140px;
  max-width: 100%;
  margin-inline: auto;
  padding-top: 60px;
  padding-bottom: 60px;
}
/* Главная собрана из полноширинных блоков — рамки обычной страницы ей не нужны. */
.home .page-content,
.page-template-front .page-content {
  width: 100%;
  max-width: none;
  padding-top: 0;
  padding-bottom: 0;
}

.page-content > .page-title {
  font-family: var(--f-display);
  font-size: 80px;
  font-weight: 400;
  line-height: 1.1667;
  text-align: center;
  /* Замер боевого на обычной странице («Политика возврата»): от заголовка
     до первого подзаголовка 70 — отступы схлопываются, поэтому именно 70,
     а не 70 плюс собственный отступ подзаголовка. */
  margin: 0 0 70px;
}

.page-content > .entry-content p,
.page-content > .entry-content li {
  font-family: var(--f-base);
  font-size: 20px;
  line-height: 1.5556;
  color: var(--c-ink);
}
.page-content > .entry-content p { margin: 20px 0 30px; }

/* Замеры боевого: у списка отступ слева 30 и 50 снизу, между пунктами 6.
   Сетка товаров — тоже ul, её это правило задевать не должно. */
.page-content > .entry-content ul:not(.products),
.page-content > .entry-content ol {
  padding-left: 30px;
  margin: 0 0 50px;
}
.page-content > .entry-content ul:not(.products) > li,
.page-content > .entry-content ol > li { margin: 0 0 6px; }

.page-content > .entry-content h2 {
  font-family: var(--f-base);
  font-size: 40px;
  font-weight: 500;
  line-height: 1.5556;
  margin: 0.83em 0;
}
/* Замер боевого: подзаголовок третьего уровня 30 с отступами 30. */
.page-content > .entry-content h3 {
  font-family: var(--f-base);
  font-size: 30px;
  font-weight: 500;
  margin: 30px 0;
}

@media (max-width: 767px) {
  /* Замер боевой: от шапки до заголовка 60. */
  .page-content { padding-top: 60px; }
  .page-content > .page-title {
    font-size: 40px;
    margin-bottom: 40px;
  }
}

/* ---------- Страница «не найдено» ---------- */
/* Замеры боевой при 1440: контейнер 1140, метка «Ошибка 404» на 320
   (12 w600 прописными, с чёрточкой слева), «Упс.» на 364 (60 w500),
   пояснение на 449 (24), кнопка 322x60 на 553. */

.page-content--404 { padding-top: 200px; }

.error-404__label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--f-base);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-ink);
  margin: 0;
}
.error-404__label::before {
  content: '';
  width: 30px;
  height: 1px;
  background: var(--c-ink);
}

.page-content > .error-404__title {
  font-family: var(--f-display);
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: 1;
  text-align: left;
  margin: 25px 0 0;
}

.error-404__text {
  font-family: var(--f-base);
  font-size: 24px;
  line-height: 1.5556;
  color: var(--c-ink);
  margin: 25px 0 0;
}

.error-404__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  width: 322px;
  height: 60px;
  margin-top: 29px;
  background: var(--c-ink);
  color: var(--c-white);
  font-family: var(--f-base);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
}
.error-404__button:hover { color: var(--c-white); }

@media (max-width: 767px) {
  .page-content--404 { padding-top: 80px; }
  .error-404__text { font-size: 20px; }
  .error-404__button { width: 100%; }
}

/* ---------- Результаты поиска ---------- */
/* Замеры боевой при 1440: заголовок Roboto Condensed 30 w500 слева на 150,
   список шириной 750, карточка — картинка 360x210 и текст 350 через 40,
   шаг между карточками 250. */

.search .site-main {
  width: 1140px;
  max-width: 100%;
  margin-inline: auto;
  padding-top: 30px;
  padding-bottom: 60px;
}

.search .page-title {
  font-family: var(--f-display);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.5556;
  text-align: left;
  margin: 0 0 30px;
}

.search .post-list {
  width: 750px;
  max-width: 100%;
}

.post-card {
  display: flex;
  gap: 40px;
  margin-bottom: 40px;
}
.post-card__media {
  flex: 0 0 360px;
  line-height: 0;
}
/* Текстовая колонка на боевом подчёркнута снизу и по высоте равна
   картинке, а описание обрезано до двух строк. */
.post-card__body {
  flex: 1 1 auto;
  min-width: 0;
  border-bottom: 1px solid #e3e7e8;
}
.post-card__media img {
  width: 360px;
  height: 210px;
  object-fit: cover;
  display: block;
}
.post-card__title {
  font-family: var(--f-base);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.3333;
  margin: 0 0 14px;
}
.post-card__title a { color: var(--c-ink); text-decoration: none; }
.post-card__excerpt {
  font-family: var(--f-base);
  font-size: 16px;
  line-height: 1.5556;
  color: var(--c-grey);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-card__excerpt p { margin: 0; }

@media (max-width: 767px) {
  .search .site-main { padding-top: 20px; }
  .post-card { flex-direction: column; gap: 14px; }
  .post-card__media { flex: 0 0 auto; }
  .post-card__media img { width: 100%; height: auto; }
  .post-card__title { font-size: 20px; }
}

/* ---------- Избранное ---------- */
/* Замеры боевой при 1440: пустой список — надпись по центру на 363
   (20 кегль), под ней чёрная кнопка 228x60 по центру. */

.soo-wishlist .wishlist-empty,
.soo-wishlist .return-to-shop { text-align: center; }

.soo-wishlist .wishlist-empty p {
  font-family: var(--f-base);
  font-size: 20px;
  line-height: 1.5556;
  color: var(--c-ink);
  margin: 0;
}

/* Полем, а не отступом: отступ схлопнулся бы с нижним у заголовка. */
.soo-wishlist { padding-top: 20px; }
.soo-wishlist p.return-to-shop { margin: 30px 0 0; }
.soo-wishlist .return-to-shop .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  padding: 0 35px;
  background: var(--c-ink);
  color: var(--c-white);
  font-family: var(--f-base);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
}
.soo-wishlist .return-to-shop .button:hover { color: var(--c-white); }

/* В каталоге у многих вещей одинаковые названия («Брюки», «Жилет»),
   поэтому под названием печатаем раздел и артикул. */
.wishlist_table td.product-name a {
  display: block;
  color: var(--c-ink);
  text-decoration: none;
}
/* Крестик удаления WooCommerce красит красным через !important. */
.wishlist_table td.product-remove a.remove,
.wishlist_table td.product-remove a.remove:hover {
  color: var(--c-grey) !important;
  background: none !important;
  font-size: 22px;
  line-height: 1;
}
.wishlist_table td.product-remove a.remove:hover { color: var(--c-ink) !important; }

.wishlist_table .wishlist-item__meta {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--c-grey);
}

/* ---------- Личный кабинет ---------- */
/* Замеры боевой при 1440: колонка 360 по центру (слева 540),
   переключатель над формой, поля 360x49 с подчёркиванием 2px #e3e7e8,
   кнопка 360x60 чёрная. */

.woocommerce-account .u-columns.col2-set,
.woocommerce-account .account-tabs {
  width: 360px;
  max-width: 100%;
  margin-inline: auto;
}

.account-tabs {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Замеры боевой: «Войти» на 363, «Зарегистрироваться» на 400,
     форма начинается с 455. */
  gap: 5px;
  margin-top: 20px;
  margin-bottom: 23px;
}
.account-tabs__tab {
  padding: 0 0 6px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  font-family: var(--f-base);
  font-size: 20px;
  line-height: 1.25;
  color: var(--c-grey);
  cursor: pointer;
}
.account-tabs__tab.is-active {
  color: var(--c-ink);
  border-bottom-color: var(--c-ink);
}

.woocommerce-account .u-columns .u-column1,
.woocommerce-account .u-columns .u-column2 {
  width: 100%;
  float: none;
}

.woocommerce-account form.woocommerce-form {
  border: 0;
  padding: 31px 0 0;
  margin: 0;
}
.woocommerce-account form.woocommerce-form .form-row {
  padding: 0;
  margin: 0 0 31px;
}
.woocommerce-account form.woocommerce-form input.input-text {
  width: 100%;
  height: 49px;
  padding: 0;
  border: 0;
  border-bottom: 2px solid #e3e7e8;
  border-radius: 0;
  background: none;
  font-family: var(--f-base);
  font-size: 16px;
  color: var(--c-ink);
}
.woocommerce-account form.woocommerce-form input.input-text::placeholder { color: var(--c-grey); }

.woocommerce-account form.woocommerce-form button[type="submit"] {
  width: 100%;
  height: 60px;
  border: 0;
  background: var(--c-ink);
  color: var(--c-white);
  font-family: var(--f-base);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.woocommerce-account .woocommerce-form-login__rememberme {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 31px;
  font-size: 16px;
  color: var(--c-grey);
}
.woocommerce-account .woocommerce-form-login__rememberme input { width: 20px; height: 20px; }

.woocommerce-account .woocommerce-LostPassword {
  margin: 20px 0 0;
  font-size: 16px;
}
.woocommerce-account .woocommerce-LostPassword a { color: var(--c-grey); }

@media (max-width: 767px) {
  /* Замер боевой при 375: колонка формы 305, то есть на 15 уже контейнера. */
  .woocommerce-account .u-columns.col2-set,
  .woocommerce-account .account-tabs { max-width: calc(100% - 30px); }
}

/* ---------- Кабинет после входа ----------
   Две колонки: слева разделы, справа содержимое. Ширины правил длиннее
   селекторов WooCommerce намеренно — его стиль подключается позже темы
   и при равной специфичности выигрывает он. */

.woocommerce-account.logged-in .woocommerce {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 60px;
  align-items: start;
}

/* WooCommerce раскладывает кабинет флоатами и процентами (30% / 68%).
   Его стиль подключается позже темы, поэтому сбрасываем явно и длинным
   селектором — при равной специфичности победил бы он. */
.woocommerce-account.logged-in .woocommerce .woocommerce-MyAccount-navigation,
.woocommerce-account.logged-in .woocommerce .woocommerce-MyAccount-content {
  float: none;
  width: auto;
  margin: 0;
  grid-row: 1;
}
/* Колонки проставляем явно: при автоматической раскладке эти два блока
   вставали местами — проверено в браузере. */
.woocommerce-account.logged-in .woocommerce .woocommerce-MyAccount-navigation { grid-column: 1; }
.woocommerce-account.logged-in .woocommerce .woocommerce-MyAccount-content { grid-column: 2; }

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid #e3e7e8;
  font-size: 16px;
  line-height: 1.3;
  color: var(--c-grey);
  text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
  color: var(--c-ink);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
  color: var(--c-ink);
  border-bottom-color: var(--c-ink);
}

.woocommerce-account .woocommerce-MyAccount-content { min-width: 0; }
.woocommerce-account .woocommerce-MyAccount-content > p:first-child { margin-top: 0; }

/* Уведомления в кабинете. WooCommerce рисует их зелёной и синей
   полосой с галочкой — в чёрно-белой вёрстке это чужеродно.
   Приводим к тому же виду, что подсказка на оформлении заказа. */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error {
  margin: 0 0 24px;
  padding: 12px 16px;
  background: #f8f8f8;
  border: 0;
  border-left: 4px solid var(--c-ink);
  border-radius: 2px;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-ink);
  list-style: none;
}
.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-error::before { content: none; }
.woocommerce-account .woocommerce-error { border-left-color: #c0392b; }
.woocommerce-account .woocommerce-error li { list-style: none; margin: 0; }

/* ---------- Адресная книга ---------- */

.myo-addresses__list {
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 16px;
  max-width: 520px;
}

.myo-address {
  margin: 0;
  padding: 18px 20px;
  border: 1px solid var(--c-grey-light);
  list-style: none;
}
.myo-address--default { border-color: var(--c-ink); }

.myo-address__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 8px;
}
.myo-address__label {
  font-size: 17px;
  font-weight: 500;
  color: var(--c-ink);
}
.myo-address__badge {
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-grey);
}

.myo-address__line {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--c-ink);
}

.myo-address__actions {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 14px;
}
.myo-address__actions a { color: var(--c-grey); text-decoration: none; }
.myo-address__actions a:hover { color: var(--c-ink); }
.myo-address__actions a.myo-address__remove:hover { color: #c0392b; }

.myo-addresses__empty {
  margin: 0 0 26px;
  max-width: 520px;
  color: var(--c-grey);
}

.myo-address-form { max-width: 520px; }
.myo-address-form__title {
  margin: 0 0 22px;
  font-size: 20px;
  font-weight: 500;
}
.myo-address-form__default label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--c-ink);
}
.myo-address-form__default input { width: 18px; height: 18px; }
.myo-address-form__cancel {
  margin-left: 20px;
  font-size: 14px;
  color: var(--c-grey);
}

/* ---------- Выбор адреса при оформлении заказа ---------- */

.myo-addr-picker {
  margin: 0 0 26px;
  display: grid;
  gap: 10px;
}
.myo-addr-picker__title {
  margin: 0 0 4px;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-grey);
}
.myo-addr-picker__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--c-grey-light);
  cursor: pointer;
}
.myo-addr-picker__item:has(input:checked) { border-color: var(--c-ink); }
.myo-addr-picker__item input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; }
.myo-addr-picker__text { display: block; }
.myo-addr-picker__label {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: var(--c-ink);
}
.myo-addr-picker__line {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--c-grey);
}

.myo-account-greeting {
  margin: 0 0 26px;
  font-size: 20px;
  line-height: 1.3;
  color: var(--c-ink);
}

/* Адреса доставки: две карточки рядом. */
/* Платёжный адрес мы больше не спрашиваем, остался один — доставки.
   Поэтому колонка одна, а не половина ширины с пустотой рядом. */
.woocommerce-account .woocommerce-MyAccount-content .u-columns.col2-set {
  display: grid;
  grid-template-columns: minmax(0, 460px);
  gap: 40px;
  width: auto;
  max-width: none;
  margin: 26px 0 0;
}
.woocommerce-account .woocommerce-MyAccount-content .u-columns .u-column1,
.woocommerce-account .woocommerce-MyAccount-content .u-columns .u-column2 {
  float: none;
  width: auto;
  grid-row: 1;
}
/* Колонки проставляем явно — как и в раскладке кабинета: при
   автоматическом размещении блоки менялись местами. */
.woocommerce-account .woocommerce-MyAccount-content .u-columns .u-column1 { grid-column: 1; }
.woocommerce-account .woocommerce-MyAccount-content .u-columns .u-column2 { grid-column: 2; }
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h3 {
  margin: 0 0 10px;
  font-size: 20px;
  text-align: left;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 18px;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title a {
  font-size: 14px;
  color: var(--c-grey);
}
.woocommerce-account .woocommerce-MyAccount-content address {
  font-style: normal;
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-ink);
}

@media (max-width: 767px) {
  .woocommerce-account .woocommerce-MyAccount-content .u-columns.col2-set {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }
  .woocommerce-account .woocommerce-MyAccount-content .u-columns .u-column1,
  .woocommerce-account .woocommerce-MyAccount-content .u-columns .u-column2 {
    grid-column: 1;
    grid-row: auto;
  }
}

/* Таблица заказов */
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table th,
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td {
  padding: 14px 10px;
  border-bottom: 1px solid #e3e7e8;
  text-align: left;
  background: none;
}
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table th {
  font-weight: 500;
  color: var(--c-grey);
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Формы «Мои данные» и «Адреса доставки» — те же поля, что на входе. */
.woocommerce-account .woocommerce-MyAccount-content form .form-row {
  padding: 0;
  margin: 0 0 26px;
}
.woocommerce-account .woocommerce-MyAccount-content form label {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-grey);
}
.woocommerce-account .woocommerce-MyAccount-content form input.input-text,
.woocommerce-account .woocommerce-MyAccount-content form select {
  width: 100%;
  max-width: 420px;
  height: 49px;
  padding: 0;
  border: 0;
  border-bottom: 2px solid #e3e7e8;
  border-radius: 0;
  background: none;
  font-family: var(--f-base);
  font-size: 16px;
  color: var(--c-ink);
}
.woocommerce-account .woocommerce-MyAccount-content form button[type="submit"] {
  min-width: 260px;
  height: 60px;
  padding: 0 30px;
  border: 0;
  background: var(--c-ink);
  color: var(--c-white);
  font-family: var(--f-base);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}
.woocommerce-account .woocommerce-MyAccount-content fieldset {
  margin: 34px 0 0;
  padding: 0;
  border: 0;
  border-top: 1px solid #e3e7e8;
}
.woocommerce-account .woocommerce-MyAccount-content fieldset legend {
  padding: 26px 0 14px;
  font-size: 20px;
  color: var(--c-ink);
}

/* Кнопки-ссылки внутри кабинета (Просмотр товаров, Изменить, Оплатить) */
.woocommerce-account .woocommerce-MyAccount-content a.button,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 22px;
  background: var(--c-ink);
  color: var(--c-white);
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
}

@media (max-width: 900px) {
  .woocommerce-account.logged-in .woocommerce {
    display: block;
  }
  .woocommerce-account.logged-in .woocommerce .woocommerce-MyAccount-navigation,
  .woocommerce-account.logged-in .woocommerce .woocommerce-MyAccount-content {
    grid-column: auto;
    grid-row: auto;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation {
    margin: 0 0 30px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation::-webkit-scrollbar { display: none; }
  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: flex;
    gap: 22px;
    white-space: nowrap;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    padding: 8px 0;
    border-bottom-width: 2px;
    border-bottom-color: transparent;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    border-bottom-color: var(--c-ink);
  }
}

/* ---------- Страницы категорий и магазина ---------- */
/* По просьбе клиента витрины плотные: четыре карточки в ряд, зазор 4,
   у карточки нет боковых полей — между снимками ровно зазор сетки.
   Шаблон «Каталог во всю ширину» разворачивает сетку от края до края. */

.page-content--catalog {
  width: 100%;
  max-width: none;
  padding-top: 60px;
  padding-bottom: 60px;
}
/* Блочный редактор ограничивает содержимое шириной контента из theme.json —
   витрине это ограничение не нужно. */
.page-content--catalog .entry-content,
.page-content--catalog .entry-content > *,
.page-content--catalog .category-grid,
.page-content--catalog .category-grid > * {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.category-grid ul.products,
.category-grid .woocommerce ul.products {
  gap: var(--grid-gap);
  margin-bottom: 50px;
}

.category-grid ul.products li.product,
.category-grid .woocommerce ul.products li.product { padding: 0; }

.category-grid ul.products li.product,
.category-grid .woocommerce ul.products li.product {
  width: calc(25% - var(--grid-gap));
  max-width: calc(25% - var(--grid-gap));
}

@media (max-width: 767px) {
  .category-grid ul.products,
  .category-grid .woocommerce ul.products { gap: var(--grid-gap-mob); }
  .category-grid ul.products li.product,
  .category-grid .woocommerce ul.products li.product {
    width: calc(50% - var(--grid-gap-mob));
    max-width: calc(50% - var(--grid-gap-mob));
  }
}

/* ---------- Lookbook ---------- */
/* Замеры боевой при 1440: снимки 768 по центру, между ними 40. */
.lookbook figure {
  margin: 0 0 40px;
  text-align: center;
}
.lookbook figure:last-child { margin-bottom: 0; }
.lookbook img {
  width: 768px;
  max-width: 100%;
  height: auto;
  display: inline-block;
}

/* ---------- Контакты ---------- */
/* Замеры боевой при 1440: колонка 760 по центру, слева подпись «Офис»
   (18 w500 прописными, ширина 175), справа пары «подпись — значение»,
   подпись 14 w500 прописными шириной 110. «Напишите нам» — 40 w500.
   Селекторы длиннее обычных: иначе побеждает типографика обычной страницы. */

.entry-content .contacts-page {
  width: 760px;
  max-width: 100%;
  margin-inline: auto;
}

.entry-content .contacts-page .contacts-page__office {
  display: flex;
  gap: 20px;
  margin-bottom: 60px;
}
.entry-content .contacts-page .contacts-page__label {
  flex: 0 0 175px;
  margin: 0;
  font-family: var(--f-base);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.entry-content .contacts-page .contacts-page__list { flex: 1 1 auto; }

.entry-content .contacts-page .contacts-page__row {
  display: flex;
  gap: 20px;
  margin: 0 0 6px;
  font-family: var(--f-base);
  font-size: 14px;
  line-height: 1.5556;
}
.entry-content .contacts-page .contacts-page__row strong {
  flex: 0 0 110px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-ink);
}
.entry-content .contacts-page .contacts-page__row span { color: var(--c-grey); }

.entry-content .contacts-page .contacts-page__write {
  font-family: var(--f-base);
  font-size: 40px;
  font-weight: 500;
  line-height: 1;
  margin: 0 0 40px;
}

/* ---------- Форма обратной связи (Contact Form 7) ----------
   Замеры боевой при 1440: форма 760 по центру, подпись 16 серым над полем,
   поле 47 высотой с подчёркиванием 2px #cdcfd0, textarea 80, кнопка во всю
   ширину 60 высотой. При 375 всё то же, ширина 315. */

.wpcf7 { margin: 0; }
.wpcf7 form.wpcf7-form { margin: 0; }

/* Строка формы: между строками 24 (отступы соседних абзацев схлопываются). */
.wpcf7 form.wpcf7-form p {
  margin: 16px 0 24px;
}

/* Подпись обёрнута вокруг поля, поэтому блок и серый цвет задаём на ней,
   а само поле возвращает основной цвет текста. */
.wpcf7 form.wpcf7-form label {
  display: block;
  margin: 20px 0 0;
  font-family: var(--f-base);
  font-size: 16px;
  line-height: 1.55;
  color: var(--c-grey);
}

.wpcf7 form.wpcf7-form .wpcf7-form-control-wrap { display: block; }

.wpcf7 form.wpcf7-form input[type="text"],
.wpcf7 form.wpcf7-form input[type="email"],
.wpcf7 form.wpcf7-form input[type="tel"],
.wpcf7 form.wpcf7-form input[type="url"],
.wpcf7 form.wpcf7-form input[type="number"],
.wpcf7 form.wpcf7-form input[type="date"],
.wpcf7 form.wpcf7-form select,
.wpcf7 form.wpcf7-form textarea {
  width: 100%;
  height: 47px;
  padding: 13px 0;
  border: 0;
  border-bottom: 2px solid var(--c-border);
  border-radius: 0;
  background: none;
  font-family: var(--f-base);
  font-size: 16px;
  line-height: 1.3;
  color: var(--c-ink);
  -webkit-appearance: none;
  appearance: none;
}

.wpcf7 form.wpcf7-form textarea {
  height: 80px;
  min-height: 80px;
  line-height: 1.55;
  resize: vertical;
}

.wpcf7 form.wpcf7-form input::placeholder,
.wpcf7 form.wpcf7-form textarea::placeholder { color: var(--c-grey); }

/* На боевом подчёркивание при фокусе не меняется, и увидеть, где ты
   находишься, можно только по курсору. Здесь линия темнеет — видно
   при наборе и не заметно в покое. */
.wpcf7 form.wpcf7-form input:focus,
.wpcf7 form.wpcf7-form textarea:focus,
.wpcf7 form.wpcf7-form select:focus {
  outline: none;
  border-bottom-color: var(--c-ink);
}

.wpcf7 form.wpcf7-form input[type="submit"],
.wpcf7 form.wpcf7-form button[type="submit"] {
  width: 100%;
  height: 60px;
  margin: 20px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--c-ink);
  color: var(--c-white);
  font-family: var(--f-base);
  font-size: 14px;
  font-weight: 600;
  line-height: 60px;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.wpcf7 form.wpcf7-form input[type="submit"]:hover,
.wpcf7 form.wpcf7-form button[type="submit"]:hover { background: var(--c-black); }

/* Кнопка во всю ширину, поэтому кружок ожидания переносится на строку ниже
   и оставляет под кнопкой пустую полосу. Показываем его только во время
   отправки — в покое места он не занимает. */
.wpcf7 .wpcf7-spinner { display: none; }
.wpcf7 form.submitting .wpcf7-spinner {
  display: block;
  margin: 14px auto 0;
}

/* Сообщения формы */
.wpcf7 form .wpcf7-response-output {
  margin: 24px 0 0;
  padding: 14px 18px;
  border: 1px solid var(--c-grey-light);
  font-size: 15px;
  line-height: 1.5;
  color: var(--c-ink);
}
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--c-ink); }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output { border-color: #c0392b; }

.wpcf7 form.wpcf7-form .wpcf7-not-valid { border-bottom-color: #c0392b; }
.wpcf7 form.wpcf7-form .wpcf7-not-valid-tip {
  display: block;
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: #c0392b;
}

@media (max-width: 767px) {
  .wpcf7 form.wpcf7-form label { font-size: 16px; }
}

@media (max-width: 767px) {
  .entry-content .contacts-page .contacts-page__office { flex-direction: column; gap: 20px; }
  .entry-content .contacts-page .contacts-page__label { flex: 0 0 auto; }
  .entry-content .contacts-page .contacts-page__row { flex-direction: column; gap: 2px; }
  .entry-content .contacts-page .contacts-page__write { font-size: 28px; }
}


/* ---------- Быстрый просмотр корзины ---------- */
/* Замеры боевой при 1440: панель 600 у правого края с полями 60 по бокам,
   шапка 128, товар 480 (миниатюра 120x173), подытог 18px,
   кнопки 480: «Просмотр корзины» в рамке, «Оформление заказа» чёрная. */

.cart-panel {
  position: fixed;
  inset: 0;
  z-index: 80;
}
.cart-panel[hidden] { display: none; }

.cart-panel__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(22, 22, 25, .35);
  /* forwards, а не both: если анимация почему-то не стартует (скрытая
     вкладка, отключённая анимация), панель просто окажется на месте,
     а не застрянет за краем экрана. */
  animation: myo-fade-in .4s ease forwards;
}

.cart-panel__body {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 600px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 60px 40px;
  background: var(--c-white);
  overflow-y: auto;
  /* Панель выезжает справа. Анимация запускается сама в момент показа —
     это надёжнее перехода по классу, который требует лишней перерисовки
     между снятием hidden и сменой класса. */
  animation: myo-slide-in .4s cubic-bezier(.4, 0, .2, 1) forwards;
  will-change: transform;
}

/* Закрытие — та же анимация в обратную сторону. */
.cart-panel.is-closing .cart-panel__body {
  animation: myo-slide-out .35s cubic-bezier(.4, 0, .2, 1) both;
}
.cart-panel.is-closing .cart-panel__backdrop {
  animation: myo-fade-out .35s ease both;
}

@keyframes myo-slide-in {
  from { transform: translateX(100%); }
  to   { transform: none; }
}
@keyframes myo-slide-out {
  from { transform: none; }
  to   { transform: translateX(100%); }
}
@keyframes myo-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes myo-fade-out { from { opacity: 1; } to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .cart-panel__body,
  .cart-panel__backdrop,
  .cart-panel.is-closing .cart-panel__body,
  .cart-panel.is-closing .cart-panel__backdrop { animation: none; }
}

.cart-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 128px;
  flex: 0 0 auto;
}
.cart-panel__title {
  font-family: var(--f-base);
  font-size: 20px;
  color: var(--c-ink);
}
.cart-panel__count { color: var(--c-grey); }

.cart-panel__close {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--f-base);
  font-size: 20px;
  color: var(--c-ink);
  cursor: pointer;
}

.cart-panel .woocommerce-mini-cart {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Селекторы длиннее обычного: у WooCommerce для списка мини-корзины
   свои правила (картинка 32px и обтекание), и они грузятся позже нашего. */
/* В разметке WooCommerce порядок такой: крестик удаления, ссылка
   с картинкой и названием, затем количество. Раскладываем сеткой:
   картинка слева, название и количество столбиком справа,
   крестик — в правом верхнем углу. */
.cart-panel .cart-panel__content ul.cart_list li,
.cart-panel .cart-panel__content ul.product_list_widget li {
  display: grid;
  grid-template-columns: 120px 1fr 24px;
  /* Области заданы явно: у названия своего элемента нет (оно голым текстом
     внутри ссылки), и без сетки-раскладки браузер ставит его в первую
     свободную ячейку — на узком экране это оказывался столбец крестика. */
  grid-template-areas:
    "img name remove"
    "img qty  ."
    "img .    .";
  column-gap: 30px;
  row-gap: 6px;
  align-items: start;
  margin: 0 0 30px;
  padding: 0;
}
/* Ссылка растворяется в сетке (display: contents), чтобы картинка
   и название стали её собственными ячейками. Иначе название занимает
   всю высоту картинки и строка с количеством уезжает под неё. */
.cart-panel .cart-panel__content ul.cart_list li > a:not(.remove) { display: contents; }
.cart-panel .cart-panel__content ul.cart_list li img { grid-area: img; }
.cart-panel .cart-panel__content ul.cart_list li .quantity {
  grid-area: qty;
  align-self: start;
}
.cart-panel .cart-panel__content ul.cart_list li a.remove { grid-area: remove; }
.cart-panel .cart-panel__content ul.cart_list li img,
.cart-panel .cart-panel__content ul.product_list_widget li img {
  width: 120px;
  height: 173px;
  float: none;
  margin: 0;
  object-fit: cover;
  display: block;
}
.cart-panel .woocommerce-mini-cart-item a:not(.remove) {
  font-family: var(--f-base);
  font-size: 16px;
  color: var(--c-ink);
}
.cart-panel .woocommerce-mini-cart-item .quantity {
  display: block;
  font-size: 14px;
  color: var(--c-grey);
}
.cart-panel .woocommerce-mini-cart-item a.remove {
  margin-left: auto;
  color: var(--c-grey) !important;
  font-size: 18px;
  margin: 0;
}

.cart-panel .woocommerce-mini-cart__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 30px 0;
  padding-top: 30px;
  border-top: 1px solid var(--c-border);
  font-family: var(--f-base);
  font-size: 18px;
}

.cart-panel .woocommerce-mini-cart__buttons {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
}
.cart-panel .woocommerce-mini-cart__buttons .button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  padding: 0;
  border: 1px solid var(--c-ink);
  background: none;
  color: var(--c-ink);
  font-family: var(--f-base);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.cart-panel .woocommerce-mini-cart__buttons .checkout {
  background: var(--c-ink);
  color: var(--c-white);
}

@media (max-width: 767px) {
  .cart-panel__body { padding: 0 20px 30px; }
  .cart-panel__head { min-height: 80px; }
  .cart-panel__title,
  .cart-panel__close { font-size: 16px; }
  .cart-panel .cart-panel__content ul.cart_list li {
    grid-template-columns: 80px 1fr 20px;
    column-gap: 16px;
  }
  .cart-panel .cart-panel__content ul.cart_list li img { width: 80px; height: 115px; }
}


/* ---------- Уведомление «товар в корзине» ---------- */
/* Замеры боевой: полоса внизу окна во всю ширину, высота 82,
   фон #8ed3af, белый текст 14px, поля 20/40, ссылка прописными. */

.myo-alert {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  background: #8ed3af;
  color: var(--c-white);
}
.myo-alert__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 82px;
  padding: 20px 40px;
}
.myo-alert__icon {
  flex: 0 0 40px;
  line-height: 0;
  color: var(--c-white);
}

.myo-alert .woocommerce-message {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: var(--f-base);
  font-size: 14px;
}
.myo-alert .woocommerce-message::before,
.myo-alert .woocommerce-message::after { content: none; }

.myo-alert .woocommerce-message a.wc-forward {
  color: var(--c-white);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: underline;
  background: none;
  padding: 0;
}

.myo-alert__close {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-white);
  cursor: pointer;
  line-height: 0;
}

@media (max-width: 767px) {
  .myo-alert__inner { padding: 16px 20px; gap: 12px; }
  .myo-alert__icon { flex: 0 0 28px; }
  .myo-alert__icon svg { width: 28px; height: 28px; }
  .myo-alert .woocommerce-message { flex-direction: column; align-items: flex-start; gap: 8px; }
}