/* ============================================================= */
/*  Karma Stones — ДИЗАЙН-СИСТЕМА                                 */
/*  Премиальный минимализм · чёрная гамма                        */
/* ------------------------------------------------------------- */
/*  Оглавление:                                                  */
/*    1. Colors        — палитра и токены (переменные)           */
/*    2. Base          — базовые сбросы и фон                    */
/*    3. Typography    — заголовки, подзаголовки, текст          */
/*    4. Sections      — обёртки секций, контейнер               */
/*    5. Grid          — сетки и раскладки                       */
/*    6. Buttons       — кнопки (primary / secondary)            */
/*    7. Cards         — карточки (товар, преимущество, отзыв)   */
/*    8. Forms         — формы (заготовка на будущее)            */
/*    9. Animations    — появление, приближение, подчёркивание   */
/*   10. Accessibility — учёт prefers-reduced-motion             */
/* ------------------------------------------------------------- */
/*  Правило проекта: базовая палитра/шрифты заданы в конфиге      */
/*  Tailwind (js/main.js). Здесь — переиспользуемые компонентные  */
/*  классы и то, что нельзя удобно выразить утилитами Tailwind.   */
/*  Play-CDN не обрабатывает @apply, поэтому классы описаны       */
/*  обычным CSS с опорой на переменные из блока Colors.           */
/* ============================================================= */


/* ============================================================= */
/*  1. COLORS — палитра и токены                                 */
/* ============================================================= */
:root {
  /* Цвета бренда */
  --color-ink:       #0b0b0d;  /* почти чёрный — основной фон       */
  --color-graphite:  #17171a;  /* графит — вторичные секции         */
  --color-ash:       #8a8a8f;  /* тёплый серый — второстепенный текст */
  --color-fog:       #d9d9db;  /* светло-серый — акценты текста      */
  --color-porcelain: #f6f5f2;  /* тёплый белый — основной текст      */

  /* Полупрозрачные оттенки (границы, ховеры) */
  --line-soft:  rgba(255, 255, 255, 0.06); /* едва заметная граница */
  --line-base:  rgba(255, 255, 255, 0.10); /* обычная граница       */
  --line-hover: rgba(255, 255, 255, 0.25); /* граница при наведении */

  /* Тайминги и кривые анимаций — единая «дорогая» плавность */
  --ease-luxe: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   0.5s;
  --dur-base:   0.7s;
  --dur-reveal: 1.1s;
  --dur-zoom:   1.6s;

  /* Раскладка */
  --container-max: 1400px;
}


/* ============================================================= */
/*  2. BASE — базовые стили                                      */
/* ============================================================= */
html {
  scroll-behavior: smooth;
}

body {
  background: var(--color-ink);
}

/* Тонкая полоса прокрутки в тон интерфейса */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--color-ink); }
::-webkit-scrollbar-thumb { background: #2a2a2e; }


/* ============================================================= */
/*  3. TYPOGRAPHY — типографика                                  */
/* ============================================================= */

/* Крупные серивные заголовки: аккуратный перенос и лёгкое поджатие */
.display {
  text-wrap: balance;
  letter-spacing: -0.01em;
}

/* Надзаголовок секции — мелкие капс-буквы с широким трекингом */
.section-subtitle {
  font-size: 0.6875rem;         /* 11px */
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--color-ash);
  margin-bottom: 1.25rem;
}

/* Заголовок секции — серив, тонкое начертание, крупный кегль */
.section-title {
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  line-height: 1.1;
  font-size: 2.25rem;           /* база (моб.) */
  text-wrap: balance;
  letter-spacing: -0.01em;
}
@media (min-width: 1024px) {
  .section-title { font-size: 3.75rem; }
}


/* ============================================================= */
/*  4. SECTIONS — обёртки секций и контейнер                     */
/* ============================================================= */

/* Вертикальные отступы секции (единый ритм страницы) */
.section {
  padding-top: 7rem;
  padding-bottom: 7rem;
}
@media (min-width: 1024px) {
  .section {
    padding-top: 10rem;
    padding-bottom: 10rem;
  }
}

/* Тёмная (графитовая) секция — чередование фона */
.section-dark {
  background: rgba(23, 23, 26, 0.4);
}

/* Центрирующий контейнер с горизонтальными полями */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 1.5rem;
}
@media (min-width: 1024px) {
  .container { padding-inline: 2.5rem; }
}

/* Шапка секции (надзаголовок + заголовок), выровнена по центру */
.section-head {
  text-align: center;
  margin-bottom: 5rem;
}


/* ============================================================= */
/*  5. GRID — сетки и раскладки                                  */
/* ------------------------------------------------------------- */
/*  Разовые адаптивные сетки секций собираются утилитами Tailwind */
/*  прямо в разметке (это декларативно и не считается дублем).    */
/*  Здесь — переиспользуемые сетки для будущих страниц.           */
/* ============================================================= */

/* Сетка каталога/галереи товаров (готова к странице «Каталог») */
.product-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
@media (min-width: 1024px) {
  .product-grid { gap: 2.5rem; }
}


/* ============================================================= */
/*  6. BUTTONS — кнопки                                          */
/* ============================================================= */

/* Первичная кнопка — контур, заливка при наведении */
.primary-button {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2.5rem;
  border: 1px solid rgba(246, 245, 242, 0.3);
  font-size: 0.6875rem;          /* 11px */
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-porcelain);
  background: transparent;
  transition:
    background-color var(--dur-base) var(--ease-luxe),
    color            var(--dur-base) var(--ease-luxe),
    border-color     var(--dur-base) var(--ease-luxe);
}
.primary-button:hover {
  background: var(--color-porcelain);
  color: var(--color-ink);
}

/* Сплошная кнопка — главный акцент (выделяется сильнее контурной) */
.btn-solid {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2.5rem;
  background: var(--color-porcelain);
  color: var(--color-ink);
  border: 1px solid var(--color-porcelain);
  font-size: 0.6875rem;          /* 11px */
  letter-spacing: 0.28em;
  text-transform: uppercase;
  transition: background-color var(--dur-base) var(--ease-luxe),
              color            var(--dur-base) var(--ease-luxe);
}
.btn-solid:hover {
  background: transparent;
  color: var(--color-porcelain);
}

/* Вторичная кнопка — текстовая (обычно с .link-underline) */
.secondary-button {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.6875rem;          /* 11px */
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-porcelain);
  background: none;
  border: none;
}


/* ============================================================= */
/*  7. CARDS — карточки                                          */
/* ============================================================= */

/* Базовая карточка товара — заготовка для каталога/карточки товара */
.card {
  display: flex;
  flex-direction: column;
  background: rgba(23, 23, 26, 0.4);
  border: 1px solid var(--line-soft);
  border-radius: 2px;            /* минимальное скругление */
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-luxe);
}
.card:hover { border-color: var(--line-base); }

/* Изображение внутри карточки (совместимо с .zoom-parent/.zoom-img) */
.card-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
}

/* Контентная часть карточки */
.card-content {
  padding: 1.5rem 1.25rem;
  text-align: center;
}

/* Карточка преимущества — сплошной фон, подсветка при наведении */
.feature-card {
  padding: 3.5rem 2rem;
  text-align: center;
  background: var(--color-ink);
  transition: background-color var(--dur-base) var(--ease-luxe);
}
.feature-card:hover { background: rgba(23, 23, 26, 0.6); }

/* Карточка отзыва — контурная, граница светлеет при наведении */
.testimonial-card {
  padding: 3.5rem 2.5rem;
  text-align: center;
  border: 1px solid var(--line-base);
  transition: border-color var(--dur-base) var(--ease-luxe);
}
.testimonial-card:hover { border-color: var(--line-hover); }

/* -- Презентационное фото коллекции (крупная карточка) -------------- */
/* Используется вместе с .zoom-parent (даёт мягкое приближение фото).  */
.collection-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 1.75rem;                               /* большие скругления */
  background: var(--color-graphite);                    /* подложка под фото   */
  box-shadow: 0 40px 90px -35px rgba(0, 0, 0, 0.75);    /* очень мягкая тень   */
}

/* Тёмный градиент — плавно проявляется при наведении */
.collection-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(11, 11, 13, 0.80),
    rgba(11, 11, 13, 0.15) 55%,
    transparent
  );
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-luxe);
}
.collection-card:hover .collection-card__overlay { opacity: 1; }

/* Надпись «Смотреть» — всплывает снизу при наведении */
.collection-card__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2.25rem;
  text-align: center;
  font-size: 0.6875rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-porcelain);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-base) var(--ease-luxe),
              transform var(--dur-base) var(--ease-luxe);
}
.collection-card:hover .collection-card__label {
  opacity: 1;
  transform: translateY(0);
}

/* -- Панель-заглушка «Скоро» для коллекций без фото ----------------- */
.coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  border: 1px solid var(--line-base);
  border-radius: 1.75rem;
  background: rgba(23, 23, 26, 0.35);
}


/* ============================================================= */
/*  8. FORMS — формы (ЗАГОТОВКА)                                 */
/* ------------------------------------------------------------- */
/*  Пока не используется. Понадобится для страниц «Контакты»,     */
/*  «Конструктор» и оформления заказа. Базовые стили в тон темы.  */
/* ============================================================= */

.form { display: flex; flex-direction: column; gap: 1.5rem; }

.form-label {
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-ash);
  margin-bottom: 0.5rem;
}

.form-input,
.form-textarea {
  width: 100%;
  padding: 0.75rem 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-base);
  color: var(--color-porcelain);
  transition: border-color var(--dur-base) var(--ease-luxe);
}
.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-porcelain);
}


/* ============================================================= */
/*  9. ANIMATIONS — анимации                                     */
/* ============================================================= */

/* Тонкая линия-разделитель с растворением по краям */
.hairline {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.14),
    transparent
  );
}

/* Ссылка с анимированным подчёркиванием слева направо */
.link-underline { position: relative; }
.link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width var(--dur-fast) var(--ease-luxe);
}
.link-underline:hover::after { width: 100%; }

/* Мягкое приближение фотографии при наведении на .zoom-parent */
.zoom-img {
  transition: transform var(--dur-zoom) var(--ease-luxe);
  will-change: transform;
}
.zoom-parent:hover .zoom-img { transform: scale(1.06); }

/* Появление блоков при прокрутке (класс is-visible ставит скрипт) */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity   var(--dur-reveal) var(--ease-luxe),
    transform var(--dur-reveal) var(--ease-luxe);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Каскадные задержки — последовательное появление группы элементов */
.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.24s; }
.reveal-delay-3 { transition-delay: 0.36s; }
.reveal-delay-4 { transition-delay: 0.48s; }

/* Радиальное затемнение центра Hero — читаемость заголовка */
.hero-vignette {
  background: radial-gradient(
    ellipse 62% 52% at 50% 45%,
    rgba(11, 11, 13, 0.55),
    transparent 70%
  );
}


/* ============================================================= */
/*  10. ACCESSIBILITY — уважение к настройкам движения           */
/* ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .zoom-img,
  .link-underline::after { transition: none; }
  .zoom-parent:hover .zoom-img { transform: none; }
}

/* Заметное состояние фокуса для клавиатурной навигации */
a:focus-visible,
button:focus-visible,
[role="radio"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid rgba(220, 220, 225, 0.75);
  outline-offset: 3px;
}

/* Неактивная сплошная кнопка (например, «Продолжить» до выбора) */
.btn-solid:disabled,
.btn-solid[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}
.btn-solid:disabled:hover {
  background: var(--color-porcelain);
  color: var(--color-ink);
}


/* ============================================================= */
/*  11. CONSTRUCTOR — пошаговый конструктор (модальное окно)      */
/* ============================================================= */

/* Блокировка прокрутки основной страницы, пока окно открыто */
body.constructor-open { overflow: hidden; }

/* Оверлей на весь экран */
.constructor {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.constructor[hidden] { display: none; }

/* Затемняющая и размывающая подложка */
.constructor__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 8, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: cf-fade var(--dur-base) var(--ease-luxe);
}

/* Само окно конструктора */
.constructor__dialog {
  position: relative;
  width: 100%;
  max-width: 940px;
  max-height: 92vh;
  overflow-y: auto;
  background: #0f0f12;                       /* глубокий графит */
  border: 1px solid var(--line-base);
  border-radius: 1.5rem;
  padding: 3rem 1.5rem 2.25rem;
  animation: cf-rise var(--dur-reveal) var(--ease-luxe);
}
@media (min-width: 768px) {
  .constructor__dialog { padding: 3.75rem 3.5rem 2.75rem; }
}

@keyframes cf-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cf-rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* Кнопка закрытия в правом верхнем углу */
.constructor__close {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-base);
  border-radius: 9999px;
  color: var(--color-fog);
  background: transparent;
  transition: border-color var(--dur-base) var(--ease-luxe),
              color var(--dur-base) var(--ease-luxe);
}
.constructor__close:hover {
  border-color: var(--line-hover);
  color: var(--color-porcelain);
}

/* Индикатор шага */
.step-indicator {
  font-size: 0.6875rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-ash);
  text-align: center;
  margin-bottom: 1.75rem;
}

/* Заголовок и подзаголовок шага */
.constructor__title {
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  line-height: 1.15;
  font-size: 2rem;
  text-align: center;
  text-wrap: balance;
}
@media (min-width: 768px) { .constructor__title { font-size: 2.6rem; } }

.constructor__subtitle {
  max-width: 34rem;
  margin: 0.9rem auto 2.75rem;
  text-align: center;
  color: var(--color-ash);
  font-weight: 300;
  line-height: 1.6;
}

/* Сетка знаков: 2 — телефон, 3 — планшет, 4 — десктоп */
.zodiac-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
@media (min-width: 640px)  { .zodiac-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
@media (min-width: 1024px) { .zodiac-grid { grid-template-columns: repeat(4, 1fr); } }

/* Карточка знака зодиака */
.zodiac-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 9rem;
  padding: 1.25rem 0.75rem;
  text-align: center;
  color: var(--color-fog);
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--line-base);
  border-radius: 0.9rem;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-luxe),
              background-color var(--dur-base) var(--ease-luxe),
              transform var(--dur-base) var(--ease-luxe);
}
.zodiac-card:hover {
  border-color: var(--line-hover);
  background: rgba(255, 255, 255, 0.045);
}

.zodiac-card__glyph {
  font-size: 2rem;
  line-height: 1;
  font-weight: 300;
  color: var(--color-porcelain);
}
.zodiac-card__name {
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--color-porcelain);
}
.zodiac-card__dates {
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: var(--color-ash);
}

/* Индикатор выбора */
.zodiac-card__check {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  display: inline-flex;
  color: var(--color-porcelain);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity var(--dur-fast) var(--ease-luxe),
              transform var(--dur-fast) var(--ease-luxe);
}

/* Выбранная карточка — серебристая рамка, светлее фон, индикатор */
.zodiac-card[aria-checked="true"] {
  border-color: rgba(222, 222, 228, 0.8);
  background: rgba(255, 255, 255, 0.07);
}
.zodiac-card[aria-checked="true"] .zodiac-card__check {
  opacity: 1;
  transform: scale(1);
}

/* Шаг 2 — виды украшений (заглушка) */
.type-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  max-width: 34rem;
  margin: 0 auto;
}
.type-option {
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--color-porcelain);
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--line-base);
  border-radius: 0.9rem;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-luxe),
              background-color var(--dur-base) var(--ease-luxe);
}
.type-option:hover {
  border-color: var(--line-hover);
  background: rgba(255, 255, 255, 0.045);
}

/* -- Шаг 2: подпись выбранного знака ------------------------------- */
.constructor__sign {
  margin: -1.25rem 0 2.25rem;
  text-align: center;
  font-size: 0.6875rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-ash);
}
.constructor__sign b { font-weight: 400; color: var(--color-porcelain); }

/* -- Шаг 2: сетка камней (4 → 3 → 2 → 1) --------------------------- */
.stone-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
@media (max-width: 360px) { .stone-grid { grid-template-columns: 1fr; } }
@media (min-width: 640px)  { .stone-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
@media (min-width: 1024px) { .stone-grid { grid-template-columns: repeat(4, 1fr); } }

/* Карточка камня */
.stone-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  min-height: 15rem;
  padding: 1.5rem 1rem 1.35rem;
  text-align: center;
  color: var(--color-fog);
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--line-base);
  border-radius: 0.9rem;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-luxe),
              background-color var(--dur-base) var(--ease-luxe);
}
.stone-card:hover {
  border-color: var(--line-hover);
  background: rgba(255, 255, 255, 0.045);
}

/* Изображение бусины — главный визуальный элемент */
.stone-card__media {
  position: relative;
  width: 100%;
  max-width: 140px;
  aspect-ratio: 1;
  padding: 0.4rem;                              /* небольшой отступ вокруг бусины */
}
.stone-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;                          /* не обрезаем и не растягиваем бусину */
  display: block;
}

/* Единая нейтральная заглушка (видна, только если фото ещё нет) */
.stone-card__ph {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--color-ash);
  opacity: 0.5;
}
.stone-card__media.is-missing img { display: none; }
.stone-card__media.is-missing .stone-card__ph { display: flex; }

.stone-card__name {
  margin-top: auto;                             /* прижимаем подпись вниз — равная высота */
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  color: var(--color-porcelain);
}
.stone-card__purpose {
  font-size: 0.72rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--color-ash);
}

/* Индикатор выбора */
.stone-card__check {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  display: inline-flex;
  color: var(--color-porcelain);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity var(--dur-fast) var(--ease-luxe),
              transform var(--dur-fast) var(--ease-luxe);
}

/* Выбранная карточка — серебристая рамка, светлее фон, галочка */
.stone-card[aria-pressed="true"] {
  border-color: rgba(222, 222, 228, 0.85);
  background: rgba(255, 255, 255, 0.075);
}
.stone-card[aria-pressed="true"] .stone-card__check {
  opacity: 1;
  transform: scale(1);
}

/* Значение украшения (генерируется из выбранных камней) */
.stone-meaning {
  max-width: 34rem;
  margin: 1.25rem auto 0;
  padding: 1.1rem 1.25rem;
  text-align: center;
  border: 1px solid var(--line-base);
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.02);
}
.stone-meaning:empty { display: none; }
.stone-meaning__title {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-fog);
  margin-bottom: 0.6rem;
}
.stone-meaning__text { font-size: 0.9rem; line-height: 1.6; color: var(--color-ash); }
.stone-meaning__text b { color: var(--color-porcelain); font-weight: 400; }

/* Строка «Значение» в итоговой сводке (во всю ширину) */
.order-summary__row--meaning { flex-direction: column; align-items: stretch; gap: 0.45rem; }
.order-summary__row--meaning dd { text-align: left; color: var(--color-ash); font-size: 0.82rem; line-height: 1.55; }

/* Счётчик выбранных камней */
.selection-counter {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.6875rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-ash);
}

/* Нижняя панель окна (кнопки навигации по шагам) */
.constructor__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.75rem;
}

/* -- Основа браслета (только для отдельного браслета) --------------- */
.base-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (max-width: 560px) { .base-grid { grid-template-columns: 1fr; } }
.base-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.75rem 1.25rem;
  text-align: center;
  color: var(--color-fog);
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--line-base);
  border-radius: 0.9rem;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-luxe),
              background-color var(--dur-base) var(--ease-luxe);
}
.base-option:hover { border-color: var(--line-hover); background: rgba(255, 255, 255, 0.045); }
.base-option__title { font-family: "Cormorant Garamond", serif; font-size: 1.4rem; color: var(--color-porcelain); }
.base-option__note { font-size: 0.82rem; line-height: 1.45; color: var(--color-ash); }
.base-option[aria-pressed="true"] {
  border-color: rgba(222, 222, 228, 0.85);
  background: rgba(255, 255, 255, 0.075);
}

/* -- Шаг 4: карточки размера бусин ---------------------------------- */
.size-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (max-width: 480px) { .size-grid { grid-template-columns: 1fr; } }

.size-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1rem 1.5rem;
  text-align: center;
  color: var(--color-fog);
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--line-base);
  border-radius: 0.9rem;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-luxe),
              background-color var(--dur-base) var(--ease-luxe);
}
.size-card:hover { border-color: var(--line-hover); background: rgba(255, 255, 255, 0.045); }
.size-card__media {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 0.6rem;
  overflow: hidden;
  background: #0b0b0d;
}
.size-card__media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.size-card__value { font-family: "Cormorant Garamond", serif; font-size: 2rem; color: var(--color-porcelain); line-height: 1; }
.size-card__note { font-size: 0.8rem; color: var(--color-ash); }
.size-card[aria-pressed="true"] {
  border-color: rgba(222, 222, 228, 0.85);
  background: rgba(255, 255, 255, 0.075);
}

/* -- Подвески: сетка моделей ---------------------------------------- */
.pendant-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
@media (min-width: 640px) { .pendant-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
.pendant-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  min-height: 14rem;
  padding: 1.25rem 1rem;
  text-align: center;
  color: var(--color-fog);
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--line-base);
  border-radius: 0.9rem;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-luxe),
              background-color var(--dur-base) var(--ease-luxe);
}
.pendant-card:hover { border-color: var(--line-hover); background: rgba(255, 255, 255, 0.045); }
.pendant-card__media { width: 100%; max-width: 120px; aspect-ratio: 1; }
.pendant-card__media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pendant-card__name { margin-top: auto; font-size: 0.95rem; color: var(--color-porcelain); }
.pendant-card__meta { font-size: 0.72rem; letter-spacing: 0.02em; color: var(--color-ash); }
.pendant-card[aria-pressed="true"] {
  border-color: rgba(222, 222, 228, 0.85);
  background: rgba(255, 255, 255, 0.075);
}
.pendant-card[aria-pressed="true"] .stone-card__check { opacity: 1; transform: scale(1); }
.pendant-model-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 26rem;
  margin: 2rem auto 0;
}
.pendant-model-actions .btn-solid { width: 100%; justify-content: center; }

/* -- Шаг 5: выбор длины --------------------------------------------- */
.length-block { margin-bottom: 2rem; }
.length-block__label {
  text-align: center;
  font-size: 0.6875rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-ash);
  margin-bottom: 1rem;
}
.length-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  max-width: 32rem;
  margin: 0 auto;
}
.length-chip {
  min-width: 3.6rem;
  padding: 0.7rem 0.9rem;
  font-size: 0.9rem;
  color: var(--color-fog);
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--line-base);
  border-radius: 0.7rem;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-luxe),
              background-color var(--dur-base) var(--ease-luxe),
              color var(--dur-base) var(--ease-luxe);
}
.length-chip:hover { border-color: var(--line-hover); color: var(--color-porcelain); }
.length-chip[aria-pressed="true"] {
  border-color: rgba(222, 222, 228, 0.9);
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-porcelain);
}
.length-value {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-fog);
}
.length-value b { color: var(--color-porcelain); font-weight: 400; }

/* -- Настройка чокера: «Изменить состав» --------------------------- */
.compose-list {
  display: flex; flex-direction: column; gap: 0.7rem;
  max-width: 30rem; margin: 1.75rem auto 0;
}
.compose-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line-base); border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.015);
}
.compose-row__info { display: flex; flex-direction: column; gap: 0.2rem; text-align: left; }
.compose-row__stone {
  font-family: "Cormorant Garamond", serif; font-size: 1.15rem; color: var(--color-porcelain);
}
.compose-row__was {
  font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-fog); opacity: 0.7;
}
.compose-row__btn { white-space: nowrap; }

/* Сетка бусин каталога для замены */
.stone-chip-grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem;
  max-width: 40rem; margin: 1.5rem auto 0;
}
.stone-chip {
  padding: 0.6rem 0.95rem;
  font-size: 0.82rem; color: var(--color-fog);
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--line-base); border-radius: 999px;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-luxe),
              background-color var(--dur-base) var(--ease-luxe),
              color var(--dur-base) var(--ease-luxe);
}
.stone-chip:hover { border-color: var(--line-hover); color: var(--color-porcelain); }
.stone-chip[aria-pressed="true"] {
  border-color: rgba(222, 222, 228, 0.9);
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-porcelain);
}

/* -- Шаг 6: подвеска ------------------------------------------------ */
.pendant-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 22rem;
  margin: 0 auto;
}
.pendant-actions .type-option,
.pendant-actions .btn-solid { width: 100%; justify-content: center; }
.pendant-soon {
  margin-top: 1.75rem;
  text-align: center;
  color: var(--color-ash);
  font-weight: 300;
}

/* -- Шаг 7: сводка заказа ------------------------------------------- */
.order-summary {
  max-width: 30rem;
  margin: 0 auto 2.25rem;
  border: 1px solid var(--line-base);
  border-radius: 0.9rem;
  padding: 1.5rem 1.5rem 0.5rem;
}
.order-summary__row {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 1rem;
  font-size: 0.9rem;
}
.order-summary__row dt { color: var(--color-ash); flex-shrink: 0; }
.order-summary__row dd { color: var(--color-porcelain); text-align: right; }
.order-summary__row--stones dd { line-height: 1.5; }
.order-summary__price dd { font-family: "Cormorant Garamond", serif; font-size: 1.3rem; }

/* -- Шаг 7: форма покупателя ---------------------------------------- */
.order-form { max-width: 30rem; margin: 0 auto; }
.form-field { margin-bottom: 1.5rem; }
.form-fieldset { border: 0; padding: 0; margin-inline: 0; }
.messenger-options { display: flex; gap: 0.6rem; }
.chip {
  padding: 0.6rem 1.4rem;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--color-fog);
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--line-base);
  border-radius: 9999px;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-luxe),
              background-color var(--dur-base) var(--ease-luxe),
              color var(--dur-base) var(--ease-luxe);
}
.chip:hover { border-color: var(--line-hover); color: var(--color-porcelain); }
.chip[aria-checked="true"] {
  border-color: rgba(222, 222, 228, 0.9);
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-porcelain);
}
.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 1.5rem;
  font-size: 0.82rem;
  color: var(--color-ash);
  cursor: pointer;
}
.form-consent input { margin-top: 0.15rem; accent-color: #cfcfd4; }
.form-error { color: #d98a8a; font-size: 0.8rem; margin-bottom: 1rem; }
.order-form .btn-solid { width: 100%; justify-content: center; }

/* -- Шаг 7: отправка и финал ---------------------------------------- */
.send-options {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 24rem;
  margin: 0 auto 1.25rem;
}
.send-options .type-option { width: 100%; justify-content: center; }
.send-hint {
  max-width: 26rem;
  margin: 0 auto 1.25rem;
  text-align: center;
  color: var(--color-fog);
  font-size: 0.85rem;
  line-height: 1.5;
}
.done-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 24rem;
  margin: 2rem auto 0;
}
.done-actions .primary-button,
.done-actions .btn-solid { width: 100%; justify-content: center; }

/* ============================================================= */
/*  КАТАЛОГ ГОТОВЫХ УКРАШЕНИЙ                                     */
/* ============================================================= */
body.catalog-open { overflow: hidden; }

.catalog {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.catalog[hidden] { display: none; }

.catalog__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 8, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: cf-fade var(--dur-base) var(--ease-luxe);
}

.catalog__dialog {
  position: relative;
  width: 100%;
  max-width: 1040px;
  max-height: 92vh;
  overflow-y: auto;
  background: #0f0f12;
  border: 1px solid var(--line-base);
  border-radius: 1.5rem;
  padding: 3rem 1.5rem 2.25rem;
  animation: cf-rise var(--dur-reveal) var(--ease-luxe);
}
@media (min-width: 768px) { .catalog__dialog { padding: 3.5rem 3rem 2.75rem; } }

/* Четыре квадрата категорий */
.catalog-cats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  max-width: 40rem;
  margin: 2rem auto 0;
}
@media (min-width: 768px) { .catalog-cats { grid-template-columns: repeat(4, 1fr); } }
.catalog-cat {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 1rem;
  text-align: center;
  color: var(--color-porcelain);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line-base);
  border-radius: 1rem;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-luxe),
              background-color var(--dur-base) var(--ease-luxe);
}
.catalog-cat:hover { border-color: var(--line-hover); background: rgba(255, 255, 255, 0.05); }
.catalog-cat__name { font-family: "Cormorant Garamond", serif; font-size: 1.5rem; line-height: 1.1; }
.catalog-cat__meta { font-size: 0.65rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--color-ash); }
.catalog-cat[disabled] { cursor: default; opacity: 0.5; }
.catalog-cat[disabled]:hover { border-color: var(--line-base); background: rgba(255, 255, 255, 0.02); }

/* Возврат к категориям */
.catalog-back { margin-bottom: 1.5rem; }

/* Сетка товаров — больше воздуха, витрина ювелирного бутика */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.25rem 1.25rem;
  /* Единый вертикальный отступ между заголовком категории и первой строкой  */
  /* карточек (совпадает с нижним отступом подзаголовка — 2.75rem, поэтому   */
  /* в разделах с подзаголовком отступы схлопываются и не удваиваются).      */
  margin-top: 2.75rem;
}
@media (min-width: 768px) { .catalog-grid { grid-template-columns: repeat(3, 1fr); gap: 3.5rem 2rem; } }

/* Карточка-«витрина»: фото в фирменной рамке + центрированная подпись,   */
/* без «коробки» — украшение остаётся главным героем.                     */
.catalog-card {
  display: flex;
  flex-direction: column;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: transform var(--dur-base) var(--ease-luxe);
}
.catalog-card:hover { transform: translateY(-5px); }

.catalog-card__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #0b0b0d;
  border: 1px solid var(--line-soft);
  border-radius: 2px;
}
.catalog-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--dur-zoom) var(--ease-luxe);
}
.catalog-card:hover .catalog-card__media img { transform: scale(1.05); }

/* Фирменная рамка-паспарту внутри фото (проявляется при наведении) */
.catalog-card__frame {
  position: absolute; inset: 0.85rem; z-index: 1;
  border: 1px solid rgba(246, 245, 242, 0.3);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-luxe), inset var(--dur-base) var(--ease-luxe);
}
.catalog-card:hover .catalog-card__frame { opacity: 1; inset: 0.7rem; }

/* Карточка сета: две фотографии (браслет + чокер) рядом */
.catalog-card__media--pair { display: flex; gap: 1px; aspect-ratio: 4 / 3; }
.catalog-card__media--pair img { width: 50%; flex: 1 1 50%; }

/* Тело карточки — воздух + фирменная иерархия */
.catalog-card__body {
  display: flex; flex-direction: column; align-items: center;
  padding: 1.5rem 0.5rem 0;
}
/* № — тихий индекс-подпись (каталог как «каталог раритетов») */
.catalog-card__index {
  font-size: 0.58rem; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--color-ash);
}
/* НАЗНАЧЕНИЕ — главный акцент карточки после фото (серив, крупно) */
.catalog-card__purpose {
  margin-top: 0.7rem;
  font-family: "Cormorant Garamond", serif; font-weight: 300;
  font-size: 1.5rem; line-height: 1.15; color: var(--color-porcelain);
  text-wrap: balance;
}
.catalog-card__purpose--sm { font-size: 1.05rem; margin-top: 0.35rem; color: var(--color-fog); }
/* Имя (чокеры/сеты) — серив-акцент */
.catalog-card__name {
  font-family: "Cormorant Garamond", serif; font-weight: 300;
  font-size: 1.6rem; line-height: 1.1; color: var(--color-porcelain);
}
/* Камни */
.catalog-card__stones {
  margin-top: 0.65rem; font-size: 0.75rem; letter-spacing: 0.01em;
  color: var(--color-ash); line-height: 1.55; max-width: 16rem;
}
/* Метки-пилюли (мужская коллекция): «Универсальный», «Эластичная резинка» */
.catalog-card__tags {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin-top: 0.9rem;
}
.catalog-card__tag {
  display: inline-flex; align-items: center;
  padding: 0.32rem 0.7rem;
  font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-fog); opacity: 0.9;
  border: 1px solid var(--line-soft); border-radius: 999px;
  white-space: nowrap;
}
/* Подходит: знаки */
.catalog-card__zodiac { margin-top: 0.9rem; }
.catalog-card__zodiac-label {
  display: block; font-size: 0.53rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--color-fog); opacity: 0.55; margin-bottom: 0.3rem;
}
.catalog-card__zodiac-list { font-size: 0.72rem; color: var(--color-fog); opacity: 0.85; line-height: 1.5; }
/* Цена — отделена тонкой фирменной линией */
.catalog-card__price {
  margin-top: 1.15rem; padding-top: 0.95rem;
  font-family: "Cormorant Garamond", serif; font-size: 1.2rem; letter-spacing: 0.04em;
  color: var(--color-fog);
  border-top: 1px solid var(--line-soft); width: 100%; max-width: 7rem;
}
/* CTA + гранёный знак */
.catalog-card__cta {
  display: inline-flex; align-items: center; gap: 0.55rem;
  margin-top: 1rem;
  font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--color-ash);
  transition: color var(--dur-base) var(--ease-luxe);
}
.catalog-card:hover .catalog-card__cta { color: var(--color-porcelain); }
.catalog-card__cta-gem { display: inline-flex; color: var(--color-fog); }
.catalog-card__cta-gem .gem { width: 11px; height: 11px; opacity: 0.75; transition: transform var(--dur-base) var(--ease-luxe); }
.catalog-card:hover .catalog-card__cta-gem .gem { transform: scale(1.15); }
.catalog-empty { margin-top: 2rem; text-align: center; }

/* -- Увеличенный просмотр украшения (перед подтверждением выбора) --------- */
/* Крупное фото слева + детали справа (desktop); на мобильном — стопкой.     */
.catalog-preview {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 2.75rem;
  align-items: start;
}
@media (min-width: 768px) {
  .catalog-preview { grid-template-columns: 1.05fr 1fr; gap: 3rem; align-items: center; }
}
.catalog-preview__media {
  position: relative;
  width: 100%;
  max-width: 30rem;
  margin: 0 auto;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #0b0b0d;
  border: 1px solid var(--line-base);
  border-radius: 3px;
}
.catalog-preview__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.catalog-preview__frame {
  position: absolute; inset: 0.9rem; z-index: 1;
  border: 1px solid rgba(246, 245, 242, 0.25); pointer-events: none;
}
.catalog-preview__info { text-align: left; }
@media (max-width: 767px) { .catalog-preview__info { text-align: center; } }
.catalog-preview__title {
  font-family: "Cormorant Garamond", serif; font-weight: 300;
  font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.1; color: var(--color-porcelain);
}
.catalog-preview__stones {
  margin-top: 0.6rem; font-size: 1.05rem; color: var(--color-fog); line-height: 1.5;
}
.catalog-preview__purpose {
  margin-top: 1rem; font-size: 0.95rem; color: var(--color-ash); line-height: 1.65; max-width: 30rem;
}
@media (max-width: 767px) { .catalog-preview__purpose { margin-left: auto; margin-right: auto; } }
.catalog-preview__zodiac { margin-top: 1.35rem; }
.catalog-preview__label {
  display: block; font-size: 0.6875rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--color-ash); margin-bottom: 0.4rem;
}
.catalog-preview__zodiac-list { font-size: 0.8rem; color: var(--color-fog); opacity: 0.9; line-height: 1.6; }
.catalog-preview__tags {
  margin-top: 1.35rem; display: flex; flex-wrap: wrap; gap: 0.5rem;
}
@media (max-width: 767px) { .catalog-preview__tags { justify-content: center; } }
.catalog-preview__price {
  margin-top: 1.5rem; font-family: "Cormorant Garamond", serif; font-size: 1.6rem; color: var(--color-porcelain);
}
.catalog-preview__actions { margin-top: 2.75rem; display: flex; justify-content: center; }
.catalog-preview__select { min-width: 260px; justify-content: center; }

/* Готовые браслеты: выбор знака зодиака */
.zodiac-cats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  max-width: 44rem;
  margin: 2rem auto 0;
}
@media (min-width: 640px) { .zodiac-cats { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .zodiac-cats { grid-template-columns: repeat(4, 1fr); } }
.zodiac-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 1.25rem 1rem;
  text-align: center;
  color: var(--color-porcelain);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line-base);
  border-radius: 1rem;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-luxe),
              background-color var(--dur-base) var(--ease-luxe);
}
.zodiac-cat:hover { border-color: var(--line-hover); background: rgba(255, 255, 255, 0.05); }
.zodiac-cat__glyph { font-size: 1.5rem; line-height: 1; color: var(--color-fog); }
.zodiac-cat__name { font-family: "Cormorant Garamond", serif; font-size: 1.15rem; }


/* ============================================================= */
/*  КОЛЛЕКЦИИ (компактные карточки на главной)                    */
/* ============================================================= */
/* Две одинаковые премиальные карточки рядом (desktop) / друг под  */
/* другом (mobile). Заголовок, подзаголовок и кнопка впечатаны в    */
/* сам баннер, поэтому карточка — это только изображение. Лёгкая    */
/* анимация при наведении: небольшое увеличение + мягкая тень.      */
.collection-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 3.5rem;
}
@media (min-width: 768px) {
  /* Две карточки рядом, одинаковой ширины */
  .collection-cards { grid-template-columns: 1fr 1fr; gap: 1.75rem; }
}
@media (min-width: 1024px) {
  .collection-cards {
    gap: 2rem;
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
  }
}

.collection-card-tile {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: var(--color-graphite);           /* подложка под фото */
  border-radius: 1.35rem;                       /* одинаковые скругления */
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1717 / 916;                     /* пропорции баннера — без искажений */
  box-shadow: 0 26px 60px -38px rgba(0, 0, 0, 0.70),
              inset 0 0 0 1px rgba(246, 245, 242, 0.07);
  transition: transform 0.3s var(--ease-luxe),
              box-shadow 0.3s var(--ease-luxe);
  -webkit-tap-highlight-color: transparent;
}
.collection-card-tile__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Наведение: небольшое увеличение + мягкая тень, плавный переход ~0.3с */
.collection-card-tile:hover {
  transform: scale(1.025);
  box-shadow: 0 44px 90px -34px rgba(0, 0, 0, 0.82),
              inset 0 0 0 1px rgba(246, 245, 242, 0.16);
}
.collection-card-tile:focus-visible {
  outline: 2px solid var(--color-fog);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .collection-card-tile { transition: none; }
  .collection-card-tile:hover { transform: none; }
}


/* Оформление: выбранное готовое изделие */
.catalog-order-item {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  max-width: 30rem;
  margin: 0 auto 2rem;
  padding: 1rem;
  border: 1px solid var(--line-base);
  border-radius: 0.9rem;
}
.catalog-order-item__media {
  width: 96px;
  flex-shrink: 0;
  aspect-ratio: 3 / 4;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #0b0b0d;
}
.catalog-order-item__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.catalog-order-item__info { text-align: left; }
.catalog-order-item__name { font-family: "Cormorant Garamond", serif; font-size: 1.5rem; color: var(--color-porcelain); }
.catalog-order-item__cat { margin-top: 0.2rem; font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-ash); }
.catalog-order-item__note { margin-top: 0.35rem; font-size: 0.75rem; color: var(--color-ash); }
.catalog-order-item__price { margin-top: 0.5rem; font-size: 1.05rem; color: var(--color-fog); }

/* Всплывающее сообщение (например, «Раздел в разработке») */
.toast {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%) translateY(20px);
  padding: 0.9rem 1.6rem;
  background: #16161a;
  border: 1px solid var(--line-base);
  border-radius: 9999px;
  color: var(--color-porcelain);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  opacity: 0;
  pointer-events: none;
  z-index: 120;
  transition: opacity var(--dur-fast) var(--ease-luxe),
              transform var(--dur-fast) var(--ease-luxe);
}
.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Уважение к настройкам движения для конструктора */
@media (prefers-reduced-motion: reduce) {
  .constructor__backdrop,
  .constructor__dialog { animation: none; }
  .toast { transition: opacity var(--dur-fast) linear; }
}


/* ============================================================= */
/*  ФИРМЕННЫЙ ЯЗЫК KARMA STONES                                   */
/*  Повторяющиеся элементы, создающие узнаваемость: гранёный      */
/*  знак-камень, тонкие разделители, паспарту, редакционная       */
/*  типографика. Применяются по всему сайту.                      */
/* ============================================================= */

/* Гранёный знак-камень — базовый размер */
.gem { width: 16px; height: 16px; display: inline-block; }

/* Разделитель: тонкая линия — камень — тонкая линия */
.brand-divider {
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; margin: 1.6rem auto 0; max-width: 12rem;
  color: var(--color-ash);
}
.brand-divider::before,
.brand-divider::after {
  content: ""; height: 1px; flex: 1 1 auto;
  background: linear-gradient(90deg, transparent, var(--line-hover), transparent);
}
.brand-divider .gem { width: 14px; height: 14px; color: var(--color-fog); opacity: 0.8; }

/* Надзаголовок с камнем (для секций) */
.eyebrow-gem {
  display: inline-flex; align-items: center; gap: 0.6rem;
  justify-content: center;
}
.eyebrow-gem .gem { width: 12px; height: 12px; color: var(--color-fog); opacity: 0.7; }

/* ---- Полоса ценностей бренда (лаконичная, «дышащая») ---- */
.brand-values {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem 1.5rem;
  max-width: 60rem;
  margin: 0 auto;
}
@media (min-width: 768px) { .brand-values { grid-template-columns: repeat(4, 1fr); gap: 2rem; } }
.brand-value {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 0.9rem;
}
.brand-value__gem { color: var(--color-fog); opacity: 0.75; }
.brand-value__gem .gem { width: 22px; height: 22px; }
.brand-value__text {
  font-family: "Cormorant Garamond", serif; font-weight: 300;
  font-size: 1.15rem; line-height: 1.25; color: var(--color-porcelain);
  letter-spacing: 0.01em;
}

/* ---- Завершающий блок: мягкий переход в конструктор ---- */
.closing-cta { position: relative; overflow: hidden; }
.closing-cta__inner {
  max-width: 44rem; margin: 0 auto; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.closing-cta__title {
  font-family: "Cormorant Garamond", serif; font-weight: 300;
  font-size: clamp(2rem, 4.5vw, 3.5rem); line-height: 1.08;
  color: var(--color-porcelain); text-wrap: balance;
  margin-top: 1.75rem;
}
.closing-cta__text {
  margin-top: 1.5rem; max-width: 34rem;
  font-size: 1rem; font-weight: 300; line-height: 1.7; color: var(--color-ash);
}
.closing-cta__btn { margin-top: 2.75rem; }

/* Мягкое свечение-подложка для финального блока (фирменная деталь) */
.closing-cta__glow {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  width: 42rem; height: 42rem; max-width: 120%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(233,216,189,0.06) 0%, rgba(233,216,189,0) 62%);
}
.closing-cta__inner { position: relative; z-index: 1; }

/* Крупная кнопка-камень для финального блока (в стиле btn-solid) */
.btn-gem {
  display: inline-flex; align-items: center; gap: 0.8rem;
  padding: 1.05rem 2.4rem;
  background: var(--color-porcelain); color: var(--color-ink);
  font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase;
  border: 1px solid var(--color-porcelain);
  transition: background-color var(--dur-base) var(--ease-luxe),
              color var(--dur-base) var(--ease-luxe);
}
.btn-gem .gem { width: 13px; height: 13px; }
.btn-gem:hover { background: transparent; color: var(--color-porcelain); }