/* Foxgirl — дайнти-украшения (золото/серебро). Палитра снята с баннера стора:
   шалфейно-серая стена, тёплое золото украшений, солнце на коже, слоновая кость.
   Лого — рукописный знак картинкой (assets/logo.jpg), в шапке стоит <img>.

   Имена классов свои: hold/gem/tray/vitrine/piece/hem вместо bay/pack/coll/shelf/pdp/endbar
   (jjcole) и wrap/card/cat-card/catalog/product/site-footer (odoland). Менять только парой
   generate.js + этот файл + main.js (.strand-btn / strand-on / data-enc / data-disclaimer). */

@font-face { font-family: 'Marcellus'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/marcellus-latin.woff2) format('woff2'); }
@font-face { font-family: 'Albert Sans'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(../fonts/albertsans-var.woff2) format('woff2'); }

:root {
  --slate: #5f6f68;         /* стена баннера */
  --slate-deep: #414e48;
  --slate-ink: #242c28;
  --ink: #1f2622;
  --honey: #c08540;         /* золото украшений — акцент и CTA */
  --honey-dark: #9c682c;
  --ivory: #f7f4ee;         /* свет на стене */
  --ivory-deep: #efe9df;
  --card: #ffffff;
  --line: #e0d9cc;
  --muted: #6f6d62;
  --star: #c49a3f;
  --radius: 10px;
  --shadow: 0 2px 9px rgba(47, 56, 51, .09);
  --shadow-hover: 0 12px 26px rgba(47, 56, 51, .17);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Albert Sans', 'Segoe UI', Arial, sans-serif;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--ivory);
}

/* Marcellus одновесный (400) — заголовки берут масштабом и трекингом, не жирностью */
h1, h2, h3, h4 { font-family: 'Marcellus', Georgia, serif; font-weight: 400; line-height: 1.18; }
img { max-width: 100%; display: block; }
a { color: var(--slate-deep); text-decoration: none; }

.hold { max-width: 1160px; margin: 0 auto; padding: 0 22px; }

.tap {
  display: inline-block;
  background: var(--honey);
  color: #fff;
  font-family: 'Albert Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 13px 30px;
  border-radius: 4px;
  border: 0;
  cursor: pointer;
  transition: background .18s, transform .18s;
}
.tap:hover { background: var(--honey-dark); transform: translateY(-1px); }

.hint {
  font-family: 'Albert Sans', sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #d9ab6e;
}

/* Звёзды — фигуры clip-path, не символы: глиф в разных шрифтах приезжает то контуром,
   то заливкой. */
.glints { display: inline-flex; align-items: center; gap: 2px; }
.glint {
  width: 13px;
  height: 13px;
  background: #d6cfc0;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.glint.glow { background: var(--star); }
.tally { color: var(--muted); font-size: 13px; }

/* ---------- шапка ---------- */
.crown {
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 60;
}
.crown-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; }
.sig { display: flex; align-items: center; }
.sig img { height: 42px; width: auto; display: block; }
.strand { display: flex; gap: 2px; flex-wrap: wrap; justify-content: flex-end; }
.strand a {
  font-family: 'Albert Sans', sans-serif;
  font-weight: 500;
  font-size: 14.5px;
  color: var(--ink);
  padding: 8px 12px;
  border-radius: 6px;
}
.strand a:hover { background: var(--ivory); color: var(--slate-deep); }
.strand a.cur { color: var(--honey-dark); }
.strand-btn { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.strand-btn span { display: block; width: 24px; height: 2px; background: var(--slate-deep); margin: 6px 0; }

/* ---------- первый экран ---------- */
.veil {
  background: linear-gradient(rgba(31, 37, 34, .5), rgba(31, 37, 34, .6)), url(../images/banner.jpg) center 30%/cover no-repeat;
  color: #fff;
}
.veil-in { padding: 104px 22px 112px; max-width: 1160px; margin: 0 auto; }
.veil-in h1, .veil-in .hint { max-width: 760px; }
.veil h1 { font-size: 54px; margin: 14px 0 16px; letter-spacing: .01em; }
.veil-sub { font-size: 18.5px; color: #ece8df; max-width: 600px; margin-bottom: 30px; font-weight: 300; }

/* ---------- категории ---------- */
.trays { padding: 54px 22px 6px; }
.tray-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.tray {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow);
  transition: box-shadow .18s, transform .18s;
}
.tray:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); }
/* aspect-ratio стоит на картинке, не на обёртке: height:100% внутри обёртки с aspect-ratio
   даёт циклический расчёт высоты, и плашки встают на разных уровнях (грабли jjcole). */
.tray-shot { flex: none; background: #fff; }
.tray-shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.tray-plate {
  margin-top: auto;
  background: var(--slate-deep);
  color: #fff;
  padding: 13px 16px 15px;
}
.tray-plate h3 { font-size: 17px; line-height: 1.25; letter-spacing: .02em; }
.tray-plate p { font-size: 13px; color: #c3cdc6; margin-top: 3px; }

/* ---------- витрина и карточки ---------- */
.vitrine { padding: 52px 22px; }
.vitrine-head { text-align: center; margin-bottom: 32px; }
.vitrine-head h2 { font-size: 32px; color: var(--slate-deep); letter-spacing: .02em; }
.vitrine-head p { color: var(--muted); margin-top: 7px; }
.vitrine-head-left { text-align: left; }
.vitrine-head-left p { max-width: 620px; }
.gems { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.gem {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .18s, transform .18s;
}
.gem:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); }
/* .gem-link тянется, иначе кнопки в ряду встают на разных уровнях */
.gem-link { display: flex; flex-direction: column; flex: 1; }
/* Квадрат задан картинке (см. .tray-shot) */
.gem-shot { flex: none; background: #fff; padding: 14px; position: relative; }
.gem-shot img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; }
.gem-flag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--ivory-deep);
  color: var(--honey-dark);
  font-family: 'Albert Sans', sans-serif;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 3px;
}
.gem-body { padding: 14px 16px 6px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.gem-tag {
  font-family: 'Albert Sans', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--honey);
}
.gem-name { font-size: 17px; color: var(--ink); font-family: 'Marcellus', Georgia, serif; }
.gem-line { font-size: 13.5px; line-height: 1.45; color: var(--muted); margin-bottom: 4px; }
.gem-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.sum { font-family: 'Marcellus', Georgia, serif; font-size: 19px; color: var(--slate-deep); }
.grade { display: flex; align-items: center; gap: 6px; }
.gem .tap-go { margin: 12px 16px 16px; text-align: center; padding: 11px 16px; font-size: 12.5px; }

/* ---------- «начни с того, что пошло не так» ---------- */
.scenes { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 54px 0 58px; }
.scene-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 34px; counter-reset: sc; }
.scene { counter-increment: sc; padding-left: 52px; position: relative; }
.scene::before {
  content: counter(sc);
  position: absolute;
  left: 0;
  top: 2px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--honey);
  border-radius: 50%;
  color: var(--honey);
  font-family: 'Marcellus', Georgia, serif;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scene-when { font-family: 'Marcellus', Georgia, serif; font-size: 20px; color: var(--slate-deep); line-height: 1.3; }
.scene-then { color: #3e453f; font-size: 15.5px; margin: 8px 0 10px; }
.scene-to {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: 'Albert Sans', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--honey-dark);
  border-bottom: 1px solid rgba(192, 133, 64, .35);
  padding-bottom: 2px;
}
.scene-to:hover { color: var(--honey); border-bottom-color: var(--honey); }
.scene-cost { color: var(--muted); font-weight: 500; font-size: 14px; }

/* ---------- три довода ---------- */
.vows { background: var(--slate-deep); color: #fff; padding: 58px 0; }
.vows-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.vow { border-top: 2px solid rgba(255, 255, 255, .22); padding-top: 18px; }
.vow-no {
  display: block;
  font-family: 'Albert Sans', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .2em;
  color: #dcae74;
  margin-bottom: 10px;
}
.vow h3 { font-size: 21px; margin-bottom: 8px; }
.vow p { color: #ccd5cf; font-size: 15px; }

/* ---------- ценовая лестница коллекций ---------- */
.tiers { padding: 56px 0 4px; }
.tier-rows { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.tier {
  display: grid;
  grid-template-columns: 1.5fr .7fr .9fr 1.6fr;
  gap: 18px;
  align-items: baseline;
  padding: 16px 14px;
  border-bottom: 1px solid var(--line);
  transition: background .16s, padding-left .16s;
}
.tier:hover { background: #fff; padding-left: 22px; }
.tier-name { font-family: 'Marcellus', Georgia, serif; font-size: 18px; color: var(--slate-deep); }
.tier-n { color: var(--muted); font-size: 14px; }
.tier-span { font-family: 'Albert Sans', sans-serif; font-weight: 600; font-size: 16px; color: var(--honey-dark); }
.tier-lo { color: var(--muted); font-size: 14px; }

/* ---------- миссия ---------- */
.atelier { padding: 62px 0; }
.atelier-grid { display: grid; grid-template-columns: 380px 1fr; gap: 44px; align-items: center; }
.atelier-shot img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius); display: block; }
.atelier h2 { font-size: 29px; color: var(--slate-deep); margin-bottom: 14px; }
.atelier p { color: var(--muted); }
.atelier p + p { margin-top: 13px; }

/* ---------- пары золото/серебро ---------- */
.twins { background: #fff; border-top: 1px solid var(--line); padding: 54px 0 60px; }
.twin { display: grid; grid-template-columns: 290px 1fr; gap: 30px; align-items: start; padding: 26px 0; border-top: 1px solid var(--line); }
.twin h3 { font-size: 22px; color: var(--slate-deep); margin-bottom: 8px; }
.twin-say p { color: #3e453f; font-size: 15.5px; }
.twin-n { font-family: 'Albert Sans', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--honey); margin-top: 10px; }
.twin-row { display: flex; flex-wrap: wrap; gap: 14px; }
.bead {
  width: 168px;
  background: var(--ivory);
  border-radius: 12px;
  padding: 12px 12px 14px;
  transition: background .16s, transform .16s;
}
.bead:hover { background: var(--ivory-deep); transform: translateY(-2px); }
.bead img { width: 100%; aspect-ratio: 1; object-fit: contain; margin-bottom: 8px; }
.bead-name { display: block; font-family: 'Albert Sans', sans-serif; font-weight: 600; font-size: 13.5px; color: var(--ink); line-height: 1.3; }
.bead-cost { display: block; margin-top: 4px; color: var(--honey-dark); font-size: 13.5px; font-weight: 700; }

/* ---------- длинный текст ---------- */
.press { background: var(--ivory-deep); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 58px 0; }
.press-in { max-width: 900px; }
.press h2 { font-size: 28px; color: var(--slate-deep); margin-bottom: 16px; }
.press h3 { font-size: 21px; color: var(--slate-deep); margin: 28px 0 10px; padding-left: 14px; border-left: 3px solid var(--honey); }
.press p { margin-bottom: 12px; color: #3e453f; }
.press ul { margin: 10px 0 14px; color: #3e453f; list-style: none; }
.press li { margin-bottom: 8px; padding-left: 20px; position: relative; }
.press li::before { content: ""; position: absolute; left: 0; top: 11px; width: 8px; height: 2px; background: var(--honey); }
.press table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; background: #fff; }
.press th, .press td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.press th { background: var(--slate-deep); color: #fff; font-family: 'Albert Sans', sans-serif; font-weight: 500; }

/* ---------- разбор рейтингов ---------- */
.takes { padding: 58px 0 70px; }
.take-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.take { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px 24px; border-top: 3px solid var(--honey); }
.take-num { font-family: 'Albert Sans', sans-serif; color: var(--muted); font-size: 14px; }
.take-num b { font-family: 'Marcellus', Georgia, serif; font-size: 26px; font-weight: 400; color: var(--slate-deep); margin-right: 6px; }
.take .glints { margin: 6px 0 12px; }
.take blockquote { font-size: 15.5px; color: #3e453f; }
.take-link { margin-top: 12px; font-family: 'Albert Sans', sans-serif; font-weight: 700; }
.take-link a { color: var(--slate-deep); border-bottom: 1px solid rgba(65, 78, 72, .25); }
.take-link a:hover { color: var(--honey-dark); border-bottom-color: var(--honey-dark); }

/* ---------- шапка категории и сервисных страниц ---------- */
.brow {
  background: linear-gradient(135deg, var(--slate-ink), var(--slate-deep) 58%, #55665e);
  color: #fff;
  padding: 54px 0 50px;
}
.brow h1 { font-size: 38px; margin: 8px 0 10px; letter-spacing: .01em; }
.brow-sub { color: #d3dbd5; max-width: 660px; }
.brow-nums { margin-top: 14px; font-family: 'Albert Sans', sans-serif; font-weight: 600; font-size: 13.5px; letter-spacing: .1em; text-transform: uppercase; color: #dcae74; }

/* ---------- страница товара ---------- */
.crumb { padding: 16px 22px 0; font-size: 14px; color: var(--muted); }
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--honey-dark); }
.crumb b { color: var(--line); font-weight: 400; margin: 0 4px; }
.piece { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 44px; padding: 30px 22px 46px; }
.piece-shot {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 30px;
  align-self: start;
  position: sticky;
  top: 94px;
}
.piece-shot img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.piece-side h1 { font-size: 30px; margin: 8px 0 10px; color: var(--ink); }
.piece-score { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.piece-lede { font-size: 17px; color: #3e453f; margin-bottom: 22px; }
/* Цена и кнопка в одной строке (грабли jjcole: строка наличия между ними уводила
   кнопку за первый экран телефона). Наличие — строка досье ниже. */
.piece-buy { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.piece-cost { font-family: 'Marcellus', Georgia, serif; font-size: 34px; color: var(--slate-deep); }
.piece-buy .tap-go { padding: 14px 42px; font-size: 14px; }
/* Досье вместо буллетов продавца: всё из products.json либо своё по коллекции (CAT_CARE). */
.dossier { border-top: 1px solid var(--line); }
.entry { display: grid; grid-template-columns: 140px 1fr; gap: 14px; padding: 11px 4px; border-bottom: 1px solid var(--line); }
.entry:nth-child(odd) { background: rgba(255, 255, 255, .55); }
.entry dt { font-family: 'Albert Sans', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.entry dd { font-size: 15.5px; color: #3e453f; }
.entry dd a { color: var(--honey-dark); border-bottom: 1px solid rgba(192, 133, 64, .3); }

/* Таблица размеров кольца: каждая строка — свой ASIN и своя кнопка data-enc */
.gauge { margin-top: 26px; }
.gauge h2 { font-size: 20px; color: var(--slate-deep); margin-bottom: 6px; }
.gauge-note { font-size: 14px; color: var(--muted); margin-bottom: 12px; }
.gauge table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.gauge th { background: var(--slate-deep); color: #fff; font-family: 'Albert Sans', sans-serif; font-weight: 500; font-size: 13.5px; letter-spacing: .06em; text-transform: uppercase; padding: 10px 14px; text-align: left; }
.gauge td { border-bottom: 1px solid var(--line); padding: 10px 14px; font-size: 15px; }
.gauge tr:last-child td { border-bottom: 0; }
.gauge-size { font-family: 'Marcellus', Georgia, serif; font-size: 17px; color: var(--slate-deep); }
.gauge .tap-mini {
  display: inline-block;
  background: var(--honey);
  color: #fff;
  font-family: 'Albert Sans', sans-serif;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 4px;
  cursor: pointer;
}
.gauge .tap-mini:hover { background: var(--honey-dark); }

.piece-read { padding: 6px 22px 20px; }
.piece-read-in { max-width: 860px; }
.piece-intro { font-size: 18px; line-height: 1.66; color: #3e453f; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
/* Авторские блоки — нумерованная колонка, не сетка плиток (связный разбор из 4 частей) */
.folds { list-style: none; margin-top: 30px; }
.fold { display: grid; grid-template-columns: 62px 1fr; gap: 6px; padding-bottom: 26px; }
.fold-no { font-family: 'Marcellus', Georgia, serif; font-size: 26px; color: #93a49b; line-height: 1; padding-top: 4px; }
.fold-say h2 { font-size: 20px; color: var(--slate-deep); margin-bottom: 7px; }
.fold-say p { color: #3e453f; font-size: 16px; }
.heed { background: #fff; border-left: 4px solid var(--honey); border-radius: 0 12px 12px 0; padding: 22px 26px; box-shadow: var(--shadow); }
.heed h2 { font-family: 'Albert Sans', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--honey-dark); margin-bottom: 8px; }
.heed p { color: #3e453f; font-size: 15.5px; }

/* ---------- сервисные страницы ---------- */
.leaf { padding: 46px 0 64px; }
.leaf-in { max-width: 820px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 38px 42px; }
.leaf h2 { color: var(--slate-deep); font-size: 23px; margin: 24px 0 10px; }
.leaf h2:first-child { margin-top: 0; }
.leaf h3 { color: var(--slate-deep); font-size: 18px; margin: 18px 0 8px; }
.leaf p { margin-bottom: 12px; color: #3e453f; }
.leaf ul, .leaf ol { margin: 10px 0 14px 22px; color: #3e453f; }
.leaf li { margin-bottom: 6px; }
.leaf table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 15px; }
.leaf th, .leaf td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.leaf th { background: var(--ivory); font-family: 'Albert Sans', sans-serif; color: var(--slate-deep); }
.leaf a { color: var(--honey-dark); }

/* ---------- подвал ----------
   Три яруса: тёмная полоса с высказыванием, светлые строки «ключ - значение», нижняя строка.
   Ряда Visa/Mastercard нет намеренно — сайт ничего не принимает к оплате.
   Лого-картинка чёрная, на тёмном hem не видна — словесный знак набран Marcellus. */
.hem { border-top: 3px solid var(--honey); }
.hem-say { background: var(--slate-ink); color: #fff; padding: 46px 0 44px; }
.hem-say-in { display: grid; grid-template-columns: 300px 1fr; gap: 44px; align-items: start; }
.hem-mark { display: flex; flex-direction: column; gap: 8px; }
.hem-word { font-family: 'Marcellus', Georgia, serif; font-size: 27px; color: #fff; letter-spacing: .08em; }
.hem-tag {
  font-family: 'Albert Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #d9ab6e;
}
.hem-note { color: #a9b6ae; font-size: 15.5px; border-left: 2px solid rgba(217, 171, 110, .5); padding-left: 24px; max-width: 640px; }

.hem-rows { background: #fff; }
.stitch { display: grid; grid-template-columns: 160px 1fr; gap: 16px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--line); }
.stitch:last-child { border-bottom: 0; }
.stitch-key { font-family: 'Albert Sans', sans-serif; font-weight: 600; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.stitch-val { display: flex; flex-wrap: wrap; gap: 6px 0; font-size: 14.5px; }
.stitch-val > * { padding: 0 16px; border-left: 1px solid var(--line); color: var(--slate-deep); }
.stitch-val > *:first-child { padding-left: 0; border-left: 0; }
.stitch-val a:hover { color: var(--honey-dark); }
.stitch-val span { color: var(--muted); }

.hem-base { background: var(--ivory); border-top: 1px solid var(--line); }
.hem-base-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 30px; padding-top: 15px; padding-bottom: 20px; font-size: 13px; color: var(--muted); }
.hem-small { max-width: 640px; }

/* ---------- адаптив ---------- */
@media (max-width: 1080px) {
  .tray-grid { grid-template-columns: repeat(2, 1fr); }
  .gems { grid-template-columns: repeat(3, 1fr); }
  .tier { grid-template-columns: 1.4fr .8fr 1fr; }
  .tier-lo { display: none; }
}
@media (max-width: 860px) {
  .gems { grid-template-columns: repeat(2, 1fr); }
  .vows-grid, .take-grid { grid-template-columns: 1fr; }
  .scene-list { grid-template-columns: 1fr; gap: 22px; }
  .atelier-grid { grid-template-columns: 1fr; gap: 26px; }
  .atelier-shot img { max-width: 340px; margin: 0 auto; }
  .twin { grid-template-columns: 1fr; gap: 18px; }
  .piece { grid-template-columns: 1fr; gap: 28px; }
  .piece-shot { position: static; }
  .hem-say-in { grid-template-columns: 1fr; gap: 22px; }
  .hem-note { padding-left: 18px; }
  .veil h1 { font-size: 40px; }
  .veil-in { padding: 78px 22px 88px; }
  .strand-btn { display: block; }
  .strand {
    display: none;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    padding: 10px 16px 16px;
    box-shadow: var(--shadow-hover);
  }
  .strand-on .strand { display: flex; }
  .strand a { padding: 11px 10px; font-size: 16px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .gems { grid-template-columns: 1fr; }
  /* Категории в две колонки и на телефоне: в одну карточка 4:3 занимает пол-экрана */
  .tray-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .tray-plate { padding: 10px 12px 12px; }
  .tray-plate h3 { font-size: 14px; }
  .tray-plate p { font-size: 12px; }
  .veil h1 { font-size: 31px; }
  .veil-sub { font-size: 17px; }
  .vitrine-head h2 { font-size: 26px; }
  .brow h1 { font-size: 29px; }
  .tier { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .tier-n { grid-column: 1; }
  .tier-span { grid-column: 2; grid-row: 1; text-align: right; }
  .bead { width: calc(50% - 7px); }
  .fold { grid-template-columns: 1fr; gap: 0; }
  .fold-no { font-size: 20px; color: var(--honey-dark); margin-bottom: 2px; }
  .entry { grid-template-columns: 1fr; gap: 2px; }
  .gauge th, .gauge td { padding: 8px 10px; }
  .stitch { grid-template-columns: 1fr; gap: 6px; }
  .stitch-val > * { padding: 0 12px; }
  .leaf-in { padding: 28px 20px; }
  .leaf table { display: block; overflow-x: auto; white-space: nowrap; }
  .leaf td { white-space: normal; min-width: 150px; }
  .piece-cost { font-size: 28px; }
  .hem-word { font-size: 22px; }
  .sig img { height: 36px; }
}