/* ============================================
   1. ПЕРЕМЕННЫЕ — вся палитра и размеры здесь
   ============================================ */
:root {
  /* Цвета */
  --c-lilac:        #B8A7C7;   /* шапка, акценты */
  --c-lilac-lt:     #E9DDF0;
  --c-lilac-bg:     #F1EAF7;
  --c-bg:           #FDFBF7;
  --c-card:         #9B5B6B;   /* основной розово-бордовый */
  --c-card-hi:      #AD6F7F;
  --c-card-lo:      #854A59;
  --c-cream:        #FFF9EE;
  --c-cream-2:      #FBEFF4;
  --c-cream-3:      #F6E5EE;
  --c-rose-bg:      #F5E8EE;
  --c-blush:        #F8F0F1;
  --c-sand:         #FBF4EC;
  --c-ink:          #4F4360;
  --c-ink-deep:     #2F2A38;
  --c-soft:         #7A6D86;
  --c-white:        #FFFFFF;
  --c-line:         #E8DDE9;
  --c-line-soft:    #F0E8F0;
  --c-border:       rgba(184, 167, 199, .4);
  --c-card-line:    rgba(155, 91, 107, .16);

  /* Шрифты */
  --f-head: "Playfair Display", Georgia, serif;
  --f-body: "Nunito", "Segoe UI", Roboto, system-ui, sans-serif;

  /* Размеры */
  --w-max:        1400px;
  --radius:       28px;     /* большие блоки */
  --radius-card:  14px;     /* карточка товара */
  --radius-sm:    12px;
  --section-gap:  88px;

  /* Тени */
  --shadow-soft:       0 12px 32px -16px rgba(79, 67, 96, .22);
  --shadow-card:       0 6px 18px -10px rgba(79, 67, 96, .28);
  --shadow-card-hover: 0 16px 32px -14px rgba(79, 67, 96, .36);
  --shadow-btn:        0 8px 18px -10px rgba(90, 40, 55, .5);
  --shadow-btn-hover:  0 12px 24px -10px rgba(90, 40, 55, .55);

  /* Градиенты */
  --grad-btn:   linear-gradient(150deg, var(--c-card-hi), var(--c-card-lo));
  --grad-hero:
    radial-gradient(circle at 10% 10%, rgba(255, 255, 255, .75), transparent 35%),
    linear-gradient(135deg, var(--c-lilac-bg), var(--c-blush) 55%, var(--c-sand));
  --grad-final: linear-gradient(135deg, var(--c-lilac-lt), var(--c-rose-bg) 55%, var(--c-sand));

  /* Бантик (цвета в data-URI переменными не меняются — правятся здесь вручную) */
  --bow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 30'%3E%3Cpath d='M22 15 C14 2 2 2 2 12 C2 22 14 24 22 15 Z' fill='%23B8A7C7'/%3E%3Cpath d='M22 15 C30 2 42 2 42 12 C42 22 30 24 22 15 Z' fill='%23B8A7C7'/%3E%3Ccircle cx='22' cy='15' r='4.5' fill='%239C88B0'/%3E%3C/svg%3E");
}

/* ============================================
   2. БАЗА
   ============================================ */
body,
.wp-site-blocks {
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--f-body);
}

body { line-height: 1.75; }

h1, h2, h3, h4,
.wp-block-heading {
  font-family: var(--f-head);
  line-height: 1.25;
  color: var(--c-ink);
}

img { max-width: 100%; height: auto; }

::selection {
  background: var(--c-lilac-lt);
  color: var(--c-ink);
}

/* ============================================
   3. ДОСТУПНОСТЬ И АНИМАЦИИ
   ============================================ */
:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--c-card);
  outline-offset: 3px;
}

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

/* ============================================
   4. ШАПКА САЙТА
   ============================================ */
header.wp-block-template-part {
  background: var(--c-lilac);
  box-shadow: 0 2px 14px rgba(120, 100, 150, .14);
}
header.wp-block-template-part a {
  color: var(--c-ink);
  text-decoration: none;
  transition: opacity .2s ease;
}
header.wp-block-template-part a:hover { opacity: .75; }
header.wp-block-template-part .wp-block-site-title,
header.wp-block-template-part .wp-block-site-title a {
  font-family: var(--f-head);
  font-weight: 600;
}

/* ============================================
   5. СЕТКА ТОВАРОВ — одна на главной и в каталоге
   Число колонок считается по реальной ширине блока (до 4 штук,
   карточка не уже 210px), поэтому не ломается в узких контейнерах.
   ============================================ */
.woocommerce ul.products,
ul.wc-block-product-template {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(210px, calc((100% - 72px) / 4 - 1px)), 1fr));
  gap: 28px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  clear: both;               /* чтобы не наезжать на «Показано…» и сортировку */
}

/* clearfix WooCommerce ломает grid (лишние пустые ячейки) */
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none; }

@media (max-width: 520px) {
  .woocommerce ul.products,
  ul.wc-block-product-template {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 12px;
  }
}

/* ============================================
   6. КАРТОЧКА ТОВАРА
   Фото сверху, название, внизу полоса «цена | кнопка».
   Если карточка узкая (< 260px) — цена и кнопка встают друг под другом
   (это делает @container, а не ширина экрана).

   Классическая разметка WooCommerce:
     li.product
       a.woocommerce-LoopProduct-link  ← display: contents: дети становятся
         img                             ячейками сетки самого li
         h2.woocommerce-loop-product__title
         span.price
       a.button
   ============================================ */
body :is(.woocommerce ul.products li.product,
         ul.wc-block-product-template > li.wc-block-product) {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr auto auto;
  container: card / inline-size;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--c-white);
  border: 1px solid var(--c-card-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
body :is(.woocommerce ul.products li.product,
         ul.wc-block-product-template > li.wc-block-product):hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

/* Сброс ширины/float из woocommerce-layout.css (там селектор тяжелее — повторяем его) */
body .woocommerce ul.products[class*="columns-"] li.product {
  float: none;
  width: auto;
  max-width: none;
  margin: 0;
}

/* Ссылка-обёртка не создаёт свой блок */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: contents;
  color: inherit;
  text-decoration: none;
}

/* Фото — на всю ширину карточки */
body :is(.woocommerce ul.products li.product,
         ul.wc-block-product-template > li.wc-block-product)
  :is(img, .wc-block-components-product-image) {
  grid-column: 1 / -1;
  grid-row: 1;
  display: block;
  width: 100%;
  margin: 0;
}
body :is(.woocommerce ul.products li.product,
         ul.wc-block-product-template > li.wc-block-product) img {
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--c-cream-2);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Название */
body :is(.woocommerce ul.products li.product,
         ul.wc-block-product-template > li.wc-block-product)
  :is(.woocommerce-loop-product__title, .wp-block-post-title) {
  grid-column: 1 / -1;
  grid-row: 2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  align-self: center;
  min-height: calc(2 * 1.3em);
  margin: 0;
  padding: 18px 16px 16px;
  box-sizing: content-box;
  color: var(--c-ink);
  font-family: var(--f-head);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  overflow-wrap: anywhere;
}
.wp-block-post-title a { color: inherit; text-decoration: none; }

/* Звёздочки рейтинга в карточке не нужны */
.woocommerce ul.products li.product .star-rating { display: none; }

/* Цена — левая часть нижней полосы */
body :is(.woocommerce ul.products li.product,
         ul.wc-block-product-template > li.wc-block-product)
  :is(.price, .wc-block-components-product-price) {
  grid-column: 1;
  grid-row: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
  min-height: 56px;
  margin: 0;
  padding: 8px 16px;
  background: var(--c-cream-2);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: left;
}
/* Внутренние теги цены (Woo/тема любят задавать им свой размер) */
body .woocommerce ul.products li.product .price :is(.amount, bdi, .woocommerce-Price-amount, .woocommerce-Price-currencySymbol) {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}
body .woocommerce ul.products li.product .price del {
  color: var(--c-soft);
  font-size: .9rem;
  font-weight: 600;
  opacity: .8;
}
body .woocommerce ul.products li.product .price ins {
  color: var(--c-card-lo);
  text-decoration: none;
}

/* Кнопка — правая часть нижней полосы */
body :is(.woocommerce ul.products li.product,
         ul.wc-block-product-template > li.wc-block-product)
  :is(.button, .wp-block-button__link, .wc-block-components-product-button__button) {
  grid-column: 2;
  grid-row: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  margin: 0;
  padding: 10px 20px;
  background: var(--c-card);
  color: var(--c-cream);
  border: 0;
  border-radius: 0;
  font-family: var(--f-body);
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: none;
  box-shadow: none;
  transition: background .2s ease;
}
body :is(.woocommerce ul.products li.product,
         ul.wc-block-product-template > li.wc-block-product)
  :is(.button, .wp-block-button__link, .wc-block-components-product-button__button):hover {
  background: var(--c-card-lo);
  color: var(--c-cream);
}

/* «Просмотр корзины» после добавления — отдельной строкой под полосой */
body .woocommerce ul.products li.product a.added_to_cart {
  grid-column: 1 / -1;
  grid-row: 4;
  padding: 10px 16px;
  background: var(--c-white);
  color: var(--c-card-lo);
  font-size: .9rem;
  font-weight: 700;
  text-align: center;
  text-decoration: underline;
}

/* Метка «Распродажа» — работает везде, где есть карточка */
body .woocommerce ul.products li.product .onsale,
body ul.wc-block-product-template .wc-block-components-product-sale-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  right: auto;
  z-index: 2;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 6px 12px;
  background: var(--c-card);
  color: var(--c-cream);
  border: 0;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

/* На главной вместо «В корзину» — «Подробнее» (клик ведёт на товар) */
.home-new .woocommerce ul.products li.product .button,
.home-new .woocommerce ul.products li.product .added_to_cart {
  display: none;
}
.home-new .woocommerce ul.products li.product a.woocommerce-LoopProduct-link::after {
  content: "Подробнее";
  grid-column: 2;
  grid-row: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 10px 20px;
  background: var(--c-card);
  color: var(--c-cream);
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .2s ease;
}
.home-new .woocommerce ul.products li.product:hover a.woocommerce-LoopProduct-link::after {
  background: var(--c-card-lo);
}

/* Узкая карточка: цена и кнопка друг под другом, каждая на всю ширину */
@container card (max-width: 259px) {
  .woocommerce-loop-product__title,
  .wp-block-post-title {
    padding: 12px 10px 10px;
    font-size: 1rem;
  }
  .price,
  .wc-block-components-product-price {
    grid-column: 1 / -1;
    justify-content: center;
    min-height: 44px;
    padding: 6px 10px;
    font-size: 1.15rem;
    text-align: center;
  }
  .button,
  .wp-block-button__link,
  .wc-block-components-product-button__button,
  .woocommerce-LoopProduct-link::after {
    grid-column: 1 / -1;
    grid-row: 4;
    min-height: 46px;
    padding: 8px 10px;
  }
}