/*
Theme Name: Переплёт СПб
Theme URI: https://переплет-спб.рф
Author: Салон Полиграфических Услуг
Description: Блочная тема для каталога переплётной мастерской. Витрина без корзины: вместо покупки — заявка на тираж.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pereplet
Tags: block-theme, full-site-editing, woocommerce
*/

/* ------------------------------------------------------------------
   Основное живёт в theme.json. Здесь только то, что через него не выразить.
   ------------------------------------------------------------------ */

/* Корешок — фирменный элемент. Вертикальная латунная полоса слева,
   как у книги на полке. Класс вешается на группу блоков.

   Правая половина отступа обязательна. Группа с этим классом получает от
   WordPress ещё и has-global-padding, а сброс вложенных полей обнуляет их
   с обеих сторон; если задать только padding-left, слева выходит до
   2.5rem, справа ноль — и вся колонка уезжает вправо. */
.pereplet-spine {
  position: relative;
  padding-left: clamp(1.25rem, 4vw, 2.5rem);
  padding-right: clamp(1.25rem, 4vw, 2.5rem);
}
.pereplet-spine::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  bottom: 0.35em;
  width: 3px;
  background: var(--wp--preset--color--brass);
}

/* Надзаголовок: мелкая разрядка, как штамп на бланке */
.pereplet-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.75rem;
  color: var(--wp--preset--color--brass);
}

/* ==================================================================
   Главная страница. Перенос согласованного прототипа.

   В прототипе цвета и размеры стояли числами; здесь всё переведено на
   пресеты theme.json. Приглушённый серый текста и полупрозрачные оттенки
   в палитре отсутствуют, поэтому выводятся из неё через color-mix —
   так на странице не остаётся ни одного отдельного hex.
   ================================================================== */

:root {
  /* Серый для пояснительного текста: чернильный, разбавленный бумагой. */
  --pereplet-muted: color-mix(in srgb, var(--wp--preset--color--ink) 62%, var(--wp--preset--color--paper));
  /* Линия и подложка на тёмном фоне. */
  --pereplet-on-dark-rule: color-mix(in srgb, var(--wp--preset--color--paper) 20%, transparent);
  --pereplet-on-dark-text: color-mix(in srgb, var(--wp--preset--color--paper) 75%, transparent);
}

.pereplet-muted {
  color: var(--pereplet-muted);
}

/* Секция: вертикальный ритм всей страницы. */
.pereplet-section {
  padding-top: var(--wp--preset--spacing--60);
  padding-bottom: var(--wp--preset--spacing--60);
}

/* Шапка секции.

   Сам блок остаётся обычным потомком контейнера: раскладка constrained
   центрирует его по колонке 1200px, то есть он встаёт на одну вертикаль
   с сеткой под ним. Ограничение в 60ch навешено на текст внутри, а не на
   блок — иначе на широком экране заголовок уезжал бы к краю поля, пока
   сетка стоит в центрированной колонке. Группа потоковая, поэтому текст
   и так начинается слева, без перебивания !important.
   Правило одно на все секции сразу. */
.pereplet-sec-head {
  margin-bottom: var(--wp--preset--spacing--50);
}
.pereplet-sec-head > * {
  max-width: 60ch;
  margin-left: 0;
  margin-right: auto;
}
.pereplet-sec-head h2 {
  margin-bottom: 0.7rem;
}
.pereplet-sec-head p {
  color: var(--pereplet-muted);
  margin: 0;
}

/* ---- первый экран ---- */

/* Две половины во всю ширину: слева текст на чернильном фоне, справа фото
   до самого края экрана. Левое поле совпадает с колонкой 1200px, поэтому
   текст стоит на одной вертикали с секциями ниже. */
.pereplet-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--paper);
  min-height: 560px;
}
.pereplet-hero__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50)
           var(--wp--preset--spacing--60)
           max(var(--wp--preset--spacing--40),
               calc((100vw - var(--wp--style--global--wide-size)) / 2 + var(--wp--preset--spacing--40)));
}
.pereplet-hero__text > * {
  max-width: 34rem;
}
.pereplet-hero h1 {
  font-size: clamp(2rem, 3.4vw, 3rem);
  color: var(--wp--preset--color--white);
  margin: 0 0 1.2rem;
}
.pereplet-hero .pereplet-eyebrow {
  margin-bottom: 1.2rem;
}
.pereplet-hero p {
  opacity: 0.85;
  max-width: 46ch;
  margin: 0 0 var(--wp--preset--spacing--40);
}
.pereplet-hero__img {
  margin: 0;
  height: 100%;
}
.pereplet-hero__img img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  display: block;
}

/* Светлая кнопка первого экрана и обводка по бумаге. */
.pereplet-btn--brass .wp-block-button__link {
  background-color: var(--wp--preset--color--brass);
  border-color: var(--wp--preset--color--brass);
  color: var(--wp--preset--color--ink-deep);
}
.pereplet-btn--brass .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--bordeaux);
  border-color: var(--wp--preset--color--bordeaux);
  color: var(--wp--preset--color--white);
}
.pereplet-hero .is-style-outline .wp-block-button__link {
  color: var(--wp--preset--color--paper);
  border-color: color-mix(in srgb, var(--wp--preset--color--paper) 50%, transparent);
}
.pereplet-hero .is-style-outline .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--paper);
  color: var(--wp--preset--color--ink);
}

/* ---- полоса доверия ---- */
.pereplet-trust {
  border-bottom: 1px solid var(--wp--preset--color--rule);
  padding-top: var(--wp--preset--spacing--40);
  padding-bottom: var(--wp--preset--spacing--40);
}
.pereplet-trust__in {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--wp--preset--spacing--50);
  align-items: center;
}
.pereplet-trust h2 {
  font-size: 1.35rem;
  line-height: 1.25;
  margin: 0;
}
.pereplet-stat p {
  margin: 0;
}
.pereplet-stat__n {
  font-family: var(--wp--preset--font-family--display);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--wp--preset--color--ink);
}
.pereplet-stat__t {
  font-size: 0.85rem;
  color: var(--pereplet-muted);
  margin-top: 0.35rem !important;
}
.pereplet-stat__l a {
  font-size: 0.85rem;
  color: var(--wp--preset--color--brass);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.pereplet-stat__l a:hover {
  color: var(--wp--preset--color--ink);
}

/* ---- плитки разделов ---- */
.pereplet-cats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wp--preset--spacing--40);
}
.pereplet-cat {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--rule);
  transition: box-shadow 0.2s;
}
.pereplet-cat:hover {
  box-shadow: 0 6px 24px color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent);
}

/* Пропорция задана коробкой, а не файлом: снимки у разделов разные. */
.pereplet-cat__img {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--wp--preset--color--paper-deep);
}
.pereplet-cat__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pereplet-cat__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--wp--preset--color--ink);
  opacity: 0;
  transition: opacity 0.3s;
}
.pereplet-cat:hover .pereplet-cat__img::after {
  opacity: 0.08;
}

.pereplet-cat__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}
.pereplet-cat__name {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.2rem;
  line-height: 1.15;
  margin-bottom: 0.5rem;
}
.pereplet-cat__list {
  display: block;
  font-size: 0.9rem;
  color: var(--pereplet-muted);
  margin-bottom: var(--wp--preset--spacing--30);
}
.pereplet-cat__list span {
  display: block;
  position: relative;
  padding-left: 1rem;
  margin-bottom: 0.2rem;
}
.pereplet-cat__list span::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--wp--preset--color--brass);
}
.pereplet-cat__price {
  display: block;
  margin-top: auto;
  padding-top: 0.8rem;
  border-top: 1px solid var(--wp--preset--color--rule);
  font-size: 0.95rem;
}
.pereplet-cat__price b {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.3rem;
  font-weight: 400;
}
.pereplet-cat__price > span {
  color: var(--pereplet-muted);
  font-size: 0.85rem;
}

/* ---- производство ---- */
.pereplet-prod {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wp--preset--spacing--50);
  align-items: center;
}
.pereplet-prod__text h2 {
  margin: 0 0 0.9rem;
}
.pereplet-prod__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wp--preset--spacing--30);
}
.pereplet-prod__grid figure {
  margin: 0;
}
.pereplet-prod__grid figure:first-child {
  grid-column: 1 / -1;
}
.pereplet-prod__grid img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pereplet-prod__grid figure:first-child img {
  aspect-ratio: 16 / 9;
}
.pereplet-prod__grid figure:not(:first-child) img {
  aspect-ratio: 1;
}

.pereplet-facts {
  margin-top: var(--wp--preset--spacing--40);
}
.pereplet-facts p {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--30);
  padding: var(--wp--preset--spacing--30) 0;
  border-top: 1px solid var(--wp--preset--color--rule);
  margin: 0;
}
.pereplet-facts b {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.6rem;
  font-weight: 400;
  min-width: 4.5rem;
  color: var(--wp--preset--color--brass);
}
.pereplet-facts span {
  font-size: 0.95rem;
  color: var(--pereplet-muted);
}

/* ---- тёмный блок с тиражами ---- */
.pereplet-dark h2 {
  color: var(--wp--preset--color--white);
}
.pereplet-dark .pereplet-sec-head p {
  color: var(--pereplet-on-dark-text);
}
.pereplet-tiers {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--pereplet-on-dark-rule);
  border: 1px solid var(--pereplet-on-dark-rule);
}
.pereplet-tier {
  background: var(--wp--preset--color--ink);
  padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
  text-align: center;
  margin: 0;
  transition: background 0.25s;
}
.pereplet-tier:hover {
  background: color-mix(in srgb, var(--wp--preset--color--ink) 88%, var(--wp--preset--color--paper));
}
.pereplet-tier i {
  display: block;
  font-style: normal;
  font-size: 0.8rem;
  color: var(--wp--preset--color--brass);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0.3rem 0 0.6rem;
}
.pereplet-tier b {
  display: block;
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--wp--preset--color--white);
}
.pereplet-tier span {
  font-size: 0.85rem;
  opacity: 0.7;
}
.pereplet-note {
  margin-top: var(--wp--preset--spacing--30);
  font-size: 0.9rem;
  opacity: 0.7;
}

/* ---- шаги ---- */
.pereplet-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wp--preset--spacing--50);
}
.pereplet-step__n {
  font-family: var(--wp--preset--font-family--display);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--wp--preset--color--brass);
  margin: 0 0 0.8rem;
}
.pereplet-step h3 {
  font-size: 1.25rem;
  margin: 0 0 0.6rem;
}
.pereplet-step p.pereplet-muted {
  font-size: 0.95rem;
  margin: 0;
}

/* ---- частые вопросы ---- */
.pereplet-faq {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}
.pereplet-faq h3 {
  font-size: 1.1rem;
  margin: 0 0 0.5rem;
}
.pereplet-faq p {
  font-size: 0.95rem;
  margin: 0;
}

/* ---- финал ---- */
.pereplet-final__in {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--wp--preset--spacing--50);
  align-items: center;
}
.pereplet-final h2 {
  margin: 0 0 0.8rem;
}
.pereplet-final__lead {
  max-width: 44ch;
  margin: 0 0 var(--wp--preset--spacing--40);
}
.pereplet-contacts p {
  display: flex;
  gap: var(--wp--preset--spacing--30);
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--wp--preset--color--rule);
  margin: 0;
  font-size: 0.98rem;
}
.pereplet-contacts b {
  min-width: 7rem;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brass);
  padding-top: 0.2rem;
}
.pereplet-contacts a {
  text-decoration: none;
}

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

/* Класс seen ставит assets/rise.js. Скрипт же показывает всё сразу,
   если человек попросил меньше движения, — правило ниже страхует на
   случай, если скрипт не выполнился вовсе. */
.rise {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.rise.seen {
  opacity: 1;
  transform: none;
}
.rise:nth-child(2) { transition-delay: 0.08s; }
.rise:nth-child(3) { transition-delay: 0.16s; }
.rise:nth-child(4) { transition-delay: 0.24s; }
.rise:nth-child(5) { transition-delay: 0.32s; }
.rise:nth-child(6) { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  .rise {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- перестроение под узкие экраны ---- */
@media (max-width: 900px) {
  .pereplet-hero,
  .pereplet-prod,
  .pereplet-final__in {
    grid-template-columns: 1fr;
  }
  .pereplet-hero__text {
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
  }
  .pereplet-trust__in,
  .pereplet-cats,
  .pereplet-steps,
  .pereplet-faq {
    grid-template-columns: 1fr 1fr;
  }
  .pereplet-tiers {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 620px) {
  .pereplet-trust__in,
  .pereplet-cats,
  .pereplet-steps,
  .pereplet-faq,
  .pereplet-tiers,
  .pereplet-prod__grid {
    grid-template-columns: 1fr;
  }
  .pereplet-section {
    padding-top: var(--wp--preset--spacing--50);
    padding-bottom: var(--wp--preset--spacing--50);
  }
}

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

/* Одна строка: название слева, меню и кнопка справа. */
.pereplet-header__bar {
  gap: var(--wp--preset--spacing--30);
}
.pereplet-header__nav {
  flex-wrap: nowrap;
}

/* Название компании и подпись под ним — как в прототипе: мелкая строка
   вразрядку, латунью, набранная текстовым шрифтом, а не заголовочным. */
.pereplet-logo .wp-block-site-title {
  margin: 0;
}
.pereplet-logo__sub {
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brass);
  line-height: 1.3;
  margin: 0.15rem 0 0;
}

/* Телефон в шапке, слева от кнопки заявки. */
.pereplet-header__phone {
  margin: 0;
  white-space: nowrap;
}
.pereplet-header__phone a {
  text-decoration: none;
}

/* Ниже 900px в строку помещается уже не всё — разрешаем перенос,
   чтобы телефон не выдавливал кнопку за край. Прятать его не стали:
   на телефоне это самая нужная ссылка. */
@media (max-width: 900px) {
  .pereplet-header__nav {
    flex-wrap: wrap;
  }
}

/* На телефоне название встаёт сверху, меню и кнопка — под ним. */
@media (max-width: 781px) {
  .pereplet-header__bar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--wp--preset--spacing--20);
  }
  .pereplet-header__nav {
    width: 100%;
    justify-content: flex-start;
  }
}

/* --- Каталог ---------------------------------------------------- */

/* Пропорция 3:4 у миниатюр: карточки в ряду выравниваются независимо
   от того, какого размера пришло фото. */
.woocommerce ul.products li.product img,
.wc-block-product-template img,
.wp-block-woocommerce-product-image img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  width: 100%;
  height: auto;
}

/* Карточка товара тянется на всю высоту ячейки, а кнопка прижимается
   к низу. Из-за этого названия категорий в одну и две строки больше
   не разъезжают кнопки по разным уровням. */
.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
}
.woocommerce ul.products li.product > :last-child {
  margin-top: auto;
}

/* Адаптивная сетка товаров в блочном каталоге.
   Телефон — один столбец, планшет — два, десктоп — четыре.
   Селектор бьёт по .wc-block-product-template: именно этот класс
   отдаёт woocommerce/product-template, а не .wp-block-*. */
/* Двойной класс — чтобы перебить собственную раскладку WooCommerce,
   которая приходит на .wc-block-product-template__responsive. */
ul.wc-block-product-template,
ul.wc-block-product-template.wc-block-product-template__responsive {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--wp--preset--spacing--40);
  row-gap: var(--wp--preset--spacing--60);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 600px) {
  ul.wc-block-product-template,
  ul.wc-block-product-template.wc-block-product-template__responsive {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  ul.wc-block-product-template,
  ul.wc-block-product-template.wc-block-product-template__responsive {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Ячейка сетки: гасим инлайновую ширину, которую флекс-раскладка
   product-collection проставляет сама, иначе grid ломается. */
.wc-block-product-template > li.product,
.wc-block-product-template > li {
  width: auto !important;
  max-width: none !important;
  margin: 0;
  display: flex;
  flex-direction: column;
}

/* Карточка: название кликабельно, кнопки в ней нет.
   Тянется на всю высоту ячейки — иначе цена встаёт сразу под названием
   и гуляет по вертикали вслед за его длиной. */
.pereplet-card {
  height: 100%;
  flex: 1;
}

/* Цена прижата к низу: во всех карточках ряда она встаёт на одной высоте,
   независимо от того, в одну строку название или в три. */
.pereplet-card > .wp-block-woocommerce-product-price {
  margin-top: auto;
}
.pereplet-card .wp-block-post-title a,
.pereplet-card .wc-block-components-product-title a {
  text-decoration: none;
}
.pereplet-card .wp-block-post-title a:hover,
.pereplet-card .wc-block-components-product-title a:hover {
  color: var(--wp--preset--color--brass);
}

/* Подпись к цене приходит из functions.php одним span-ом.
   Здесь только вид: мельче самой цены и приглушённо. */
.pereplet-price-note {
  font-size: 0.8em;
  color: var(--wp--preset--color--rule);
}

/* В каталоге подпись короткая — держим её в одной строке с ценой,
   чтобы низ карточек оставался ровным. На странице товара подпись
   длиннее и переносится свободно. */
.pereplet-card .pereplet-price-note {
  white-space: nowrap;
}

/* Описание категории — колонка для чтения, не во всю ширину. */
.pereplet-archive-intro {
  margin-bottom: var(--wp--preset--spacing--50);
}

/* --- Витрина разделов (/shop/) ------------------------------------ */

/* Плитка раздела построена по образцу карточки товара (.pereplet-card):
   фото 3:4, под ним название, под ним подпись. Каталог разделов и каталог
   товаров должны читаться как одна система.

   Своя раскладка блока рассчитана на список со значком слева:
     ...list-item__image{display:inline-block;max-width:50px;margin:0 .5em 0 -60px}
     ...list-item{margin:4px 0 4px 60px}
   Поэтому мало объявить свою сетку — эти свойства нужно снять поимённо,
   иначе картинка остаётся в коробке 50px, а название висит сбоку.
   Селекторы утяжелены классом --has-images, чтобы не зависеть от того,
   в каком порядке подключились стили. */

.pereplet-catalog .wc-block-product-categories-list {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--wp--preset--spacing--40);
  row-gap: var(--wp--preset--spacing--50);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 600px) {
  .pereplet-catalog .wc-block-product-categories-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .pereplet-catalog .wc-block-product-categories-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Ячейка сетки. Отступ слева в 60px — из раскладки «значок слева», снимаем. */
.pereplet-catalog .wc-block-product-categories-list--has-images .wc-block-product-categories-list-item,
.pereplet-catalog .wc-block-product-categories-list-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  clear: none;
  margin: 0;
  padding: 0;
}

/* Ссылка блока оборачивает картинку и название; счётчик лежит рядом с ней.
   Растягиваем ссылку псевдоэлементом на всю ячейку — кликабельна вся плитка,
   включая область счётчика. */
.pereplet-catalog .wc-block-product-categories-list-item > a {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  text-decoration: none;
  color: inherit;
}
.pereplet-catalog .wc-block-product-categories-list-item > a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Коробка изображения: во всю ширину плитки, строго 3:4. Заливка под
   картинкой — запасной вариант: раздел без своего фото не проседает,
   и высота плиток остаётся одинаковой. */
.pereplet-catalog .wc-block-product-categories-list--has-images .wc-block-product-categories-list-item__image,
.pereplet-catalog .wc-block-product-categories-list-item__image {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  aspect-ratio: 3 / 4;
  background: var(--wp--preset--color--paper-deep);
  overflow: hidden;
}
.pereplet-catalog .wc-block-product-categories-list--has-images .wc-block-product-categories-list-item__image img,
.pereplet-catalog .wc-block-product-categories-list-item__image img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: cover;
  transition: filter 0.2s ease;
}

/* Наведение — лёгкое затемнение фото. */
.pereplet-catalog .wc-block-product-categories-list-item:hover .wc-block-product-categories-list-item__image img {
  filter: brightness(0.9);
}

/* Раздел вовсе без блока изображения: держим ту же пропорцию. */
.pereplet-catalog .wc-block-product-categories-list-item > a:not(:has(.wc-block-product-categories-list-item__image))::before {
  content: "";
  display: block;
  aspect-ratio: 3 / 4;
  background: var(--wp--preset--color--paper-deep);
}

.pereplet-catalog .wc-block-product-categories-list-item__name {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.15rem;
  line-height: 1.25;
}
.pereplet-catalog .wc-block-product-categories-list-item:hover .wc-block-product-categories-list-item__name {
  color: var(--wp--preset--color--brass);
}

/* Счётчик под названием. Блок печатает цифру в скобках, а рядом кладёт
   тот же счёт словами — «4 товара», уже с правильным склонением. Скобки
   гасим, цифру прячем, показываем словесный вариант: он информативнее,
   а склонение считает WooCommerce. */
.pereplet-catalog .wc-block-product-categories-list-item-count {
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--rule);
}
.pereplet-catalog .wc-block-product-categories-list-item-count::before,
.pereplet-catalog .wc-block-product-categories-list-item-count::after {
  content: none;
}
.pereplet-catalog .wc-block-product-categories-list-item-count > [aria-hidden="true"] {
  display: none;
}
.pereplet-catalog .wc-block-product-categories-list-item-count .screen-reader-text {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  word-wrap: normal;
}

/* Единый призыв вместо «В корзину» / «Выберите параметры» */
.woocommerce a.button,
.woocommerce button.button,
.wp-block-button__link {
  border-radius: 2px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Подпись «за 1 шт.» раньше добавлялась здесь через ::after. Убрано:
   теперь её ставит фильтр woocommerce_get_price_html в functions.php,
   иначе на странице товара подпись печаталась дважды. */

/* --- Галерея товара ----------------------------------------------- */

/* Фото не должно съедать первый экран: цена за тираж обязана быть видна
   без прокрутки. Ограничиваем по высоте и вписываем снимок целиком. */
/* Высота области фото вынесена в переменную: от неё же считается
   вертикаль стрелок, иначе они разъезжаются с центром снимка. */
.woocommerce-product-gallery {
  --pereplet-gallery-h: 70vh;
  position: relative;
}
@media (max-width: 781px) {
  .woocommerce-product-gallery {
    --pereplet-gallery-h: 55vh;
  }
}
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery .woocommerce-product-gallery__image {
  max-height: var(--pereplet-gallery-h);
}
.woocommerce-product-gallery .woocommerce-product-gallery__image img {
  height: var(--pereplet-gallery-h);
  width: 100%;
  max-width: 100%;
  object-fit: contain;
}

/* Стрелки перелистывания. Сам вывод включает фильтр
   woocommerce_single_product_carousel_options в functions.php,
   здесь только вид: FlexSlider своих стилей под тему не даёт. */
.woocommerce-product-gallery .flex-direction-nav {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* FlexSlider вешает стрелки на всю галерею — вместе с полосой миниатюр.
   Поэтому top: 50% уводил их ниже снимка; считаем от высоты области фото. */
.woocommerce-product-gallery .flex-direction-nav a {
  position: absolute;
  top: calc(var(--pereplet-gallery-h) / 2);
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--wp--preset--color--rule);
  color: var(--wp--preset--color--ink);
  text-decoration: none;
  font-size: 0;
  /* Подложка полупрозрачная, чтобы стрелка читалась на любом фото.
     Задаётся rgba напрямую: палитра темы хранит цвета без альфы. */
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(2px);
}
.woocommerce-product-gallery .flex-direction-nav a:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--wp--preset--color--brass);
  color: var(--wp--preset--color--brass);
}
.woocommerce-product-gallery .flex-direction-nav .flex-prev {
  left: 0.5rem;
}
.woocommerce-product-gallery .flex-direction-nav .flex-next {
  right: 0.5rem;
}
.woocommerce-product-gallery .flex-direction-nav a::before {
  font-size: 1.4rem;
  line-height: 1;
}
.woocommerce-product-gallery .flex-direction-nav .flex-prev::before {
  content: "\2039";
}
.woocommerce-product-gallery .flex-direction-nav .flex-next::before {
  content: "\203A";
}

/* --- Выбор варианта ----------------------------------------------- */

/* Метка и поле выбора на одной линии: по умолчанию подпись садится
   на базовую линию строки и оказывается ниже селектора. */
.woocommerce div.product form.cart table.variations th.label,
.woocommerce div.product form.cart table.variations td.value {
  vertical-align: middle;
}
.woocommerce div.product form.cart table.variations th.label label {
  margin: 0;
}

/* Пустота между последним селектором и заголовком таблицы тиражей.
   Её набирают поля таблицы вариантов, обёртка выбранного варианта и
   ссылка «Очистить», которую WooCommerce прячет через visibility —
   место она при этом занимает. */
.woocommerce div.product form.cart table.variations {
  margin-bottom: 0;
}
.woocommerce div.product form.cart table.variations tr:last-child th,
.woocommerce div.product form.cart table.variations tr:last-child td {
  padding-bottom: 0;
}
.woocommerce div.product form.cart .single_variation_wrap {
  margin: 0;
  padding: 0;
}
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
  margin: 0;
}
.woocommerce div.product form.cart a.reset_variations[style*="hidden"] {
  display: none;
}

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

/* Заголовки панелей WooCommerce отдаёт голым <h2> без классов, размер им
   задаёт своё правило плагина. Приводим их и наш заголовок раздела к
   одному значению темы — тогда «такой же» это гарантия, а не совпадение. */
.woocommerce div.product .woocommerce-tabs .panel > h2:first-child,
.pereplet-section-title,
/* WooCommerce глушит заголовки внутри коллекции правилом
   .wp-block-woocommerce-product-collection h2.wp-block-heading{font-size:small}
   с весом (0,2,1). Одного класса не хватало, поэтому selector утяжелён. */
.wp-block-woocommerce-product-collection h2.wp-block-heading.pereplet-section-title {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--large);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* Провал между галереей и «Описанием»: его набирают нижнее поле колонок
   и собственный верхний отступ .woocommerce-tabs. Убираем примерно половину. */
.pereplet-product-top {
  margin-bottom: var(--wp--preset--spacing--30);
}
.wp-block-woocommerce-product-details {
  margin-top: var(--wp--preset--spacing--30);
}
.woocommerce div.product .woocommerce-tabs {
  padding-top: 0;
}

/* --- Таблица тиражей --------------------------------------------- */

/* Классы плагина Advanced Dynamic Pricing. Раньше здесь стояли селекторы
   .wccs-bulk-table / .wccs-table — от другого плагина, они не совпадали
   ни с чем на странице, и таблица шла без стилей темы. */

/* Селекторы вариантов, таблица и кнопка должны читаться как один блок.
   Пустое место между ними давали поля формы и заготовка под вариант,
   которую WooCommerce держит скрытой до выбора. */
.woocommerce div.product form.cart {
  margin-bottom: 0;
}
.woocommerce div.product form.cart .single_variation_wrap {
  margin: 0;
}
.woocommerce-variation.single_variation:empty {
  display: none;
}
.wdp_bulk_table_content .clear {
  display: none;
}

/* Обёртка таблицы — span, поэтому без display:block поля не работают. */
.wdp_bulk_table_content {
  display: block;
  margin-top: var(--wp--preset--spacing--30);
}
.wdp_bulk_table_content .bulk_table {
  margin: 0;
}

/* Подпись плагина («Массовая сделка») скрыта, свою печатает functions.php. */
.wdp_pricing_table_caption {
  display: none;
}
.pereplet-bulk-title {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.05rem;
  margin: 0 0 0.6rem;
}

table.wdp_pricing_table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.95rem;
}
table.wdp_pricing_table th,
table.wdp_pricing_table td {
  border: 1px solid var(--wp--preset--color--rule);
  padding: 0.5rem 0.75rem;
  text-align: left;
}

/* Шапку таблицы плагин красит своим инлайновым стилем с !important,
   перебить его можно только тем же. */
table.wdp_pricing_table thead td,
table.wdp_pricing_table th {
  background-color: var(--wp--preset--color--paper-deep) !important;
  color: var(--wp--preset--color--ink) !important;
  font-weight: 600;
}

/* --- Форма заявки (Contact Form 7) -------------------------------- */

.pereplet-form {
  max-width: 560px;
}
.pereplet-form__row {
  margin: 0 0 var(--wp--preset--spacing--30);
}
.pereplet-form__label {
  display: block;
  font-size: var(--wp--preset--font-size--small);
  margin-bottom: 0.35rem;
}
.pereplet-form__label abbr {
  color: var(--wp--preset--color--bordeaux);
  text-decoration: none;
  border: 0;
}

.pereplet-form input[type="text"],
.pereplet-form input[type="tel"],
.pereplet-form input[type="email"],
.pereplet-form textarea {
  width: 100%;
  padding: 0.7em 0.85em;
  font-family: inherit;
  font-size: var(--wp--preset--font-size--medium);
  line-height: 1.5;
  color: var(--wp--preset--color--ink);
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--rule);
  border-radius: 2px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.pereplet-form textarea {
  resize: vertical;
  min-height: 8rem;
}
.pereplet-form input:focus,
.pereplet-form textarea:focus {
  outline: none;
  border-color: var(--wp--preset--color--brass);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--wp--preset--color--brass) 25%, transparent);
}

/* Согласие: чекбокс слева, текст в одну колонку рядом. */
.pereplet-form__consent {
  margin: var(--wp--preset--spacing--30) 0;
  font-size: var(--wp--preset--font-size--small);
  color: var(--pereplet-muted);
}
.pereplet-form__consent .wpcf7-list-item {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}
.pereplet-form__consent input[type="checkbox"] {
  margin-top: 0.25em;
  flex: 0 0 auto;
  accent-color: var(--wp--preset--color--brass);
}
.pereplet-form__consent a {
  color: inherit;
}

/* Кнопка — та же, что и везде на сайте. */
.pereplet-form .wpcf7-submit {
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--paper);
  border: 1px solid var(--wp--preset--color--ink);
  border-radius: 2px;
  padding: 0.85em 1.6em;
  font-family: inherit;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.pereplet-form .wpcf7-submit:hover {
  background: var(--wp--preset--color--bordeaux);
  border-color: var(--wp--preset--color--bordeaux);
  color: var(--wp--preset--color--white);
}
.pereplet-form .wpcf7-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Поле товара: заполняется ссылкой с карточки, человеку показывать нечего. */
.pereplet-form__hidden {
  display: none;
}

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

/* Сообщения CF7 под тему. */
.pereplet-form .wpcf7-not-valid-tip {
  color: var(--wp--preset--color--bordeaux);
  font-size: var(--wp--preset--font-size--small);
  margin-top: 0.3rem;
}
.pereplet-form input.wpcf7-not-valid,
.pereplet-form textarea.wpcf7-not-valid {
  border-color: var(--wp--preset--color--bordeaux);
}
.wpcf7 form .wpcf7-response-output {
  margin: var(--wp--preset--spacing--30) 0 0;
  padding: 0.8em 1em;
  border-width: 1px;
  border-radius: 2px;
  font-size: var(--wp--preset--font-size--small);
}

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

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--wp--preset--color--brass);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}