/*
 * Vintage Bizhu — Blocks (Layer 4/4)
 * Стили для ACF-блоков главной страницы.
 */

/* ============================================================
   HERO (acf/vb-hero) — V15: editorial collage (desktop) + single-media (mobile)
   Desktop: 2 колонки (текст / коллаж из 3 фото лестницей) — выбор
   арт-дирекции hero-c из v14-design-options. Rail и product-stage-cutout
   (V11-V13) сняты, категории-навигация теперь в медальонах ниже.
   Mobile: одно фото сверху (hero-b), коллаж скрыт.
============================================================ */
.vb-hero {
  background-color: var(--color-bg);
  overflow: hidden;
}

/* V28: точные значения Concept B hero — padding 64/96, grid 1.05/.95 gap 64,
   выравнивание по НИЗУ (align-items:end, как в концепте). */
.vb-hero__canvas {
  max-width: 1360px;
  margin-inline: auto;
  padding: 64px var(--gutter) 96px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 64px;
  align-items: end;
}

/* fallback без фото (ACF vb_home_hero_images пуст) — текст по центру */
.vb-hero__canvas--no-media {
  grid-template-columns: 1fr;
  max-width: 720px;
  text-align: center;
}

/* фото-заглушка только для mobile-лейаута, на desktop скрыта */
.vb-hero__mobile-media {
  display: none;
}

.vb-hero__text {
  min-width: 0;
  padding-top: 0; /* V24: коллаж выровнен по центру, верхний отступ не нужен */
}

.vb-hero__eyebrow {
  margin-bottom: 16px;
  color: var(--color-muted);
}

/* V24: hero-H1 переведён в Playfair и крупный editorial-масштаб (Concept B) —
   правило «hero-H1 = Manrope» снято в этой ревизии (V24: токены/типографику
   можно менять ради соответствия концептам). Живой построчный замер — по скрину. */
.vb-hero__title {
  font-family: var(--font-display);
  font-weight: 400; /* V28: Concept B — serif 400 */
  font-size: clamp(2.9rem, 6.6vw, 6.4rem); /* V28: точный clamp Concept B */
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin-bottom: 34px;
}
.vb-hero__title em {
  font-style: italic;
  font-weight: 500;
}

.vb-hero__sub {
  font-size: var(--text-md);
  color: var(--color-muted);
  max-width: 44ch;
  margin-bottom: 24px;
}

.vb-hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
}

.vb-btn--lg {
  padding: 14px 30px;
  font-size: 13px;
}

/* V24: editorial hero-CTA (Concept B) — underline-жест вместо заливной кнопки */
.vb-hero__cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-ink);
  border-bottom: 1.5px solid var(--color-ink);
  padding-bottom: 7px;
  transition: color var(--ease-base), border-color var(--ease-base);
}
.vb-hero__cta-primary:hover {
  color: var(--color-brand);
  border-color: var(--color-brand);
  text-decoration: none;
}
.vb-hero__cta-arrow { transition: transform var(--ease-base); }
.vb-hero__cta-primary:hover .vb-hero__cta-arrow { transform: translateX(5px); }

/* тихая secondary-ссылка: underline и сдвиг стрелки появляются только на hover */
.vb-hero__cta-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--ease-base);
}

.vb-hero__cta-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.vb-hero__cta-link span[aria-hidden] {
  display: inline-block;
  transition: transform var(--ease-base);
}

.vb-hero__cta-link:hover span[aria-hidden] {
  transform: translateX(4px);
}

/* editorial-стек: 3 фото лестницей ОДНОЙ композицией (V16): первое крупнее,
   мягкий overlap 16px, один лёгкий rotate у хвоста — группа читается цельно,
   не «тремя карточками». Hairline-эстетика, теней нет. */
/* V24: overlapping editorial-коллаж (Concept B) — не «лесенка», а асимметрия
   с перекрытием: крупное фото 4/5, поверх меньшее 3/4 с bg-рамкой, сзади квадрат. */
.vb-hero__collage {
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 460px;
}

.vb-hero__collage-item {
  position: absolute;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.vb-hero__collage-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* V28: точная геометрия коллажа Concept B (60/40/30, b: right 8% + рамка 10px,
   тени как в концепте, tag слева-0 снизу -18px). */
.vb-hero__collage-item--1 {
  width: 60%;
  aspect-ratio: 4 / 5;
  top: 0;
  left: 0;
  z-index: 2;
  box-shadow: 0 24px 48px -24px rgba(23, 23, 23, .35);
}
.vb-hero__collage-item--2 {
  width: 40%;
  aspect-ratio: 3 / 4;
  bottom: 0;
  right: 8%;
  z-index: 3;
  border: 10px solid var(--color-bg);
  box-shadow: 0 20px 40px -20px rgba(23, 23, 23, .4);
}
.vb-hero__collage-item--3 {
  width: 30%;
  aspect-ratio: 1 / 1;
  top: 6%;
  right: 0;
  z-index: 1;
}
.vb-hero__collage-tag {
  position: absolute;
  bottom: -18px;
  left: 0;
  z-index: 4;
  font-family: var(--font-display);
  font-style: italic;
  font-size: .86rem;
  color: var(--color-muted);
}

/* V15: порог смены лейаута — 1100px, не 768px (768-1100 коллаж из 3 узких
   колонок мельчает). Арифметика на границе 1100px: gutter = var(--gutter)
   = clamp(16,4vw,40) → на 1100px 4vw=44px, упирается в потолок 40px.
   gap канваса = clamp(40,5vw,80) → на 1100px 5vw=55px. Контент =
   1100 − 2×40 = 1020px; минус gap канваса 55 = 965px на 2 fr-трека
   (.9fr+1.25fr=2.15, оба выше своих min 380/520 → делятся по fr, не по
   минимуму). Коллаж-колонка ≈ 965×(1.25/2.15) ≈ 561px. Внутри: 3 item +
   2 gap×20 = 40px → item ≈ (561−40)/3 ≈ 174px — это ещё ≥170px из спеки,
   на 1100px коллаж читаем. Ниже 1100px переключаемся на mobile-лейаут
   (одно фото), чтобы item не ушёл ниже порога читаемости. */
@media (max-width: 1099.98px) {
  /* V28: mobile-hero 1-в-1 Concept B — текст сверху, коллаж СТЕКОМ из 3 фото
     (a 4/5 → c 16/9 → b 16/10), tag статикой. Одиночная mobile-media скрыта. */
  .vb-hero__canvas {
    grid-template-columns: 1fr;
    padding: 36px var(--gutter) 64px;
    gap: 56px;
  }

  .vb-hero__mobile-media {
    display: none;
  }

  .vb-hero__text {
    padding-top: 0;
  }

  .vb-hero__title {
    font-size: clamp(2.4rem, 10vw, 3.2rem); /* точный mobile-clamp Concept B */
  }

  .vb-hero__collage {
    display: flex;
    flex-direction: column;
    gap: 18px;
    aspect-ratio: auto;
    min-height: 0;
  }
  .vb-hero__collage-item {
    position: static;
    width: 100% !important;
    border: none;
    box-shadow: none;
  }
  .vb-hero__collage-item--1 { aspect-ratio: 4 / 5; }
  .vb-hero__collage-item--2 { aspect-ratio: 16 / 10; order: 3; }
  .vb-hero__collage-item--3 { aspect-ratio: 16 / 9; order: 2; }
  .vb-hero__collage-tag {
    position: static;
    order: 4;
    margin-top: -6px;
  }
}

/* ============================================================
   CATEGORY MEDALLIONS (acf/vb-category-medallions)
============================================================ */
.vb-medallions__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: clamp(16px, 2.5vw, 28px);
}

.vb-medallion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--color-text);
}

.vb-medallion:hover .vb-medallion__img-wrap { transform: scale(1.04); }
.vb-medallion:hover { text-decoration: none; }

.vb-medallion__img-wrap {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--color-line);
  background: var(--color-accent-soft);
  transition: transform var(--ease-out), border-color var(--ease-base);
  flex-shrink: 0;
}

.vb-medallion:hover .vb-medallion__img-wrap { border-color: var(--color-accent); }

.vb-medallion__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vb-medallion__label {
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
}

/* ============================================================
   PRODUCT GRID (acf/vb-product-grid)
============================================================ */
.vb-product-grid__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: clamp(16px, 2.5vw, 28px);
}

/* ============================================================
   MOTIF COLLECTIONS (acf/vb-motif-collections)
============================================================ */
.vb-collections__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: clamp(16px, 2.5vw, 24px);
}

.vb-collection {
  display: block;
  text-decoration: none;
  color: var(--color-text);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--ease-out), transform var(--ease-out);
}

.vb-collection:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-3px);
  text-decoration: none;
}

.vb-collection__img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.vb-collection__name {
  padding: 12px 14px;
  font-size: var(--text-sm);
  font-weight: 600;
}

/* ============================================================
   SERVICE STEPS (acf/vb-service-steps)
============================================================ */
.vb-service-steps {
  background: var(--color-surface);
}

.vb-service-steps__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(16px, 3vw, 32px);
}

.vb-service-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: clamp(16px, 2vw, 24px);
}

.vb-service-step__icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-soft);
  border-radius: 50%;
  color: var(--color-accent-strong);
  flex-shrink: 0;
}

.vb-service-step__title {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
}

.vb-service-step__text {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* ============================================================
   EDITORIAL BAND (acf/vb-editorial-band)
============================================================ */
.vb-editorial {
  background: var(--color-accent-strong);
  color: #fff;
}

.vb-editorial__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(40px, 5vw, 72px) var(--gutter);
  /* Аудит v6: контент + мини-коллаж мотивов справа
     (v5 был один столбец 720px — полоса выглядела пустым текстовым блоком) */
  display: flex;
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
}

.vb-editorial__eyebrow {
  color: var(--color-accent);
}

.vb-editorial__eyebrow::before,
.vb-editorial__eyebrow::after {
  background-color: var(--color-accent);
}

.vb-editorial__title {
  color: #fff;
  font-size: var(--text-2xl);
  margin-block: 12px 16px;
}

.vb-editorial__text {
  color: rgba(255,255,255,.75);
  font-size: var(--text-md);
  margin-bottom: 28px;
}

.vb-editorial__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-card);
}

@media (max-width: 860px) {
  .vb-editorial__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================
   FAQ (acf/vb-faq)
============================================================ */
.vb-faq__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 720px;
  margin-inline: auto;
}

.vb-faq__item {
  border-bottom: 1px solid var(--color-line);
}

.vb-faq__q {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-text);
  text-align: left;
}

.vb-faq__q:focus-visible {
  outline: 2px solid var(--color-accent-strong);
  outline-offset: 2px;
}

.vb-faq__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-accent);
  transition: transform var(--ease-base);
}

.vb-faq__item.is-open .vb-faq__icon { transform: rotate(45deg); }

.vb-faq__a {
  display: none;
  padding: 0 0 18px;
  font-size: var(--text-base);
  color: var(--color-muted);
}

.vb-faq__item.is-open .vb-faq__a { display: block; }

/* ============================================================
   CTA BAND (acf/vb-cta-band)
============================================================ */
.vb-cta-band {
  background: var(--color-accent-soft);
  text-align: center;
}

.vb-cta-band__inner {
  max-width: 640px;
  margin-inline: auto;
  padding-block: clamp(48px, 6vw, 80px);
}

.vb-cta-band__title {
  font-size: var(--text-2xl);
  margin-bottom: 12px;
}

.vb-cta-band__text {
  color: var(--color-muted);
  margin-bottom: 28px;
  margin-inline: auto;
}

.vb-cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* ============================================================
   ГЛАВНАЯ (front-page.php, порт blocksy-child v4 на токены)
============================================================ */
.vb-home {
	background: var(--color-bg);
	overflow-x: hidden;
}

/* --- Section head (V10): flex-вариант шапки с действием справа (категории) --- */
.vb-head--between {
	display: flex;
	flex-direction: row; /* база .vb-head — column; здесь обязательно row, иначе шапка встаёт колонкой */
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	text-align: left;
}
.vb-head__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-ink);
	text-decoration: none;
}
.vb-head__link:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}
.vb-head__link span {
	transition: transform var(--ease-base);
}
.vb-head__link:hover span {
	transform: translateX(3px);
}

/* --- Категории: медальоны (v7: заменено на медальоны, круг вместо карточки) --- */
.vb-cats {
	display: grid;
	grid-template-columns: repeat(8, minmax(92px, 1fr));
	gap: 24px;
}
.vb-cat-medallion {
	display: block;
	text-decoration: none;
}
.vb-cat-medallion__circle {
	display: block;
	width: clamp(112px, 8vw, 124px);
	aspect-ratio: 1;
	margin: 0 auto 12px;
	border-radius: var(--radius-pill);
	overflow: hidden;
	border: 1px solid var(--color-line);
	background: var(--color-accent-soft);
	transition: border-color var(--ease-out);
}
.vb-cat-medallion__circle img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center; /* дефолт; per-slug inline style object-position в разметке перебивает и так, без !important */
	display: block;
	transition: transform var(--ease-out);
}
.vb-cat-medallion:hover .vb-cat-medallion__circle {
	border-color: var(--color-brand);
}
.vb-cat-medallion:hover .vb-cat-medallion__circle img {
	transform: scale(1.04);
}
.vb-cat-medallion__name {
	display: block;
	text-align: center;
	font-size: 13px;
	color: var(--color-ink);
}
.vb-cat-medallion__count {
	display: block;
	text-align: center;
	font-size: 11px;
	color: var(--color-subtle);
	margin-top: 4px;
}
@media (max-width: 1100px) {
	.vb-cats { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 767px) {
	.vb-head__link {
		font-size: 12px;
	}
	.vb-cats {
		display: flex;
		overflow-x: auto;
		gap: 18px;
		padding-inline: var(--gutter);
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}
	.vb-cats::-webkit-scrollbar { display: none; }
	.vb-cat-medallion {
		min-width: 88px;
		scroll-snap-align: start;
	}
	.vb-cat-medallion__circle {
		width: clamp(88px, 22vw, 96px);
	}
}

/* --- Section action (V9): тихая text-ссылка после секции (каталог/новинки) --- */
.vb-section-action {
	margin-top: clamp(32px, 4vw, 48px);
	text-align: center;
}
.vb-section-action__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--color-ink);
	text-decoration: none;
}
.vb-section-action__link:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}
.vb-section-action__link span {
	transition: transform var(--ease-base);
}
.vb-section-action__link:hover span {
	transform: translateX(3px);
}

/* --- Сервис-блок: premium assurance (V18, задача 2) --- */
/* Инлайн-иконки вместо номеров 01/02/03 (V17). Только верхний hairline —
   нижний убран, т.к. теперь перед блоком стоит .vb-about со своим bottom-hairline
   (двойная линия впритык выглядела бы шумно). Иконки 24px, stroke=currentColor
   (ink), НЕ brand/зелёный, без заливок/плашек/градиентов. */
.vb-service {
	padding: clamp(2.4rem, 4vw, 3.4rem) 0;
	border-top: 1px solid var(--color-line);
}
.vb-service__row {
	max-width: var(--container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.5rem, 3vw, 3rem);
}
.vb-service__i {
	display: block;
	padding-left: clamp(1.25rem, 2.5vw, 2.25rem);
	border-left: 1px solid var(--color-line);
	color: inherit;
	text-decoration: none;
	transition: color var(--ease-base);
}
.vb-service__i:first-child {
	border-left: none;
	padding-left: 0;
}
/* V19: service-колонки стали ссылками на сервисные страницы. Тихий hover —
   иконка уходит в бренд-зелёный (микро-акцент), текст без подчёркивания. */
a.vb-service__i:hover .vb-service__icon { color: var(--color-brand); }
a.vb-service__i:hover .vb-service__t { text-decoration: underline; text-underline-offset: 3px; }
a.vb-service__i:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 4px; border-radius: var(--radius-sm); }
.vb-service__icon {
	display: flex;
	color: var(--color-ink);
	margin-bottom: 12px;
}
.vb-service__t {
	display: block;
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-ink);
	line-height: 1.3;
}
.vb-service__d {
	display: block;
	color: var(--color-muted);
	font-size: .85rem;
	margin-top: 5px;
}

/* --- Подборки по мотивам --- */
.vb-collections {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1rem, 2vw, 1.5rem);
}
/* V16: подпись вынесена ПОД фото — тёмные плашки-оверлеи сняты (аудит: «шумели»).
   Контраст-вопрос V8 закрыт по построению: ink на cream-фоне страницы. */
.vb-coll {
	display: block;
	text-decoration: none;
}
.vb-coll__img {
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-card);
	border: 1px solid var(--color-line);
	background: var(--color-accent-soft) center / cover no-repeat;
	transition: border-color var(--ease-base);
}
.vb-coll:hover .vb-coll__img { border-color: var(--color-brand); }
.vb-coll__name {
	display: block;
	margin-top: 10px;
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: 13.5px;
	font-weight: 600;
}
/* V17: тихий subtitle — какие типы украшений в подборке */
.vb-coll__sub {
	display: block;
	margin-top: 2px;
	color: var(--color-muted);
	font-size: 11.5px;
}

/* --- Строка о магазине --- */
/* --- О магазине / SEO-editorial (V18, задача 4): заменяет старую .vb-note --- */
.vb-about {
	padding: clamp(2.4rem, 4vw, 3.4rem) 0;
	border-top: 1px solid var(--color-line);
	border-bottom: 1px solid var(--color-line);
}
.vb-about__grid {
	display: grid;
	grid-template-columns: 1.3fr .7fr;
	gap: clamp(2rem, 4vw, 4rem);
	align-items: start;
}
.vb-about__text p {
	margin: 12px 0 0;
	max-width: 62ch;
	color: var(--color-muted);
	font-size: .98rem;
	line-height: 1.7;
}
.vb-about__links {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: clamp(4px, 1vw, 8px);
}
.vb-about__links a {
	color: var(--color-ink);
	font-size: .92rem;
	font-weight: 600;
	text-decoration: none;
	width: fit-content;
	border-bottom: 1px solid transparent;
	transition: border-color var(--ease-base), color var(--ease-base);
}
.vb-about__links a:hover {
	color: var(--color-brand);
	border-color: var(--color-brand);
}

/* --- Адаптив главной --- */
/* v7: .vb-cats/.vb-cat__img брейкпоинт заменён — см. секцию медальонов выше (1100px/767px) */
@media (max-width: 1024px) {
	.vb-collections { grid-template-columns: 1fr 1fr; }
	.vb-about__grid { grid-template-columns: 1fr; }
	.vb-about__links {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 8px 20px;
		padding-top: 20px;
	}
}
@media (max-width: 640px) {
	.vb-service__row {
		grid-template-columns: 1fr;
		gap: 1.1rem;
	}
	.vb-service__i {
		border-left: none;
		padding: 0 0 1.1rem;
		border-bottom: 1px solid var(--color-line);
	}
	.vb-service__i:first-child { padding-left: 0; }
	.vb-service__i:last-child {
		border-bottom: none;
		padding-bottom: 0;
	}
}

/* v7: заменено на медальоны — старый .vb-cat__count (Аудит v3) удалён, см. .vb-cat-medallion__count */

@media (max-width: 767px) {
  .vb-editorial__inner { min-height: auto; padding: 48px var(--gutter); }
  .vb-editorial__title { font-size: 1.6rem; }
}

/* V20: на ГЛАВНОЙ (body.home) старую цену в витрине скрываем — boutique-gallery
   показывает одну цену, не discount-outlet. Old+sale остаётся в каталоге (тихо).
   Скоуп по body.home, т.к. .vbj-product-card используется и в каталоге. */
body.home .vbj-product-card__price del { display: none; }
body.home .vbj-product-card__price ins { text-decoration: none; }

/* ============================================================
   V23 — HYBRID PREMIUM (Concept B на главной): editorial-рамка
   Палитра проектная (achromatic + green микро-акцент). Playfair —
   заголовки/манифест; hero-H1 остаётся Manrope (правило типографики).
============================================================ */

/* --- Hero: editorial meta (№ индекс + сезон-eyebrow) --- */
.vb-hero__meta {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin-bottom: 18px;
}
.vb-hero__index {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1.05rem;
	line-height: 1;
	color: var(--color-brand); /* зелёный микро-акцент */
	letter-spacing: .01em;
}
.vb-hero__meta .vb-hero__eyebrow { margin-bottom: 0; }

/* --- Editorial section head: номер + h2 слева, дескриптор справа --- */
.vb-head--editorial {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
	gap: clamp(24px, 5vw, 64px);
	flex-wrap: wrap;
	text-align: left;
	padding-bottom: clamp(20px, 2.5vw, 32px);
	border-bottom: 1px solid var(--color-line);
	margin-bottom: clamp(28px, 4vw, 48px);
}
.vb-head--editorial .vb-head__lead { min-width: 0; }
.vb-section-num {
	display: block;
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1.15rem;
	color: var(--color-brand); /* зелёный микро-акцент */
	letter-spacing: .04em;
	margin-bottom: 12px;
}
/* V28: точный масштаб section-head Concept B — h2 clamp(2.4→4.4rem), 400 */
.vb-head--editorial .vb-h2 {
	margin: 0;
	font-weight: 400;
	font-size: clamp(2.4rem, 4.6vw, 4.4rem);
	line-height: 1.04;
	letter-spacing: -.01em;
}
.vb-head--editorial {
	padding-bottom: 32px;
	margin-bottom: 56px;
}
.vb-head__desc {
	max-width: 340px;
	margin: 0 0 4px;
	color: var(--color-muted);
	font-size: .95rem;
	line-height: 1.55;
}

/* --- Мотив-грид Concept B 1-в-1 (V28): 4 колонки, gap 2px (hairline-мозаика
   через фон-подложку), БЕЗ радиуса и рамок тайлов. --- */
.vb-motifs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2px;
	background: var(--color-line);
}
.vb-motif {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: 0;
	border: none;
	text-decoration: none;
	background: var(--color-bg);
}
.vb-motif__img {
	position: absolute;
	inset: 0;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	transition: transform .7s cubic-bezier(.16, 1, .3, 1);
}
.vb-motif:hover .vb-motif__img { transform: scale(1.05); }
.vb-motif__cap {
	position: absolute;
	inset: auto 0 0 0;
	padding: 22px 20px 18px;
	background: linear-gradient(to top, rgba(23, 23, 23, .68), rgba(23, 23, 23, 0) 82%);
	color: #fff;
}
.vb-motif__n {
	display: block;
	font-size: .66rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	opacity: .8;
	margin-bottom: 5px;
}
.vb-motif__t {
	display: block;
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1.5rem; /* V28: точный размер caption Concept B */
	line-height: 1.05;
}
.vb-motif:focus-visible {
	outline: 2px solid var(--color-brand);
	outline-offset: 3px;
}

/* --- Manifesto band (Concept B): Playfair, центр, drop-cap --- */
/* V28: точные значения manifesto Concept B — 120px, clamp(1.7→2.7), lh 1.28,
   first-letter 1.7em в бренд-акценте. */
.vb-manifesto {
	padding: 120px 0;
	border-top: 1px solid var(--color-line);
}
.vb-manifesto__inner {
	max-width: 940px;
	text-align: center;
}
.vb-manifesto__eyebrow {
	display: block;
	margin-bottom: 26px;
	color: var(--color-muted);
}
.vb-manifesto__text {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.7rem, 3.4vw, 2.7rem);
	line-height: 1.28;
	letter-spacing: -.005em;
	color: var(--color-ink);
	margin: 0 auto;
	max-width: 900px;
}
.vb-manifesto__text::first-letter {
	font-size: 1.7em;
	line-height: 0;
	color: var(--color-brand);
}
.vb-manifesto__accent {
	font-style: italic;
	color: var(--color-brand); /* единственный цветовой акцент секции */
}

@media (max-width: 900px) {
	.vb-motifs { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
	.vb-head--editorial {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}
	.vb-head__desc { max-width: none; }
}

/* ============================================================
   V29 — «Новые поступления» = FEATURED из Concept A 1-в-1
   (concept-a/home.html: .sec-head + .feat-grid 1.15fr/1fr,
   .feat-hero фото 520px + meta cat/nm/price, .feat-small 2×2
   .pcard фото 200px + nm/price). Значения из CSS концепта
   дословно; serif Georgia → Playfair (утверждённый маппинг).
============================================================ */
.vb-feat-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 48px;
	gap: 24px;
}
.vb-feat-head__eyebrow {
	display: block;
	font-size: 11.5px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--color-muted);
	font-weight: 600;
	margin-bottom: 14px;
}
.vb-feat-head__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(28px, 3.4vw, 40px);
	letter-spacing: -.01em;
	line-height: 1.1;
	margin: 0;
}
.vb-feat-head__link {
	font-size: 14px;
	color: var(--color-muted);
	border-bottom: 1px solid var(--color-line);
	padding-bottom: 3px;
	white-space: nowrap;
	text-decoration: none;
}
.vb-feat-head__link:hover {
	color: var(--color-ink);
	border-color: var(--color-ink);
}
.vb-feat {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 36px;
	align-items: stretch;
}
.vb-feat__hero {
	border: 1px solid var(--color-line);
	background: var(--color-surface);
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: var(--color-ink);
	min-width: 0;
}
.vb-feat__ph {
	display: block;
	overflow: hidden;
	background: var(--color-soft);
}
.vb-feat__hero .vb-feat__ph img {
	width: 100%;
	height: 520px;
	object-fit: cover;
	display: block;
	transition: transform .6s ease;
}
.vb-feat__hero:hover .vb-feat__ph img { transform: scale(1.03); }
.vb-feat__meta {
	padding: 24px 26px 28px;
	border-top: 1px solid var(--color-line);
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px;
}
.vb-feat__cat {
	display: block;
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--color-muted);
	margin-bottom: 8px;
}
.vb-feat__nm {
	display: block;
	font-family: var(--font-display);
	font-size: 22px;
	line-height: 1.25;
}
.vb-feat__price {
	font-family: var(--font-display);
	font-size: 20px;
	white-space: nowrap;
}
.vb-feat__small {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 24px;
}
.vb-pcard {
	border: 1px solid var(--color-line);
	background: var(--color-surface);
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: var(--color-ink);
	min-width: 0;
}
.vb-pcard .vb-feat__ph img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
	transition: transform .6s ease;
}
.vb-pcard:hover .vb-feat__ph img { transform: scale(1.04); }
.vb-pcard__meta {
	padding: 14px 16px 16px;
	border-top: 1px solid var(--color-line);
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}
.vb-pcard__nm {
	font-size: 14.5px;
	line-height: 1.3;
}
.vb-pcard__price {
	font-family: var(--font-display);
	font-size: 16px;
	margin-top: auto;
}
@media (max-width: 768px) {
	.vb-feat-head { margin-bottom: 32px; }
	.vb-feat-head__link { display: none; }
	.vb-feat {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.vb-feat__hero .vb-feat__ph img { height: 380px; }
	.vb-feat__small { gap: 16px; }
	.vb-pcard .vb-feat__ph img { height: 150px; }
}

/* ============================================================
   V30 — HOME: hero-левая колонка точно по Concept B home
   (.hero-meta/.eyebrow/.hero h1/.hero-deck/.hero-cta) +
   «Наш подход» без декоративных черточек, текст шире,
   «Характер важнее возраста.» одной строкой (desktop).
============================================================ */

/* Eyebrow hero: типографика .eyebrow Concept B (.72rem/.22em/600/muted),
   декоративные черточки убраны */
.vb-hero__eyebrow.vb-hero__eyebrow {
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .22em;
	color: var(--color-muted);
	margin-bottom: 0;
}
.vb-hero__eyebrow::before,
.vb-hero__eyebrow::after { display: none; }

/* hero-meta Concept B: gap 18, mb 28 */
.vb-hero__meta {
	gap: 18px;
	margin-bottom: 28px;
}

/* H1: mb 34 (clamp и line-height уже соответствуют B) */
.vb-hero__title { margin: 0 0 34px; }

/* Deck (.hero-deck): max 420px, 1.02rem, mb 34, тёмный текст (не muted) */
.vb-hero__sub {
	max-width: 420px;
	font-size: 1.02rem;
	line-height: 1.55;
	color: var(--color-ink);
	margin: 0 0 34px;
}

/* CTA (.hero-cta): .8rem/400/.16em caps, hairline 1px, pb 6, gap 12,
   стрелка +6px на hover */
.vb-hero__cta-primary {
	gap: 12px;
	font-size: .8rem;
	font-weight: 400;
	letter-spacing: .16em;
	border-bottom: 1px solid var(--color-ink);
	padding-bottom: 6px;
}
.vb-hero__cta-primary:hover .vb-hero__cta-arrow { transform: translateX(6px); }

/* «Наш подход»: черточки долой, контейнер шире, акцент одной строкой */
.vb-manifesto__eyebrow::before,
.vb-manifesto__eyebrow::after { display: none; }
.vb-manifesto__inner { max-width: 1160px; }
.vb-manifesto__text { max-width: 1080px; }
@media (min-width: 768px) {
	.vb-manifesto__accent { white-space: nowrap; }
}