/**
 * Основа темы: сетка, шапка, магазин, корзина, конструкторы.
 *
 * Это бывший style.css первой темы PrintShop. Молодёжный вид v2 лежит
 * слоем поверх — в style.css — и перебивает эти правила. Грузятся оба,
 * основа первой (см. printshop_enqueue_assets).
 */

/* ===================== ОБЩИЕ СТИЛИ ===================== */
* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  /* Chrome на Android иначе сам увеличивает шрифт в узких блоках,
     и вёрстка разъезжается непредсказуемо. */
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  background: linear-gradient(180deg, #FBF8F1 0%, #F3F1E9 100%);
  color: #3A3833;
}

a { color: inherit; }

/* Картинка никогда не шире своего места — страховка от горизонтальной
   прокрутки, из-за которой на телефоне уезжала вся страница. */
img { max-width: 100%; }

/* Наведение на тачскрине «залипает»: палец ушёл, а увеличенная карточка
   осталась. Поэтому все hover-эффекты — только там, где есть курсор. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ===================== ШАПКА ===================== */
.site-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 40px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
  position: sticky; top: 0; z-index: 10;
  flex-wrap: wrap; gap: 12px;
}
.logo { font-weight: 800; font-size: 20px; letter-spacing: -0.5px; text-decoration: none; }

/* Селектор из двух классов, а не один: wp_nav_menu отдаёт свой список
   как <ul class="menu"> с пунктами <li class="menu-item …">, и правила
   плагинов (WooCommerce, конструкторы меню) нередко навешивают на них
   display:block или width:100%. С одноклассовым селектором такое
   перебивало нашу раскладку и меню вставало в столбик.
   flex-wrap при этом обязателен: в одну неразрывную строку пункты
   не влезали в телефон и обрезались по краям. */
.site-header .main-nav ul {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
  margin: 0; padding: 0;
}
.site-header .main-nav li {
  /* flex/width — защита ровно от того самого width:100% со стороны. */
  display: block; flex: 0 0 auto; width: auto;
  margin: 0; padding: 0; list-style: none;
}
.site-header .main-nav a {
  font-size: 13px; color: #6B6858; font-weight: 500; text-decoration: none;
  display: inline-block; padding: 6px 2px; white-space: nowrap;
}
/* Реальное меню помечает текущий пункт — подсветим, раз уж он есть. */
.site-header .main-nav .current-menu-item > a,
.site-header .main-nav .current-menu-ancestor > a { color: #3A3833; font-weight: 700; }
@media (hover: hover) {
  .site-header .main-nav a:hover { color: #3A3833; }
}

.icons-top { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; color: #3A3833; font-size: 18px; }
.icons-top a { text-decoration: none; display: flex; align-items: center; }
.cart-count {
  font-size: 11px; background: #2E9E77; color: white; border-radius: 999px;
  padding: 1px 6px; margin-left: 4px; font-weight: 700;
}

/* Значки шапки — рисованные, а не эмодзи: те зависят от шрифта системы
   и не поддаются ни цвету, ни размеру. currentColor даёт им цвет текста,
   поэтому наведение и тёмная тема работают сами. */
.ps-icon {
  display: block;
  width: 22px;
  height: 22px;
  color: inherit;
}

.icons-top a:hover .ps-icon { color: #2E9E77; }

/* ---------- Кнопка-меню ----------
   Восемь пунктов меню с логотипом и значками в одну строку встают только
   с 1280px (литовские подписи самые длинные — им нужно 1265). Уже этого
   меню переносилось на две-три строки, и шапка на телефоне занимала пятую
   часть экрана. Ниже 1280px пункты прячутся за кнопку.
   Всё под .nav-ready — класс ставит скрипт в header.php: без скрипта
   кнопки нет, и меню остаётся открытым. */
.nav-toggle { display: none; }

@media (max-width: 1279px) {
  .site-header.nav-ready { justify-content: flex-start; }
  .site-header.nav-ready .icons-top { margin-left: auto; order: 2; }

  .site-header.nav-ready .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    order: 3; width: 42px; height: 42px; padding: 0; flex: none;
    background: #FFFDF8; border: 1px solid #E5E2D8; border-radius: 10px;
    color: #3A3833; cursor: pointer;
  }
  .site-header.nav-ready .nav-toggle:focus-visible { outline: 2px solid #2E9E77; outline-offset: 2px; }

  /* Три полоски; в открытом меню — крестик из тех же полосок. */
  .nav-toggle__bars,
  .nav-toggle__bars::before,
  .nav-toggle__bars::after {
    display: block; width: 18px; height: 2px; border-radius: 2px;
    background: currentColor; transition: transform .2s, background-color .2s;
  }
  .nav-toggle__bars { position: relative; }
  .nav-toggle__bars::before,
  .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
  .nav-toggle__bars::before { top: -6px; }
  .nav-toggle__bars::after { top: 6px; }
  .nav-open .nav-toggle__bars { background-color: transparent; }
  .nav-open .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
  .nav-open .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

  /* Меню — столбиком под шапкой, во всю её ширину. */
  .site-header.nav-ready .main-nav { display: none; order: 4; width: 100%; }
  .site-header.nav-ready.nav-open .main-nav { display: block; }
  .site-header.nav-ready .main-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-header.nav-ready .main-nav li { border-top: 1px solid #EFECE3; }
  /* 46px по высоте — палец попадает уверенно. */
  .site-header.nav-ready .main-nav a { display: block; padding: 13px 4px; font-size: 15px; white-space: normal; }
}

/* На планшете столбец во всю ширину выходил длинным и пустым справа —
   пункты в две колонки. */
@media (min-width: 700px) and (max-width: 1279px) {
  .site-header.nav-ready .main-nav ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
}

/* Телефон 320px: логотип, значки и кнопка в одну строку не влезали на
   пару пикселей, а с числом в корзине — на два десятка. */
@media (max-width: 360px) {
  .site-header.nav-ready { padding-left: 12px; padding-right: 12px; column-gap: 6px; }
  .site-header.nav-ready .icons-top { gap: 8px; }
  .site-header.nav-ready .logo { font-size: 15px; }
  .site-header.nav-ready .whatsapp-link { font-size: 12px; }
  .site-header.nav-ready .gwi-switcher__toggle { padding-left: 6px; padding-right: 6px; }
  .site-header.nav-ready .nav-toggle { width: 38px; height: 38px; }
}

/* Сразу над порогом места впритык: литовскому меню с числом в корзине
   не хватало двух десятков пикселей до одной строки. */
@media (min-width: 1280px) and (max-width: 1439px) {
  .site-header { padding-left: 28px; padding-right: 28px; }
  .site-header .main-nav ul { gap: 14px; }
}

/* Плейсхолдеры плагинов языка/валюты */
.lang-switcher-placeholder, .currency-switcher-placeholder {
  font-size: 13px; font-weight: 600; color: #3A3833;
  background: #F5F3EC; border: 1px solid #E5E2D8; border-radius: 8px;
  padding: 6px 10px;
}

/* ===================== HERO ===================== */
.hero { text-align: center; padding: 70px 24px 60px; position: relative; overflow: hidden; }
.blob { position: absolute; border-radius: 50%; opacity: 0.5; }
.blob1 { width: 260px; height: 260px; background: radial-gradient(circle, #BEEBD9 0%, transparent 70%); top: -60px; left: -60px; }
.blob2 { width: 320px; height: 320px; background: radial-gradient(circle, #F5D3E4 0%, transparent 70%); top: -80px; right: -100px; }
/* clamp вместо жёстких 40px: на узком экране заголовок из двух строк
   превращался в четыре и упирался в края. */
.hero h1 {
  font-size: clamp(26px, 7vw, 40px); font-weight: 800; letter-spacing: -1px;
  margin-bottom: 14px; position: relative; line-height: 1.15;
  background: linear-gradient(90deg, #2E5847, #4A5DA6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p { color: #6B6858; font-size: clamp(14px, 3.6vw, 16px); position: relative; line-height: 1.5; }

/* ===================== КАТЕГОРИИ (ГЛАВНАЯ) ===================== */
/* Раньше была сетка в четыре колонки. Направлений стало семь, и
   второй ряд из трёх карточек прижимался влево — сетка неполный ряд
   центрировать не умеет. Ряд из гибких элементов умеет. */
.categories {
  /* Между рядами просвет больше, чем между колонками: подпись одного
     ряда иначе липнет к картинке следующего. */
  display: flex; flex-wrap: wrap; justify-content: center; gap: 46px 20px;
  padding: 30px 40px 50px; max-width: 1100px; margin: 0 auto;
}
.cat-card {
  text-align: center; text-decoration: none; color: inherit;
  /* Четыре в ряд: из ширины вычитаем три промежутка. */
  flex: 0 1 calc(25% - 15px);
}

/* Раньше здесь стояли жёсткие 180×180 плюс рамка 6px с каждой стороны.
   На телефоне две такие колонки с отступами давали 484px при экране
   ~390px — страница уезжала вбок, шапку и карточки срезало по краям.
   Теперь кружок тянется по колонке и не вырастает больше прежних 180. */
.cat-card img {
  width: 100%;
  max-width: 180px;
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 50%;
  object-fit: cover; border: 6px solid white;
  box-shadow: 0 14px 30px rgba(0,0,0,0.16);
  transition: transform .2s, box-shadow .2s;
}
@media (hover: hover) {
  .cat-card:hover img { transform: translateY(-6px) scale(1.03); box-shadow: 0 20px 40px rgba(0,0,0,0.22); }
}
.cat-title { font-weight: 700; font-size: 16px; margin-top: 16px; }

@media (max-width: 780px) {
  /* Две в ряд: промежуток один. */
  .cat-card { flex-basis: calc(50% - 10px); }
}

/* Стили страницы-развилки живут в самом page-category-split.php.
   Прежний набор (.choice-wrap, .choice-photo, .btn-choice, .page-hero,
   .breadcrumb) остался от её старой версии: ни один шаблон темы этих
   классов не использует. Заодно он конфликтовал с новым шаблоном по
   именам .choice-card, .badge-design и .badge-catalog. Удалено. */

/* ===================== ПОДВАЛ ===================== */
.site-footer {
  text-align: center; padding: 34px 20px 30px;
  color: #A6A392; font-size: 12px; border-top: 1px solid #E5E2D8;
}

/* Второстепенное меню. Селекторы усилены по той же причине, что и в
   шапке: разметка от wp_nav_menu приходит с классами menu/menu-item,
   и чужие правила на них иначе разворачивают список в столбик.
   Перенос строк нужен: пунктов тут больше, чем в шапке. */
.site-footer .footer-nav ul {
  list-style: none; display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center; gap: 4px 22px;
  margin: 0 0 14px; padding: 0;
}
.site-footer .footer-nav li {
  display: block; flex: 0 0 auto; width: auto;
  margin: 0; padding: 0; list-style: none;
}
.site-footer .footer-nav a {
  text-decoration: none; color: #6B6858; font-size: 13px; font-weight: 500;
  /* ~35px по высоте, как у пунктов шапки: ссылки в подвале нажимают
     не реже, а промахнуться по мелкой строке проще. */
  display: inline-block; padding: 9px 3px;
}
.site-footer .footer-nav .current-menu-item > a { color: #3A3833; }
@media (hover: hover) {
  .site-footer .footer-nav a:hover { color: #3A3833; text-decoration: underline; }
}

.footer-copy { color: #A6A392; }
.site-footer a { color: #A6A392; }

/* Переключатель языков в подвале: список, а не выпадашка — места внизу
   хватает, а лишний клик до своего языка стоит дороже пары строк. */
.site-footer .gwi-switcher--list {
  justify-content: center;
  margin: 0 0 12px;
}
.site-footer .gwi-switcher--list .gwi-switcher__item a {
  color: #6B6858;
  font-size: 13px;
}

/* ===================== ОБЫЧНАЯ СТРАНИЦА ===================== */

/* Резервный шаблон index.php: раньше эти отступы стояли инлайном
   в самом шаблоне и не поддавались правке из стилей. */
.page-body {
  max-width: 1000px;
  margin: 40px auto;
  padding: 0 20px;
}

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

.page-body h2:where(:not(.cpd *)) {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
  color: #3A3833;
  margin: 48px 0 16px;
}

.page-body h2:where(:not(.cpd *)):first-child { margin-top: 0; }

.page-body h3:where(:not(.cpd *)) {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  color: #3A3833;
  margin: 32px 0 12px;
}

/* Текст читается тем легче, чем короче строка: около 70 знаков — предел,
   после которого глаз теряет начало следующей. */
.page-body p:where(:not(.cpd *)),
.page-body li:where(:not(.cpd *)) {
  font-size: 16px;
  line-height: 1.7;
  color: #4A4740;
  max-width: 68ch;
}

.page-body p:where(:not(.cpd *)) { margin: 0 0 16px; }

.page-body ul:where(:not(.cpd *)),
.page-body ol:where(:not(.cpd *)) {
  margin: 0 0 20px;
  padding-left: 22px;
}

.page-body li:where(:not(.cpd *)) { margin-bottom: 8px; }
.page-body li:where(:not(.cpd *)):last-child { margin-bottom: 0; }

.page-body strong:where(:not(.cpd *)) { color: #3A3833; font-weight: 700; }

/* Пояснение в конце раздела: тише основного текста, но не бледнее,
   чем позволяет читаемость. */
.page-body em:where(:not(.cpd *)) {
  color: #6B6858;
  font-style: normal;
  font-size: 15px;
}

/* Кнопки-ссылки (корзина: «Оформить заказ») в цвет ссылок не красим:
   зелёный текст на тёмной кнопке не читался. */
.page-body a:where(:not(.cpd *, .wp-element-button, .wc-block-components-button)) { color: #2E9E77; }
.page-body a:where(:not(.cpd *, .wp-element-button, .wc-block-components-button)):hover { text-decoration: none; }

/* ===================== МОБИЛЬНЫЕ ЭКРАНЫ ===================== */

@media (max-width: 600px) {
  /* 40px полей с каждой стороны съедали пятую часть узкого экрана. */
  .categories { padding-left: 16px; padding-right: 16px; }

  /* На телефоне те же отступы съедают экран: сжимаем ритм, но не ломаем. */
  .page-body h2:where(:not(.cpd *)) { font-size: 22px; margin: 36px 0 12px; }
  .page-body h3:where(:not(.cpd *)) { font-size: 17px; margin: 26px 0 10px; }
  .page-body p:where(:not(.cpd *)), .page-body li:where(:not(.cpd *)) { font-size: 15px; line-height: 1.65; }

  /* Липкой шапка здесь быть перестаёт. Меню теперь за кнопкой, и шапка
     в одну строку, но в конструкторе к верху экрана прилипает холст —
     липкая шапка наезжала бы на него. */
  .site-header { position: static; padding: 12px 16px; gap: 10px; }
  .logo { font-size: 18px; }
  .icons-top { gap: 12px; font-size: 16px; }
  .lang-switcher-placeholder,
  .currency-switcher-placeholder { font-size: 12px; padding: 5px 8px; }

  /* Меню на всю ширину отдельной строкой — так пункты не жмутся
     к логотипу и переносятся ровно по центру.
     Отступ 12px, а не 18: пять пунктов занимают 290px, и при 18px
     не хватало двух пикселей до одной строки — меню срывалось на две
     и делало липкую шапку заметно выше. */
  /* Селекторы здесь повторяют вес базовых: медиазапрос сам по себе
     специфичности не добавляет, и с одноклассовым .main-nav ul эти
     переопределения проиграли бы правилу .site-header .main-nav ul. */
  .main-nav { order: 3; width: 100%; }
  .site-header .main-nav ul { justify-content: center; gap: 2px 12px; }
  /* ~37px по высоте — палец попадает уверенно. */
  .site-header .main-nav a { padding: 9px 3px; }

  .hero { padding: 44px 16px 36px; }
  .categories { padding-top: 20px; padding-bottom: 36px; gap: 34px 16px; }

  .site-footer { padding: 26px 16px 24px; }
  .site-footer .footer-nav ul { gap: 2px 16px; }

  .page-body { margin: 24px auto; padding: 0 16px; }
}

/* Совсем узкие экраны: подписи под кружками начинают ломаться. */
@media (max-width: 380px) {
  .categories { gap: 28px 12px; }
  .cat-title { font-size: 14px; margin-top: 12px; }
  .site-header .main-nav ul { gap: 2px 10px; }
  .site-header .main-nav a { font-size: 13px; }
}


/* Пустой магазин: развилка вместо «товаров не найдено». */
.shop-empty { padding: 24px 0 48px; }
.shop-empty__lead { font-size: 17px; color: #5A5750; margin: 0 0 20px; }
.shop-empty__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 12px;
}
.shop-empty__list a {
  display: inline-block; padding: 12px 20px;
  border: 1px solid #E5E2D8; border-radius: 10px;
  background: #FFFDF8; color: #3A3833;
  text-decoration: none; font-weight: 600;
}
.shop-empty__list a:hover { border-color: #2E9E77; color: #2E9E77; }


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

/* Тема не описывала магазин вообще. WooCommerce, не найдя своих классов,
   заворачивал витрину в разметку тем-«двадцатых» (#primary, .site-main),
   которую здесь не описывает ни одно правило: карточка товара растекалась
   во всю ширину монитора, а снимок вырастал на пол-экрана.

   Порядок подключения важен: стили темы идут после стилей плагина,
   поэтому селекторы одинакового веса перебивают его — дописывать
   !important почти нигде не приходится. */

.shop-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 26px 40px 72px;
}

/* Хлебные крошки: путь нужен, но кричать ему незачем. */
.woocommerce .woocommerce-breadcrumb {
  font-size: 13px;
  color: #A6A392;
  margin: 0 0 22px;
}
.woocommerce .woocommerce-breadcrumb a { color: #6B6858; text-decoration: none; }
.woocommerce .woocommerce-breadcrumb a:hover { color: #2E9E77; }

/* ---------- Раскладка страницы товара ---------- */

/* Снимок слева, всё остальное справа — привычный порядок любого магазина.
   Колонки чуть неравные: снимку нужен размер, тексту справа — короткая
   строка. Вкладки и «похожие» идут во всю ширину под ними. */
.woocommerce div.product {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: 20px 56px;
  align-items: start;
}

.woocommerce div.product div.images,
.woocommerce div.product div.summary {
  float: none;
  width: auto;
  margin: 0;
}

.woocommerce div.product .related,
.woocommerce div.product .upsells {
  grid-column: 1 / -1;
}

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

/* Снимок лежит на «бумаге» с полями: у снимков товара прозрачный фон, и
   без подложки чёрная майка висела бы прямо на фоне страницы. */
.woocommerce div.product div.images.woocommerce-product-gallery {
  position: relative;
  background: #FFFDF8;
  border: 1px solid #E5E2D8;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 14px 34px rgba(58, 56, 51, 0.07);
}

.woocommerce div.product div.images img {
  border-radius: 10px;
  display: block;
}

/* Значок лупы — кружок в углу снимка, а не голая иконка поверх картинки. */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
  top: 34px;
  right: 34px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #FFFDF8;
  border: 1px solid #E5E2D8;
  box-shadow: 0 4px 12px rgba(58, 56, 51, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3A3833;
  text-decoration: none;
  font-size: 15px;
}

/* Лента миниатюр: ряд с промежутками вместо плавающих четвертинок. */
.woocommerce div.product div.images .flex-control-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  overflow: visible;
}
.woocommerce div.product div.images .flex-control-thumbs li {
  width: 74px;
  float: none;
}
.woocommerce div.product div.images .flex-control-thumbs li img {
  border-radius: 8px;
  border: 1px solid #E5E2D8;
  opacity: 0.55;
  transition: opacity .15s, border-color .15s;
}
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs li img:hover {
  opacity: 1;
  border-color: #2E9E77;
}

/* ---------- Правая колонка ---------- */

.woocommerce div.product .product_title {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: #3A3833;
  margin: 0 0 14px;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-size: 26px;
  font-weight: 700;
  color: #3A3833;
  margin: 0 0 18px;
  line-height: 1.2;
}
.woocommerce div.product p.price del { color: #A6A392; font-weight: 500; font-size: 19px; }
.woocommerce div.product p.price ins { text-decoration: none; }

.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: 16px;
  line-height: 1.65;
  color: #4A4740;
  margin: 0 0 22px;
  max-width: 46ch;
}

/* ---------- Выбор размера и покупка ---------- */

/* Таблицей размеры показывать незачем: это одна подпись и один список.
   Разбираем таблицу на блоки, чтобы подпись встала над полем. */
.woocommerce div.product form.cart table.variations {
  display: block;
  width: 100%;
  margin: 0 0 20px;
  border: 0;
}
.woocommerce div.product form.cart table.variations tbody,
.woocommerce div.product form.cart table.variations tr,
.woocommerce div.product form.cart table.variations th,
.woocommerce div.product form.cart table.variations td {
  display: block;
  width: auto;
  padding: 0;
  border: 0;
  text-align: left;
}
.woocommerce div.product form.cart table.variations th.label label,
.woocommerce div.product form.cart .cpd-stamp-fields--plain label,
.woocommerce div.product form.cart .cpd-stamp-fields__title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6B6858;
  margin: 0 0 8px;
  display: block;
}

/* Поля товара — ник, шрифт, реквизиты печати — тем же видом, что и выбор
   свойств: рядом с ним поля браузера выглядели чужими. */
.woocommerce div.product form.cart .variations select,
.woocommerce div.product form.cart .cpd-stamp-fields .input-text,
.woocommerce div.product form.cart .cpd-stamp-fields select {
  width: 100%;
  max-width: 320px;
  min-height: 48px;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  color: #3A3833;
  background: #FFFDF8;
  border: 1px solid #E5E2D8;
  border-radius: 10px;
  margin: 0;
}
/* Ширина — как у списка выбора: ему WooCommerce ставит не меньше 75%
   колонки, и поля без того же правила выходили короче списка над ними. */
.woocommerce div.product form.cart .cpd-stamp-fields .input-text,
.woocommerce div.product form.cart .cpd-stamp-fields select {
  min-width: 75%;
}
.woocommerce div.product form.cart .variations select:focus,
.woocommerce div.product form.cart .cpd-stamp-fields .input-text:focus,
.woocommerce div.product form.cart .cpd-stamp-fields select:focus {
  outline: 2px solid #2E9E77;
  outline-offset: 1px;
}

.woocommerce div.product form.cart .reset_variations {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  color: #6B6858;
}

/* Количество и кнопка — в одну строку, как везде. */
.woocommerce div.product form.cart:not(.variations_form),
.woocommerce div.product .woocommerce-variation-add-to-cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.woocommerce div.product form.cart .quantity input.qty {
  width: 76px;
  height: 50px;
  padding: 0 6px;
  font-size: 16px;
  font-family: inherit;
  color: #3A3833;
  background: #FFFDF8;
  border: 1px solid #E5E2D8;
  border-radius: 10px;
}

.woocommerce div.product form.cart button.single_add_to_cart_button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background: #2E9E77;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  padding: 16px 30px;
  border: 0;
  border-radius: 10px;
  text-shadow: none;
  transition: background .15s;
}
@media (hover: hover) {
  .woocommerce div.product form.cart button.single_add_to_cart_button:hover,
  .woocommerce a.button.alt:hover,
  .woocommerce button.button.alt:hover,
  .woocommerce input.button.alt:hover {
    background: #268163;
    color: #FFFFFF;
  }
}
.woocommerce div.product form.cart button.single_add_to_cart_button.disabled,
.woocommerce div.product form.cart button.single_add_to_cart_button:disabled {
  background: #CFCCC0;
  color: #FFFFFF;
  opacity: 1;
  cursor: not-allowed;
}

/* Главные кнопки корзины и кассы — блочные, со своим тёмно-серым видом
   из настроек WordPress. Приводим к кнопке «В корзину»: один зелёный на
   весь путь покупки. */
.wc-block-cart .wc-block-cart__submit-button,
.wc-block-checkout .wc-block-components-checkout-place-order-button {
  background: #2E9E77;
  color: #FFFFFF;
  border: 0;
  border-radius: 10px;
  font-weight: 700;
}
@media (hover: hover) {
  .wc-block-cart .wc-block-cart__submit-button:hover,
  .wc-block-checkout .wc-block-components-checkout-place-order-button:hover {
    background: #268163;
    color: #FFFFFF;
  }
}

/* Налог под итогом — сноска к сумме, а не вторая сумма. Блочная вёрстка
   даёт ей размер и цвет обычного текста, и строка спорит с «Kopsumma»
   за внимание. Приводим к тону служебных подписей магазина. */
.page-body .wc-block-components-totals-footer-item .wc-block-components-totals-item__description,
.page-body .wc-block-components-totals-footer-item-tax {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: #A6A392;
}

/* Цена и наличие выбранного размера появляются над кнопкой. */
.woocommerce div.product .woocommerce-variation-price { margin: 0 0 14px; }
.woocommerce div.product .woocommerce-variation-price .price { font-size: 24px; }

.woocommerce div.product .stock {
  font-size: 14px;
  font-weight: 600;
  color: #2E9E77;
  margin: 0 0 12px;
}
.woocommerce div.product .stock.out-of-stock { color: #B4544A; }

/* Рубрика и артикул: тише всего на странице, но найти надо. */
.woocommerce div.product .product_meta {
  margin: 26px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid #E5E2D8;
  font-size: 13px;
  color: #A6A392;
}
.woocommerce div.product .product_meta > span { display: block; margin-bottom: 6px; }
.woocommerce div.product .product_meta a { color: #6B6858; text-decoration: none; }
.woocommerce div.product .product_meta a:hover { color: #2E9E77; }

/* Звёзды рейтинга прячем: отзывов нет, а пустая строка звёзд читается
   как «товар оценили на ноль». */
.woocommerce div.product .woocommerce-product-rating { display: none; }

/* ---------- Вкладки ---------- */

/* Вкладки стоят в правой колонке, сразу под рубрикой: отступ сверху
   короче, чем был бы у отдельного блока во всю ширину, а строка теперь
   ограничена самой колонкой — 68 знаков задавать незачем. */
.woocommerce div.product .woocommerce-tabs {
  margin-top: 30px;
  padding-top: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin: 0 0 26px;
  padding: 0;
  border-bottom: 1px solid #E5E2D8;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: none;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
  box-shadow: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
/* Выбранная вкладка у WooCommerce — белый прямоугольник с рамкой и
   скруглением; на кремовом фоне он выглядит вырезанным из другой темы.
   Правило ниже нужно отдельно от правила для обычной вкладки: у активной
   в селекторе лишний класс, и она перебивала общий сброс фона. */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: none;
  border: 0;
  border-bottom-color: transparent;
  box-shadow: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 10px 0 12px;
  font-size: 15px;
  font-weight: 600;
  color: #6B6858;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}

/* Наведение и выбор различаются намеренно: раньше и то, и другое давало
   зелёную черту, и понять, какая вкладка открыта, можно было только убрав
   курсор. Теперь под курсором — бледная черта, под выбранной — зелёная,
   и текст выбранной тяжелее. */
@media (hover: hover) {
  .woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
    color: #3A3833;
    border-bottom-color: #CFCCC0;
  }
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a:hover {
  color: #3A3833;
  font-weight: 700;
  border-bottom-color: #2E9E77;
}

.woocommerce div.product .woocommerce-Tabs-panel p,
.woocommerce div.product .woocommerce-Tabs-panel li {
  font-size: 15px;
  line-height: 1.65;
  color: #4A4740;
}
.woocommerce div.product .woocommerce-Tabs-panel p { margin: 0 0 14px; }

/* Свойства товара — простой список пар, без рамок вокруг каждой ячейки. */
.woocommerce div.product table.shop_attributes {
  border: 0;
  width: 100%;
}
.woocommerce div.product table.shop_attributes th,
.woocommerce div.product table.shop_attributes td {
  border: 0;
  border-bottom: 1px solid #E5E2D8;
  padding: 12px 0;
  font-size: 15px;
  font-style: normal;
  background: none;
}
.woocommerce div.product table.shop_attributes th { color: #6B6858; font-weight: 600; width: 40%; }
.woocommerce div.product table.shop_attributes td { color: #3A3833; }
.woocommerce div.product table.shop_attributes td p { margin: 0; }

/* ---------- Карточки витрины ---------- */

.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; display: none; }

/* Ширину карточки WooCommerce задаёт в процентах, причём отдельным
   правилом на каждое число колонок (.columns-3 li.product и так далее).
   Такое правило весит больше обычного, поэтому класс здесь намеренно
   повторён: вес уравнивается, а побеждает наше — стили темы подключены
   после стилей плагина. */
.woocommerce ul.products li.product.product {
  float: none;
  width: auto;
  margin: 0;
  padding: 16px;
  background: #FFFDF8;
  border: 1px solid #E5E2D8;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  transition: transform .2s, box-shadow .2s;
}
@media (hover: hover) {
  .woocommerce ul.products li.product.product:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 34px rgba(58, 56, 51, 0.12);
  }
}

/* Квадратное окно под снимок: у товаров разные пропорции, а карточки в
   ряду должны быть одной высоты. Фон не задаём — снимки с прозрачностью
   иначе лежали бы на белом прямоугольнике посреди кремовой карточки. */
.woocommerce ul.products li.product a img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 10px;
  margin: 0 0 14px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: #3A3833;
  padding: 0;
  margin: 0 0 8px;
}

.woocommerce ul.products li.product .price {
  font-size: 17px;
  font-weight: 700;
  color: #3A3833;
  margin: 0 0 14px;
}
.woocommerce ul.products li.product .price del { color: #A6A392; font-weight: 500; }

/* Кнопка карточки прижата к низу: у товаров с названиями разной длины
   кнопки иначе встают на разной высоте и ряд выглядит рваным. */
.woocommerce ul.products li.product a.button {
  margin-top: auto;
  padding: 12px 18px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  color: #3A3833;
  background: transparent;
  border: 1px solid #E5E2D8;
  border-radius: 10px;
}
@media (hover: hover) {
  .woocommerce ul.products li.product a.button:hover {
    background: #2E9E77;
    border-color: #2E9E77;
    color: #FFFFFF;
  }
}

/* Заголовки «Похожие товары» и им подобные. */
.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2 {
  font-size: 22px;
  font-weight: 700;
  color: #3A3833;
  margin: 56px 0 22px;
}

/* Строка «показано 1-12 из 30» и сортировка. */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { font-size: 14px; color: #6B6858; margin-bottom: 22px; }
.woocommerce .woocommerce-ordering select {
  font-family: inherit;
  font-size: 14px;
  padding: 9px 12px;
  border: 1px solid #E5E2D8;
  border-radius: 10px;
  background: #FFFDF8;
  color: #3A3833;
}

.woocommerce nav.woocommerce-pagination ul {
  border: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 40px 0 0;
}
.woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  min-width: 40px;
  padding: 10px 12px;
  border: 1px solid #E5E2D8;
  border-radius: 10px;
  background: #FFFDF8;
  color: #3A3833;
  font-weight: 600;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: #2E9E77;
  border-color: #2E9E77;
  color: #FFFFFF;
}

/* ---------- Уведомления ---------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background: #FFFDF8;
  border-top: 0;
  border-left: 3px solid #2E9E77;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(58, 56, 51, 0.06);
  color: #3A3833;
  font-size: 15px;
  padding: 16px 18px 16px 20px;
}
.woocommerce-error { border-left-color: #B4544A; }
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }
.woocommerce-message .button,
.woocommerce-info .button {
  background: transparent;
  border: 1px solid #E5E2D8;
  border-radius: 8px;
  color: #3A3833;
  font-family: inherit;
  font-weight: 700;
  padding: 8px 14px;
}

/* ---------- Узкие экраны ---------- */

@media (max-width: 980px) {
  .shop-wrap { padding: 20px 20px 56px; }

  /* Ниже 980 две колонки товара становятся слишком тесными: снимок
     мельчает, а строка описания всё равно не удлиняется. */
  .woocommerce div.product { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .woocommerce div.product .product_title { font-size: 26px; }

  .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}

@media (max-width: 600px) {
  .shop-wrap { padding: 16px 16px 44px; }

  .woocommerce div.product div.images.woocommerce-product-gallery { padding: 14px; border-radius: 14px; }
  .woocommerce div.product div.images .woocommerce-product-gallery__trigger { top: 24px; right: 24px; }
  .woocommerce div.product .product_title { font-size: 23px; }
  .woocommerce div.product p.price { font-size: 23px; }

  /* Кнопка на всю ширину: пальцем в неё попасть проще, чем в короткую. */
  .woocommerce div.product form.cart .variations select,
  .woocommerce div.product form.cart .cpd-stamp-fields .input-text,
  .woocommerce div.product form.cart .cpd-stamp-fields select { max-width: none; }
  .woocommerce div.product form.cart button.single_add_to_cart_button { flex: 1 1 auto; }

  .woocommerce div.product .woocommerce-tabs { margin-top: 24px; }
  .woocommerce div.product .woocommerce-tabs ul.tabs { gap: 20px; }

  .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .woocommerce ul.products li.product.product { padding: 10px; border-radius: 12px; }
  .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 14px; }
  .woocommerce ul.products li.product .price { font-size: 15px; }
  .woocommerce ul.products li.product a.button { padding: 10px 12px; font-size: 13px; }
}


/* ---------- Витрина: боковое меню рубрик ---------- */

/* Меню слева, товары справа. 220 пикселей — столько нужно названию рубрики
   в две строки; шире колонка отнимает место у самих карточек. */
.shop-wrap--sidebar {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 12px 40px;
  align-items: start;
}

.shop-side { min-width: 0; }

.shop-cats a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.35;
  color: #4A4740;
  text-decoration: none;
}

@media (hover: hover) {
  .shop-cats a:hover { background: #FFFDF8; color: #3A3833; }
}

.shop-cats__all {
  font-weight: 700;
  color: #3A3833;
  margin-bottom: 6px;
}

.shop-cats__list,
.shop-cats__sub {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Подрубрики — отступом и чертой слева: так видно, что они внутри, даже
   когда родитель ушёл за край экрана. */
.shop-cats__sub {
  margin: 2px 0 6px 10px;
  padding-left: 10px;
  border-left: 1px solid #E5E2D8;
}

.shop-cats__sub a { font-size: 14px; color: #6B6858; }

.shop-cats__count {
  font-size: 12px;
  color: #A6A392;
  font-variant-numeric: tabular-nums;
}

/* Открытая рубрика и её родитель. Фон, а не только цвет: по цвету одного
   пункта из десяти взгляд не цепляется. */
.shop-cats__all.is-open,
.shop-cats__item.is-open > a {
  background: #FFFDF8;
  border: 1px solid #E5E2D8;
  padding: 6px 9px;
  color: #3A3833;
  font-weight: 600;
}

.shop-cats [aria-current="page"] {
  border-color: #2E9E77;
  color: #2E9E77;
}

.shop-cats [aria-current="page"] .shop-cats__count { color: #2E9E77; }

/* Строки подрубрик — только для телефона (см. ниже). */
.shop-cats__row { display: none; }

/* ---------- Витрина: четыре карточки в ряд ---------- */

.woocommerce ul.products {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

/* Карточек в ряду теперь больше, значит каждая уже — ужимаем и содержимое,
   иначе название переносится на три строки, а кнопка не влезает в слово. */
.shop-wrap--sidebar .woocommerce ul.products li.product.product,
.woocommerce ul.products li.product.product { padding: 12px; }

.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 15px; }
.woocommerce ul.products li.product .price { font-size: 16px; }
.woocommerce ul.products li.product a.button { padding: 10px 14px; font-size: 13px; }

@media (max-width: 1180px) {
  .shop-wrap--sidebar { grid-template-columns: 190px minmax(0, 1fr); gap: 12px 28px; }
  .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
}

@media (max-width: 900px) {
  /* Меню наверх, в строку: сбоку ему остаётся слишком узкая колонка, а
     прятать рубрики от покупателя, который пришёл выбирать, — плохой обмен. */
  .shop-wrap--sidebar { grid-template-columns: minmax(0, 1fr); gap: 18px; }

  /* Рубрики на телефоне: куча кнопок в четыре строки не читалась. Верхние
     рубрики — одной строкой, которую листают пальцем; «Магазин» стоит
     слева на месте. Под ней — подрубрики открытой ветки (.shop-cats__row,
     см. printshop_shop_category_rows), вложенные списки дерева скрыты. */
  .shop-cats {
    --shop-bleed: 20px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 4px 0;
  }
  .shop-cats__all { margin: 0; }
  .shop-cats__list,
  .shop-cats__row {
    display: flex;
    gap: 8px;
    /* Сверху и снизу — место под тень выбранной кнопки: строка с
       прокруткой обрезает всё, что за её краем. */
    padding-top: 4px;
    padding-bottom: 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .shop-cats__list::-webkit-scrollbar,
  .shop-cats__row::-webkit-scrollbar { display: none; }
  /* Строки — до края экрана: кнопка, обрезанная краем, сама подсказывает,
     что дальше есть ещё. */
  .shop-cats__list { margin-right: calc(-1 * var(--shop-bleed)); padding-right: var(--shop-bleed); }
  /* Слева — мягкий край: прокрученные кнопки уходят под «Магазин» не
     обрезом, а растворяясь. В покое первая кнопка стоит правее края. */
  .shop-cats__list {
    padding-left: 8px;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8px);
    mask-image: linear-gradient(to right, transparent, #000 8px);
  }
  .shop-cats__row {
    grid-column: 1 / -1;
    list-style: none;
    margin: 0 calc(-1 * var(--shop-bleed));
    padding-left: var(--shop-bleed);
    padding-right: var(--shop-bleed);
  }
  .shop-cats__item,
  .shop-cats__row li { flex: none; }
  .shop-cats__sub { display: none; }

  .shop-cats a { white-space: nowrap; border: 1px solid #E5E2D8; background: #FFFDF8; padding: 7px 12px; }
  .shop-cats__all.is-open,
  .shop-cats__item.is-open > a { padding: 7px 12px; }
  /* Подрубрики тише верхнего ряда: без рамки, пока не выбраны. */
  .shop-cats__row a { font-size: 14px; color: #6B6858; background: transparent; border-color: transparent; }
  .shop-cats__row .is-open > a { background: #FFFDF8; color: #3A3833; font-weight: 600; }

  .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .shop-cats { --shop-bleed: 16px; }
  .shop-cats a { font-size: 14px; }
  .shop-cats__count { display: none; }
}

/* ---------- Отзывы о товаре ---------- */

/* Форма отзыва — тем же видом, что поля покупки: без этого имя и почта
   стояли узкими браузерными строчками рядом с подписью, а кнопка была
   серой. Префикс длинный нарочно — у WooCommerce здесь правила с двумя id. */
.woocommerce #reviews #comments .woocommerce-Reviews-title { font-size: 18px; margin: 0 0 8px; }
/* Пока отзывов нет, заголовок «Отзывы» повторяет вкладку над ним. */
.woocommerce #reviews #comments:has(.woocommerce-noreviews) .woocommerce-Reviews-title { display: none; }
.woocommerce #reviews .woocommerce-noreviews { margin: 0 0 12px; color: #6B6858; }

.woocommerce #review_form #respond .comment-reply-title { display: block; margin: 0 0 4px; font-size: 16px; font-weight: 700; color: #3A3833; }
.woocommerce #review_form #respond .comment-notes { margin: 0 0 16px; font-size: 13px; color: #6B6858; }
.woocommerce #review_form #respond p { margin: 0 0 14px; }
.woocommerce #review_form #respond label {
  display: block; margin: 0 0 8px;
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #6B6858;
}
.woocommerce #review_form #respond .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 8px; }
.woocommerce #review_form #respond .comment-form-cookies-consent input { margin-top: 3px; }
.woocommerce #review_form #respond .comment-form-cookies-consent label {
  display: inline; margin: 0; font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: 0;
}
.woocommerce #review_form #respond input[type="text"],
.woocommerce #review_form #respond input[type="email"],
.woocommerce #review_form #respond textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; box-sizing: border-box;
  font: inherit; font-size: 15px; color: #3A3833;
  background: #FFFDF8; border: 1px solid #E5E2D8; border-radius: 10px;
}
.woocommerce #review_form #respond textarea { min-height: 120px; }
.woocommerce #review_form #respond input:focus,
.woocommerce #review_form #respond textarea:focus { outline: 2px solid #2E9E77; outline-offset: 1px; }

.woocommerce #review_form #respond input#submit {
  padding: 14px 26px; font: inherit; font-size: 16px; font-weight: 700;
  color: #FFFFFF; background: #2E9E77; border: 0; border-radius: 10px;
}
@media (hover: hover) {
  .woocommerce #review_form #respond input#submit:hover { background: #268163; }
}

/* Звёзды — крупнее и одним цветом с оценкой в списке отзывов. */
.woocommerce #review_form #respond p.stars { font-size: 22px; line-height: 1; }
.woocommerce #review_form #respond p.stars a,
.woocommerce .star-rating span::before { color: #D99A1E; }

/* ---------- Срок изготовления ---------- */

/* Одна строка с часами: на товаре под кнопкой, над корзиной и кассой.
   Тише цены, но заметнее мелкого шрифта рубрики — вопрос «когда будет»
   покупатель задаёт до оплаты. */
/* p.… — чтобы перебить общие правила текста страницы (.page-body p). */
p.lead-time {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 16px 0 0;
  max-width: none;
  font-size: 14px;
  line-height: 1.45;
  color: #3A3833;
}
.lead-time__icon {
  flex: none;
  margin-top: 1px;
  color: #2E9E77;
}

p.lead-time--cart,
p.lead-time--checkout,
p.lead-time--thankyou {
  margin: 0 0 20px;
  padding: 12px 16px;
  background: #FFFDF8;
  border: 1px solid #E5E2D8;
  border-radius: 10px;
}

/* В конструкторе тёмная панель со своими цветами. */
.cpd .lead-time--designer {
  justify-content: center;
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.35;
  color: var(--cpd-text-dim, #9AA3AD);
}
.cpd .lead-time--designer .lead-time__icon {
  width: 13px;
  height: 13px;
  margin-top: 0;
  color: var(--cpd-cyan, #0090c8);
}

/* На узком экране цена с кнопкой прилипают к низу полосой: в ней место
   только итогу, срок покупатель увидит в корзине. */
.cpd--area.cpd--narrow .lead-time--designer { display: none; }

/* ---------- Страница «не найдено» ---------- */

.not-found { text-align: center; padding: 56px 24px 8px; }
.not-found__code {
  font-size: clamp(64px, 18vw, 120px); font-weight: 800; letter-spacing: -4px; line-height: 1;
  background: linear-gradient(90deg, #2E5847, #4A5DA6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: .22; margin: 0 0 6px;
}
.not-found h1 {
  font-size: clamp(24px, 6vw, 34px); font-weight: 800; letter-spacing: -.5px;
  color: #3A3833; margin: 0 0 12px; text-wrap: balance;
}
.not-found__text {
  max-width: 46ch; margin: 0 auto; color: #6B6858; font-size: 16px; line-height: 1.5; text-wrap: balance;
}
.not-found__links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px;
  margin: 0 auto 64px; padding: 0 20px; font-size: 15px;
}
.not-found__links a { color: #2E9E77; font-weight: 700; text-decoration: none; }
.not-found__links a:hover { text-decoration: underline; }

/* ---------- Форма «Напишите нам» ---------- */

.contact-form { display: grid; gap: 14px; max-width: 640px; margin: 8px 0 32px; }
.contact-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.page-body .contact-form p { margin: 0; max-width: none; }
.contact-form__field { display: grid; gap: 6px; }
.contact-form__field label { font-size: 14px; font-weight: 700; color: #3A3833; }
.contact-form__optional { font-weight: 400; color: #8A8676; margin-left: 4px; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  width: 100%; font: inherit; font-size: 16px; color: #3A3833;
  background: #FFFDF8; border: 1px solid #E5E2D8; border-radius: 10px;
  padding: 11px 13px; transition: border-color .15s, box-shadow .15s;
}
.contact-form textarea { resize: vertical; min-height: 140px; line-height: 1.5; }
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none; border-color: #2E9E77; box-shadow: 0 0 0 3px rgba(46, 158, 119, .18);
}
.contact-form__footer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.contact-form__submit {
  font: inherit; font-size: 16px; font-weight: 700; color: #FFFFFF;
  background: #2E9E77; border: 0; border-radius: 10px; padding: 13px 28px; cursor: pointer;
  transition: background .15s;
}
.contact-form__submit:hover { background: #268163; }
.contact-form__submit:focus-visible { outline: 3px solid rgba(46, 158, 119, .35); outline-offset: 2px; }
.contact-form__submit:disabled { background: #CFCCC0; cursor: wait; }
.page-body .contact-form .contact-form__note { font-size: 13px; line-height: 1.45; color: #8A8676; flex: 1 1 220px; }
.contact-form__note a { color: inherit; }
.page-body .contact-form .contact-form__status { font-size: 15px; line-height: 1.45; }
.contact-form__status:empty { display: none; }
.contact-form__status.is-ok,
.contact-form__status.is-error {
  padding: 12px 16px; border-radius: 10px; background: #FFFDF8; border: 1px solid #E5E2D8;
  border-left: 3px solid #2E9E77; color: #3A3833;
}
.contact-form__status.is-error { border-left-color: #B4544A; }

/* Ловушка для ботов: вне экрана, а не display:none — часть ботов
   пропускает скрытые поля, но заполняет те, что просто не видны. */
.contact-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 600px) {
  .contact-form__row { grid-template-columns: minmax(0, 1fr); }
  .contact-form__submit { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .contact-form input, .contact-form textarea, .contact-form__submit { transition: none; }
}

/* ---------- Главная: цены, шаги, условия, вопросы ---------- */

.home-title {
  font-size: clamp(22px, 5vw, 30px); font-weight: 800; letter-spacing: -.5px;
  color: #3A3833; text-align: center; margin: 0 0 28px; text-wrap: balance;
}

.home-steps { max-width: 1100px; margin: 0 auto; padding: 24px 40px 48px; }
.home-steps__list {
  list-style: none; margin: 0; padding: 0; counter-reset: step;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
}
.home-step {
  counter-increment: step; position: relative;
  background: #FFFDF8; border: 1px solid #E5E2D8; border-radius: 16px;
  padding: 26px 24px 24px;
}
/* Номер шага — настоящая последовательность, поэтому счётчик списка. */
.home-step::before {
  content: counter(step);
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; margin-bottom: 14px;
  font-weight: 800; font-size: 17px; color: #FFFFFF;
  background: linear-gradient(135deg, #2E5847, #4A5DA6);
}
.home-step h3 { font-size: 18px; font-weight: 800; color: #3A3833; margin: 0 0 8px; }
.home-step p { font-size: 15px; line-height: 1.55; color: #6B6858; margin: 0; }

.home-facts {
  max-width: 1020px; margin: 0 auto 56px; padding: 22px 28px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 24px;
  background: #FFFDF8; border: 1px solid #E5E2D8; border-radius: 16px;
}
.home-fact { display: flex; align-items: flex-start; gap: 12px; }
.home-fact__icon { flex: none; color: #2E9E77; margin-top: 1px; }
.home-fact__title { font-size: 15px; font-weight: 800; color: #3A3833; margin: 0 0 2px; }
.home-fact__text { font-size: 13px; line-height: 1.45; color: #6B6858; margin: 0; }

.home-faq { max-width: 760px; margin: 0 auto; padding: 0 24px 64px; }
.home-faq__item { border-bottom: 1px solid #E5E2D8; }
.home-faq__item:first-of-type { border-top: 1px solid #E5E2D8; }
.home-faq__item summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 16px 40px 16px 0; font-size: 16px; font-weight: 700; color: #3A3833;
}
.home-faq__item summary::-webkit-details-marker { display: none; }
.home-faq__item summary::after {
  content: ""; position: absolute; right: 8px; top: 50%;
  width: 9px; height: 9px; margin-top: -7px;
  border-right: 2px solid #2E9E77; border-bottom: 2px solid #2E9E77;
  transform: rotate(45deg); transition: transform .15s;
}
.home-faq__item[open] summary::after { transform: rotate(225deg); margin-top: -2px; }
.home-faq__item summary:focus-visible { outline: 2px solid #2E9E77; outline-offset: 2px; border-radius: 4px; }
.home-faq__item p { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: #4A4740; max-width: 68ch; }

@media (max-width: 1100px) {
  .home-facts { margin-left: 40px; margin-right: 40px; }
}

@media (max-width: 900px) {
  .home-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
  .home-steps { padding: 16px 20px 36px; }
  .home-facts { margin-left: 20px; margin-right: 20px; }
  .home-steps__list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .home-step { padding: 20px; display: grid; grid-template-columns: 38px 1fr; column-gap: 14px; }
  .home-step::before { grid-row: span 2; margin-bottom: 0; }
}

@media (max-width: 480px) {
  .home-steps { padding-left: 16px; padding-right: 16px; }
  .home-facts { grid-template-columns: minmax(0, 1fr); margin-left: 16px; margin-right: 16px; padding: 18px; }
  .home-faq { padding: 0 16px 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-faq__item summary::after { transition: none; }
}

/* ---------- Развилка: рассказ о направлении ---------- */

.fork-about {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px 48px;
  /* Вровень с карточками выбора над ним: у них .choice-grid 900px. */
  max-width: 900px; margin: 56px auto 24px; padding: 32px 36px;
  background: #FFFDF8; border: 1px solid #E5E2D8; border-radius: 16px;
}
.fork-about h2 {
  font-size: clamp(22px, 4.6vw, 28px); font-weight: 800; letter-spacing: -.5px;
  color: #3A3833; margin: 0 0 14px; text-wrap: balance;
}
.fork-about__text p { font-size: 16px; line-height: 1.65; color: #4A4740; margin: 0 0 12px; max-width: 62ch; }
.fork-about__text p:last-child { margin-bottom: 0; }
.fork-about__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; align-content: start; }

@media (max-width: 780px) {
  .fork-about { grid-template-columns: minmax(0, 1fr); margin-top: 36px; padding: 24px 20px; }
}

/* Одна карточка (только конструктор) — и рассказ под ней той же ширины,
   в одну колонку: сначала текст, под ним условия. */
.choice-grid--single ~ .fork-about { max-width: 440px; grid-template-columns: minmax(0, 1fr); padding: 28px 30px; }

/* ---------- WhatsApp под логотипом ---------- */

/* Номер — по центру под названием, как подпись к логотипу. */
.brand { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.whatsapp-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; line-height: 1; color: #128C4A;
  text-decoration: none; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.whatsapp-link .ps-icon { width: 16px; height: 16px; color: #25D366; }
.whatsapp-link:hover { color: #0B6B37; }
.whatsapp-link:hover span { text-decoration: underline; }
.whatsapp-link:focus-visible { outline: 2px solid #25D366; outline-offset: 3px; border-radius: 4px; }

/* ---------- Бесплатная доставка от 100 € ---------- */

/* Над корзиной и кассой, рядом со строкой срока — в том же стиле. */
.free-shipping {
  margin: 0 0 12px;
  padding: 12px 16px 14px;
  background: #FFFDF8;
  border: 1px solid #E5E2D8;
  border-radius: 10px;
}
.free-shipping[hidden] { display: none; }
p.free-shipping__text {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0; max-width: none;
  font-size: 14px; line-height: 1.45; color: #3A3833;
}
.free-shipping__icon { flex: none; margin-top: 1px; color: #2E9E77; }
.free-shipping__bar {
  display: block; height: 6px; margin: 10px 0 0 26px;
  background: #EEEAE0; border-radius: 3px; overflow: hidden;
}
.free-shipping__bar span {
  display: block; height: 100%; background: #2E9E77; border-radius: 3px;
  transition: width 240ms ease;
}
.free-shipping.is-free { border-color: #BFE3D3; background: #F3FBF7; }
.free-shipping.is-free .free-shipping__bar { display: none; }
.free-shipping.is-free p.free-shipping__text { font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .free-shipping__bar span { transition: none; }
}

/* ---------- Страницы конструкторов шире ---------- */

/* Колонка текста 1000px зажимала конструктор: холст выходил меньше
   предельных 800px, а панель настроек тесной. */
.page-designer .page-body { max-width: 1320px; }