@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url("../fonts/montserrat-cyrillic-100.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url("../fonts/montserrat-latin-100.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/montserrat-cyrillic-400.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/montserrat-latin-400.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/montserrat-cyrillic-500.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/montserrat-latin-500.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/montserrat-cyrillic-600.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/montserrat-latin-600.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/montserrat-cyrillic-700.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/montserrat-latin-700.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geometria";
  font-style: normal;
  font-weight: 100 400;
  font-display: swap;
  src:
    url("../fonts/geometria-light.woff") format("woff"),
    url("../fonts/geometria-light.ttf") format("truetype");
}

:root {
  --color-bg: #ffffff;
  --color-text: #000000;
  --color-text-muted: #666666;
  --color-border: #ebebeb;
  --color-accent: #ffc014;
  --color-accent-hover: #6c63ff;
  --color-footer: #000000;
  --color-footer-hover: #b70000;
  --font-main: "Montserrat", Arial, sans-serif;
  --container-width: 1760px;
}
  /* Текстовые пресеты с оригинального сайта (po-krugu.ru) — единый источник размеров/интерлиньяжа,
     чтобы не подбирать их на глаз каждый раз заново. Использовать через классы .f__h1 … .f__3 ниже
     или напрямую через var(--f-h1-font-size) и т.п.
     Размер шрифта — fluid typography, формулы 1-в-1 скопированы из --PRESET-FONT--f__* оригинала
     (видно в DevTools на po-krugu.ru): calc(Avw + Brem), где 1000px ширины экрана даёт ровно
     "паспортный" px-размер (55/40/25/19...), а на других экранах размер плавно едет вместе с шириной
     вместо скачков между 2-3 брейкпоинтами. */
  /* --f-h1-font-family: "Montserrat";
  --f-h1-font-size: calc(3.1vw + 1.5rem);
  --f-h1-line-height: 0.9;
  --f-h1-font-weight: 600;
  --f-h1-letter-spacing: 0.05em;
  --f-h1-text-transform: uppercase;

  --f-h2-font-family: "Montserrat";
  --f-h2-font-size: calc(2vw + 1.25rem);
  --f-h2-line-height: 1.2;
  --f-h2-font-weight: 700;
  --f-h2-letter-spacing: 0.05em;
  --f-h2-text-transform: uppercase;

  --f-h3-font-family: "Montserrat";
  --f-h3-font-size: calc(0.5vw + 1.25rem);
  --f-h3-line-height: 1.4;
  --f-h3-font-weight: 700;
  --f-h3-letter-spacing: 0.1em;
  --f-h3-text-transform: uppercase;

  --f-h4-font-family: "Montserrat";
  --f-h4-font-size: calc(0.355vw + 1rem);
  --f-h4-line-height: 1.6;
  --f-h4-font-weight: 700;
  --f-h4-letter-spacing: 0.1em;
  --f-h4-text-transform: uppercase;

  --f-1-font-family: "Montserrat";
  --f-1-font-size: calc(0.415vw + 1rem);
  --f-1-line-height: 1.5;
  --f-1-font-weight: 500;
  --f-1-letter-spacing: 0em;
  --f-1-text-transform: none;

  --f-2-font-family: "Montserrat";
  --f-2-font-size: calc(0.255vw + 1rem);
  --f-2-line-height: 1.7;
  --f-2-font-weight: 400;
  --f-2-letter-spacing: 0em;
  --f-2-text-transform: none;

  --f-3-font-family: "Montserrat";
  --f-3-font-size: calc(0.1vw + 0.95rem);
  --f-3-line-height: 1.7;
  --f-3-font-weight: 400;
  --f-3-letter-spacing: 0.05em;
  --f-3-text-transform: none;
} */

/* Классы-пресеты — применяют набор переменных выше одним классом, как на оригинальном сайте */
.f__h1, .f__h2, .f__h3, .f__h4, .f__1, .f__2, .f__3 {
  font-style: normal;
}
.f__h1 {
  font-family: var(--f-h1-font-family);
  font-size: var(--f-h1-font-size);
  line-height: var(--f-h1-line-height);
  font-weight: var(--f-h1-font-weight);
  letter-spacing: var(--f-h1-letter-spacing);
  text-transform: var(--f-h1-text-transform);
}
.f__h2 {
  font-family: var(--f-h2-font-family);
  font-size: var(--f-h2-font-size);
  line-height: var(--f-h2-line-height);
  font-weight: var(--f-h2-font-weight);
  letter-spacing: var(--f-h2-letter-spacing);
  text-transform: var(--f-h2-text-transform);
}
.f__h3 {
  font-family: var(--f-h3-font-family);
  font-size: var(--f-h3-font-size);
  line-height: var(--f-h3-line-height);
  font-weight: var(--f-h3-font-weight);
  letter-spacing: var(--f-h3-letter-spacing);
  text-transform: var(--f-h3-text-transform);
}
.f__h4 {
  font-family: var(--f-h4-font-family);
  font-size: var(--f-h4-font-size);
  line-height: var(--f-h4-line-height);
  font-weight: var(--f-h4-font-weight);
  letter-spacing: var(--f-h4-letter-spacing);
  text-transform: var(--f-h4-text-transform);
}
.f__1 {
  font-family: var(--f-1-font-family);
  font-size: var(--f-1-font-size);
  line-height: var(--f-1-line-height);
  font-weight: var(--f-1-font-weight);
  letter-spacing: var(--f-1-letter-spacing);
  text-transform: var(--f-1-text-transform);
}
.f__2 {
  font-family: var(--f-2-font-family);
  font-size: var(--f-2-font-size);
  line-height: var(--f-2-line-height);
  font-weight: var(--f-2-font-weight);
  letter-spacing: var(--f-2-letter-spacing);
  text-transform: var(--f-2-text-transform);
}
.f__3 {
  font-family: var(--f-3-font-family);
  font-size: var(--f-3-font-size);
  line-height: var(--f-3-line-height);
  font-weight: var(--f-3-font-weight);
  letter-spacing: var(--f-3-letter-spacing);
  text-transform: var(--f-3-text-transform);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
body {
  font-family: var(--font-main);
  color: var(--color-text);
  background: var(--color-bg);
  font-size: 18px;
  line-height: 1.7;
  font-weight: 400;
}
a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s;
}
a:hover {
  color: var(--color-accent);
}
img {
  max-width: 100%;
  display: block;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
h1,
h2,
h3,
h4 {
  font-family: var(--font-main);
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
h1 {
  font-size: 55px;
  line-height: 0.9;
  font-weight: 600;
}
h2 {
  font-size: 40px;
  line-height: 1.2;
}
h3 {
  font-size: 25px;
  line-height: 1.4;
  letter-spacing: 0.1em;
}

.container {
  max-width: 100%;
  margin: 0;
  padding: 0 65px;
  box-sizing: border-box;
}

.btn {
  display: inline-block;
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid var(--color-text);
  background: var(--color-text);
  color: #fff;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
}
.btn:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #000;
}
.btn--outline {
  background: transparent;
  color: var(--color-text);
}
.btn--outline:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #000;
}

.section-title {
  text-align: center;
  text-transform: uppercase;
  font-size: 20px;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
}
.new-arrivals .section-title,
.popular-products .section-title {
  font-size: 25px;
}
.new-arrivals .section-title a,
.popular-products .section-title a {
  color: inherit;
  transition: color 0.2s ease;
}
.new-arrivals .section-title a:hover,
.popular-products .section-title a:hover {
  color: var(--color-accent);
}

/* Инфополоса */
.site-infobar {
  background: #141414;
  color: #fff;
  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-align: right;
  padding: 10px 0;
}
.site-infobar .container {
  padding: 0 65px;
}
.site-infobar a {
  color: #ffd700;
}

.site-topwrap {
  position: relative;
}

/* Header — 3 зоны: меню+поиск / лого по центру / меню+корзина, как на старом сайте */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding: 40px 0;
  transition:
    padding 0.3s,
    box-shadow 0.3s,
    transform 0.5s ease-in;
}
.site-header.is-scrolled {
  padding: 16px 0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.site-header.is-hidden {
  transform: translateY(-100%);
  transition:
    padding 0.3s,
    box-shadow 0.3s,
    transform 0.3s ease-out,
    top 0.3s ease-out;
}

/* Компактная шапка, которая выезжает сверху вместо большой при скролле вниз */
.site-header--sticky-clone {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: #141414;
  border-bottom: none;
  padding: 9px 0;
  transform: translateY(-100%);
  transition: transform 0.3s ease-out;
}
.site-header--sticky-clone .site-nav__list a,
.site-header--sticky-clone .site-header__icon-btn {
  color: #fff;
}
.site-header--sticky-clone .site-nav__list a:hover,
.site-header--sticky-clone .site-header__icon-btn:hover {
  color: var(--color-accent);
}
.site-header--sticky-clone .site-nav__list > li.current-menu-item > a,
.site-header--sticky-clone .site-nav__list > li.current-menu-parent > a {
  color: var(--color-accent);
}
.site-header--sticky-clone.is-visible {
  transform: translateY(0);
  transition: transform 0.5s ease-in;
}
.site-header__clone-nav {
  display: flex;
  align-items: center;
  gap: 33px;
}
.site-header__clone-nav .site-nav__list {
  display: flex;
  gap: 33px;
}
.site-header__inner--clone .site-header__zone--right {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  gap: 20px;
}
.site-header--sticky-clone .site-header__icon-btn svg {
  width: 17px;
  height: 17px;
}
.site-header--sticky-clone .site-header__cart:has(.site-header__cart-count:not([hidden])) svg {
  width: 18px;
  height: 18px;
}
.site-header .container {
  padding: 0 65px;
}
.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.site-header__zone {
  display: flex;
  align-items: center;
  gap: 33px;
}
.site-header__zone--left {
  justify-content: flex-start;
}
.site-header__zone--right {
  justify-content: flex-end;
}
.site-header__zone--center {
  justify-content: center;
}

.site-header__inner--clone {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.site-header__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--color-text);
  width: 21px;
}
.site-header__cart {
  width: auto;
  min-width: 24px;
}
.site-header__cart svg {
  flex-shrink: 0;
}
.site-header__icon-btn:hover {
  color: var(--color-accent);
}
.site-header__icon-btn svg {
  width: 17px;
  height: 17px;
}
/* Когда в корзине есть товары (виден счётчик рядом) — иконка чуть крупнее, чтобы
   заметнее выделяться в шапке. */
.site-header__cart:has(.site-header__cart-count:not([hidden])) svg {
  width: 21px;
  height: 22px;
}

.site-logo__text {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.site-logo__stamp {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: transparent;
  overflow: hidden;
  flex-shrink: 0;
}
.site-header:not(.site-header--transparent) .site-logo__stamp {
  background: #141414;
}
.site-logo__stamp img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.site-nav__list {
  display: flex;
  gap: 33px;
  flex-wrap: wrap;
}
.site-nav__list li {
  position: relative;
}
.site-nav__list > li > a {
  position: relative;
  display: inline-block;
  font-family: "Geometria", var(--font-main);
  font-style: normal;
  font-size: 15px;
  font-weight: 100;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  padding-bottom: 6px;
}
.site-nav__list > li.menu-item-has-children > a[href="#"] {
  cursor: default;
}
.site-nav__list > li > a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 0;
  height: 2px;
  background: var(--color-accent);
  transform: translateX(-50%);
  transition: width 0.6s ease;
}
.site-nav__list > li:hover > a,
.site-nav__list > li.current-menu-item > a,
.site-nav__list > li.current-menu-parent > a {
  color: var(--color-accent);
}
.site-nav__list > li:hover > a::after,
.site-nav__list > li.current-menu-item > a::after,
.site-nav__list > li.current-menu-parent > a::after {
  width: 100%;
}

/* Выпадающее подменю — как на старом сайте */
.site-nav__list ul.sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: max-content;
  max-width: 262px;
  /* padding-top (не margin-top) — отступ от пункта меню должен быть ЧАСТЬЮ
     самого подменю (наведённой зоной), иначе между пунктом и подменю остаётся
     "мёртвая" полоса: курсор туда попадает, li теряет :hover, подменю
     закрывается раньше, чем докурсор доходит до самих пунктов. */
  padding: 12px 0 0;
  margin-top: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease,
    visibility 0.15s;
  z-index: 30;
}
.site-header__zone--right .site-nav__list ul.sub-menu {
  left: auto;
  right: 0;
  max-width: 190px;
}
.site-header__zone--right .site-nav__list > li:last-child ul.sub-menu {
  right: -57px;
}
.site-nav__list li:hover > ul.sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.site-nav__list ul.sub-menu li {
  background: #0f0f0f;
  margin-bottom: 1px;
}
.site-nav__list ul.sub-menu li:last-child {
  margin-bottom: 0;
}
.site-nav__list ul.sub-menu a {
  display: block;
  padding: 13px 30px 15px 25px;
  color: rgba(214, 214, 214, 1);
  font-family: "Geometria", var(--font-main);
  font-size: 15px;
  font-weight: 100;
  line-height: 18.75px;
  text-transform: uppercase;
  letter-spacing: 3.75px;
  border-bottom: none;
}
/* Селектор по классу, а не по id="menu-item-2929" — этот id WordPress
   проставляет только у ПЕРВОГО вывода меню (wp_nav_menu вызывается
   несколько раз: большая шапка, компактная при скролле, мобильное меню —
   у второго и третьего вызова того же пункта id вообще не генерируется,
   только class="...menu-item-2929", он есть у всех вызовов одинаково). */
.site-nav__list li.menu-item-2929 ul.sub-menu a {
  text-transform: none;
}
.site-nav__list ul.sub-menu a:hover {
  color: var(--color-accent);
}
/* Активный пункт ВНУТРИ выпадающего подменю (например, "Изделия на заказ",
   когда вы на этой странице) — только сам пункт, не соседние (важно:
   селектор с прямым потомком "> a", иначе цвет "утечёт" на все ссылки
   подменю сразу, как уже однажды случилось). */
.site-nav__list ul.sub-menu li.current-menu-item > a {
  color: var(--color-accent);
}

.site-header__cart {
  gap: 4px;
}
.site-header__cart-count {
  font-size: 14px;
  font-weight: 600;
}

.searchform {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #fff;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.searchform::-webkit-scrollbar {
  display: none;
}
.searchform .container {
  max-width: 1100px;
  /* Общий .container больше не центрируется сам (margin:0 auto заменён на
     фикс-отступы 65px, чтобы держать их на широких экранах) — здесь нужна
     именно центровка по классике, отступы 65px тут не при чём. */
  margin: 0 auto;
  padding: 0;
}
.searchform[hidden] {
  display: none;
}

/* Тёмная зона с полем ввода — на весь экран, при активации схлопывается в верхнюю полосу */
.searchform__header {
  position: relative;
  z-index: 9;
  height: 100vh;
  background: #121212;
  transition: height 0.75s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.searchform.is-active .searchform__header {
  height: 250px;
}
.searchform__close {
  position: absolute;
  z-index: 10;
  top: 30px;
  right: 65px;
  display: block;
  cursor: pointer;
  color: #fff;
  opacity: 0.9;
  transition: opacity 0.3s;
}
.searchform__close:hover {
  opacity: 1;
}
.searchform__tbl {
  display: table;
  width: 100%;
  height: 100%;
}
.searchform__tbl__in {
  display: table-cell;
  vertical-align: middle;
}
.searchform__push-input {
  position: relative;
}
.searchform__input {
  color: #fff;
  width: 100%;
  padding: 22px 40px 22px 0;
  background: transparent;
  border: 0;
  outline: 0;
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0;
}
.searchform__input::placeholder {
  color: #fff;
  opacity: 0.6;
}
.searchform__push {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  display: flex;
  cursor: pointer;
}
.searchform__push svg {
  width: 26px;
  height: auto;
}
.searchform__before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 1px;
  background: #fff;
  opacity: 0.4;
}
.searchform__after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 0;
  height: 1px;
  opacity: 0.7;
  background: #fff;
  transition: width 1s cubic-bezier(0.07, 0.38, 0.92, 0.85);
}
.searchform.is--loading .searchform__after {
  width: 100%;
}

/* Результаты — белая зона, появляется снизу с фейдом после активации */
.searchform__body {
  position: relative;
  z-index: 8;
  width: 100%;
  padding: 36px 0 60px;
  opacity: 0;
  display: none;
}
.searchform.is-active .searchform__body {
  display: block;
  animation: pokrugu-search-fadein 0.8s ease-in-out forwards;
  animation-delay: 0.2s;
}
@keyframes pokrugu-search-fadein {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.searchform__body-results {
  position: relative;
  transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.searchform__body-results.is-updating {
  opacity: 0;
  transform: translateY(14px);
}

.searchform__tabs-block {
  margin-bottom: 28px;
}
.searchform__tabs-list {
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.searchform__tabs-list .span {
  display: block;
  color: #000;
  cursor: pointer;
  opacity: 0.5;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: opacity 0.3s;
}
.searchform__tabs-list .span.is-active,
.searchform__tabs-list .span:hover {
  opacity: 1;
}
.searchform__result-count {
  color: #bfbfbf;
}

.live-search__panel {
  display: none;
}
.live-search__panel.is-active {
  display: block;
}
.live-search__panel--grid.is-active {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.live-search__post {
  display: block;
  color: #000;
  padding: 22px 0;
  border-bottom: 1px solid var(--color-border);
}
.live-search__post-title {
  font-size: 24px;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.live-search__post-excerpt {
  color: var(--color-text-muted);
  margin: 0 0 8px;
}
.live-search__post-date {
  color: #bfbfbf;
  font-size: 14px;
}
.live-search__product {
  display: block;
  position: relative;
}
.live-search__product-link {
  display: block;
  color: #000;
}
.live-search__product-image {
  display: block;
  position: relative;
  margin-bottom: 12px;
}
.live-search__product-image img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.live-search__product-title {
  display: block;
  font-size: 16px;
  margin-bottom: 6px;
}
.live-search__product-price {
  display: block;
  color: var(--color-text-muted);
  font-size: 15px;
}
/* Кнопка "В корзину" в результатах поиска — на десктопе тот же оверлей поверх
   фото по :hover, что и в каталоге (базовые .cart-btn-container правила уже это
   делают, нужен только триггер :hover на карточке — там он завязан на li.product,
   которого тут нет). На мобилке (ниже) переопределяем на всегда видимую иконку
   рядом с ценой — ховера на тач-устройствах не бывает. */
.live-search__product:hover .cart-btn-container {
  opacity: 1;
}
.live-search__empty {
  color: var(--color-text-muted);
}
/* Ссылка "Показать все результаты (N)" — печатается последним элементом в сетке
   товаров (functions.php, pokrugu_live_search), когда найдено больше 12 штук.
   grid-column растягивает её на всю ширину сетки товаров, а не в одну колонку. */
.live-search__show-all {
  grid-column: 1 / -1;
  display: block;
  text-align: center;
  padding: 18px;
  margin-top: 8px;
  border: 1px solid #000;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 14px;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.live-search__show-all:hover {
  background: #000;
  color: #fff;
}

html.search-open,
body.search-open {
  overflow: hidden;
  height: 100%;
}

@media (max-width: 992px) {
  .searchform__close {
    right: 24px;
    top: 20px;
  }
  .searchform__input {
    font-size: 18px;
  }
  .live-search__panel--grid.is-active {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

.site-header__burger {
  display: none;
}

@media (max-width: 992px) {
  .site-header {
    padding: 16px 0;
  }
  .site-header .container {
    padding: 0 20px;
  }
  .site-header__inner {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .site-header__zone {
    gap: 16px;
  }
  .site-header__zone--center {
    order: 1;
  }
  .site-header__zone--left {
    order: 2;
    margin-left: auto;
  }
  .site-header__zone--right {
    order: 3;
  }
  .site-header__zone--left .site-nav,
  .site-header__zone--right .site-nav,
  .site-header__clone-nav {
    display: none;
  }
  .site-header__burger {
    display: inline-flex;
  }
}

@media (max-width: 640px) {
  /* На планшете (768px, см. эталон) логотип остаётся такого же размера, как на
     десктопе (170px) — так на оригинале. Уменьшаем только на настоящем мобильном,
     где 170px просто не влезет в шапку рядом с иконками. */
  .site-logo__stamp {
    width: 100px;
    height: 100px;
  }
}

.mobile-menu[hidden] {
  display: none;
}
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #141414;
  display: flex;
  flex-direction: column;
  padding: 60px 40px;
  /* Фон должен появляться мгновенно (не через fade), иначе в первые доли секунды панель
     полупрозрачна и сквозь неё виден момент включения блокировки скролла на body —
     это и выглядело как "мерцание"/скачок страницы вверх при открытии. Анимируем только
     выезд содержимого (transform), сам тёмный фон закрывает экран сразу же. */
  opacity: 1;
  transform: translateY(-16px);
  transition: transform 0.3s ease;
}
.mobile-menu.is-active {
  transform: translateY(0);
}
.mobile-menu__close {
  position: absolute;
  top: 28px;
  right: 28px;
  cursor: pointer;
  color: #fff;
}
.mobile-menu__nav {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
}
.mobile-menu__list {
  display: flex;
  flex-direction: column;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mobile-menu__list + .mobile-menu__list {
  margin-top: 28px;
}
.mobile-menu__list a {
  color: #fff;
  font-size: 15px;
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  text-decoration: none;
}
.mobile-menu__list li.current-menu-item > a,
.mobile-menu__list li.current-menu-parent > a {
  color: var(--color-accent);
}
.mobile-menu__list li.menu-item-2929 > ul.sub-menu a {
  text-transform: none;
}
.mobile-menu__list ul.sub-menu {
  list-style: none;
  margin: 0;
  /* padding: 0 0 0 16px; */
  padding-bottom: 0px;
  display: flex;
  flex-direction: column;
  /* gap: 14px; */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
}
.mobile-menu__list li.is-open > ul.sub-menu {
  max-height: 600px;
  opacity: 1;
  margin-top: 12px;
}
.mobile-menu__list ul.sub-menu li {
  line-height: 1;
}
.mobile-menu__list ul.sub-menu a {
  font-size: 15px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.7);
}

/* Блокировка скролла страницы под открытым меню — только overflow:hidden.
   Реальный скролл гасится touchmove/wheel preventDefault в main.js.
   ВАЖНО: height:100% здесь специально не ставим — если реальная высота страницы
   больше экрана, а html/body одновременно обрезать до 100% высоты, браузер
   схлопывает скроллируемую область и физически обнуляет текущий scrollTop
   (не визуальный баг — контента для текущей позиции скролла просто "не остаётся").
   Именно это и выглядело как прыжок наверх при открытии меню, когда страница уже
   была прокручена. */
html.mobile-menu-open,
body.mobile-menu-open {
  overflow: hidden;
}

/* На главной шапка накладывается поверх баннера (прозрачная), как на старом сайте.
   Идёт после базовых правил .site-header, чтобы гарантированно их перебивать. */
.site-header--transparent {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 20;
  background: transparent;
  border-bottom: none;
  padding: 40px 0;
  transition:
    padding 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.5s ease-in,
    top 0.5s ease-in;
}
.site-header--transparent.is-hidden {
  transition:
    padding 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.3s ease-out,
    top 0.3s ease-out;
}
.site-header--transparent .site-nav__list a,
.site-header--transparent .site-header__icon-btn,
.site-header--transparent .site-logo__text {
  color: #fff;
}
.site-header--transparent .site-nav__list a:hover,
.site-header--transparent .site-header__icon-btn:hover {
  color: var(--color-accent);
}
.site-header--transparent .site-nav__list > li.current-menu-item > a,
.site-header--transparent .site-nav__list > li.current-menu-parent > a {
  color: var(--color-accent);
}

/* Тёмная шапка на всех страницах, кроме главной */
.site-header--dark {
  background: #141414;
  border-bottom: none;
}
.site-header--dark .site-nav__list a,
.site-header--dark .site-header__icon-btn,
.site-header--dark .site-logo__text {
  color: #fff;
}
.site-header--dark .site-nav__list a:hover,
.site-header--dark .site-header__icon-btn:hover {
  color: var(--color-accent);
}
.site-header--dark .site-nav__list > li.current-menu-item > a,
.site-header--dark .site-nav__list > li.current-menu-parent > a {
  color: var(--color-accent);
}

/* Компактный тёмный вид при скролле полностью на .site-header--sticky-clone —
   сама прозрачная шапка при скролле вниз просто уезжает, не перекрашиваясь. */

/* Hero slider — заказчик управляет слайдами из админки (CPT "Слайды баннера") */
.hero-slider {
  position: relative;
  background: #0a0a0a;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: #111;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
}
.hero-slider__track {
  position: relative;
  height: calc(90vh - 42px);
}
.hero-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
.hero-slide__overlay {
  height: 100%;
  display: flex;
  align-items: center;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.25) 55%,
    rgba(0, 0, 0, 0.05) 100%
  );
}
.hero-slide__content {
  max-width: 560px;
  padding: 0 20px;
}
.hero-slide__subtitle {
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 14px;
}
.hero-slide__title {
  color: #fff;
  font-size: 48px;
  line-height: 1.1;
  text-transform: uppercase;
  margin-bottom: 32px;
}
.btn--hero {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  text-transform: none;
  font-weight: 500;
  letter-spacing: 0;
  padding: 14px 34px;
}
.btn--hero:hover {
  background: #fff;
  color: #141414;
  border-color: #fff;
}

.hero-slider__controls {
  position: absolute;
  right: 65px;
  bottom: 28px;
  display: flex;
  align-items: center;
  gap: 0;
  z-index: 2;
}
.hero-slider__dots {
  display: none;
}
.hero-slider__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid #fff;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.hero-slider__dot.is-active {
  background: #fff;
}
.hero-slider__arrow {
  position: relative;
  display: inline-block;
  background: transparent;
  color: #fff;
  border: none;
  padding: 0;
  width: 30px;
  height: 34.5px;
  text-align: center;
  cursor: pointer;
  opacity: 0.7;
  overflow: hidden;
  transition: opacity 0.3s;
}
.hero-slider__arrow:hover {
  opacity: 1;
}
.hero-slider__arrow-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.hero-slider__arrow-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 20px;
  transform: translate(-50%, -50%);
  transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  pointer-events: none;
}
.hero-slider__arrow--prev:hover .hero-slider__arrow-icon {
  transform: translate(calc(-50% - 4px), -50%);
}
.hero-slider__arrow--next:hover .hero-slider__arrow-icon {
  transform: translate(calc(-50% + 4px), -50%);
}
.hero-slider__arrow-svg {
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  width: 8px;
  height: 20px;
  transform: translateX(-50%);
  z-index: 1;
}
.hero-slider__arrow-shaft {
  display: block;
  position: absolute;
  top: 9.25px;
  width: 19px;
  height: 1.5px;
  background: #fff;
  transform: scaleX(0);
  transition: transform 0.15s ease-in;
}
.hero-slider__arrow--prev:hover .hero-slider__arrow-shaft,
.hero-slider__arrow--next:hover .hero-slider__arrow-shaft {
  transition: transform 0.3s 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero-slider__arrow--prev .hero-slider__arrow-shaft {
  left: 13px;
  transform-origin: left center;
}
.hero-slider__arrow--next .hero-slider__arrow-shaft {
  right: 13px;
  transform-origin: right center;
}
.hero-slider__arrow--prev:hover .hero-slider__arrow-shaft {
  transform: scaleX(1);
}
.hero-slider__arrow--next:hover .hero-slider__arrow-shaft {
  transform: scaleX(1);
}
.hero-slider__hint {
  color: #fff;
  text-align: center;
  padding: 16px 0;
  font-size: 13px;
  opacity: 0.7;
}

@media (max-width: 1024px) {
  /* На десктопе высота баннера — calc(90vh - 42px). На планшете (portrait/landscape
     до 1024px) 90vh — это тоже огромная высота относительно ширины экрана, баннер
     занимает весь первый экран. Оригинал (po-krugu.ru) на планшете — компактный
     альбомный баннер, ограничиваем фиксированной пропорцией вместо vh. */
  .hero-slider__track {
    height: auto;
    aspect-ratio: 16 / 9;
    min-height: 0;
    max-height: none;
  }
}

@media (max-width: 640px) {
  /* На десктопе высота баннера — calc(90vh - 42px), это огромная высота на узком
     мобильном экране: background-size:cover тянется под неё и обрезает картинку почти
     до одной вертикальной полосы (виден только фрагмент).
     На оригинале (po-krugu.ru) баннер на мобильном — фиксированная компактная пропорция
     ~393:322 (~1.22:1), одинаковая для ЛЮБОГО слайда: cover обрезает края каждой картинки
     под неё, это осознанный выбор дизайна, а не подгонка под конкретное фото. Предыдущая
     версия этого комментария (aspect-ratio под конкретную фотографию 2560/1472) была
     ошибкой — сверил с оригиналом ещё раз, там именно фиксированное ~1.22:1. */
  .hero-slider__track {
    height: auto;
    aspect-ratio: 393 / 322;
    min-height: 0;
    max-height: none;
  }
  .hero-slide__title {
    font-size: 30px;
  }
  .hero-slide__content {
    padding: 0 16px;
  }
  .hero-slider__controls {
    right: auto;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
  }
}

/* Categories */
.categories {
  background: #141414;
  color: #fff;
  padding: 70px 0;
}
.categories .section-title {
  text-align: left;
  font-size: 40px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 40px;
}
.categories__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
}
.category-card {
  text-align: left;
}
.category-card__image {
  aspect-ratio: 3/4;
  background: #1a1a1a;
  overflow: hidden;
  margin-bottom: 14px;
}
.category-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.category-card__name {
  display: block;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Product grid (shared: home + shop) */
.product-grid,
.woocommerce ul.products,
ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 40px 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce .products ul::before,
.woocommerce .products ul::after {
  content: none !important;
  display: none !important;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}
.product-card,
ul.products li.product {
  display: flex;
  flex-direction: column;
  /* gap: 6px; */
  position: relative;
  /* min-width:0 — иначе длинное неразрывное слово в названии (например
     "Предохранитель...") задаёт колонке grid минимальную ширину больше 1fr,
     и вторая колонка в паре сужается, из-за чего фото в ней меньше соседнего. */
  min-width: 0;
}
.product-card__image {
  aspect-ratio: 1/1;
  background: #f4f4f4;
  overflow: hidden;
  width: 100%;
}
.product-card__image img,
ul.products li.product a img {
  aspect-ratio: 1/1;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.product-card__name,
ul.products li.product .woocommerce-loop-product__title,
.product-card__price,
ul.products li.product .price {
  text-transform: none;
  letter-spacing: normal;
  margin: 0;
}
/* align-items не трогаем (остаётся stretch по умолчанию) — иначе ссылка-обёртка с фото
   перестаёт растягиваться на всю ширину колонки и "сжимается" под контент (в т.ч. под текст
   заголовка), из-за чего фото в разных карточках получаются разной ширины/высоты. */

/* Карточки в каталоге (архив/категория) — слева, как на оригинале */
ul.products li.product {
  text-align: left;
}
ul.products li.product .woocommerce-loop-product__title {
  font-size: 16px;
  font-weight: 400;
  margin-top: 8px;
  display: -webkit-box;
  /* -webkit-box-orient: vertical; */
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  line-height: 1.3;
  overflow-wrap: break-word;
}
ul.products li.product .price,
ul.products li.product .price .woocommerce-Price-amount {
  font-family: var(--f-3-font-family) !important;
  font-size: var(--f-3-font-size) !important;
  font-weight: var(--f-3-font-weight) !important;
  line-height: var(--f-3-line-height) !important;
  letter-spacing: var(--f-3-letter-spacing) !important;
  text-transform: var(--f-3-text-transform) !important;
  color: #000 !important;
}

/* Карточки на главной (Новинки / Популярное) — название на пресете f__2, цена на f__3
   (жирным), как в оригинальных Vigbo-виджетах этого блока на po-krugu.ru. */
.product-card {
  text-align: center;
}
.product-card__name {
  font-family: var(--f-2-font-family);
  font-size: var(--f-2-font-size);
  font-weight: var(--f-2-font-weight);
  line-height: var(--f-2-line-height);
  letter-spacing: var(--f-2-letter-spacing);
  text-transform: var(--f-2-text-transform);
  margin-top: 20px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.product-card__price {
  font-family: var(--f-3-font-family);
  font-size: var(--f-3-font-size);
  font-weight: 700;
  line-height: var(--f-3-line-height);
  letter-spacing: var(--f-3-letter-spacing);
  text-transform: var(--f-3-text-transform);
  color: #000 !important;
}

/* Кнопка "В корзину" — круглая иконка-оверлей поверх фото товара при наведении */
.woocommerce-LoopProduct-link{display:block;position:relative;}
.product-card__image{position:relative;}

/* Смена на второе фото из галереи при наведении на карточку товара */
.product-hover-image{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	aspect-ratio:1/1;
	object-fit:cover;
	opacity:0;
	transition:opacity .3s ease;
	z-index:1;
}
li.product:hover .product-hover-image,
.product-card:hover .product-hover-image{
	opacity:1;
}

/* Метки товара «ХИТ» / «NEW» — лента-флажок с вырезом снизу, прижата к углу фото */
.product-badges{
	position:absolute;
	top:0;
	right:18px;
	z-index:7;
	display:flex;
	flex-direction:row;
	align-items:flex-start;
	gap:6px;
	pointer-events:none;
}
.product-badge{
	display:flex;
	align-items:center;
	justify-content:center;
	width:38px;
	padding:16px 4px 20px;
	font-size:10px;
	font-weight:400;
	line-height:1.15;
	letter-spacing:0.1em;
	text-transform:uppercase;
	text-align:center;
	white-space:nowrap;
	clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
}
.product-badge--new{
	background:rgba(255,192,20,1);
	color:#000;
}
.product-badge--hit{
	background:rgba(9,25,240,1);
	color:#fff;
	letter-spacing:0.15em;
}
.woocommerce-product-gallery{position:relative;}
/* Стрелки листания (.flex-direction-nav) добавляются flexslider'ом внутрь этой обёртки
   (только фото, без миниатюр) — ей тоже нужен position:relative, иначе top:50% у стрелок
   считается от .woocommerce-product-gallery целиком (фото + миниатюры), и они уезжают вниз. */
.woocommerce-product-gallery__wrapper{position:relative;}
/* flexslider по умолчанию подгоняет высоту блока под реальные пропорции текущего
   фото, поэтому при переключении на фото с другим соотношением сторон блок визуально
   "скачет"/расширяется. Фиксируем квадрат под все фото и обрезаем/вписываем через object-fit. */
.woocommerce-product-gallery__image,
.flex-viewport{
	aspect-ratio:1/1;
	overflow:hidden;
}
/* :not(.zoomImg) — саму .zoomImg (увеличенную картинку для эффекта лупы при наведении,
   её добавляет отдельно плагин zoom) трогать нельзя: он сам через JS выставляет ей
   размер (img.width * magnify), а наш !important здесь сжимал бы её обратно до 100%
   контейнера, и увеличение визуально переставало работать. */
.woocommerce-product-gallery__image img:not(.zoomImg){
	width:100% !important;
	height:100% !important;
	object-fit:contain;
}
/* На тач-устройствах эффект лупы по наведению (.zoomImg) бесполезен — hover там
   не бывает. Но невидимый слой .zoomImg всё равно лежит поверх фото и на touch
   сначала перехватывает касание на эмуляцию hover, и только ВТОРОЙ тап реально
   доходит до клика на .woocommerce-product-gallery__image (открытие фото на
   весь экран, см. main.js) — снаружи это выглядит как "не открывается с первого
   раза". pointer-events:none убирает слой из-под пальца, тап сразу проходит. */
@media (hover: none), (pointer: coarse) {
	.woocommerce-product-gallery__image .zoomImg{
		pointer-events:none !important;
	}
}
/* Миниатюры под фото на desktop — по умолчанию WooCommerce делает их по 25% ширины
   (4 в ряд), крупными, и весь блок занимает много места по высоте. Уменьшаем плитки
   и укладываем по 8 в ряд, квадратом, с небольшим отступом. */
.woocommerce-product-gallery .flex-control-thumbs{
	display:grid !important;
	grid-template-columns:repeat(8, 1fr);
	/* Увеличенный gap (не паддинг на фото!) — фото остаются во всю ячейку, как
	   раньше, а увеличенный промежуток даёт место рамке активной миниатюры
	   (outline-offset), чтобы она не обрезалась соседним фото. */
	gap:14px;
	margin-top:20px !important;
	/* Рамка активной миниатюры (outline-offset) выходит за пределы своей ячейки —
	   у крайних (первая колонка/первая и последняя строка) ей больше некуда
	   выходить, кроме как за пределы самой сетки, а там её обрезает overflow:hidden
	   у предка (.single-product div.product). Даём сетке запас по краям.
	   !important — у ".woocommerce div.product div.images .flex-control-thumbs"
	   ядра WC специфичнее (3 класса против 2), без него padding не применялся. */
	padding:6px !important;
}
.woocommerce-product-gallery .flex-control-thumbs li{
	width:auto !important;
	float:none !important;
	aspect-ratio:1/1;
}
.woocommerce-product-gallery .flex-control-thumbs li img{
	width:100%;
	height:100%;
	object-fit:cover;
	/* Ядро WooCommerce гасит неактивные миниатюры (opacity:.5) — не гасим, вместо
	   этого у активной (сейчас показанной в большом фото) — рамка с отступом
	   (outline-offset) от самого фото. */
	opacity:1 !important;
	box-sizing:border-box;
	outline-offset:4px;
	outline:2px solid transparent;
}
.woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs li img:hover{
	outline-color:#000;
}
/* Лупа (photoswipe-триггер) — убираем, вместо неё стрелки листания фото слева/справа.
   WooCommerce сам добавляет разметку стрелок через flexslider (.flex-direction-nav),
   но никак их не стилизует (нет своего flexslider.css) — оформляем сами. */
.woocommerce-product-gallery__trigger{display:none !important;}
.flex-direction-nav{list-style:none;margin:0;padding:0;}
.flex-direction-nav li{margin:0;}
.flex-direction-nav a{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	z-index:10;
	width:40px;
	height:40px;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:0;
	text-decoration:none;
	cursor:pointer;
}
.flex-direction-nav .flex-prev{left:16px;}
.flex-direction-nav .flex-next{right:16px;}
.flex-direction-nav a::before{
	content:"‹";
	font-size:36px;
	line-height:1;
	color:#fff;
	text-shadow:0 1px 4px rgba(0,0,0,.5);
}
.flex-direction-nav .flex-next::before{content:"›";}
.cart-btn-container{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	aspect-ratio:1/1;
	z-index:6;
	display:flex;
	align-items:center;
	justify-content:center;
	opacity:0;
	pointer-events:none;
	transition:opacity .3s ease;
}
li.product:hover .cart-btn-container{opacity:1;}
.cart-btn-middle{display:flex;align-items:center;justify-content:center;}
/* Стандартная ссылка WooCommerce "Просмотр корзины", всплывающая после успешного AJAX-добавления —
   прячем: у нас её роль полностью выполняет попап мини-корзины (.mini-cart-popup) в шапке. */
.cart-btn-middle .added_to_cart{display:none !important;}
/* У вариативных товаров (с ценой "от") WooCommerce вместо ajax-кнопки рендерит
   ссылку "Выбрать опции" на страницу товара — кнопку "в корзину" в один клик из
   каталога для них не показываем нигде (ни на десктопе, ни на мобилке). */
.cart-btn-container .button.product_type_variable{
	display:none !important;
}
/* Товары без цены (get_price() пустая — is_purchasable() = false) не годятся для
   ajax-добавления в корзину: WooCommerce вместо add_to_cart_button рендерит ссылку
   "Читать далее" (класс "button", без add_to_cart_button) на страницу товара. Наш
   .cart-btn-container красит ЛЮБОЙ .button в круглую иконку корзины — эта ссылка
   выглядела как кнопка "в корзину", хотя товар не покупаем. Показываем иконку только
   для настоящих ajax-кнопок добавления. */
.cart-btn-container .button:not(.add_to_cart_button){
	display:none !important;
}
.cart-btn-container .add_to_cart_button,
.cart-btn-container .button{
	display:flex !important;
	align-items:center;
	justify-content:center;
	width:47px !important;
	height:47px !important;
	border-radius:50% !important;
	background:#fff !important;
	font-size:0 !important;
	line-height:0 !important;
	color:transparent !important;
	padding:0 !important;
	margin:0 auto !important;
	box-shadow:0 4px 14px rgba(0,0,0,.12);
	transition:background-color .2s ease;
	pointer-events:auto;
}
.cart-btn-container .add_to_cart_button:hover,
.cart-btn-container .button:hover{
	background:var(--color-accent) !important;
}
.cart-btn-container .add_to_cart_button::before,
.cart-btn-container .button::before{
	content:"";
	display:block;
	width:22px;
	height:24px;
	background-color:#333;
	transition:background-color .2s ease;
	-webkit-mask:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2036%2036%22%3E%3Cpath%20d%3D%22M20.4%2024.6L19%2026v-8-.1c0-.5-.5-1-1-1s-1%20.5-1%201v7.9l-1.3-1.3c-.4-.4-1-.4-1.4%200-.4.4-.4%201%200%201.4l3%203c.4.4%201%20.4%201.4%200l3.1-3c.4-.4.4-1%200-1.4s-1-.3-1.4.1z%22/%3E%3Cpath%20d%3D%22M29%2012h-3c-.1-6.2-3.1-10-8-10s-7.9%203.8-8%2010H7c-.5%200-.9.3-1%20.7-.1.5-3%2011.3-3%2014.3%200%203.9%203.1%207%207%207h16c3.9%200%207-3.1%207-7%200-3.1-2.9-13.8-3-14.3-.1-.4-.5-.7-1-.7zM18%204c5.3%200%206%205.5%206%208H12c0-2.5.7-8%206-8zm7.9%2028H10c-2.7%200-5-2.2-5-4.9%200-2.1%201.9-9.5%202.8-13h20.4c.9%203.5%202.7%2010.9%202.7%2013%200%202.7-2.2%204.9-5%204.9z%22/%3E%3C/svg%3E') center/contain no-repeat;
	mask:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2036%2036%22%3E%3Cpath%20d%3D%22M20.4%2024.6L19%2026v-8-.1c0-.5-.5-1-1-1s-1%20.5-1%201v7.9l-1.3-1.3c-.4-.4-1-.4-1.4%200-.4.4-.4%201%200%201.4l3%203c.4.4%201%20.4%201.4%200l3.1-3c.4-.4.4-1%200-1.4s-1-.3-1.4.1z%22/%3E%3Cpath%20d%3D%22M29%2012h-3c-.1-6.2-3.1-10-8-10s-7.9%203.8-8%2010H7c-.5%200-.9.3-1%20.7-.1.5-3%2011.3-3%2014.3%200%203.9%203.1%207%207%207h16c3.9%200%207-3.1%207-7%200-3.1-2.9-13.8-3-14.3-.1-.4-.5-.7-1-.7zM18%204c5.3%200%206%205.5%206%208H12c0-2.5.7-8%206-8zm7.9%2028H10c-2.7%200-5-2.2-5-4.9%200-2.1%201.9-9.5%202.8-13h20.4c.9%203.5%202.7%2010.9%202.7%2013%200%202.7-2.2%204.9-5%204.9z%22/%3E%3C/svg%3E') center/contain no-repeat;
}
/* После успешного ajax-добавления WooCommerce сам вешает класс .added на кнопку —
   меняем иконку корзины на галочку, без JS. */
.cart-btn-container .add_to_cart_button.added::before,
.cart-btn-container .button.added::before{
	width:18px;
	height:18px;
	-webkit-mask:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%224%2013%209%2018%2020%205%22/%3E%3C/svg%3E') center/contain no-repeat;
	mask:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%224%2013%209%2018%2020%205%22/%3E%3C/svg%3E') center/contain no-repeat;
}

.new-arrivals,
.popular-products {
  padding: 70px 0;
}

.section-cta-btn {
  display: block;
  width: 100%;
  margin-top: 40px;
  padding: 8px;
  background: var(--color-accent);
  color: #000;
  font-size: 19px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  border-radius: 10px;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.section-cta-btn:hover {
  background: var(--color-accent-hover);
  color: #fff;
}

/* Engraving / individual */
.engraving {
  padding: 70px 0;
}
.engraving__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  text-align: center;
}

.about-brief {
  padding: 70px 0;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

/* Footer — 3 колонки: Инфо / круглый лого-штамп / Соцсети, как на старом сайте */
.site-footer {
  margin-top: 60px;
}
.site-footer .container {
  padding: 0 65px;
}
.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 48px;
  align-items: start;
}
.footer-widget__title {
  text-transform: uppercase;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 20px;
}
.site-footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.site-footer__col a {
  font-size: 18px;
}
.site-footer__col--info {
  text-align: left;
}
.site-footer__col--social {
  text-align: right;
}
.site-footer__col--social ul {
  align-items: flex-end;
}
.site-footer__phone {
  display: inline-block;
  margin-top: 12px;
  padding: 2px 6px;
  background: #ffd700;
  font-weight: 700;
  text-decoration: underline;
}

.footer-stamp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.footer-stamp__circle {
  display: block;
  width: 180px;
  height: 180px;
}
.footer-stamp__circle img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.footer-stamp__circle--inverted img {
  filter: invert(1);
}
.footer-stamp__tagline {
  font-size: 16px;
  color: var(--color-text);
}

.site-footer__bottom {
  text-align: center;
  margin-top: 48px;
  padding: 20px 0;
  border-top: 1px solid var(--color-border);
  font-size: 12px;
  color: var(--color-text-muted);
}

.yandex-rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
}
.yandex-rating-badge__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.yandex-rating-badge__stars {
  color: var(--color-border);
  font-size: 14px;
  letter-spacing: 2px;
}
.yandex-rating-badge__text {
  font-size: 12px;
  color: var(--color-text-muted);
}

.cookie-banner[hidden] {
  display: none;
}
.cookie-banner {
  position: fixed;
  left: 45px;
  bottom: 24px;
  z-index: 999;
  max-width: calc(100% - 90px);
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  font-size: 16px;
  line-height: 1.2;
}
.cookie-banner p {
  margin: 0;
  color: #000;
}
.cookie-banner a {
  color: #0919f0;
  text-decoration: underline;
}
.cookie-banner .btn {
  background: #9999ff;
  border-color: #9999ff;
  color: #fff;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: 400;
  white-space: nowrap;
  border-radius: 10px;
  text-transform: none;
  letter-spacing: 0;
}
.cookie-banner .btn:hover {
  opacity: 0.85;
  background: #9999ff;
  border-color: #9999ff;
  color: #fff;
}

/* Кнопка "Наверх страницы" — появляется после прокрутки ниже 800px (main.js). */
.scroll-to-top[hidden] {
  display: none;
}
.scroll-to-top {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 998;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  transition: background-color 0.2s ease, opacity 0.2s ease;
}
.scroll-to-top:hover {
  background: var(--color-accent, #ffc014);
  color: #000;
}
@media (max-width: 480px) {
  .scroll-to-top {
    left: 16px;
    bottom: 16px;
    width: 42px;
    height: 42px;
  }
}

@media (max-width: 480px) {
  .cookie-banner {
    left: 20px;
    right: 20px;
    max-width: calc(100% - 40px);
    flex-direction: column;
  }
  .cookie-banner p {
    font-size: 14px;
    text-align: center;
  }
  .cookie-banner .btn {
    width: 100%;
    font-size: 14px;
  }
}

.footer_dev_credit {
  display: flex;
  justify-content: center;
  padding: 16px 0 24px;
}
.footer_dev_link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
.footer_dev_link:hover {
  opacity: 1;
  color: inherit;
}
.footer_dev_text {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  text-transform: uppercase;
}
.footer_dev_by {
  font-size: 12px;
  letter-spacing: 0.09em;
  color: var(--color-footer);
  font-style: italic;
}

.footer_dev_by:hover {
  font-size: 12px;
  letter-spacing: 0.09em;
  color: var(--color-footer-hover);
  font-style: italic;
}

.footer_dev_logo {
  height: 18px;
  width: auto;
  object-fit: contain;
}

/* Shop wrapper */
.shop-wrap {
  padding: 50px 0;
}
.shop-wrap .container {
  padding: 0 65px;
}

/* Каталог: нав по категориям */
.shop-cat-nav {
  margin-bottom: 24px;
}
.shop-cat-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.shop-cat-nav__item a {
  display: block;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text);
  transition: color 0.2s;
}
.shop-cat-nav__item a:hover {
  color: var(--color-accent);
}
.shop-cat-nav__item.is-active a {
  color: rgba(9, 25, 240, 1);
}

/* Хлебные крошки + сортировка в одну строку */
.shop-top-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  font-size: 16px;
}
.shop-breadcrumbs {
  color: #000000;
  letter-spacing: 0.05em;
}
.shop-breadcrumbs a {
  color: #020202;
}
.shop-breadcrumbs a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}
.shop-breadcrumbs__sep {
  margin: 0 6px;
}
.shop-breadcrumbs__h1 {
  display: inline;
  margin: 0;
  padding: 0;
  font: inherit;
  font-weight: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: none;
}
.shop-sort {
  position: relative;
  letter-spacing: 0.05em;
}
.shop-sort__current {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 16px;
  color: var(--color-text);
  cursor: pointer;
}
.shop-sort__label {
  color: inherit;
}
.shop-sort__value {
  color: inherit;
}
.shop-sort__arrow {
  display: flex;
  color: inherit;
  transition: transform 0.2s ease;
}
.shop-sort__current:hover,
.shop-sort.is-open .shop-sort__current {
  color: var(--color-accent);
}
.shop-sort.is-open .shop-sort__arrow {
  transform: rotate(180deg);
}
.shop-sort__list {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 20;
  margin-top: 0;
  padding: 20px 18px;
  /* min-width:260px; */
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  list-style: none;
}
.shop-sort__list[hidden] {
  display: none;
}
.shop-sort__list li + li {
  margin-top: 18px;
}
.shop-sort__list a {
  display: block;
  text-align: right;
  font-size: 16px;
  color: var(--color-text);
  white-space: nowrap;
}

.shop-infinite-sentinel {
  height: 1px;
}
.shop-infinite-sentinel.is-loading {
  height: 60px;
  margin-top: -60px;
  background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-dasharray%3D%2231.4%2031.4%22%20stroke-linecap%3D%22round%22%3E%3CanimateTransform%20attributeName%3D%22transform%22%20type%3D%22rotate%22%20from%3D%220%2012%2012%22%20to%3D%22360%2012%2012%22%20dur%3D%220.8s%22%20repeatCount%3D%22indefinite%22/%3E%3C/circle%3E%3C/svg%3E') center/24px no-repeat;
}
.shop-sort__list a:hover,
.shop-sort__list a.is-active {
  color: var(--color-accent);
}

/* Page content */
.page-content {
  padding: 50px 0;
  max-width: 800px;
}
/* Страница "Корзина" — таблица товаров и весь чекаут ниже должны идти на всю ширину
   экрана (не в узкой 800px колонке, как обычные страницы), с отступами 65px по бокам
   на desktop. */
.woocommerce-cart .page-content,
.woocommerce-checkout .page-content {
  max-width: none;
  padding-left: 65px;
  padding-right: 65px;
}
@media (max-width: 960px) {
  .woocommerce-cart .page-content,
.woocommerce-checkout .page-content {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.page-title {
  text-transform: uppercase;
  font-size: 26px;
}
/* Заголовок "Корзина" на странице корзины — на оригинале это пресет f__h3
   (25px/700/uppercase/0.1em) фиолетовым акцентом #6c6cff, а не обычный чёрный
   page-title. Значения сняты напрямую с прод-сайта через getComputedStyle. */
.woocommerce-cart .page-title,
.woocommerce-checkout .page-title {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #6c6cff;
  margin-top: 20px;
}

/* Responsive */
@media (max-width: 960px) {
  /* .product-grid задан с !important (строка ~1300), поэтому обычная переопределяющая
     колонка без !important тут не срабатывала — сетка "Новинки"/"Популярное" оставалась
     в 4 колонки на любом экране и текст/карточки съезжали друг на друга на мобильных */
  .container {
    padding: 0 32px;
  }
  .categories__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .product-grid,
  ul.products,
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  .site-footer__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .site-footer__col--info,
  .site-footer__col--social {
    text-align: center;
  }
  .site-footer__col--social ul {
    align-items: center;
  }
  .engraving__inner {
    grid-template-columns: 1fr;
  }
  .site-nav__list {
    display: none;
  }
  h1 {
    font-size: 32px;
  }
  .new-arrivals,
  .popular-products {
    padding: 32px 0;
  }
}

/* Уже на самых узких телефонах даже 2 колонки продуктовой сетки тесные — 1 колонка.
   Правило намеренно идёт ПОСЛЕ @media (max-width:960px) в файле: оба блока используют
   !important на одном и том же селекторе, а при равной специфичности и "важности"
   побеждает то правило, что позже в исходном коде — блок 480px должен идти позже 960px,
   иначе более широкий брейкпоинт перебивает более узкий, хотя условие уже и точнее. */
@media (max-width: 576px) {
  .container {
    padding: 10px 20px;
  }
  .shop-cat-nav {
    display: none;
  }
  .shop-wrap .container {
    padding: 0 20px;
  }
  .shop-top-line {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  ul.products,
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px 12px !important;
    justify-content: center;
    justify-items: stretch;
  }
  /* На главной ("Новинки"/"Популярное") — 1 колонка, как на оригинале, в отличие
     от каталога (ul.products выше), где на мобилке остаются 2 колонки. */
  .product-grid {
    grid-template-columns: 1fr !important;
  }
  /* Кнопка "В корзину" в каталоге на мобилке: на десктопе это оверлей поверх фото,
     видимый по :hover — на тач-устройствах ховера нет, поэтому переводим её в обычный
     поток под ценой как маленькую иконку. У вариативных товаров (с ценой "от") вместо
     ajax-кнопки WooCommerce рендерит ссылку "Выбрать опции" на страницу товара —
     её на мобилке в каталоге не показываем, только у товаров с фиксированной ценой. */
  ul.products li.product .cart-btn-container {
    position: static;
    width: auto;
    aspect-ratio: auto;
    opacity: 1;
    pointer-events: auto;
    justify-content: flex-start;
    margin-top: 10px;
  }
  ul.products li.product .cart-btn-container .button.product_type_variable {
    display: none !important;
  }
  ul.products li.product .cart-btn-container .add_to_cart_button,
  ul.products li.product .cart-btn-container .button {
    width: 47px !important;
    height: 47px !important;
  }
  ul.products li.product .cart-btn-container .add_to_cart_button::before,
  ul.products li.product .cart-btn-container .button::before {
    width: 27px;
    height: 47px;
  }
  /* .site-infobar .container — отдельное, более специфичное правило (padding:0 65px),
     которое общий сброс .container выше не перебивает. На 390px экране это оставляло
     всего ~260px под текст "Мы всегда на связи: 8 (800) 100-16-47" при 16px шрифта —
     не помещалось в одну строку и переносилось на две. На оригинале шрифт остаётся
     ~16px даже на мобильном (в одну строку он не помещался именно из-за паддинга,
     не из-за размера шрифта) — уменьшать font-size было моей ошибкой, откатываю. */
  .site-infobar .container {
    padding: 0 20px;
  }
  /* На мобилке фото товара показываем без строки миниатюр снизу — только большое
     фото со стрелками листания. */
  .woocommerce-product-gallery .flex-control-nav {
    display: none !important;
  }
  .single-product .product_title {
    font-size: 26px !important;
  }
  /* Кнопка "В корзину" (фикс. width:250px, рассчитано на десктоп) вместе со степпером
     (94px) + отступом не помещается в один ряд на узких экранах и переносится на
     новую строку. Вместо переноса — сжимаем: степпер чуть уже, кнопка тянется на
     остаток ширины (flex:1), оба остаются в одну строку. */
  .single-product .summary .qty-stepper {
    flex: none;
  }
  .single-product .summary .single_add_to_cart_button {
    flex: 1;
    width: auto !important;
    min-width: 0;
    padding: 14px 12px !important;
    font-size: 15px !important;
    margin-left: 12px;
  }
}

.hero-slide__link-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: block;
}

/* Мини-корзина: попап "Ваши товары" при добавлении в корзину.
   position:relative — именно на обёртке .site-header__cart-wrap, а не на .site-header__cart:
   попап — сосед ссылки-иконки, а не её потомок, поэтому он ищет ближайшего позиционированного
   предка. В маленькой (sticky-clone) шапке .site-header__zone--right сама имеет
   position:absolute + transform, и без этой обёртки попап позиционировался бы относительно
   неё (создающей контекст первой), а не относительно иконки корзины. */
.site-header__cart-wrap {
  position: relative;
  /* display:inline-flex — без него дочерняя ссылка .site-header__cart (inline-flex)
     выравнивалась внутри этого div по базовой линии текста, оставляя под собой
     "хвост" под дескендеры шрифта; это делало обёртку выше соседних кнопок
     (поиск/бургер, которые сами являются flex-элементами строки без такой обёртки)
     и визуально сдвигало иконку корзины вверх относительно них. */
  display: inline-flex;
  align-items: center;
}
.mini-cart-popup {
  position: absolute;
  top: 100%;
  right: 0;
  width: 340px;
  background: #fff;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16);
  z-index: 100;
  padding: 36px 20px 20px;
  visibility: hidden;
  pointer-events: none;
  /* Панель уже стоит на своём месте вплотную к шапке — "выезд" делаем маской (clip-path),
     а не смещением (translate), чтобы визуально она разворачивалась прямо из шапки, а не
     прилетала откуда-то сверху. */
  clip-path: inset(0 0 100% 0);
  transition:
    clip-path 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.6s;
}
.mini-cart-popup.is-open {
  visibility: visible;
  pointer-events: auto;
  clip-path: inset(0 0 0 0);
}
.mini-cart-popup__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--color-accent-hover);
  font-size: 15px;
  margin-bottom: 16px;
}
.mini-cart-popup__close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: #999;
  padding: 0;
}
.mini-cart-popup__close:hover {
  color: #000;
}
.mini-cart-popup__items {
  max-height: 320px;
  overflow-y: auto;
  /* Системный скроллбар (видимая полоска на скролле, например на macOS) убираем —
     список и так прокручивается, просто без видимого индикатора. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.mini-cart-popup__items::-webkit-scrollbar {
  display: none;
}
.mini-cart-popup__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 16px;
}
.mini-cart-popup__item-image {
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
  display: block;
  overflow: hidden;
}
.mini-cart-popup__item-image img {
  width: 60px !important;
  height: 60px !important;
  max-width: 60px !important;
  object-fit: cover;
}
.mini-cart-popup__item-info {
  flex: 1;
  min-width: 0;
  padding-right: 20px;
}
.mini-cart-popup__item-name {
  display: block;
  font-size: 15px;
}
.mini-cart-popup__item-variation {
  display: block;
  font-size: 13px;
  color: #999;
  margin-top: 2px;
}
.mini-cart-popup__item-variation p {
  margin: 0;
}
.mini-cart-popup__item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}
.mini-cart-popup__item-price {
  font-size: 14px;
}
.mini-cart-popup__qty {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 4px 10px;
}
.mini-cart-popup__qty-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  color: #000;
  padding: 2px;
}
.mini-cart-popup__qty-val {
  font-size: 14px;
  min-width: 12px;
  text-align: center;
}
.mini-cart-popup__remove {
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: #999;
  padding: 4px;
}
.mini-cart-popup__remove:hover {
  color: #000;
}
.mini-cart-popup__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  margin-bottom: 16px;
}
.mini-cart-popup__total span {
  color: var(--color-accent-hover);
}
.mini-cart-popup__empty {
  font-size: 14px;
  color: var(--color-text-muted);
  margin: 0;
}
.mini-cart-popup__cta {
  display: block;
  width: 100%;
  padding: 16px;
  background: #000;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  border-radius: 10px;
  transition: background-color 0.2s ease;
}
.mini-cart-popup__cta:hover {
  background: var(--color-accent);
  color: #000;
}
@media (max-width: 576px) {
  /* Затемняющая подложка под попапом корзины — как на оригинале. Отдельный элемент
     (не ::before у .mini-cart-popup), т.к. сама попап-панель анимируется через
     translateY и обрезана по своим границам — псевдоэлемент внутри неё не смог бы
     растянуться на весь экран поверх остального контента. */
  .mini-cart-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: rgba(20, 20, 30, 0.5);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s;
  }
  .mini-cart-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  /* На мобилке попап корзины — не узкая панель под иконкой в шапке (как на десктопе),
     а полноэкранная нижняя шторка (bottom sheet), выезжающая снизу вверх, как на оригинале. */
  .mini-cart-popup {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    border-radius: 14px 14px 0 0;
    clip-path: none;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s;
  }
  .mini-cart-popup.is-open {
    transform: translateY(0);
    clip-path: none;
  }
  .mini-cart-popup__items {
    display: flex;
    /* max-height:320px + overflow-y:auto (базовое правило) — рассчитано под
       десктопный вертикальный список с фото 60px, на мобильной горизонтальной
       ленте с фото 140px это лишнее ограничение по высоте, снимаем его. */
    max-height: none;
    overflow-y: visible;
    overflow-x: auto;
    gap: 16px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .mini-cart-popup__items::-webkit-scrollbar {
    display: none;
  }
  .mini-cart-popup__item {
    /* display:block вместо flex — на мобилке карточка просто складывает фото и текст
       друг под другом. С flex-direction:column тут был баг: .mini-cart-popup__item-image
       наследует flex:0 0 60px (базовое правило, рассчитан на десктопный горизонтальный
       ряд, где flex-basis задаёт ширину); в колонке flex-basis:60px начинал управлять
       ВЫСОТОЙ и главенствовал над height:140px!important — обёртка оставалась 60px
       и обрезала картинку снизу. Без display:flex у родителя flex-basis потомка
       вообще не действует, и обычный height просто работает. */
    display: block;
    flex: 0 0 auto;
    width: 140px;
    border-bottom: none;
    padding-bottom: 0;
  }
  .mini-cart-popup__item-image,
  .mini-cart-popup__item-image img {
    width: 140px !important;
    max-width: 140px !important;
    height: 140px !important;
  }
  /* object-fit:cover (базовое правило) кадрировал некадратные фото товара под
     квадрат 140×140, отрезая часть изображения — на мобилке показываем фото целиком. */
  .mini-cart-popup__item-image {
    background: #f4f4f4;
  }
  .mini-cart-popup__item-image img {
    object-fit: contain;
  }
  .mini-cart-popup__item-info {
    /* Базовый gap:14px у .mini-cart-popup__item (на flex-ряду с фото) не действует
       у block-элементов — на мобилке, где .mini-cart-popup__item стал display:block,
       отступ от фото до текста делаем через margin-top. */
    display: block;
    margin-top: 10px;
    padding-right: 0;
  }
  .mini-cart-popup__item-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .mini-cart-popup__qty {
    display: none;
  }
  /* Удаление товара прямо из попапа — на оригинальном сайте такой возможности на
     мобилке нет, но у нас пусть будет (полезнее для пользователя). */
  .mini-cart-popup__remove {
    top: -6px;
    right: -6px;
    background: #fff;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
  /* Кнопка "В корзину" в результатах поиска на мобилке — не оверлей по :hover
     (тач-устройства), а видимая иконка рядом с ценой, как в мобильном каталоге. */
  .live-search__product .cart-btn-container {
    position: static;
    width: auto;
    aspect-ratio: auto;
    opacity: 1;
    pointer-events: auto;
    justify-content: flex-start;
    margin-top: 8px;
  }
  .live-search__product .cart-btn-container .button.product_type_variable {
    display: none !important;
  }
  .live-search__product .cart-btn-container .add_to_cart_button,
  .live-search__product .cart-btn-container .button {
    width: 34px !important;
    height: 34px !important;
  }
  .live-search__product .cart-btn-container .add_to_cart_button::before,
  .live-search__product .cart-btn-container .button::before {
    width: 16px;
    height: 17px;
  }
}

/* Карусель "Ваши отзывы" на главной — у Elementor "Растягивать изображения" тянет только
   ширину слайда, высота слайда всё равно берётся из естественных пропорций каждого фото,
   из-за чего карточки получаются "лесенкой". Задаём фиксированное соотношение сторон 300х400
   (3:4) через aspect-ratio — высота слайда сама следует за его шириной, которую вычисляет
   Swiper (мы её не трогаем, чтобы не сбить навигацию/позиционирование слайдов). */
.elementor-element-963b25d .swiper-slide {
  height: auto;
}
.elementor-element-963b25d .swiper-slide-inner {
  aspect-ratio: 3 / 4;
  height: auto;
}
.elementor-element-963b25d .swiper-slide-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Эффект "выглядывающих" крайних слайдов, как в оригинале: сужаем видимую область самой
   карусели и разрешаем показывать то, что выходит за её края, вместо overflow:hidden по
   умолчанию у Swiper. Слайды остаются теми же 5 шт. — просто их общий ряд шире вьюпорта. */
.elementor-element-963b25d .elementor-image-carousel-wrapper.swiper {
  overflow: visible;
  max-width: 88%;
  margin: 0 auto;
}
/* overflow:visible на самой карусели (выше) означает, что в loop-режиме Swiper
   продублированные слайды физически кладутся в разметку далеко за пределы вьюпорта —
   без clip на секции-обёртке это раздувает ширину всего документа (был скролл вправо
   на ~7000px). Обрезаем именно на секции, а не на .swiper, чтобы эффект "выглядывания"
   слайдов внутри секции сохранился. */
.elementor-element-cc0d75b {
  overflow-x: clip;
}

/* Карусель фото на "Контактах" — тот же приём, что у карусели отзывов выше: при
   "Растягивать изображения: Нет" высота слайда берётся из пропорций каждого конкретного
   фото, из-за чего 3 показанных слайда получаются разной высоты ("лесенкой"). Фиксируем
   общее соотношение сторон через aspect-ratio — все слайды одной высоты, лишнее по бокам
   каждого фото обрезается object-fit:cover. */
.elementor-element-b7bb046 .swiper-slide {
  height: auto;
}
.elementor-element-b7bb046 .swiper-slide-inner {
  aspect-ratio: 3 / 4;
  height: auto;
}
.elementor-element-b7bb046 .swiper-slide-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Форма заказа (Elementor id 4518, контейнер .elementor-element-0211368) имеет
   в настройках Elementor фиксированную ширину 780px без max-width:100% —
   на вьюпортах 768-779px (в т.ч. iPad портретно, 768px!) контейнер оказывается
   ШИРЕ экрана, и левый край формы (поля Имя/E-mail/Телефон) обрезается за
   пределами viewport. Подстраховываемся сами, раз в самом Elementor это поле
   не привязано к min(780px,100%). */
.elementor-4518 .elementor-element-0211368 {
  max-width: 100%;
}

/* MetForm: рамка кнопки "Прикрепите файл" по умолчанию сжимается до содержимого
   (display:inline-flex в metform-ui.css) — растягиваем на всю ширину виджета */
.mf-input-file-upload-label {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
}

/* MetForm: чекбокс формы рисуется иконкой шрифта FontAwesome (::before с content
   "\f0c8"/"\f14a", отдельное правило ещё и для :checked) — заменяем на настоящий
   круглый индикатор с собственной заливкой */
.mf-checkbox-option {
  position: relative;
}
/* Висячий отступ: кружок выносим из потока текста (position:absolute), а тексту
   резервируем отступ слева на label — тогда все перенесённые строки выравниваются
   по одной вертикальной линии, а не съезжают под кружок при переносе */
.mf-checkbox-option label {
  display: block;
  position: relative;
  padding-left: 32px;
}
.mf-checkbox-option input[type="checkbox"] + span::before,
.mf-checkbox-option input[type="checkbox"]:checked + span::before {
  font-family: initial !important;
  font-weight: normal !important;
  content: "" !important;
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  box-sizing: border-box !important;
  border: 1.5px solid #b0b0b0 !important;
  border-radius: 50% !important;
  background-color: #fff !important;
  position: absolute !important;
  left: 0 !important;
  top: 1px !important;
  font-size: 0 !important;
  color: transparent !important;
}
.mf-checkbox-option input[type="checkbox"]:checked + span::before {
  border-color: #000 !important;
}
/* галочка внутри круга при отмеченном состоянии, без заливки фона */
.mf-checkbox-option input[type="checkbox"]:checked + span::after {
  content: "" !important;
  position: absolute !important;
  left: 7px !important;
  top: 4px !important;
  width: 5px !important;
  height: 10px !important;
  border: solid #000 !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}
/* MetForm сам ставит aria-invalid="true" на чекбокс после неудачной попытки
   отправки формы (обязательное поле не отмечено) — подсвечиваем красным
   кружок-индикатор, как и рамки у остальных обязательных полей. */
.mf-checkbox-option input[type="checkbox"][aria-invalid="true"] + span::before {
  border-color: #e53935 !important;
}

/* Виджет Elementor "Основная галерея" уже адаптивный сам по себе (widget-image-gallery.css:
   .gallery-item{max-width:N%}, с брейкпоинтами на 768px и 480px) — мой прошлый кастомный
   CSS (display:grid + свои проценты) был лишним и конфликтовал с их же max-width:N%: тот
   считался уже от узкой колонки грида, а не от всей галереи, отсюда двойное сужение
   плитки (плитка выходила вдвое уже, чем трек). Убрал весь тот блок.
   Единственное, что реально нужно было переопределить — на экранах ýже 479px Elementor
   сам схлопывает ЛЮБОЕ число колонок в 1 (.gallery-item{max-width:100%}), а нужно 2. */
@media (max-width: 479px) {
  .elementor-image-gallery .gallery.gallery-columns-1 .gallery-item,
  .elementor-image-gallery .gallery.gallery-columns-2 .gallery-item,
  .elementor-image-gallery .gallery.gallery-columns-3 .gallery-item,
  .elementor-image-gallery .gallery.gallery-columns-4 .gallery-item,
  .elementor-image-gallery .gallery.gallery-columns-5 .gallery-item,
  .elementor-image-gallery .gallery.gallery-columns-6 .gallery-item,
  .elementor-image-gallery .gallery.gallery-columns-7 .gallery-item,
  .elementor-image-gallery .gallery.gallery-columns-8 .gallery-item,
  .elementor-image-gallery .gallery.gallery-columns-9 .gallery-item,
  .elementor-image-gallery .gallery.gallery-columns-10 .gallery-item {
    /* !important нужен: специфичность в точности как у правила Elementor (4 класса),
       а main.css в <head> подключается РАНЬШЕ widget-image-gallery.min.css — при равной
       специфичности выигрывает тот, что позже, т.е. без !important побеждал бы Elementor */
    max-width: 50% !important;
  }
}

/* ==========================================================================
   Блог — лента статей (home.php) и страница отдельной статьи (single.php).
   Заказчик работает только через обычную запись WordPress: заголовок,
   текст, заглавное фото. Обрезка/качество/расположение фото в карточках
   и на шапке статьи — фиксированные (add_image_size 'pokrugu_blog_card' /
   'pokrugu_blog_single' в functions.php), поэтому выглядит одинаково
   аккуратно независимо от того, какого размера/пропорций фото загрузили.
   ========================================================================== */

@media (min-width: 481px) {
  .blog-wrap {
    padding: 60px 65px;
  }
}
.blog-title {
  text-align: center;
  margin-bottom: 40px;
}

.blog-feed {
  display: flex;
  flex-direction: column;
  gap: 90px;
}

.blog-row {
  display: flex;
  align-items: flex-start;
  gap: 100px;
}
.blog-row__image {
  display: block;
  flex: 0 0 46%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f4f4f4;
}
.blog-row__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.blog-row__image-placeholder {
  display: block;
  width: 100%;
  height: 100%;
}
.blog-row__body {
  flex: 1;
  min-width: 0;
  padding-top: 8px;
}
.blog-row__date {
  display: block;
  font-size: 14px;
  color: var(--color-text);
  margin-bottom: 18px;
}
.blog-row__title {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.25;
  margin-bottom: 24px;
}
.blog-row__title a {
  color: var(--color-text);
}
.blog-row__title a:hover {
  color: var(--color-accent-hover);
}
.blog-row__excerpt {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text);
  margin-bottom: 28px;
  max-width: 560px;
}
.blog-row__more {
  padding: 16px 36px;
}

.blog-row__social {
  display: none;
  align-items: center;
  gap: 18px;
  margin-top: 20px;
}
.blog-row__vk-like {
  display: flex;
  align-items: center;
}
.blog-row__icon-link {
  display: flex;
  align-items: center;
  color: var(--color-text);
}
.blog-row__icon-link:hover {
  color: var(--color-accent-hover);
}

.blog-empty {
  text-align: center;
  color: var(--color-text-muted);
  padding: 40px 0;
}

.blog-pagination {
  margin-top: 60px;
}
.blog-pagination ul {
  display: flex;
  justify-content: center;
  gap: 10px;
  list-style: none;
  padding: 0;
}
.blog-pagination a,
.blog-pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border: 1px solid var(--color-border);
  font-size: 14px;
}
.blog-pagination a:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-hover);
}
.blog-pagination span.current {
  background: var(--color-text);
  color: #fff;
  border-color: var(--color-text);
}

/* Отдельная статья */
.single-post-wrap {
  padding: 50px 0 80px;
  max-width: 860px;
}
.single-post__meta-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}
.single-post__cat {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-hover);
}
.single-post__date {
  font-size: 13px;
  color: var(--color-text-muted);
}
.single-post__title {
  text-transform: uppercase;
  font-size: 32px;
  line-height: 1.2;
  margin-bottom: 30px;
}
.single-post__cover {
  aspect-ratio: 1200 / 640;
  overflow: hidden;
  background: #f4f4f4;
  margin-bottom: 36px;
}
.single-post__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.single-post__content {
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text);
}
.single-post__content p {
  margin-bottom: 22px;
}
.single-post__content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 30px 0;
}
.single-post__content h2,
.single-post__content h3 {
  text-transform: uppercase;
  margin: 36px 0 16px;
}

.single-post__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 24px 0;
  margin: 40px 0 30px;
}
.single-post__nav-link {
  font-size: 14px;
  max-width: 45%;
  color: var(--color-text);
}
.single-post__nav-link--next {
  text-align: right;
  margin-left: auto;
}
.single-post__nav-link:hover {
  color: var(--color-accent-hover);
}
.single-post__vk-like {
  flex-shrink: 0;
}
.single-post__back {
  display: inline-block;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.single-post__back:hover {
  color: var(--color-accent-hover);
}

.single-post__comments-box {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 30px;
  margin-bottom: 40px;
}
.single-post__comments-title {
  text-transform: none;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
}

@media (max-width: 960px) {
  .blog-row {
    gap: 40px;
  }
  .blog-row__title {
    font-size: 26px;
  }
  .single-post__title {
    font-size: 26px;
  }
}
@media (max-width: 640px) {
  .blog-feed {
    gap: 50px;
  }
  .blog-row {
    flex-direction: column;
    gap: 0;
  }
  /* На мобильном порядок другой, чем на десктопе: дата и заголовок — над фото,
     текст и кнопка — под ним. .blog-row__body не участвует в layout как блок
     (display:contents), чтобы его содержимое можно было переставить наравне
     с фото через order — без этого фото и весь текст всегда шли бы двумя
     цельными кусками (сначала фото, потом весь body целиком). */
  .blog-row__body {
    display: contents;
  }
  .blog-row__date {
    order: 1;
    margin-bottom: 10px;
  }
  .blog-row__title {
    order: 2;
    margin-bottom: 20px;
  }
  .blog-row__image {
    order: 3;
    flex-basis: auto;
    width: 100%;
    margin-bottom: 20px;
  }
  .blog-row__excerpt {
    order: 4;
    margin-bottom: 20px;
  }
  .blog-row__more {
    order: 5;
    align-self: flex-start;
  }
  .blog-row__social {
    display: flex;
    order: 6;
  }
  .single-post__nav {
    flex-direction: column;
  }
  .single-post__nav-link,
  .single-post__nav-link--next {
    max-width: 100%;
    text-align: left;
    margin-left: 0;
  }
}

/* Страница товара (single product) — свой узкий контейнер вместо общего .container
   (1760px, как в шапке/каталоге): pokrugu_wc_wrapper_start() в functions.php
   добавляет класс .container--product на страницах товара. */
.container--product {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}
@media (max-width: 1199px) {
  .container--product {
    padding: 0 20px !important;
  }
}
.single-product .shop-breadcrumbs--product {
  margin-bottom: 24px;
  font-size: 16px;
  color: #000;
}
.single-product .shop-breadcrumbs--product a {
  color: #000;
}
.single-product .shop-breadcrumbs--product a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}
/* Не display:flex на div.product — .woocommerce-tabs (описание) и .related.products
   (похожие) тоже прямые дети div.product в шаблоне WooCommerce, и flex делал их
   элементами того же ряда, что и галерею с summary. Обычные float — просто и предсказуемо,
   как исторически делает сам WooCommerce; .woocommerce-tabs/.related идут ниже в обычном
   потоке сами по себе, достаточно clear:both. */
.single-product div.product {
  overflow: hidden;
  position: relative;
}
/* Бейдж "NEW"/"ХИТ" (.product-badges) выводится хуком woocommerce_before_single_product_summary
   СОСЕДОМ перед .woocommerce-product-gallery, а не внутри неё — раньше это чинили
   переносом через JS (main.js), из-за чего бейдж на долю секунды был виден в
   исходном месте (справа, будто над summary) и заметно "прыгал" на фото, когда JS
   выполнялся. Вместо переноса элемента считаем позицию сразу через CSS относительно
   div.product: галерея float:left шириной calc(56% - 20px), значит её правый край
   отстоит от правого края div.product на calc(44% + 20px) — плюс те же 18px отступа,
   что были у бейджа при позиционировании от самой галереи. */
.single-product div.product > .product-badges {
  right: calc(44% + 38px);
}
.single-product div.product .woocommerce-product-gallery {
  float: left !important;
  width: calc(56% - 20px) !important;
}
.single-product div.product .summary {
  float: right !important;
  width: calc(44% - 20px) !important;
}
.single-product div.product .woocommerce-tabs,
.single-product div.product .related.products,
.single-product div.product .single-product__packaging {
  clear: both;
  width: 100%;
  padding-top: 60px;
}
.single-product div.product .single-product__packaging {
  margin-top: 40px;
}
.single-product div.product .single-product__video {
  clear: both;
  width: 100%;
  margin: 40px 0 0;
}
.single-product div.product .single-product__video video {
  display: block;
  width: 100%;
  border-radius: 8px;
}
/* oEmbed (YouTube/VK/Rutube) отдаёт <iframe> с фиксированными width/height —
   заворачиваем в блок с соотношением сторон 16:9, чтобы плеер тянулся по
   ширине колонки, а не оставался мелким на десктопе/не вылезал на мобильном. */
.single-product div.product .single-product__video iframe,
.single-product div.product .single-product__video embed,
.single-product div.product .single-product__video object {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border-radius: 8px;
  border: none;
}
.single-product div.product .related.products > h2 {
  text-align: center;
  font-size: 25px;
}
.single-product div.product .related.products ul.products {
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 40px 16px;
}
@media (max-width: 576px) {
  .single-product div.product .related.products ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px 12px !important;
  }
}
.single-product .product_title {
  font-size: 40px;
  font-weight: 700;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: 0.05em;
  margin: 0 0 16px;
}
/* Форменные элементы (input/button) не наследуют font-family от body по умолчанию —
   у браузеров свой UA-стиль на них (Arial/system-ui), поэтому явно задаём Montserrat. */
.single-product .summary,
.single-product .summary input,
.single-product .summary button,
.single-product .summary .qty,
.single-product .summary .single_add_to_cart_button {
  font-family: var(--font-main);
}
.single-product .summary .price {
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  color: #000 !important;
  margin-bottom: 20px;
  display: block;
}
.single-product .summary .price .woocommerce-Price-amount {
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  color: #000 !important;
}
/* Миниатюры-переключатели на другие товары той же "Группы товара" (см.
   functions.php: pokrugu_render_product_group_swatches) — сразу под ценой,
   как цветные превью у LIME/Wildberries. */
.pokrugu-product-group-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.pokrugu-product-group-swatches__item {
  display: block;
  width: 48px;
  height: 48px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  padding: 1px;
}
.pokrugu-product-group-swatches__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
  display: block;
}
.pokrugu-product-group-swatches__item.is-current {
  border-color: #000;
}
a.pokrugu-product-group-swatches__item:hover {
  border-color: #000;
}
/* Выбор вариаций товара (цвет/длина/форма и т.п.) — WooCommerce по умолчанию рисует
   их как обычную HTML-таблицу с подписью слева от select'а, без всякой стилизации.
   Делаем так же, как на оригинале: каждый select — рамка на всю ширину со стрелкой,
   подпись убираем (текст placeholder внутри select её и так дублирует), а если
   атрибутов несколько — они идут друг под другом с отступом. */
.single-product .variations {
  display: block;
  width: 100%;
  flex-basis: 100%;
  margin-bottom: 16px;
  border-collapse: separate;
}
.single-product .variations tbody {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.single-product .variations tr {
  display: block;
  width: 100%;
}
.single-product .variations th.label {
  display: none;
}
.single-product .variations td.value {
  display: block;
  width: 100%;
}
/* Настоящий <select> прячем — вместо него кастомный дропдаун (.pk-select), который
   строит и синхронизирует с ним main.js. Не display:none (ломает форму/события),
   а визуально скрыт и убран из потока — value/change по-прежнему работают штатно
   для логики WooCommerce (подбор вариации по выбранным атрибутам). */
.single-product .variations select {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.pk-select {
  position: relative;
  width: 100%;
}
.pk-select__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  height: 52px;
  border: 1px solid #000;
  border-radius: 10px;
  padding: 0 20px;
  background: #fff;
  font-size: 16px;
  font-family: var(--font-main);
  color: #000;
  cursor: pointer;
  text-align: left;
}
.pk-select__toggle-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pk-select__arrow {
  flex: none;
  width: 12px;
  height: 8px;
  transition: transform 0.15s ease;
}
.pk-select.is-open .pk-select__arrow {
  transform: rotate(180deg);
}
.pk-select__list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 280px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid #000;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  display: none;
}
.pk-select.is-open .pk-select__list {
  display: block;
}
.pk-select__option {
  padding: 0px 14px;
  font-size: 15px;
  font-family: var(--font-main);
  color: #000;
  border-radius: 6px;
  cursor: pointer;
}
.pk-select__option:hover,
.pk-select__option.is-active {
  background: #f2f2f2;
}
.pk-select__option.is-disabled {
  color: #b3b3b3;
  cursor: default;
  pointer-events: none;
}
.single-product .variations td.value .reset_variations {
  display: none !important;
}
/* Кнопка "В корзину" у вариативного товара до выбора всех опций получает от
   WooCommerce класс .disabled (не настоящий disabled-атрибут — по клику сам JS
   показывает alert). Оставляем её визуально активной (чёрной, кликабельной) —
   вместо системного alert показываем свою подсказку под селектами (.pk-variation-hint). */
.single-product .summary .single_add_to_cart_button.disabled {
  opacity: 1 !important;
  cursor: pointer !important;
  background: #000 !important;
  color: #fff !important;
}
.pk-variation-hint {
  display: none;
  width: 100%;
  flex-basis: 100%;
  color: #c00;
  font-size: 14px;
  margin: -8px 0 16px;
}
.pk-variation-hint.is-visible {
  display: block;
}
.single-product .summary form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 24px;
}
/* У вариативных товаров qty-stepper и кнопка "В корзину" лежат не прямо в form.cart
   (как у простых товаров), а на уровень глубже — внутри .single_variation_wrap
   > .woocommerce-variation-add-to-cart. Без своего flex этот блок обычный div,
   поэтому qty-stepper (сам display:flex, но как блочный элемент) растягивался
   на всю ширину. Даём тот же flex-row, что и form.cart у простых товаров. */
.single-product .summary .woocommerce-variation-add-to-cart {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0;
  width: 100%;
}
/* Верхнюю цену (диапазон "от X") main.js переносит внутрь form.cart, первым элементом
   (см. main.js) — она и .single_variation (точная цена конкретной вариации, которую
   WooCommerce сам рендерит следом) должны занимать всю ширину строки, а не сжиматься
   как обычные flex-элементы. */
.single-product .summary form.cart > .price,
.single-product .summary .single_variation {
  flex-basis: 100%;
  width: 100%;
  margin-bottom: 20px;
}
.single-product .summary .qty-stepper {
  display: flex;
  align-items: center;
  border: 1px solid #000;
  border-radius: 10px;
  overflow: hidden;
  height: 52px;
}
.single-product .summary .quantity {
  display: flex;
  height: 100%;
  float: none;
  margin: 0;
}
.single-product .summary .quantity .qty {
  width: 28px;
  height: 100%;
  border: none;
  text-align: center;
  font-size: 16px;
  padding: 0;
  /* Прячем нативные стрелочки браузера у number-инпута — вместо них свои
     кастомные кнопки минус/плюс по краям. */
  -moz-appearance: textfield;
  appearance: textfield;
}
.single-product .summary .quantity .qty::-webkit-outer-spin-button,
.single-product .summary .quantity .qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.single-product .summary .qty-stepper__btn {
  width: 30px;
  height: 100%;
  border: none;
  background: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: #000;
  flex-shrink: 0;
}
.single-product .summary .qty-stepper__btn:hover {
  background: var(--color-bg-muted, #f4f4f4);
}
.single-product .summary .single_add_to_cart_button {
  background: #000 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 20px 28px !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  white-space: normal !important;
  width: 250px;
  height: auto !important;
  white-space: normal !important;
  margin-left: 16px;
}
.single-product .summary .added_to_cart {
  display: none !important;
}
.single-product .summary .single_add_to_cart_button:hover {
  background: var(--color-accent) !important;
  color: #fff !important;
}
/* Обычные ссылки в описании товара (например, "выбирайте нужное плетение и длину
   на странице «Цепи»", ссылки на другие версии товара) — раньше все ссылки внутри
   описания красились как кнопка Telegram ниже (uppercase, жирным) без разбора,
   хотя это обычный текстовый линк, а не кнопка. Убираем это для ссылок вообще,
   специально красим жирным/капсом только Telegram-кнопку (селектор по href ниже) —
   один общий CSS-фикс сразу для всех товаров, без правок в самом тексте описаний. */
.single-product .summary .woocommerce-product-details__description a {
  font-weight: 400;
  text-decoration: underline;
}
/* "Написать нам в Telegram" — из описания товара (вставлено с инлайн-стилями
   background:#000/color:#fff на вложенном span), делаем uppercase, жирным, и при
   наведении меняем цвет БУКВ (не фон) на акцентный цвет сайта. */
.single-product .summary .woocommerce-product-details__description a[href*="t.me"] {
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
}
.single-product .summary .woocommerce-product-details__description a span {
  transition: color 0.2s ease;
}
.single-product .summary .woocommerce-product-details__description a:hover span {
  color: var(--color-accent) !important;
}
.pokrugu-section-heading {
  display: inline-block;
  background-color: #ffd700;
  font-weight: 700;
  padding: 2px 6px;
}
@media (max-width: 960px) {
  .single-product div.product .woocommerce-product-gallery,
  .single-product div.product .summary {
    float: none !important;
    width: 100% !important;
  }
  /* На мобильном галерея занимает 100% ширины (не 56%, как на десктопе), а правило
     .single-product div.product > .product-badges { right: calc(44% + 38px) } выше
     по файлу это не учитывает и продолжает отступать от края галереи так, будто она
     уже desktop-ширины — бейдж уезжает от правого края фото. Пересчитываем под 18px,
     как у самой галереи. */
  .single-product div.product > .product-badges {
    right: 18px;
  }
}

/* Страница "Корзина" — классическая таблица товаров ([woocommerce_cart]) сверху. */
.woocommerce-cart-form__contents {
  width: 100%;
  border-collapse: collapse;
  /* Ядро WooCommerce (.woocommerce table.shop_table) вешает рамку на всю таблицу —
     нам не нужна, у строк уже свои border-bottom. */
  border: none !important;
}
/* Шрифт заголовков колонок/строк товара/итога — на прод-сайте это пресет f__3
   (16px/400/0.05em letter-spacing), а не браузерный дефолт; цвет линий — чёрный
   1px (а не светло-серый var(--color-border)). Значения сняты через getComputedStyle
   на реальной странице po-krugu.ru/shop/cart. */
.woocommerce-cart-form__contents thead th,
.woocommerce-cart-form__contents td,
.pokrugu-cart-subtotal-line {
  font-size: 16px;
  letter-spacing: 0.05em;
}
.woocommerce-cart-form__contents thead th {
  text-align: left;
  /* .woocommerce table.shop_table th{font-weight:700} у ядра WC специфичнее
     (2 класса против 1) — перебиваем через !important. */
  font-weight: 400 !important;
  color: #000;
  padding: 9px 0px 9px 0px !important;
  border-bottom: 1px solid #000;
}
/* На референсе иконка удаления — в конце строки, а не в начале (порядок ядра WC).
   Переставляем визуально через flex на строке, не трогая разметку/порядок в DOM. */
/* display:flex на <tr> внутри родных table/tbody (display:table/table-row-group)
   даёт непредсказуемый width — блочный потомок внутри table-контекста не резолвит
   width:100% нормально (это не настоящий containing block). Полностью выводим всю
   цепочку из табличной раскладки в блочную: table/thead/tbody — обычные блоки,
   tr.cart_item — flex-строка со своим width:100%. */
/* Фиксированные ширины колонок Цена/Количество/Сумма/удаление (см. ниже) в сумме
   с мин.шириной "Продукта" не влезают в узкие окна/экраны — тогда tbody-строка
   (flex-wrap:wrap) переносила последнюю колонку (удаление) на вторую строку, а
   шапка (thead, без wrap) — нет, и колонки "Цена"/"Сумма" в шапке и в строках
   товара переставали совпадать по X ("Цена" визуально уезжала в сторону).
   Вместо переноса — горизонтальный скролл всей таблицы, ширины колонок больше
   не пересчитываются под узкий экран, поэтому шапка и строки остаются
   синхронны при любой ширине окна. */
.woocommerce-cart-form {
  overflow-x: auto;
}
.woocommerce-cart-form__contents {
  display: block;
  min-width: 900px;
}
.woocommerce-cart-form__contents thead {
  display: block;
  width: 100%;
}
.woocommerce-cart-form__contents thead tr {
  display: flex;
  width: 100%;
}
.woocommerce-cart-form__contents thead th.product-remove {
  width: 80px;
  min-width: 80px;
}
/* Миниатюра у товара своей подписи в шапке не имеет (текст "Продукт" относится
   к названию) — не резервируем под неё место, иначе "Продукт" сдвинут вправо
   относительно самого левого края (там, где начинается картинка товара). */
.woocommerce-cart-form__contents thead th.product-thumbnail {
  /* Ядро WC: ".woocommerce-cart table.cart .product-thumbnail{min-width:32px}"
     специфичнее (3 класса против 2) — без !important не перебивалось. */
  width: 0 !important;
  min-width: 0 !important;
  padding: 0;
  overflow: hidden;
}
/* Ширины/выравнивание колонок Цена/Количество/Сумма — сняты напрямую с прод-сайта
   (getBoundingClientRect у .md-shopcart__item-price/-count/-amount): Цена и
   Количество — по ~228px по центру, Сумма — ~127px. */
.woocommerce-cart-form__contents thead th.product-quantity,
.woocommerce-cart-form__contents td.product-quantity {
  flex: 0 0 228px;
  display: flex;
  justify-content: center;
}
/* Значения в колонках Цена и Сумма выравниваем не по центру, а к краю: если
   центрировать сами цифры, они "гуляют" по горизонтали в зависимости от
   количества цифр — цифры должны стоять строго друг под другом. Заголовки
   ("Цена"/"Сумма") выравниваем к ТОМУ ЖЕ краю колонки, что и сами цифры
   (а не по центру всей колонки) — иначе слово оказывается над пустым местом
   в широкой 228px-колонке, а не над самими цифрами. */
.woocommerce-cart-form__contents td.product-price {
  flex: 0 0 228px;
  display: flex;
  justify-content: flex-start;
}
.woocommerce-cart-form__contents thead th.product-price {
  flex: 0 0 228px;
  display: flex;
  justify-content: center;
}
.woocommerce-cart-form__contents td.product-subtotal {
  flex: 0 0 127px;
}
.woocommerce-cart-form__contents thead th.product-subtotal {
  flex: 0 0 127px;
  display: flex;
  justify-content: center;
}
/* Значение "Сумма" — вправо, к тому же краю, к которому позже прижаты цифры
   в "Общая стоимость заказа/покупки", строках доставки и "Итоговая сумма к
   оплате" (см. ниже padding-right:80px там — это ширина колонки-корзины
   .product-remove, которая идёт следом за .product-subtotal и в этих строках
   отсутствует, поэтому без компенсации цифры "гуляли" по горизонтали). */
.woocommerce-cart-form__contents tbody tr.cart_item td.product-subtotal {
  display: flex;
  justify-content: flex-end;
}
.woocommerce-cart-form__contents thead th.product-name {
  flex: 1 1 200px;
  min-width: 160px;
}
.woocommerce-cart-form__contents thead th.product-remove {
  order: 6;
  margin-left: auto;
}
.woocommerce-cart-form__contents tbody {
  display: block;
  width: 100%;
}
.woocommerce-cart-form__contents tbody tr.cart_item {
  display: flex;
  width: 100%;
  align-items: flex-start;
}
.woocommerce-cart-form__contents tbody tr.cart_item td.product-remove {
  /* order:6 уже ставит её последней (у остальных ячеек order по умолчанию 0) —
     margin-left:auto тут не нужен и мешал: "съедал" всё свободное место, конкурируя
     с растягиванием .product-name (flex:1), из-за чего фиксированная ширина этой
     колонки переставала совпадать с шапкой (там она honestly 80px) и вся группа
     Цена/Количество/Сумма съезжала относительно заголовков. Ширина — как в шапке. */
  order: 6;
  flex: 0 0 80px;
  display: flex;
  justify-content: flex-end;
}
.woocommerce-cart-form__contents tbody tr.cart_item td.product-name {
  flex: 1 1 200px;
  min-width: 160px;
}
.woocommerce-cart-form__contents tbody tr.cart_item td.product-price,
.woocommerce-cart-form__contents tbody tr.cart_item td.product-quantity,
.woocommerce-cart-form__contents tbody tr.cart_item td.product-subtotal,
.woocommerce-cart-form__contents tbody tr.cart_item td.product-remove {
  align-self: center;
}
.woocommerce-cart-form__contents td.product-name .variation {
  margin: 4px 0 0;
  font-size: 13px;
  color: #767676;
}
.woocommerce-cart-form__contents td.product-name .variation p {
  margin: 0;
}
.woocommerce-cart-form__contents td.product-thumbnail {
  width: 80px;
  min-width: 80px;
  padding: 9px 12px 9px 0px !important;
}
.woocommerce-cart-form__contents tbody tr.cart_item {
  border-bottom: 1px solid #000;
}
/* На оригинале паддинг задан один раз на самой строке (20px сверху, 25px снизу,
   без боковых — значения сняты с .md-shopcart__grid-item на прод-сайте), а не
   одинаковый отступ на каждой ячейке. */
.woocommerce-cart-form__contents tbody tr.cart_item {
  padding: 20px 0 25px;
}
.woocommerce-cart-form__contents td {
  padding: 0 12px;
  vertical-align: middle;
}
/* Ядро WooCommerce вешает border-top на КАЖДУЮ td (.woocommerce table.shop_table td) —
   при обычной табличной раскладке эти рамки визуально сливались в общую линию под
   строкой, а после перевода строки на flex стали видны отдельными короткими
   полосками у каждой ячейки. Убираем, у нас уже свой border-bottom на всю строку. */
.woocommerce-cart-form__contents td {
  border-top: none !important;
}
.woocommerce-cart-form__contents td.product-thumbnail img {
  /* width/height:100% (не фикс. 80x80) — картинка заполняет то, что осталось от
     ячейки после padding у td.product-thumbnail, иначе паддинг зрительно не виден
     (фиксированный размер просто перекрывал его). */
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
.woocommerce-cart-form__contents td.product-name a {
  color: #000;
  text-decoration: none;
}
.woocommerce-cart-form__contents td.product-name a:hover {
  color: var(--color-accent);
}
/* Крестик-ссылка удаления товара — прячем текст "×", вместо него иконка-корзина
   (тот же SVG, что уже используется в попапе мини-корзины в шапке). */
.woocommerce-cart-form__contents td.product-remove a.remove,
.woocommerce-cart-form__contents td.product-remove a.remove:hover {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  /* Ядро WooCommerce красит .remove в красный (и ещё темнее красный на hover) —
     перебиваем: иконка всегда чёрная, без смены цвета при наведении. */
  color: #000 !important;
  font-size: 0;
  text-decoration: none;
  background: none !important;
  border-radius: 0 !important;
}
.woocommerce-cart-form__contents td.product-remove a.remove::before {
  content: "";
  width: 16px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 14 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 4h12M5 4V2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2M11.5 4l-.6 9.5a1.5 1.5 0 0 1-1.5 1.4H4.6a1.5 1.5 0 0 1-1.5-1.4L2.5 4'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 14 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 4h12M5 4V2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2M11.5 4l-.6 9.5a1.5 1.5 0 0 1-1.5 1.4H4.6a1.5 1.5 0 0 1-1.5-1.4L2.5 4'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* Степпер количества — тот же вид, что на странице товара: рамка, -/+ по краям. */
.woocommerce-cart-form__contents .quantity {
  display: inline-flex;
  align-items: center;
  border: 1px solid #000;
  border-radius: 10px;
  overflow: hidden;
  height: 44px;
  position: relative;
}
.woocommerce-cart-form__contents .quantity .qty {
  width: 44px;
  height: 100%;
  border: none;
  text-align: center;
  font-size: 15px;
  padding: 0;
  -moz-appearance: textfield;
  appearance: textfield;
}
.woocommerce-cart-form__contents .quantity .qty::-webkit-outer-spin-button,
.woocommerce-cart-form__contents .quantity .qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.woocommerce-cart-form__contents .quantity .pk-qty-btn {
  width: 32px;
  height: 100%;
  border: none;
  background: none;
  font-size: 16px;
  cursor: pointer;
}
/* Не display:none — на скрытых так элементах браузер не всегда выполняет "родное"
   действие по умолчанию (реальную отправку формы) при программном клике из JS,
   а нам нужно кликать по кнопке "Обновить корзину" из main.js при +/- в степпере. */
.woocommerce-cart-form__contents td.actions {
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* В этой же <td class="actions"> ядро WC (templates/cart/cart.php) рядом с кнопкой
   "Обновить корзину" рендерит СВОЁ отдельное поле промокода (#coupon_code) — оно
   нам не нужно (промокод теперь вводится в блоке "Выберите способ оплаты",
   woocommerce/checkout/payment.php) и остаётся полноценным полем ввода внутри
   1×1px-обёртки выше, а не декоративным текстом — визуально виден его обрезанный
   край. В отличие от кнопки "Обновить корзину" его никто не кликает из JS, поэтому
   просто убираем полностью, а не прячем accessibility-хаком.  */
.woocommerce-cart-form__contents td.actions .coupon {
  display: none !important;
}
.pokrugu-cart-subtotal-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* padding: 20px 12px 0; */
  /* 92px = ширина колонки .product-remove (80px) + правый padding ячейки
     .product-subtotal (12px) в таблице выше (тут ни того, ни другого нет) —
     без этого запаса сумма съезжала правее итоговой цифры в колонке "Сумма"
     таблицы товаров. */
  padding-right: 92px;
  font-size: 16px;
}
.pokrugu-cart-subtotal-line strong {
  font-weight: 400;
  white-space: nowrap;
}
/* На мобильном 92px правого паддинга (запас под колонку "Сумма"/"Удаление"
   десктопной таблицы — там на мобильном её больше нет, см. @media выше) не
   нужен и просто отжимал сумму так, что число переносилось на новую строку
   ("39" / "900 руб."). */
@media (max-width: 900px) {
  .pokrugu-cart-subtotal-line {
    padding-right: 0;
    gap: 12px;
  }
}

/* Мобильная раскладка корзины (< 640px) — карточки вместо горизонтально
   скроллящейся таблицы: фото слева, название/цена/степпер справа, как на
   оригинальном сайте (po-krugu.ru). shop_table_responsive у <table> намеренно
   не подключаем (см. комментарий в cart.php) — своя раскладка ниже. */
@media (max-width: 900px) {
  .woocommerce-cart-form {
    overflow-x: visible;
  }
  .woocommerce-cart-form__contents {
    min-width: 0;
  }
  .woocommerce-cart-form__contents thead {
    display: none;
  }
  /* Ниже селекторы дублируют полную цепочку ".woocommerce-cart-form__contents
     tbody tr.cart_item td.X" (не просто "td.X") — иначе проигрывают по
     специфичности десктопным правилам выше (у тех тоже 3 класса), несмотря на
     то что эти идут позже в файле и внутри медиа-запроса: специфичность важнее
     порядка/медиа. Отсюда были "разъехавшиеся" колонки на мобильном.

     Раскладка — grid (не flex+order+wrap): нужны две НЕЗАВИСИМЫЕ строки справа
     от фото (имя+корзина сверху, степпер+цена снизу), а flex с wrap переносит
     на новую строку только когда элементы физически не помещаются в текущую —
     из-за этого цена/степпер утекали в ту же строку, что и имя, наезжая на
     текст (см. скриншот бага). Grid с явными row/column даёт то же
     расположение колонок, что и на эталоне (po-krugu.ru): фото | имя···корзина
     / степпер···цена. */
  .woocommerce-cart-form__contents tbody tr.cart_item {
    display: grid !important;
    grid-template-columns: 72px 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 10px;
    align-items: center;
    flex-wrap: unset;
    padding: 16px 0;
  }
  .woocommerce-cart-form__contents tbody tr.cart_item td {
    padding: 0;
  }
  .woocommerce-cart-form__contents tbody tr.cart_item td.product-thumbnail {
    /* !important здесь обязателен: ядро WooCommerce грузит woocommerce-smallscreen.css
       отдельным <link media="...max-width:768px">, и там есть безусловное
       ".woocommerce table.cart .product-thumbnail{display:none}" — наша таблица
       сохраняет класс "cart", так что это правило иначе перебивает display и
       фото пропадает на мобильном (несмотря на явную ширину/высоту ниже). */
    display: block !important;
    grid-column: 1;
    grid-row: 1 / 3;
    width: 72px;
    height: 72px;
    align-self: start;
  }
  .woocommerce-cart-form__contents tbody tr.cart_item td.product-thumbnail img {
    display: block;
    width: 72px;
    height: 72px;
  }
  .woocommerce-cart-form__contents tbody tr.cart_item td.product-name {
    display: block;
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }
  .woocommerce-cart-form__contents tbody tr.cart_item td.product-remove {
    display: flex !important;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }
  .woocommerce-cart-form__contents tbody tr.cart_item td.product-price {
    display: block;
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    white-space: nowrap;
  }
  .woocommerce-cart-form__contents tbody tr.cart_item td.product-quantity {
    display: block;
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
  }
  .woocommerce-cart-form__contents tbody tr.cart_item td.product-subtotal {
    display: none !important;
  }
}
/* Верхний блок уведомлений WooCommerce (.woocommerce-notices-wrapper) — при каждом
   AJAX-пересчёте корзины (клик по +/- в степпере) сюда добавляются "Корзина
   обновлена." и ещё один, отдельный от чекаутного, блок "Есть купон?" (WC сам
   вставляет такую info-подсказку при обновлении корзины) — из-за этого второго
   визуально казалось, что купон-блок "прыгает" наверх при каждом клике по степперу.
   На оригинале таких уведомлений нет вовсе.
   .woocommerce-error (сводный список "это поле обязательно" при неудачной
   отправке) тоже скрываем — про конкретное поле уже сигнализирует красная рамка
   у самого инпута (ядро WC вешает класс .woocommerce-invalid на .form-row,
   см. woocommerce.css: .woocommerce-invalid input{border-color:red}) — подсказки
   должны быть только рядом с полями, а не отдельным блоком сверху. */
.woocommerce-cart .woocommerce-notices-wrapper > .woocommerce-message,
.woocommerce-checkout .woocommerce-notices-wrapper > .woocommerce-message,
.woocommerce-cart .woocommerce-notices-wrapper > .woocommerce-info,
.woocommerce-checkout .woocommerce-notices-wrapper > .woocommerce-info,
.woocommerce-cart .woocommerce-notices-wrapper > .woocommerce-error,
.woocommerce-checkout .woocommerce-notices-wrapper > .woocommerce-error,
/* При неудачной отправке чекаута ядро WC (assets/js/frontend/checkout.js,
   submit_error()) вставляет сводку ошибок НЕ в .woocommerce-notices-wrapper
   выше, а отдельным блоком .woocommerce-NoticeGroup-checkout прямо в начало
   <form class="checkout"> — тот же список "это поле обязательно", прятать
   нужно и его, иначе он всё равно всплывает после нажатия "Оформить покупку". */
form.checkout > .woocommerce-NoticeGroup-checkout,
/* Третье (!) место, куда WC вставляет ошибки — на AJAX-пересчёте update_order_review
   (срабатывает при вводе города СДЭК, смене способа доставки и т.п., ДО нажатия
   "Оформить покупку"): checkout.js prepend'ит .woocommerce-NoticeGroup-updateOrderReview
   в form.checkout с теми же "Выставление счёта Имя — обязательное поле." (стандартный
   WC-перевод label'а поля "Billing First Name" — не наш текст, из ядра). */
form.checkout > .woocommerce-NoticeGroup-updateOrderReview,
/* Широкое правило-подстраховка поверх трёх точечных выше: у ядра WC/сторонних
   плагинов (metform, cdekdelivery) могут быть и другие места, куда текстом
   печатается ".woocommerce-error" — вместо того чтобы гоняться за каждым новым,
   глушим сам класс списка ошибок ЛЮБЫМ местом внутри корзины/чекаута целиком.
   Это не трогает подсветку невалидных полей (.woocommerce-invalid input{border-
   color:red} — другой, самостоятельный класс/правило) — она остаётся единственной
   видимой подсказкой "это поле не заполнено", как и должно быть по макету. */
.woocommerce-cart .woocommerce-error,
.woocommerce-checkout .woocommerce-error {
  display: none !important;
}
/* Исключение из правила выше: ответ на попытку применить промокод (например
   "такого купона не существует") вставляется JS'ом (main.js, apply_coupon)
   с классом pokrugu-coupon-notice именно для того, чтобы не попадать под
   общее глушение — здесь этот текст единственная подсказка пользователю,
   в отличие от сводки "поле не заполнено", у которой есть красная рамка. */
.woocommerce-cart .woocommerce-error.pokrugu-coupon-notice,
.woocommerce-checkout .woocommerce-error.pokrugu-coupon-notice {
  display: block !important;
  background: #fff !important;
  transition: opacity 0.4s ease;
}
.pokrugu-coupon-notice.pokrugu-coupon-notice--fade {
  opacity: 0;
}
/* Четвёртое (!) место — и совсем другой механизм: не .woocommerce-error, а
   .checkout-inline-error-message. Новая инлайн-валидация ядра WC (checkout.js,
   show_inline_errors()) добавляет <p class="checkout-inline-error-message"> прямо
   ВНУТРЬ .form-row каждого невалидного поля (после самого input) — отдельно от
   всех трёх блоков-сводок выше, поэтому предыдущее правило на .woocommerce-error
   его не ловило. Подсветка поля (.woocommerce-invalid input{border-color:red}) —
   от того же события, но других правил ядра, её не трогаем. */
.woocommerce-cart .checkout-inline-error-message,
.woocommerce-checkout .checkout-inline-error-message {
  display: none !important;
}

/* Блок "Выберите способ доставки" — список методов + подставляемые под него поля
   адреса (main.js переносит их сюда, меняет набор видимых по выбранному методу). */
#shipping_method {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
}
#shipping_method li {
  display: flex;
  align-items: center;
  gap: 10px;
  /* padding-right — тот же запас 80px под колонку .product-remove, что и у
     .pokrugu-cart-subtotal-line, чтобы цена способа доставки стояла под
     "Суммой" в таблице товаров, а не под колонкой удаления. */
  padding: 10px 92px 10px 12px;
  border-radius: 6px;
}
#shipping_method li label {
  flex: 1;
  display: flex !important;
}
#shipping_method li.is-selected {
  background: #f2f2f2;
}
/* Свой кружок-индикатор вместо нативного :checked — строка "СДЭК" физически
   никогда не бывает checked (реальный выбор идёт на скрытых радио
   official_cdek:138/139 с тем же name), но должна выглядеть выбранной, когда
   выбран любой из них (see main.js: класс is-selected навешивается вручную). */
#shipping_method input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1px solid #000;
  border-radius: 50%;
  flex: 0 0 auto;
  cursor: pointer;
}
#shipping_method li.is-selected input[type="radio"] {
  border-width: 5px;
}
#shipping_method li label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 400;
  font-size: 16px;
}
#shipping_method .woocommerce-Price-amount {
  margin-left: auto;
  padding-left: 16px;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 400 !important;
}
/* Название способа доставки — теперь настоящий <span> (см. functions.php,
   фильтр woocommerce_cart_shipping_method_full_label), а не голый текст в
   label — можно нормально задать flex-item с min-width:0. */
#shipping_method .pokrugu-shipping-name {
  flex: 1 1 0;
  min-width: 0;
}
/* На мобильном 92px правого паддинга (запас под колонку "Сумма"/"Удаление" из
   десктопной таблицы товаров, которой на мобильном больше нет) сжимал текст
   способа доставки в узкую "лесенку" и выталкивал цену за край экрана
   (white-space:nowrap на .woocommerce-Price-amount уезжал за viewport).
   На мобильном цена — не в одну строку, а обычный текст в своей колонке
   фиксированной ширины справа (как "Стоимость зависит от города доставки"
   на эталоне po-krugu.ru). */
@media (max-width: 900px) {
  #shipping_method li {
    align-items: flex-start;
    padding: 10px 12px;
    gap: 12px;
  }
  #shipping_method input[type="radio"] {
    margin-top: 2px;
  }
  #shipping_method li label {
    align-items: flex-start;
    gap: 12px;
  }
  /* Название — теперь настоящий <span class="pokrugu-shipping-name"> (см.
     functions.php), поэтому min-width:0 (базовое правило выше) реально
     работает: элемент нормально сжимается до доступной ширины и переносится
     по словам (overflow-wrap:break-word — только как подстраховка на случай
     совсем длинных неразрывных слов вроде "Шариkоподшипниковская" в адресе
     самовывоза; словам покороче словоразбиение не грозит, т.к. есть
     min-width:0 + flex-grow вместо анонимного flex-item, который раньше либо
     не сжимался вовсе, либо (с overflow-wrap:anywhere) сжимался ДО буквы). */
  #shipping_method .pokrugu-shipping-name {
    overflow-wrap: break-word;
  }
  #shipping_method .woocommerce-Price-amount,
  #shipping_method .pokrugu-shipping-note {
    /* Название — слева, цена — своей колонкой справа на той же строке (как
       было), просто с переносом по словам внутри своей колонки — это и
       "Стоимость зависит от города доставки" решает без спец-случаев. */
    flex: 0 0 auto;
    min-width: 90px;
    max-width: 40%;
    overflow-wrap: normal;
    margin-left: auto;
    padding-left: 12px;
    white-space: normal;
    text-align: right;
  }
}
/* < 420px — колонка под название совсем узкая (после вычета радио, gap-ов и
   колонки цены), а неразрывные слова вроде "Шарикоподшипниковская" (23
   символа) физически шире неё при обычном break-word (он рвёт слово по
   слогам/спецсимволам, но не гарантирует разрыв в любом месте). anywhere —
   безопасно именно теперь, когда название реальный <span> с min-width:0 (не
   анонимный flex-item из голого текста, на котором anywhere раньше рвал
   каждую букву на отдельную строку). */
@media (max-width: 420px) {
  #shipping_method .pokrugu-shipping-name {
    overflow-wrap: anywhere;
  }
}
/* Поля адреса (Улица/Дом/Город/Индекс/город СДЭК и т.д.) в HTML присутствуют ВСЕ
   сразу — какие из них показывать, зависит от выбранного способа доставки, и это
   решает main.js (applyVisibility(): $f.toggle(show)) уже ПОСЛЕ загрузки страницы.
   Без этого правила на каждой перезагрузке был короткий "вспышка" — все поля
   адреса разом видны нетронутыми, пока JS ещё не отработал, и только потом лишние
   резко прячутся. Прячем их по умолчанию через CSS (сразу, без задержки на JS) —
   toggle(show) в main.js всё равно выставляет инлайновый display, который
   перебивает это правило и показывает нужные поля. */
.pokrugu-shipping-field {
  display: none;
}
.pokrugu-shipping-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 490px;
  margin-bottom: 16px;
}
.pokrugu-shipping-fields .form-row {
  width: 100%;
  margin: 0 !important;
}
.pokrugu-shipping-fields .form-row.pokrugu-radio-field {
  flex-basis: 100%;
  display: flex;
  gap: 24px;
}
.pokrugu-shipping-fields .form-row.pokrugu-radio-field .woocommerce-input-wrapper {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  row-gap: 12px;
  column-gap: 8px;
  width: 100%;
}
.pokrugu-shipping-fields label:not(.pokrugu-radio-label):not(.radio) {
  display: none;
}
.pokrugu-shipping-fields input[type="radio"] {
  margin: 0 !important;
}
.pokrugu-shipping-fields .radio {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  margin: 0 !important;
}
.pokrugu-shipping-fields .form-row.woocommerce-validated input.input-text {
  border-color: #000 !important;
}
.pokrugu-shipping-fields input[type="text"],
.pokrugu-shipping-fields input[type="tel"],
.pokrugu-shipping-fields input[type="email"] {
  width: 100% !important;
  height: auto !important;
  border: 1px solid #000 !important;
  border-radius: 10px !important;
  padding: 16px 20px !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  letter-spacing: 0.05em !important;
  color: #000 !important;
}
.pokrugu-shipping-fields input[type="text"]::placeholder,
.pokrugu-shipping-fields input[type="tel"]::placeholder,
.pokrugu-shipping-fields input[type="email"]::placeholder {
  color: #666 !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  letter-spacing: 0.05em !important;
}
/* Настоящие тарифы official_cdek (дверь-склад/дверь-дверь) физически остаются
   в списке (иначе плагин не сможет отрисовать после них свою кнопку "Выберите
   пункт" — она вставляется хуком woocommerce_after_shipping_rate ВНУТРИ того же
   <li>, сразу за <label>). Прячем только сам радио+подпись с ценой — строка
   "СДЭК (2-7 дней...)" выше показывает цену и служит единственной видимой
   точкой выбора, а под ней наш собственный переключатель "до пункта/курьером"
   (main.js) управляет тем, какой из этих скрытых радио реально выбран. */
#shipping_method li.pokrugu-cdek-subrate {
  padding: 0;
  margin: 0;
}
#shipping_method li.pokrugu-cdek-subrate > input,
#shipping_method li.pokrugu-cdek-subrate > label {
  display: none !important;
}
#shipping_method li.pokrugu-cdek-subrate .open-pvz-btn {
  margin: 8px 0 12px 32px;
}
#shipping_method li.pokrugu-cdek-subrate .open-pvz-btn a {
  color: #000;
  text-decoration: underline;
  cursor: pointer;
}
.pokrugu-cdek-live-price {
  margin-left: auto;
  padding-left: 16px;
  white-space: nowrap;
}
.pokrugu-cdek-mode-toggle {
  margin: 8px 0 0;
}
.pokrugu-cdek-mode-toggle input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1px solid #000;
  border-radius: 50%;
  flex: 0 0 auto;
  cursor: pointer;
}
.pokrugu-cdek-mode-toggle input[type="radio"]:checked {
  border-width: 5px;
}
.pokrugu-cdek-mode-toggle label {
  display: flex;
  align-items: center;
  gap: 10px;
  /* padding: 6px 0; */
  cursor: pointer;
  font-family: var(--font-main);
  font-size: 18px;
  line-height: 1.7;
  color: var(--color-text);
  font-weight: 400;
  padding: 10px 12px;
}
.pokrugu-cdek-courier-city {
  max-width: 490px;
  margin: 8px 0 0 !important;
}
.pokrugu-cdek-courier-city input[type="text"] {
  width: 100%;
  height: 52px;
  border: 1px solid #000;
  border-radius: 10px;
  padding: 0 20px;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 16px;
}
.pokrugu-cdek-pvz-info {
  margin: 8px 0 0;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 16px;
}
.pokrugu-cdek-pvz-chosen {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 4px;
}
/* Иконка "булавка" у выбранного ПВЗ — раньше собиралась из mask (кружок-дырка)
   ПЛЮС clip-path (контур капли) одновременно: комбинация двух конкурирующих
   вырезающих свойств на одном элементе не гарантирована браузером — вместо
   контура капли с дыркой рисовался просто сплошной "недо-кружок". Contour +
   дырка теперь заданы одной SVG-маской (fill-rule:evenodd), как на эталоне. */
.pokrugu-cdek-pvz-chosen__pin {
  flex: 0 0 auto;
  width: 14px;
  height: 18px;
  margin-top: 2px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18'%3E%3Cpath fill-rule='evenodd' d='M7 0C3.13 0 0 3.13 0 7c0 5.25 7 11 7 11s7-5.75 7-11c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 7 4.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18'%3E%3Cpath fill-rule='evenodd' d='M7 0C3.13 0 0 3.13 0 7c0 5.25 7 11 7 11s7-5.75 7-11c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 7 4.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.pokrugu-cdek-pvz-info .open-pvz-btn a,
.pokrugu-cdek-pvz-edit {
  color: #000;
  text-decoration: underline;
  cursor: pointer;
}
/* Свой виджет "Пункты выдачи заказа" (список + карта + фильтры) — main.js. */
.pokrugu-pvz-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.pokrugu-pvz-modal[hidden] {
  display: none;
}
/* Пока открыт попап ПВЗ — страница за ним не должна скроллиться. Без этого на
   мобильном (см. main.js: класс вешается/снимается в openModal/closeModal)
   страница за фиксированной модалкой оставалась прокручиваемой — из-за
   классического расхождения 100vh с реальной видимой высотой (адресная
   строка браузера) верх модалки (заголовок/фильтры) можно было проскроллить
   выше экрана, а видна оставалась только нижняя часть (адрес+кнопка). */
html.pokrugu-pvz-modal-open,
body.pokrugu-pvz-modal-open {
  overflow: hidden !important;
  height: 100%;
}
.pokrugu-pvz-modal__panel {
  background: #fff;
  width: 100%;
  max-width: 1200px;
  height: min(760px, 90vh);
  display: flex;
  border-radius: 10px;
  overflow: hidden;
}
.pokrugu-pvz-modal__list {
  width: 380px;
  flex: 0 0 380px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.pokrugu-pvz-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  border: none;
  background: none;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: #000;
}
.pokrugu-pvz-modal__title {
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-accent-hover, #6c63ff);
  margin: 0 32px 16px 0;
  text-transform: uppercase;
}
.pokrugu-pvz-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.pokrugu-pvz-filter {
  border: 1px solid #000;
  border-radius: 20px;
  background: #fff;
  padding: 6px 14px;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 13px;
  cursor: pointer;
}
.pokrugu-pvz-filter.is-active {
  background: #000;
  color: #fff;
}
.pokrugu-pvz-status {
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 14px;
  color: #666;
}
.pokrugu-pvz-items {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1 1 auto;
}
.pokrugu-pvz-item {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #ebebeb;
  cursor: pointer;
}
.pokrugu-pvz-item__radio {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  border-radius: 50%;
  border: 1px solid #000;
}
.pokrugu-pvz-item.is-selected .pokrugu-pvz-item__radio {
  border-width: 5px;
}
.pokrugu-pvz-item__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 11px;
}
.pokrugu-pvz-item__body strong {
  font-weight: 400;
  font-size: 16px !important;
}
.pokrugu-pvz-item__body span {
  color: #666;
}
.pokrugu-pvz-confirm {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #ebebeb;
}
.pokrugu-pvz-confirm[hidden] {
  display: none;
}
.pokrugu-pvz-confirm__address {
  /* Не flex: адрес — обычный текстовый узел (задаётся через .text() в main.js),
     без своего тега. Во flex-строке он становится анонимным flex-элементом —
     на части экранов (узкий контейнер модалки на мобильном) такой элемент не
     переносился по словам и обрезался по границе .pokrugu-pvz-modal__list
     (overflow-y:auto). Точка-маркер — через padding-left + ::before с
     position:absolute, текст — обычный блок, переносится как любой абзац. */
  position: relative;
  padding-left: 20px;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 14px;
  margin-bottom: 12px;
  overflow-wrap: anywhere;
}
.pokrugu-pvz-confirm__address::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 4px solid #000;
}
.pokrugu-pvz-confirm__btn {
  width: 100%;
  border: none;
  background: #000;
  color: #fff;
  padding: 16px 20px;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 19px;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  border-radius: 10px;
}
.pokrugu-pvz-confirm__btn:hover {
  background: var(--color-accent, #ffc014);
  color: #000;
}
.pokrugu-pvz-modal__map {
  flex: 1 1 auto;
  height: 100%;
  /* Внутренний canvas Яндекс.Карт пересчитывается через JS (main.js,
     map.container.fitToViewport()) не мгновенно синхронно с изменением
     layout (например, когда снизу появляется блок "Адрес+Подтвердить" и
     карта сверху сжимается) — на короткий момент между кадрами он мог быть
     физически больше этого контейнера и наезжать на список под картой.
     overflow:hidden — подстраховка, обрезает этот момент несостыковки. */
  overflow: hidden;
}
@media (max-width: 782px) {
  /* Мобильный попап ПВЗ — как на оригинале (po-krugu.ru): карта на всю ширину
     и бОльшую часть высоты, точки выбираются кликом по пину, а не из списка;
     список .pokrugu-pvz-items (десктопная левая панель) целиком скрыт. Ниже
     карты — заголовок/фильтры и (после выбора точки на карте) адрес+кнопка
     подтверждения. column-reverse разворачивает порядок ".list" → ".map" из
     DOM (см. main.js, там сперва рендерится list, потом map) на "map" сверху,
     "list" снизу — без переписывания разметки/JS. */
  .pokrugu-pvz-modal {
    padding: 0;
  }
  .pokrugu-pvz-modal__panel {
    flex-direction: column-reverse;
    height: 100vh;
    /* 100dvh — реальная видимая высота (без учёта скрываемой адресной строки
       мобильного браузера), где поддерживается; 100vh выше — фолбэк. */
    height: 100dvh;
    border-radius: 0;
  }
  .pokrugu-pvz-modal__list {
    width: 100%;
    box-sizing: border-box;
    flex: 0 0 auto;
    max-height: 45vh;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .pokrugu-pvz-status,
  .pokrugu-pvz-items {
    display: none;
  }
  /* Ряд фильтров ("Наложенный платёж"/"Терминал оплаты"/"Примерочная") на
     десктопе не переносится по расчёту (места хватает в 380px-колонке), а на
     мобильном при недостатке ширины кнопки должны переноситься на новую
     строку — без этого последняя кнопка обрезалась по краю экрана. */
  .pokrugu-pvz-filters {
    flex-wrap: wrap;
    max-width: 100%;
  }
  .pokrugu-pvz-modal__map {
    flex: 1 1 auto;
    min-height: 0;
  }
}
.pokrugu-hidden-field-row {
  display: none !important;
}
/* Как и у .woocommerce-Price-amount в этом же label (см. #shipping_method
   .woocommerce-Price-amount) — прижимаем к правому краю, туда, где у
   остальных способов доставки стоит цена, а не оставляем сразу после текста
   названия способа. */
.pokrugu-shipping-note {
  margin-left: auto;
  padding-left: 16px;
  color: #000000;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 16px;
  white-space: nowrap;
}
#billing_cdek_city_field {
  position: relative;
}
.pokrugu-cdek-suggest {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #000;
  border-top: none;
  border-radius: 0 0 10px 10px;
  background: #fff;
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 5;
  max-height: 240px;
  overflow-y: auto;
}
.pokrugu-cdek-suggest li {
  padding: 10px 20px;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 15px;
  cursor: pointer;
}
.pokrugu-cdek-suggest li:hover {
  background: #f2f2f2;
}
.pokrugu-shipping-fields .optional {
  display: none;
}

/* Таблица "Ваш заказ" из чекаута (review-order.php) дублирует нашу собственную,
   уже оформленную таблицу товаров сверху страницы — но полностью убрать её нельзя:
   именно внутри неё физически живёт #shipping_method (того требует логика
   WooCommerce). Прячем всё, кроме самой строки со способами доставки, и убираем
   у неё табличное оформление (ячейку-подпись "Доставка", рамки, паддинги ячеек),
   чтобы визуально остался только чистый список способов + наши поля под ним. */
.woocommerce-checkout-review-order-table thead,
.woocommerce-checkout-review-order-table tbody,
.woocommerce-checkout-review-order-table tfoot tr.cart-subtotal,
.woocommerce-checkout-review-order-table tfoot tr.order-total {
  display: none !important;
}
.woocommerce-checkout-review-order-table,
.woocommerce-checkout-review-order-table tfoot,
.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals,
.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td {
  display: block;
  width: 100%;
  border: none !important;
  border-radius: 0 !important;
  padding: 0;
  margin: 0;
}
.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals th {
  display: none;
}
#order_review_heading {
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: 400;
  text-transform: none;
  color: rgba(108, 108, 255, 1);
  margin: 30px 0 16px;
}

/* Ядро WooCommerce (woocommerce.css) навешивает на #payment светло-фиолетовый фон
   и скругление — на оригинале блок оплаты visually ничем не выделен, убираем. */
.woocommerce-checkout #payment {
  background: none;
  border-radius: 0;
}
/* У ul.payment_methods от ядра свои паддинг/разделитель — тоже убираем, у нас
   собственный вид списка (см. правила ниже). */
.woocommerce-checkout #payment ul.payment_methods {
  padding: 0;
  border-bottom: none;
}

/* Блок "Выберите способ оплаты" — список гейтвеев ядра (ul.payment_methods) под
   тем же заголовком, что и "Выберите способ доставки" (#order_review_heading),
   и та же радиокнопка-индикатор, что у #shipping_method. */
.pokrugu-payment-heading {
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: 400;
  text-transform: none;
  color: rgba(108, 108, 255, 1);
  margin: 50px 0 16px;
}
ul.payment_methods.methods {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  border: none;
  background: none;
}
ul.payment_methods.methods li.wc_payment_method {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
}
ul.payment_methods.methods li.wc_payment_method label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 400;
  flex: 1;
}
ul.payment_methods.methods input[type="radio"] {
  /* checkout.js ядра WC прячет радио инлайн-стилем display:none, когда способ
     оплаты всего один (типичный UX-паттерн "нечего выбирать") — на оригинале
     кружок всё равно должен быть виден, поэтому !important. */
  display: inline-block !important;
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1px solid #000;
  border-radius: 50%;
  flex: 0 0 auto;
  cursor: pointer;
}
ul.payment_methods.methods input[type="radio"]:checked {
  border-width: 5px;
}
/* Описание способа оплаты (payment_box, текст берётся из настроек плагина
   Robokassa — "Оплатить через Robokassa") на оригинале не показывается вообще,
   виден только сам способ оплаты — полностью убираем этот блок. */
.woocommerce-checkout #payment ul.payment_methods.methods div.payment_box {
  display: none !important;
}

/* Строка "У вас есть промокод? ... Итоговая сумма к оплате" под способами оплаты —
   форма купона (checkout/form-coupon.php) перенесена сюда из functions.php. */
.pokrugu-payment-coupon-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 92px 16px 0;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  font-family: var(--font-main);
}
@media (max-width: 900px) {
  /* 92px — запас под колонку "Сумма"/"Удаление" десктопной таблицы товаров,
     которой на мобильном больше нет (см. другие такие же правила выше). */
  .pokrugu-payment-coupon-row {
    padding-right: 0;
  }
}
.pokrugu-payment-coupon-row .woocommerce-form-coupon-toggle {
  margin: 0;
  flex: 1 1 auto;
  order: 1;
}
/* Строка применённого купона (<tr class="cart-discount">, ядро WC) — перенесена
   сюда из служебной таблицы "Ваш заказ" через main.js (relocateCouponRow).
   order:0 — перед формой промокода/итогом, на всю ширину своей строкой. */
.pokrugu-payment-coupon-row tr.cart-discount {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  order: 0;
  flex: 1 1 100%;
  font-size: 16px;
}
.pokrugu-payment-coupon-row tr.cart-discount th {
  font-weight: 400;
}
.pokrugu-payment-coupon-row tr.cart-discount td {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.pokrugu-payment-coupon-row tr.cart-discount .woocommerce-remove-coupon {
  color: #999;
  text-decoration: underline;
}
.pokrugu-payment-coupon-row .woocommerce-form-coupon-toggle .woocommerce-message,
.pokrugu-payment-coupon-row .woocommerce-form-coupon-toggle .woocommerce-info {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 15px;
}
/* У .woocommerce-info ядро WC рисует иконку через ::before шрифтом-иконкой
   "WooCommerce" — этот шрифт нигде в теме не подключается, поэтому вместо
   иконки браузер показывает "квадратик" (глиф-заглушку недостающего шрифта).
   Иконка тут не нужна вообще — убираем псевдоэлемент целиком. */
.pokrugu-payment-coupon-row .woocommerce-form-coupon-toggle .woocommerce-info::before {
  display: none;
}
.pokrugu-payment-coupon-row .woocommerce-form-coupon-toggle .showcoupon {
  color: #000;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
}
.pokrugu-payment-coupon-row .checkout_coupon.woocommerce-form-coupon {
  order: 3;
  flex-basis: 100%;
  /* Без !important: изначально форма скрыта инлайновым style="display:none"
     (так и задумано ядром WC — сворачиваемый блок за ссылкой "У вас есть
     промокод?", раскрывается по клику через showcoupon/slideToggle,
     см. functions.php: woocommerce_checkout_coupon_message). Когда ядро
     снимает инлайн display:none по клику, в силу вступает именно это
     правило — раскладка input+кнопка в ряд. */
  display: flex;
  gap: 12px;
  margin: 8px 0 0;
  padding: 0;
  border: none;
}
.pokrugu-payment-coupon-row .checkout_coupon .form-row {
  margin: 0 !important;
}
/* Поле промокода и кнопка "Применить" — тот же вид, что у остальных инпутов
   на чекауте (поля адреса под способами доставки, Имя/Фамилия/Телефон/Email). */
.pokrugu-payment-coupon-row .checkout_coupon input#coupon_code {
  width: 100%;
  height: auto;
  border: 1px solid #000;
  border-radius: 10px;
  padding: 16px 20px;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: #000;
}
.pokrugu-payment-coupon-row .checkout_coupon input#coupon_code::placeholder {
  color: #666;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.05em;
}
.pokrugu-payment-coupon-row .checkout_coupon button[name="apply_coupon"] {
  flex: 0 0 auto;
  height: auto;
  padding: 16px 24px;
  /* border: 1px solid #000; */
  border-radius: 10px;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 16px;
  letter-spacing: 0.05em;
  cursor: pointer;
  background-color: white;
}
.pokrugu-payment-coupon-row .checkout_coupon button[name="apply_coupon"]:hover {
  background: var(--color-accent, #ffc014);
  border-color: var(--color-accent, #ffc014);
  color: #000;
}
.pokrugu-payment-total {
  order: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 18px;
}
.pokrugu-payment-total strong {
  font-weight: 400;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .pokrugu-payment-total {
    flex-wrap: wrap;
  }
}

/* Блок "Важная информация" + 2 чекбокса согласия + кнопка "Оформить покупку" —
   woocommerce/checkout/form-shipping.php, под полем "Комментарий". */
.pokrugu-important-info {
  font-family: var(--font-main);
  /* max-width: 560px; */
  margin-top: 24px;
}
@media (max-width: 960px) {
  /* На мобильном блок должен идти во всю ширину экрана, а не в рамках
     20px-паддинга .woocommerce-cart .page-content (см. выше) — "вылезаем"
     отрицательными полями до края вьюпорта и возвращаем те же 20px уже
     собственным паддингом, чтобы текст внутри не прилипал к краю экрана. */
  .pokrugu-important-info {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }
}
.pokrugu-important-info h4 {
  display: inline;
  background: #9999ff;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.pokrugu-important-info p {
  /* margin: 0 0 12px; */
  font-size: 18px;
  line-height: 1.7;
}
.pokrugu-important-info .pokrugu-highlight {
  background-color: #ffd700;
}
.pokrugu-important-info .pokrugu-info-link {
  color: inherit;
  text-decoration: underline;
}
.pokrugu-agree-row {
  margin: 16px 0 !important;
}
.pokrugu-agree-row label {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1.4;
}
.pokrugu-agree-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  border: 1px solid #000;
  border-radius: 50%;
  flex: 0 0 auto;
  cursor: pointer;
}
.pokrugu-agree-row input[type="checkbox"]:checked {
  border-width: 5px;
}
/* Круг подсвечивается красным, когда ядро WC пометило строку невалидной
   (класс .validate-required на .pokrugu-agree-row в шаблоне включает для этого
   чекбокса стандартную клиентскую проверку WC, см. checkout.js: validate_field) —
   то же самое поведение, что и у текстовых полей. */
.pokrugu-agree-row.woocommerce-invalid input[type="checkbox"] {
  border-color: #e2401c;
}
.pokrugu-agree-block #place_order {
  margin-top: 16px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 18px 28px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
}
.pokrugu-agree-block #place_order:hover {
  background: var(--color-accent, #ffc014);
  color: #000;
}

/* Поля Имя/Фамилия/Телефон/Email/Комментарий (правая колонка чекаута,
   form-billing.php) — тот же вид инпутов, что у полей адреса под способами
   доставки (.pokrugu-shipping-fields, напр. "Индекс"/"Город" у Почты России). */
.col2-set .col-2 input[type="text"],
.col2-set .col-2 input[type="tel"],
.col2-set .col-2 input[type="email"],
.col2-set .col-2 textarea {
  width: 100% !important;
  height: auto !important;
  border: 1px solid #000 !important;
  border-radius: 10px !important;
  padding: 16px 20px !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  letter-spacing: 0.05em !important;
  color: #000 !important;
}
/* border:1px solid #000 !important выше перебивает красную рамку невалидного
   поля от ядра WC (woocommerce.css: .woocommerce-invalid input.input-text{
   border-color:var(--wc-red)} — без !important, поэтому проигрывает нашему).
   Возвращаем красный именно для этого случая — той же специфичности и тоже
   с !important, чтобы победить правило выше. */
.col2-set .col-2 .woocommerce-invalid input[type="text"],
.col2-set .col-2 .woocommerce-invalid input[type="tel"],
.col2-set .col-2 .woocommerce-invalid input[type="email"],
.col2-set .col-2 .woocommerce-invalid textarea {
  border-color: #e2401c !important;
}
.col2-set .col-2 input[type="text"]::placeholder,
.col2-set .col-2 input[type="tel"]::placeholder,
.col2-set .col-2 input[type="email"]::placeholder,
.col2-set .col-2 textarea::placeholder {
  color: #666 !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 16px !important;
}
/* Подпись поля показываем ТОЛЬКО как placeholder внутри инпута (задан в
   functions.php), отдельную надпись-label над полем прячем — но не трогаем
   label у чекбоксов согласия/создания аккаунта, у них своя видимая подпись. */
.col2-set .col-2 label:not(.woocommerce-form__label-for-checkbox) {
  display: none;
}
/* Ядро WooCommerce ставит Имя/Фамилия в строку (form-row-first/last, float
   47%/47%) — на оригинале все поля правой колонки идут в один столбец. */
.col2-set .col-1 {
  width: 49% !important;
}
.col2-set .col-2 {
  width: 35% !important;
}
@media (max-width: 768px) {
  /* Ядро WC грузит woocommerce-smallscreen.css отдельным <link media="...
     max-width:768px"> с ".col2-set .col-1,.col-2{float:none;width:100%}" —
     наши width:49%/35% с !important перебивают именно ширину (важность выше
     специфичности), а float:none остаётся как есть: колонка не floats и не
     растягивается на всю строку, из-за чего текст/поля жмутся к левому краю,
     а справа пустует место шириной с недостающие 51%/65%. На мобильном обе
     колонки должны идти в один столбец на всю ширину — как и предполагает
     ядро WC этим правилом. */
  .col2-set .col-1,
  .col2-set .col-2 {
    width: 100% !important;
  }
}
.col2-set .col-2 .form-row {
  float: none !important;
  width: 100% !important;
  margin: 0 0 15px !important;
  padding: 0 !important;
}
/* Кнопка "Оформить покупку" — во всю ширину правой колонки. */
.pokrugu-agree-block #place_order {
  display: block;
  width: 100%;
}
/* Ядро WooCommerce (.woocommerce form .form-row .input-checkbox) ставит
   margin: -2px 8px 0 0 — переопределяем на 8px 8px 0 0. */
.woocommerce form .form-row .input-checkbox {
  margin: 8px 8px 0 0;
}

/* Кнопка отправки в формах MetForm ("Форма заказа", "Обратная связь") —
   изначально формы были собраны с декоративной кнопкой Elementor (просто
   <a> без обработчика или ссылка на WhatsApp) вместо настоящего виджета
   MetForm "Submit Button", из-за чего отправка формы не работала вообще
   (клик не уходил в форму). После замены на настоящий виджет визуально
   возвращаем чёрно-жёлтый стиль сайта поверх синего дефолта плагина. */
.metform-form-content .mf-btn-wraper {
  text-align: justify;
}
/* !important — у Elementor генерируется собственное правило для каждого
   экземпляра виджета вида ".elementor-4518 .elementor-element.elementor-
   element-XXXXXXX .metform-btn" (4 класса), оно специфичнее этого селектора
   (3 класса) и иначе перебивает цвет текста и border-radius. */
.metform-form-content .metform-btn.metform-submit-btn {
  display: block;
  width: 100%;
  margin-top: 20px;
  background-color: #ffc012;
  color: #000 !important;
  border-radius: 10px !important;
  padding: 12px 0;
  font-family: Montserrat, sans-serif;
  font-size: 19px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  box-shadow: none;
}
.metform-form-content .metform-btn.metform-submit-btn:hover,
.metform-form-content .metform-btn.metform-submit-btn:focus {
  background-color: #000;
  color: #ffc012 !important;
}

/* Текст ошибки валидации MetForm ("Обязательное поле.") — по просьбе
   заказчика скрываем сам текст полностью, оставляя только подсветку рамки
   поля красным цветом (её рисует отдельный класс mf-field-error на
   обёртке поля, не завязан на этот текст). */
.metform-form-content .mf-error-message {
  display: none !important;
}

/* Страница "Индивидуальная гравировка" (ID 4361): блок с формой заказа
   собран Elementor'ом на "атомарном" Flexbox (.e-flexbox-base) — у него
   родитель даёт отступ 65px через padding, а сам блок формы (.e-bfdfdfd)
   ДОПОЛНИТЕЛЬНО получает margin 65px поверх ширины 92.5% — отступы
   задваиваются и на ширинах экрана 768-1024px (между "мобильным" и
   "десктопным" breakpoint'ами Elementor, десктопный layout не переносит
   строки) блок вылезает за пределы экрана на ~78px. Убираем задвоенный
   margin — родительский padding уже даёт нужный отступ по краям. */
.e-bfdfdfd {
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
}