/* Единственная таблица стилей Merdia.

   Палитра приезжает подстановкой из _tokens.js на сборке - маркер VARS ниже заменяется на
   готовый блок :root. Второй копии цветов здесь быть не должно: имена переменных живут ещё
   и в проверке футпринта, и разъедутся молча.

   Внутри комментариев нельзя писать последовательность "звёздочка-слэш": она закрывает
   комментарий досрочно, остаток шапки становится кодом и первое правило после него
   (обычно :root) выбрасывается целиком - кнопки цвета фона, то есть невидимые.

   Шрифтовая особенность: Michroma одновесовой (400) и очень широкий. Жирности у заголовков
   НЕТ - иерархию делают размер и межбуквие; клампы размеров ниже, чем были бы у обычного
   гротеска. Не ставить font-weight 700 на Michroma: браузер начнёт факс-болдить.

   Порядок: сброс, каркас, шапка, полосы, типографика, кнопки, карточки, первый экран,
   блоки главной, бренд-стори, видео, PDP, заметки, подборщик, подвал, мобильные правки. */

:root {
  --mda-onyx: #141414;
  --mda-onyx-soft: #1f1f23;
  --mda-paper: #faf9f6;
  --mda-paper-dim: #f1eee7;
  --mda-steel: #73767d;
  --mda-silver: #ced1d7;
  --mda-brass: #a9853f;
  --mda-brass-deep: #8a6a2e;
  --mda-brass-lit: #c9a55e;
  --mda-rule: rgba(20,20,20,.14);
  --mda-rule-dark: rgba(255,255,255,.16);
  --mda-display: 'Michroma', system-ui, sans-serif;
  --mda-text: 'Varta', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body.burnwrap {
  margin: 0;
  background: var(--mda-paper);
  color: var(--mda-onyx);
  font-family: var(--mda-text);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
video { max-width: 100%; display: block; }
a { color: inherit; }

/* Клиентский js прячет карточки подборщика через свойство hidden. Карточка - flex-колонка,
   и её display перебил бы hidden, если бы не эта строка. */
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--mda-brass-lit); outline-offset: 2px; }

/* ---- каркас ------------------------------------------------------------------------------- */

.burnrow { width: min(1200px, 100% - 48px); margin-inline: auto; }

.burnmain { display: block; }

.crestskip {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  background: var(--mda-onyx); color: var(--mda-paper);
  padding: 12px 20px; text-decoration: none; font-weight: 600;
}
.crestskip:focus { left: 12px; top: 12px; }

/* ---- шапка в два яруса ---------------------------------------------------------------------
   Верхний ярус (.cresttop) - служебная полоса с цифрами каталога, нижний (.crestdeck) - знак,
   меню и кнопка. Липкая ВСЯ шапка целиком: два разных top у вложенных sticky наезжают
   сами на себя на прокрутке. */

.burnhead {
  position: sticky; top: 0; z-index: 40;
  background: var(--mda-onyx); color: var(--mda-paper);
  border-bottom: 1px solid var(--mda-rule-dark);
}
.burnhead a { text-decoration: none; }

.cresttop { background: var(--mda-onyx-soft); border-bottom: 1px solid var(--mda-rule-dark); }
.cresttop .burnrow {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  min-height: 38px; font-size: 13px; letter-spacing: .03em; color: var(--mda-silver);
}
.cresttop span { display: inline-flex; align-items: center; gap: 9px; }
/* Метка-разделитель псевдоэлементом, а не символом в тексте: символ уехал бы в выдачу поиска.
   Ромб, не точка - гранёный знак мастерской. */
.cresttop span::before {
  content: ""; flex: none; width: 6px; height: 6px;
  background: var(--mda-brass); transform: rotate(45deg);
}
.cresttop a { margin-left: auto; color: var(--mda-paper); border-bottom: 1px solid var(--mda-brass); }
.cresttop a:hover { color: var(--mda-brass-lit); }

.crestdeck .burnrow {
  display: flex; align-items: center; gap: 26px; min-height: 72px; flex-wrap: wrap;
}

.crestbrand { height: 38px; width: auto; display: block; }

/* margin-right: auto у меню: пустой ход уходит вправо, перед кнопкой. */
.crestmenu { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; margin-right: auto; }
.crestmenu a {
  font-family: var(--mda-display);
  font-size: 12px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--mda-silver);
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.crestmenu a:hover { color: var(--mda-paper); border-bottom-color: var(--mda-brass); }
.crestmenu a[aria-current="page"] { color: var(--mda-paper); border-bottom-color: var(--mda-brass-lit); }

.crestcta {
  flex: none; font-family: var(--mda-display);
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  padding: 11px 18px; border-radius: 2px;
  background: transparent; color: var(--mda-brass-lit);
  border: 1px solid var(--mda-brass);
  transition: background .15s, color .15s, border-color .15s;
}
.crestcta:hover { background: var(--mda-brass); color: var(--mda-onyx); }

/* ---- полосы-секции ------------------------------------------------------------------------ */

.lathband { padding: 64px 0; }
.lathplain { background: var(--mda-paper); }
.lathtint { background: var(--mda-paper-dim); }
.lathdark { background: var(--mda-onyx); color: var(--mda-paper); }

.lathdark .lathsub { color: var(--mda-silver); }
.lathdark .lathkick { color: var(--mda-brass-lit); }

.lathtitle {
  font-family: var(--mda-display);
  font-size: clamp(23px, 3.2vw, 37px);
  line-height: 1.18; font-weight: 400; letter-spacing: .01em;
  margin: 0 0 16px;
}
.lathsub {
  font-size: 18px; line-height: 1.55; color: #4b4e55;
  margin: 0 0 22px; max-width: 68ch;
}

h2, h3 { font-family: var(--mda-display); font-weight: 400; letter-spacing: .01em; }

.lathkick {
  font-family: var(--mda-display);
  font-size: 12px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--mda-brass-deep); margin: 0 0 14px;
}
.lathkick a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }

/* ---- кнопки ------------------------------------------------------------------------------- */

.anvilbtn, .anvilghost, .anvilbuy {
  display: inline-block; cursor: pointer;
  font-family: var(--mda-display);
  font-size: 13px; letter-spacing: .05em; text-transform: uppercase;
  padding: 14px 24px; margin: 0 10px 10px 0;
  border-radius: 2px; text-decoration: none; text-align: center;
  border: 2px solid transparent; transition: background .15s, color .15s, border-color .15s;
}
.anvilbtn { background: var(--mda-onyx); color: var(--mda-paper); }
.anvilbtn:hover { background: var(--mda-onyx-soft); }
.lathdark .anvilbtn { background: var(--mda-paper); color: var(--mda-onyx); }
.lathdark .anvilbtn:hover { background: var(--mda-silver); }

.anvilghost { background: transparent; color: inherit; border-color: currentColor; }
.anvilghost:hover { background: var(--mda-onyx); color: var(--mda-paper); border-color: var(--mda-onyx); }
.lathdark .anvilghost:hover { background: var(--mda-paper); color: var(--mda-onyx); border-color: var(--mda-paper); }

/* Кнопка покупки - единственная латунная, чтобы не путалась с навигацией. */
.anvilbuy { background: var(--mda-brass); color: #16130c; border-color: var(--mda-brass); font-size: 14px; }
.anvilbuy:hover { background: var(--mda-brass-lit); border-color: var(--mda-brass-lit); }

/* ---- карточка-плитка товара ----------------------------------------------------------------
   Снимки товаров у Merdia квадратные - пропорция 1:1, не вертикаль. */

.bezelgrid {
  display: grid; gap: 26px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.bezelplate { display: flex; flex-direction: column; min-width: 0; }

.bezelshot {
  position: relative; display: block; overflow: hidden;
  background: #fff; border: 1px solid var(--mda-rule);
  aspect-ratio: 1 / 1;
}
.bezelshot img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .35s ease;
}
.bezelplate:hover .bezelshot img { transform: scale(1.035); }

.bezelbadge {
  position: absolute; left: 10px; top: 10px; z-index: 2;
  background: var(--mda-onyx); color: var(--mda-brass-lit);
  font-family: var(--mda-display);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 2px;
}

.bezelname { font-size: 16px; line-height: 1.35; font-weight: 600; margin: 14px 0 8px; }
.bezelname a { text-decoration: none; }
.bezelname a:hover { color: var(--mda-brass-deep); }

.bezelspec {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 8px; font-size: 13px; color: var(--mda-steel);
}
.lathdark .bezelspec { color: var(--mda-silver); }

.ingotprice {
  font-family: var(--mda-display);
  font-size: 17px; margin: 0;
}

/* Кнопка проверки цены прижата к низу плитки: имена разной длины, без этого кнопки в ряду
   скачут по высоте. */
.bezelact { margin: auto 0 0; padding-top: 12px; }
.bezelact .anvilbuy { display: block; width: 100%; margin: 0; padding: 11px 12px; font-size: 12px; }

/* Звёзды долями: ширина внутреннего слоя равна проценту рейтинга. */
.gleampill {
  position: relative; display: inline-block;
  width: 74px; height: 13px; flex: none;
  background: linear-gradient(var(--mda-rule), var(--mda-rule));
  -webkit-mask: repeat-x left center / 14.8px 13px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 6.6 7 .8-5.2 4.8 1.4 7L12 17.8 5.8 21.2l1.4-7L2 9.4l7-.8z'/%3E%3C/svg%3E");
  mask: repeat-x left center / 14.8px 13px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 6.6 7 .8-5.2 4.8 1.4 7L12 17.8 5.8 21.2l1.4-7L2 9.4l7-.8z'/%3E%3C/svg%3E");
}
.gleampill i { display: block; height: 100%; background: var(--mda-brass); }
.lathdark .gleampill { background: linear-gradient(var(--mda-rule-dark), var(--mda-rule-dark)); }

/* ---- первый экран: текст слева, коллаж 2x2 справа, рейл снизу ------------------------------
   Видео в hero нет (у стора один ролик, он живёт в реel-полосе) - справа четыре квадратных
   снимка с верхушек категорий. */

.etchsplit { display: grid; gap: 48px; grid-template-columns: 1.05fr .95fr; align-items: center; }

.etchcopy { min-width: 0; }
.etchcopy .lathsub { font-size: 19px; max-width: 52ch; }

.etchstat {
  display: flex; flex-wrap: wrap; gap: 34px;
  margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--mda-rule-dark);
}
.etchstat div { min-width: 0; }
.etchstat b {
  display: block; font-family: var(--mda-display);
  font-size: 24px; font-weight: 400; line-height: 1;
}
.etchstat span { display: block; margin-top: 7px; font-size: 13px; letter-spacing: .04em; color: var(--mda-steel); }
.lathdark .etchstat span { color: var(--mda-silver); }

.etchframe {
  display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr);
  min-width: 0;
}
.etchframe a {
  position: relative; display: block; overflow: hidden; min-height: 0;
  aspect-ratio: 1 / 1; border-radius: 3px;
  background: #fff; border: 1px solid var(--mda-rule-dark);
}
.etchframe img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .35s ease;
}
.etchframe a:hover img { transform: scale(1.05); }

/* Лента «следом по отзывам»: снимок в ноготь и цена, без звёзд. */
.gleamrail {
  display: grid; gap: 18px; grid-template-columns: repeat(4, 1fr);
  margin-top: 46px; padding-top: 30px; border-top: 1px solid var(--mda-rule-dark);
}
.gleamitem { display: flex; gap: 14px; align-items: center; text-decoration: none; min-width: 0; }
.gleamitem img { flex: none; width: 76px; height: 76px; object-fit: cover; background: #fff; }
.gleamitem span { min-width: 0; }
.gleamitem strong { display: block; font-size: 14px; line-height: 1.35; font-weight: 600; }
.gleamitem i {
  display: block; font-style: normal; margin-top: 6px;
  font-family: var(--mda-display); font-size: 13px; color: var(--mda-brass-lit);
}
.gleamitem:hover strong { color: var(--mda-brass-lit); }

/* ---- usp-полоса ---------------------------------------------------------------------------- */

.rivetrow { display: grid; gap: 26px; grid-template-columns: repeat(4, 1fr); }
.rivetitem { border-top: 3px solid var(--mda-brass); padding-top: 18px; min-width: 0; }
.rivetitem h2 { font-size: 15px; margin: 0 0 8px; }
.rivetitem p { margin: 0; font-size: 15px; color: #4f5259; line-height: 1.55; }

/* ---- плитки категорий (и хаба заметок) ------------------------------------------------------
   min-height: 0 обязателен: флекс-элемент с aspect-ratio отказывается сжиматься ниже
   содержимого, и ряд плиток разъезжается по высоте на узких экранах. */

.vitrinegrid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.vitrinetile {
  position: relative; display: flex; min-height: 0;
  aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--mda-onyx); color: var(--mda-paper);
  text-decoration: none; border-radius: 3px;
}
.vitrinetile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: .55; transition: transform .4s ease, opacity .3s;
}
.vitrinetile:hover img { transform: scale(1.06); opacity: .4; }
.vitrinetile span {
  position: relative; z-index: 2; margin-top: auto; padding: 20px;
  display: block; width: 100%;
  background: linear-gradient(to top, rgba(20,20,20,.88), rgba(20,20,20,0));
}
.vitrinetile strong {
  display: block; font-family: var(--mda-display);
  font-size: 16px; font-weight: 400; line-height: 1.3;
}
.vitrinetile i {
  display: block; font-style: normal; margin-top: 5px;
  font-size: 13px; letter-spacing: .05em; color: var(--mda-silver);
}

/* Рейл «читать дальше»: те же плитки, но без снимков - фиксированной пропорции не даём. */
.chasereel { display: grid; gap: 22px; grid-template-columns: repeat(2, 1fr); }
.chasereel .vitrinetile { aspect-ratio: auto; min-height: 150px; }
.chasereel .vitrinetile span { background: none; }

/* ---- пиллы и полоса цифр ------------------------------------------------------------------- */

.facetstrip { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.facetstrip .lathkick { margin: 0 4px 0 0; }

.facetpill {
  display: inline-block; text-decoration: none;
  background: var(--mda-paper); border: 1px solid var(--mda-rule);
  padding: 10px 18px; border-radius: 2px;
  font-size: 15px; font-weight: 500;
  transition: background .15s, color .15s, border-color .15s;
}
.facetpill:hover { background: var(--mda-onyx); color: var(--mda-brass-lit); border-color: var(--mda-onyx); }

.plinthband { display: grid; gap: 28px; grid-template-columns: repeat(4, 1fr); }
.plinthband > div { border-left: 3px solid var(--mda-brass); padding-left: 18px; }
.plinthnum {
  display: block; font-family: var(--mda-display);
  font-size: clamp(26px, 3.4vw, 38px); line-height: 1;
}
.plinthlabel { display: block; margin-top: 8px; font-size: 14px; color: var(--mda-silver); }

/* ---- промо-дуэт ---------------------------------------------------------------------------- */

.alloypair { display: grid; gap: 24px; grid-template-columns: repeat(2, 1fr); }
.alloyslab {
  padding: 40px; border-radius: 3px;
  background: var(--mda-paper-dim); border: 1px solid var(--mda-rule);
}
/* Фон и цвет назначаются вместе: одиночный фон пережил бы переопределение тёмной полосы,
   а цвет текста нет - заголовок стал бы невидим (случай ynd). */
.alloyslab.lathdark {
  background: var(--mda-onyx); color: var(--mda-paper); border-color: var(--mda-onyx);
}
.alloyslab h2 { font-size: clamp(19px, 2.2vw, 26px); line-height: 1.25; margin: 0 0 12px; }
.alloyslab p { margin: 0 0 22px; color: #4f5259; max-width: 46ch; }
.alloyslab.lathdark p { color: var(--mda-silver); }

/* ---- ценности, шаги, справка --------------------------------------------------------------- */

.temperrow { display: grid; gap: 30px; grid-template-columns: repeat(3, 1fr); }
.temperitem { min-width: 0; }
.temperitem svg { width: 34px; height: 34px; color: var(--mda-brass); margin-bottom: 14px; }
.temperitem h2 { font-size: 16px; margin: 0 0 8px; }
.temperitem p { margin: 0; font-size: 15px; line-height: 1.6; color: #4f5259; }

.chasecols { display: grid; gap: 40px; grid-template-columns: 1fr 1.1fr; align-items: start; }

.chaselist { list-style: none; margin: 0; padding: 0; }
.chaselist li { display: flex; gap: 16px; margin-bottom: 22px; align-items: flex-start; }
.chaselist strong { display: block; font-family: var(--mda-display); font-size: 15px; font-weight: 400; margin-bottom: 4px; }
.chaselist span { font-size: 15px; line-height: 1.6; color: #4f5259; }

.chasenum {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 2px;
  background: var(--mda-onyx); color: var(--mda-brass-lit);
  font-family: var(--mda-display); font-size: 14px;
}

.calibrows {
  width: 100%; border-collapse: collapse; margin: 18px 0 26px;
  font-size: 15px; background: var(--mda-paper);
}
.calibrows caption {
  caption-side: top; text-align: left; padding-bottom: 10px;
  font-family: var(--mda-display); font-size: 13px; color: var(--mda-steel);
}
.calibrows th, .calibrows td {
  padding: 11px 14px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--mda-rule);
}
.calibrows thead th {
  font-family: var(--mda-display); font-size: 11px; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--mda-onyx); color: var(--mda-brass-lit); border-bottom: none;
}
.calibrows tbody th { font-weight: 600; font-family: var(--mda-text); }
.calibrows tbody tr:last-child th, .calibrows tbody tr:last-child td { border-bottom: none; }

ul.spurlist { margin: 22px 0; padding: 0; list-style: none; }
ul.spurlist li {
  position: relative; padding: 0 0 12px 26px; font-size: 16px;
}
ul.spurlist li::before {
  content: ""; position: absolute; left: 2px; top: 9px;
  width: 8px; height: 8px; background: var(--mda-brass); transform: rotate(45deg);
}

/* Вопросы и ответы. Первый раскрыт сервером - страница не встречает пустым списком. */
details.spurlist {
  border-bottom: 1px solid var(--mda-rule);
  padding: 4px 0;
}
details.spurlist summary {
  cursor: pointer; list-style: none;
  font-family: var(--mda-display); font-size: 15px;
  padding: 16px 34px 16px 0; position: relative;
}
details.spurlist summary::-webkit-details-marker { display: none; }
details.spurlist summary::after {
  content: "+"; position: absolute; right: 4px; top: 13px;
  font-size: 24px; font-weight: 400; color: var(--mda-brass-deep);
}
details.spurlist[open] summary::after { content: "\2013"; }
details.spurlist p { margin: 0 0 18px; max-width: 76ch; color: #47494f; }

/* ---- spotlight, уход, миссия --------------------------------------------------------------- */

.prongwrap { display: grid; gap: 40px; grid-template-columns: 400px 1fr; align-items: center; }
.prongframe {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 1 / 1; background: #fff; border: 1px solid var(--mda-rule);
}
.prongframe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.prongbody { min-width: 0; }
.prongbody h3 { font-size: clamp(19px, 2.2vw, 26px); line-height: 1.25; margin: 0 0 14px; }
.prongbody h3 a { text-decoration: none; }
.prongbody > p { margin: 0 0 16px; max-width: 60ch; }

.polishduo { display: grid; gap: 32px; grid-template-columns: repeat(2, 1fr); align-items: start; }

.polishlist {
  background: var(--mda-paper); border: 1px solid var(--mda-rule);
  border-top: 3px solid var(--mda-brass); padding: 26px 28px;
}
.polishlist h3 { margin: 0 0 14px; font-size: 17px; }
.polishlist ul { margin: 0; padding-left: 20px; }
.polishlist li { margin-bottom: 10px; font-size: 15px; line-height: 1.55; }

/* Миссия: текст слева, баннер бренда справа. */
.anvilband { display: grid; gap: 40px; grid-template-columns: 1.2fr .8fr; align-items: center; }
.anvilband img { border-radius: 3px; border: 1px solid var(--mda-rule-dark); }

/* ---- бренд-стори ----------------------------------------------------------------------------
   Просьба юзера: история бренда с картинками. Первая карточка (широкая) несёт баннер,
   остальные - снимок сверху, текст снизу. */

.forgeband { min-width: 0; }

.forgegrid { display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); }

.forgecard {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: var(--mda-onyx-soft); border: 1px solid var(--mda-rule-dark); border-radius: 3px;
}
.forgecard:first-child { grid-column: 1 / -1; }
.forgecard img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.forgecard:first-child img { aspect-ratio: auto; max-height: 320px; }
.forgecard div { padding: 24px 26px 28px; }
.forgecard h3 { font-size: 15px; margin: 0 0 10px; color: var(--mda-brass-lit); }
.forgecard p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--mda-silver); }

/* ---- видео ---------------------------------------------------------------------------------
   Ролик у стора один, горизонтальный 16:9 - сцена во всю ширину ряда. */

.strikereel { min-width: 0; }

.reelstage {
  overflow: hidden; border-radius: 4px; min-width: 0;
  border: 1px solid var(--mda-rule-dark); background: var(--mda-onyx-soft);
}
.reelstage video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.lathplain .reelstage, .lathtint .reelstage { border-color: var(--mda-rule); background: #fff; }

.reelgrid { display: grid; gap: 22px; grid-template-columns: repeat(2, 1fr); align-items: center; }

.reeltile { min-width: 0; }
.reeltile a {
  display: inline-block; margin-top: 12px; text-decoration: none;
  font-family: var(--mda-display); font-size: 13px;
  color: var(--mda-brass-deep); border-bottom: 1px solid currentColor;
}
.reeltile a:hover { color: var(--mda-onyx); }
.lathdark .reeltile a { color: var(--mda-brass-lit); }
.lathdark .reeltile a:hover { color: var(--mda-paper); }

/* ---- SEO-заметка и цитаты ------------------------------------------------------------------ */

.scribenote { display: grid; gap: 30px; grid-template-columns: 300px 1fr; align-items: start; }
.scribehead {
  font-size: clamp(21px, 2.6vw, 30px); line-height: 1.22; margin: 0;
  position: sticky; top: 120px;
}
.scribebody { min-width: 0; }
/* Тот же блок дважды: на главной с заголовком в колонке, на PDP без него. Без этого правила
   одинокое тело садилось бы в колонку 300px при пустой половине экрана. */
.scribebody:only-child { grid-column: 1 / -1; }
.scribebody > p { margin: 0 0 18px; font-size: 17px; line-height: 1.7; max-width: 74ch; }
.scribebody h3 { font-size: 18px; margin: 26px 0 10px; }

.mintrow { display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); }
.mintquote {
  margin: 0; padding: 26px;
  background: var(--mda-paper); border: 1px solid var(--mda-rule); border-radius: 3px;
  border-top: 3px solid var(--mda-brass);
}
.mintquote p { margin: 0; font-size: 16px; line-height: 1.6; }
.mintquote p::before { content: "\201C"; font-family: var(--mda-display); font-size: 38px; line-height: 0; color: var(--mda-brass); margin-right: 5px; vertical-align: -8px; }
.mintname { margin: 16px 0 0; font-size: 13px; color: var(--mda-steel); }

.quenchband { text-align: center; }
.quenchband .lathsub { margin-inline: auto; }

/* ---- страница товара ----------------------------------------------------------------------- */

.tracecrumb { padding: 18px 0 0; font-size: 13px; color: var(--mda-steel); }
.tracecrumb .burnrow { display: block; }
.tracecrumb a { color: var(--mda-steel); text-decoration: none; }
.tracecrumb a:hover { color: var(--mda-brass-deep); }
.tracecrumb i { font-style: normal; margin: 0 8px; opacity: .5; }
.tracecrumb [aria-current] { color: var(--mda-onyx); }

.studmain { display: grid; gap: 46px; grid-template-columns: 460px 1fr; align-items: start; }
.studshot {
  position: relative; overflow: hidden;
  aspect-ratio: 1 / 1; background: #fff; border: 1px solid var(--mda-rule);
}
.studshot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.studside { min-width: 0; }
.studside .lathtitle { font-size: clamp(20px, 2.5vw, 29px); }
.studside .ingotprice { font-size: 26px; margin: 16px 0 20px; }
.studword { font-size: 17px; line-height: 1.65; color: #47494f; margin: 16px 0; max-width: 58ch; }
.studside .facetstrip { margin-top: 22px; }

/* Ролик на PDP клавиатур - под таблицей, в тон светлой полосы. */
.studside .reelstage, .burnmain .lathplain .reelstage { margin-top: 8px; }

.studspec { width: 100%; border-collapse: collapse; font-size: 15px; max-width: 720px; }
.studspec th, .studspec td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--mda-rule); }
.studspec th { width: 210px; font-weight: 600; }
.studspec tr:nth-child(odd) { background: var(--mda-paper-dim); }

.studtrail { display: grid; gap: 26px; grid-template-columns: repeat(4, 1fr); }

/* ---- заметки ------------------------------------------------------------------------------- */

.markroll { max-width: 74ch; margin-inline: auto; }
.marksec { margin-bottom: 34px; }
.markhead { font-size: clamp(19px, 2.2vw, 24px); line-height: 1.25; margin: 0 0 12px; }
.marksec p { margin: 0; font-size: 17px; line-height: 1.75; }

.markfacts {
  background: var(--mda-paper-dim); border-left: 3px solid var(--mda-brass);
  padding: 24px 28px; margin: 34px 0;
}
.markfacts h2 { font-size: 16px; margin: 0 0 12px; }
.markfacts ul { margin: 0; padding-left: 20px; }
.markfacts li { margin-bottom: 9px; font-size: 15px; line-height: 1.55; }

.markclose { border-top: 2px solid var(--mda-onyx); padding-top: 24px; }
.markclose h2 { font-size: 19px; margin: 0 0 10px; }
.markclose p { margin: 0; font-size: 17px; line-height: 1.7; }

/* ---- подборщик ----------------------------------------------------------------------------- */

form.aimstep { margin: 0; display: grid; gap: 30px; grid-template-columns: repeat(2, 1fr); align-items: start; }
form.aimstep > p { grid-column: 1 / -1; margin: 0; }

fieldset.aimstep { border: none; margin: 0; padding: 0; min-width: 0; }
fieldset.aimstep legend {
  padding: 0; margin-bottom: 10px;
  font-family: var(--mda-display); font-size: 16px;
}
fieldset.aimstep .lathsub { font-size: 15px; margin-bottom: 14px; }

.aimchoice {
  cursor: pointer; font-family: var(--mda-text); font-size: 15px;
  background: var(--mda-paper); color: var(--mda-onyx);
  border: 1px solid var(--mda-rule); border-radius: 2px;
  padding: 9px 16px; display: inline-flex; align-items: center; gap: 8px;
  margin: 0 8px 8px 0;
  transition: background .15s, color .15s, border-color .15s;
}
.aimchoice i {
  font-style: normal; font-size: 12px; color: var(--mda-steel);
  background: var(--mda-paper-dim); border-radius: 2px; padding: 1px 7px;
}
.aimchoice:hover { border-color: var(--mda-onyx); }
.aimchoice[aria-pressed="true"] { background: var(--mda-onyx); color: var(--mda-brass-lit); border-color: var(--mda-onyx); }
.aimchoice[aria-pressed="true"] i { background: rgba(255,255,255,.16); color: var(--mda-paper); }

.aimyield {
  display: grid; gap: 26px; margin-top: 26px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

/* ---- подвал -------------------------------------------------------------------------------- */

.burnfoot { background: var(--mda-onyx); color: var(--mda-paper); padding: 56px 0 34px; }
.burncols {
  display: grid; gap: 34px; padding-bottom: 30px;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  border-bottom: 1px solid var(--mda-rule-dark);
}
.burncols ul { list-style: none; margin: 0; padding: 0; }
.burncols li { margin-bottom: 9px; }
.burncols a { color: var(--mda-silver); text-decoration: none; font-size: 15px; }
.burncols a:hover { color: var(--mda-brass-lit); }

.burncols h2 {
  font-family: var(--mda-display); font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--mda-brass-lit); margin: 0 0 14px;
}
.burncols > div > p { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.6); margin: 16px 0 0; max-width: 40ch; }

/* Колонка-визитка мастерской в подвале: строки без ссылок, тем же голосом. */
.burnaddr {
  font-style: normal; font-size: 14px; line-height: 1.65;
  color: var(--mda-silver); margin: 16px 0 0; max-width: 42ch;
}

/* Паспорт-бокс сервисных страниц: три пробирные ячейки под заголовком. */
.assaycard {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--mda-rule); border: 1px solid var(--mda-rule);
  margin: 22px 0 34px;
}
.assayrow { background: var(--mda-paper-dim); padding: 16px 18px; margin: 0; }
.assayrow dt {
  font-family: var(--mda-display); font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--mda-brass-deep);
}
.assayrow dd { margin: 7px 0 0; font-size: 15px; line-height: 1.45; color: var(--mda-onyx); }

.burnsmall { font-size: 13px; color: rgba(255,255,255,.55); margin: 18px 0 0; line-height: 1.6; }
.burnsmall a { color: var(--mda-silver); }

/* На светлой странице товара мелкий шрифт про цену стоит вне подвала.
   Адрес на светлых контактах — тем же манером: серебро подвала на бумаге нечитаемо. */
.lathplain .burnaddr, .lathtint .burnaddr { color: var(--mda-onyx); }
.lathplain .burnsmall, .lathtint .burnsmall { color: var(--mda-steel); }
.lathplain .burnsmall a, .lathtint .burnsmall a { color: #47494f; }

/* ---- мобильные правки одним куском ---------------------------------------------------------
   Три порога. 1080 - планшет: двухколонники в столбец, четвёрки в пары. 760 - телефон:
   служебная полоса шапки прячется, меню уезжает третьей строкой с горизонтальной прокруткой,
   почти всё в один столбец. 460 - узкий телефон: последние пары в столбец.
   Проверять на 500px: new-headless уже не умеет, обрезка справа на 390 - артефакт съёмки. */

@media (max-width: 1080px) {
  .etchsplit, .anvilband, .chasecols { grid-template-columns: 1fr; }

  .scribenote { grid-template-columns: 1fr; }
  .scribehead { position: static; }

  .studmain { grid-template-columns: 340px 1fr; gap: 34px; }
  .prongwrap { grid-template-columns: 300px 1fr; }

  .rivetrow, .mintrow, .studtrail { grid-template-columns: repeat(2, 1fr); }
  .forgegrid { grid-template-columns: repeat(2, 1fr); }
  .reelgrid { grid-template-columns: 1fr; }

  form.aimstep { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  body.burnwrap { font-size: 16px; }
  .assaycard { grid-template-columns: 1fr; }
  .burnrow { width: calc(100% - 32px); }
  .lathband { padding: 44px 0; }
  .lathsub { font-size: 16px; }
  .etchcopy .lathsub { font-size: 17px; }

  .cresttop { display: none; }
  .crestdeck .burnrow { gap: 14px; min-height: 58px; padding: 8px 0; }
  .crestbrand { height: 30px; }
  .crestcta { margin-left: auto; padding: 9px 12px; font-size: 11px; }
  /* Меню третьей строкой во всю ширину; nowrap + прокрутка, а не перенос в три этажа. */
  .crestmenu {
    order: 3; width: 100%; margin-right: 0;
    flex-wrap: nowrap; overflow-x: auto; gap: 18px;
    padding-bottom: 8px; -webkit-overflow-scrolling: touch;
  }
  .crestmenu a { white-space: nowrap; font-size: 11px; }

  .gleamrail, .studtrail, .plinthband { grid-template-columns: repeat(2, 1fr); }
  .rivetrow, .vitrinegrid, .chasereel, .alloypair, .polishduo, .temperrow, .mintrow,
  .studmain, .prongwrap, .forgegrid { grid-template-columns: 1fr; }

  .bezelgrid { gap: 18px; grid-template-columns: repeat(2, 1fr); }
  .bezelact .anvilbuy { padding: 10px 8px; font-size: 11px; }

  /* Таблица шире экрана листается внутри себя, а не тянет всю страницу вбок. */
  .calibrows { display: block; overflow-x: auto; white-space: nowrap; }
  .calibrows caption { display: block; }
  .calibrows th, .calibrows td { white-space: normal; min-width: 130px; }

  .anvilbtn, .anvilghost, .anvilbuy { padding: 12px 16px; font-size: 12px; }
  .etchstat { gap: 22px; }
  .etchstat b { font-size: 21px; }

  .prongwrap .prongframe { max-width: 340px; }
  .chasecols { gap: 26px; }
  .scribebody > p { font-size: 16px; }

  .burncols { grid-template-columns: 1fr; gap: 26px; }
  .burnfoot { padding: 40px 0 26px; }
}

@media (max-width: 460px) {
  .bezelgrid, .gleamrail, .plinthband, .aimyield { grid-template-columns: 1fr; }
  .etchframe { gap: 8px; }
  .lathtitle { font-size: clamp(20px, 6vw, 26px); }
  .bezelact .anvilbuy { font-size: 12px; }
}