/* /shop/ — каталог магазина (FluentCart, Gutenberg-страница id=314). См. specs/shop.md. */

/* Сырой the_title() из дефолтного шаблона темы (voxel-child/templates/defaults/single.php) — у Hero ниже свой H1 */
body.page-id-314 .vg-page-title {
  display: none;
}

/* Фиксированный фирменный меш-градиент страницы — тот же приём, что на /blog/{cat}/{slug}/ (post-single.css),
   печатается в wp_body_open через functions.php (условие is_page('shop')). Хедер сайта уже полупрозрачный
   (rgba(255,248,223,.75)+blur), поэтому автоматически показывает смягчённую версию этого градиента. */
.vg-hero-bg {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: -20;
  overflow: hidden;
  background: var(--vg-bg);
}
.vg-hero-bg__mesh { position: absolute; left: 0; right: 0; top: 0; height: 52rem; opacity: .9; }
.vg-hero-bg__beam { position: absolute; left: -10rem; top: -7rem; height: 40rem; width: 30rem; transform: rotate(12deg); opacity: .7; }
.vg-hero-bg__noise { position: absolute; inset: 0; }

.mesh-bg {
  background:
    radial-gradient(circle at -4% 4%, rgba(0,148,255,.98) 0%, rgba(0,154,255,.76) 15%, transparent 34%),
    radial-gradient(circle at 28% 10%, rgba(187,235,255,.96) 0%, rgba(216,246,255,.68) 18%, transparent 38%),
    radial-gradient(circle at 55% 8%, rgba(255,239,40,.98) 0%, rgba(255,226,35,.82) 25%, transparent 47%),
    radial-gradient(circle at 80% 10%, rgba(255,158,15,.92) 0%, rgba(255,110,34,.74) 23%, transparent 44%),
    radial-gradient(circle at 104% 8%, rgba(255,24,90,.9) 0%, rgba(255,92,128,.7) 24%, transparent 48%),
    linear-gradient(180deg, rgba(255,252,231,0) 0%, rgba(255,248,223,.76) 68%, var(--vg-bg) 100%);
  filter: blur(18px) saturate(1.14);
  transform: scale(1.10);
}
.left-blue-beam { background: radial-gradient(ellipse at center, rgba(0,32,128,.9) 0%, rgba(0,90,210,.52) 38%, transparent 72%); filter: blur(44px); }
.soft-noise { background-image: radial-gradient(rgba(255,255,255,.8) 1px, transparent 1px); background-size: 3px 3px; opacity: .08; }

/* ===== Hero ===== */

.vg-shop-hero {
  position: relative;
  overflow: hidden;
  background: var(--vg-ink);
  color: #fff;
  border-bottom: var(--vg-border-width) solid var(--vg-ink);
}

.vg-shop-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 20%, rgba(0,148,255,.35), transparent 32%),
    radial-gradient(circle at 85% 15%, rgba(255,221,35,.28), transparent 36%),
    radial-gradient(circle at 70% 90%, rgba(255,24,90,.22), transparent 40%);
  pointer-events: none;
}

.vg-shop-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 40px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 64px 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .vg-shop-hero__inner { padding: 64px 24px; }
}

@media (min-width: 1024px) {
  .vg-shop-hero__inner {
    grid-template-columns: 7fr 5fr;
    align-items: center;
    padding: 80px 32px;
  }
}

.vg-shop-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 24px !important;
  padding: 8px 16px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--vg-radius-pill);
  background: rgba(255,255,255,.1);
  font-family: var(--vg-font-mono);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #fff;
}

.vg-shop-hero__dot { color: var(--vg-yellow); }

.vg-shop-hero__title {
  margin: 0 !important;
  font-family: var(--vg-font-body);
  font-size: 48px;
  font-weight: 500;
  line-height: .94;
  letter-spacing: -0.05em;
  color: #fff;
}

@media (min-width: 640px) {
  .vg-shop-hero__title { font-size: 72px; }
}

.vg-shop-hero__title em {
  font-family: var(--vg-font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--vg-yellow);
}

.vg-shop-hero__lead {
  max-width: 560px;
  margin: 28px 0 0 !important;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,.7);
}

.vg-shop-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

.vg-shop-hero__btn {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 20px;
  border-radius: var(--vg-radius-control);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .15s, color .15s;
}

.vg-shop-hero__btn--ghost {
  border: var(--vg-border-width) solid rgba(255,255,255,.7);
  color: #fff;
}
.vg-shop-hero__btn--ghost:hover {
  background: #fff;
  color: var(--vg-ink);
}

.vg-shop-hero__btn--solid {
  border: var(--vg-border-width) solid var(--vg-yellow);
  background: var(--vg-yellow);
  color: var(--vg-ink);
}
.vg-shop-hero__btn--solid:hover {
  background: var(--vg-primary);
  border-color: var(--vg-primary);
  color: #fff;
}

.vg-shop-hero__feature { display: flex; }

@media (min-width: 1024px) {
  .vg-shop-hero__feature { justify-content: flex-end; }
}

.vg-shop-feature-card {
  width: 100%;
  max-width: 400px;
  padding: 24px;
  border: var(--vg-border-width) solid rgba(255,255,255,.25);
  border-radius: var(--vg-radius-card);
  background: rgba(255,248,223,.92);
  color: var(--vg-ink);
  box-shadow: 9px 9px 0 rgba(255,221,35,.85);
}

@media (min-width: 640px) {
  .vg-shop-feature-card { padding: 32px; }
}

.vg-shop-feature-card__label {
  margin: 0 !important;
  font-family: var(--vg-font-mono);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--vg-primary);
}

.vg-shop-feature-card__title {
  margin: 16px 0 0 !important;
  font-size: 32px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--vg-ink);
}

@media (min-width: 640px) {
  .vg-shop-feature-card__title { font-size: 36px; }
}

.vg-shop-feature-card__title em {
  font-family: var(--vg-font-serif);
  font-style: italic;
  font-weight: 500;
}

.vg-shop-feature-card__desc {
  margin: 20px 0 0 !important;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(22,32,50,.65);
}

.vg-shop-feature-card__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 32px;
  padding-top: 20px;
  border-top: var(--vg-border-width) solid var(--vg-ink);
}

.vg-shop-feature-card__pricelabel {
  display: block;
  font-family: var(--vg-font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(22,32,50,.5);
}

.vg-shop-feature-card__price {
  display: block;
  margin-top: 4px;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--vg-ink);
}

.vg-shop-feature-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: var(--vg-radius-control);
  background: var(--vg-yellow);
  color: var(--vg-ink);
  transition: background-color .15s, color .15s;
}
.vg-shop-feature-card__cta:hover {
  background: var(--vg-primary);
  color: #fff;
}

/* ===== Плашка преимуществ ===== */

.vg-shop-benefits {
  border-bottom: var(--vg-border-width) solid var(--vg-ink);
  background: rgba(255,248,223,.55);
}

.vg-shop-benefits__inner {
  display: grid;
  max-width: 1600px;
  margin: 0 auto;
  gap: 1px;
  background: rgba(22,32,50,.2);
}

@media (min-width: 640px) {
  .vg-shop-benefits__inner { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .vg-shop-benefits__inner { grid-template-columns: repeat(5, 1fr); }
}

.vg-shop-benefit {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 96px;
  padding: 16px 20px;
  background: rgba(255,248,223,.55);
}

.vg-shop-benefit__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--vg-radius-control);
}

.vg-shop-benefit__icon--blue    { background: rgba(0,148,255,.1);  color: var(--vg-primary); }
.vg-shop-benefit__icon--yellow  { background: rgba(255,221,35,.3); color: var(--vg-ink); }
.vg-shop-benefit__icon--ink     { background: rgba(22,32,50,.1);   color: var(--vg-ink); }
.vg-shop-benefit__icon--green   { background: rgba(22,164,119,.1); color: var(--vg-green); }
.vg-shop-benefit__icon--orange  { background: rgba(255,118,24,.1); color: var(--vg-orange); }

.vg-shop-benefit__title {
  margin: 0 !important;
  font-size: 14px;
  font-weight: 500;
  color: var(--vg-ink);
}

.vg-shop-benefit__desc {
  margin: 4px 0 0 !important;
  font-size: 12px;
  color: rgba(22,32,50,.5);
}

/* ===== Заголовок секции каталога ===== */

.vg-shop-catalog-head__inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 56px 16px 0;
}

@media (min-width: 640px) {
  .vg-shop-catalog-head__inner { padding: 56px 24px 0; }
}

@media (min-width: 1024px) {
  .vg-shop-catalog-head__inner { padding: 80px 32px 0; }
}

.vg-shop-catalog-head__eyebrow {
  margin: 0 0 12px !important;
  font-family: var(--vg-font-mono);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--vg-primary);
}

.vg-shop-catalog-head__title {
  margin: 0 !important;
  font-family: var(--vg-font-body);
  font-size: 36px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.055em;
  color: var(--vg-ink);
}

@media (min-width: 640px) {
  .vg-shop-catalog-head__title { font-size: 60px; }
}

.vg-shop-catalog-head__title em {
  font-family: var(--vg-font-serif);
  font-style: italic;
  font-weight: 500;
}

/* ===== FluentCart — обёртка всего блока в ширину bleed (1600px), токен к каталог-хеду ===== */

body.tax-product-categories .fct-products-wrapper,
body.page-id-314 .fct-products-wrapper {
  display: block;
  max-width: 1600px;
  margin: 0 auto;
  padding: 24px 16px 80px;
}

@media (min-width: 640px) {
  body.page-id-314 .fct-products-wrapper { padding: 24px 24px 80px; }
  body.tax-product-categories .fct-products-wrapper { padding: 24px 24px 80px; }
}

@media (min-width: 1024px) {
  body.page-id-314 .fct-products-wrapper { padding: 32px 32px 96px; }
  body.tax-product-categories .fct-products-wrapper { padding: 32px 32px 96px; }
}

/* Переключатель вида + счётчик — правый верхний ряд секции каталога */
body.tax-product-categories .fct-shop-view-switcher,
body.page-id-314 .fct-shop-view-switcher {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 24px;
}

body.tax-product-categories .fct-shop-view-switcher button,
body.page-id-314 .fct-shop-view-switcher button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: var(--vg-border-width) solid var(--vg-ink) !important;
  border-radius: var(--vg-radius-control) !important;
  background: transparent;
  color: var(--vg-ink);
}

body.tax-product-categories .fct-shop-view-switcher button.active,
body.page-id-314 .fct-shop-view-switcher button.active {
  background: var(--vg-ink) !important;
  color: #fff !important;
}

/* Сайдбар-фильтр */
body.tax-product-categories .fct-shop-filter-wrapper,
body.page-id-314 .fct-shop-filter-wrapper {
  align-self: flex-start;
  border: var(--vg-border-width) solid var(--vg-ink) !important;
  border-radius: var(--vg-radius-card) !important;
  background: rgba(255,255,255,.55);
  box-shadow: 6px 6px 0 var(--vg-ink);
  padding: 20px !important;
}

body.tax-product-categories .fct-shop-product-search,
body.page-id-314 .fct-shop-product-search {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid rgba(22,32,50,.35) !important;
  border-radius: var(--vg-radius-control) !important;
  background: rgba(255,255,255,.7);
}

body.tax-product-categories .fct-shop-input,
body.page-id-314 .fct-shop-input {
  border: none !important;
  background: transparent !important;
  font-size: 14px;
  color: var(--vg-ink);
}

body.tax-product-categories .fct-shop-filter-item,
body.page-id-314 .fct-shop-filter-item {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(22,32,50,.2);
}

body.tax-product-categories .fct-shop-filter-item:first-of-type,
body.page-id-314 .fct-shop-filter-item:first-of-type {
  margin-top: 28px;
}

body.tax-product-categories .item-heading,
body.page-id-314 .item-heading {
  margin: 0 !important;
  font-size: 14px;
  font-weight: 500;
  color: var(--vg-ink);
}

body.tax-product-categories .fct-shop-item-collapse-wrap,
body.page-id-314 .fct-shop-item-collapse-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

body.page-id-314 .fct-shop-checkbox-group { margin-top: 16px; }
body.tax-product-categories .fct-shop-checkbox-group { margin-top: 16px; }

body.tax-product-categories .fct-shop-checkbox-group-inner,
body.page-id-314 .fct-shop-checkbox-group-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body.tax-product-categories .fct-shop-checkbox,
body.page-id-314 .fct-shop-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--vg-ink);
  cursor: pointer;
}

body.tax-product-categories .fct-shop-checkbox input[type="checkbox"],
body.page-id-314 .fct-shop-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--vg-primary);
}

body.page-id-314 .fct-shop-price-range-container { margin-top: 20px; }
body.tax-product-categories .fct-shop-price-range-container { margin-top: 20px; }

body.tax-product-categories .fct-shop-range-slider,
body.page-id-314 .fct-shop-range-slider {
  accent-color: var(--vg-primary);
}

/* Сетка карточек */
body.tax-product-categories .fct-products-container,
body.page-id-314 .fct-products-container {
  display: grid !important;
  gap: 20px !important;
  grid-template-columns: 1fr !important;
}

@media (min-width: 640px) {
  body.page-id-314 .fct-products-container { grid-template-columns: repeat(2, 1fr) !important; }
  body.tax-product-categories .fct-products-container { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (min-width: 1280px) {
  body.page-id-314 .fct-products-container { grid-template-columns: repeat(3, 1fr) !important; }
  body.tax-product-categories .fct-products-container { grid-template-columns: repeat(3, 1fr) !important; }
}

/* Карточка товара — цвета через переменные FluentCart, геометрия — оверрайдом */
body.tax-product-categories .wp-block-fluent-cart-products,
body.page-id-314 .wp-block-fluent-cart-products {
  --fct-card-bg: #ffffff;
  --fct-card-border-color: var(--vg-ink);
  --fct-card-primary-text-color: var(--vg-ink);
  --fct-card-text-color: rgba(22,32,50,.6);
  --fct-card-btn-bg-color: var(--vg-ink);
  --fct-card-btn-text-color: #ffffff;
  --fct-heading-color: var(--vg-ink);
}

body.tax-product-categories .fct-product-card,
body.page-id-314 .fct-product-card {
  border-width: var(--vg-border-width) !important;
  border-radius: var(--vg-radius-card) !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: hidden;
}

body.page-id-314 .fct-product-card .fct-product-card-image-wrap,
body.tax-product-categories .fct-product-card .fct-product-card-image-wrap,
body.tax-product-categories .fct-product-card .fct-dynamic-product-image,
body.page-id-314 .fct-product-card .fct-dynamic-product-image {
  margin: 0 !important;
  border-bottom: var(--vg-border-width) solid var(--vg-ink);
  background: #F1EEE4;
}

body.tax-product-categories .fct-product-card img,
body.page-id-314 .fct-product-card img {
  border-radius: 0 !important;
}

body.page-id-314 .fct-product-card h3.fct-product-card-title,
body.tax-product-categories .fct-product-card h3.fct-product-card-title,
body.tax-product-categories .fct-product-card .fct-product-card-title,
body.page-id-314 .fct-product-card .fct-product-card-title {
  padding-left: 20px !important;
  padding-right: 20px !important;
  padding-top: 20px !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em;
}

body.tax-product-categories .fct-product-card-prices,
body.page-id-314 .fct-product-card-prices {
  padding-left: 20px !important;
  padding-right: 20px !important;
  padding-bottom: 0 !important;
  margin-top: 12px !important;
  font-size: 18px !important;
  font-weight: 500;
  color: #9B7614 !important;
}

body.page-id-314 .fct-product-card-prices .fct-item-price,
body.tax-product-categories .fct-product-card-prices .fct-item-price,
body.tax-product-categories .fct-product-card-prices .fct-item-price span,
body.page-id-314 .fct-product-card-prices .fct-item-price span {
  color: #9B7614 !important;
}

body.tax-product-categories .fct-compare-price del,
body.page-id-314 .fct-compare-price del {
  opacity: .45;
  color: var(--vg-ink);
}

/* Метка наличия — реальный статус, не текст-заглушка: показывается/меняется по факту
   наличия у товара (FluentCart сам вешает класс out-of-stock на кнопку при отсутствии остатка) */
body.tax-product-categories .fct-product-card-prices::after,
body.page-id-314 .fct-product-card-prices::after {
  content: "В наличии";
  display: block;
  margin-top: 12px;
  font-family: var(--vg-font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(22,32,50,.45);
}

body.tax-product-categories .fct-product-card:has(button.out-of-stock) .fct-product-card-prices::after,
body.page-id-314 .fct-product-card:has(button.out-of-stock) .fct-product-card-prices::after {
  content: "Нет в наличии";
  color: var(--vg-red);
}

body.page-id-314 .fct-product-card button,
body.tax-product-categories .fct-product-card button,
body.tax-product-categories .fct-product-view-button,
body.page-id-314 .fct-product-view-button {
  margin: 20px 20px 20px !important;
  padding: 0 16px !important;
  width: calc(100% - 40px) !important;
  min-height: 44px !important;
  border-radius: var(--vg-radius-control) !important;
  background: var(--vg-ink) !important;
  box-shadow: none !important;
  font-size: 14px !important;
  text-transform: none !important;
}

body.page-id-314 .fct-product-card button:hover,
body.tax-product-categories .fct-product-card button:hover,
body.tax-product-categories .fct-product-view-button:hover,
body.page-id-314 .fct-product-view-button:hover {
  background: var(--vg-primary) !important;
}

/* Пустое состояние */
body.tax-product-categories .fluent-cart-shop-no-result-found,
body.page-id-314 .fluent-cart-shop-no-result-found {
  padding: 48px 24px;
  border: var(--vg-border-width) dashed rgba(22,32,50,.35) !important;
  border-radius: var(--vg-radius-card);
  text-align: center;
  color: rgba(22,32,50,.55);
}