/* flax.css — вся вёрстка tarse. Классы и переменные из _tokens.js (префикс --trs-).
   Светлый льняной editorial: Crimson Pro для заголовков, Work Sans для текста.
   Контраст на тёмных полосах — переопределением переменных в .duskband/.mapleband,
   не парными правилами (урок lomon). */

:root {
  --trs-flax: #f6f2ea;
  --trs-tint: #eee7d9;
  --trs-ink: #2a1a14;
  --trs-dusk: #2e1512;
  --trs-duskink: #f3ece1;
  --trs-rust: #8f4434;
  --trs-accent: #8f4434; /* текстовый акцент; тёмные полосы переопределяют (кнопкам с заливкой не нужен) */
  --trs-sky: #6ba3bd;
  --trs-kick: #7a5a3e;
  --trs-line: #d9cfbc;
  --trs-card: #fffdf8;
  --trs-body: 'Work Sans', system-ui, sans-serif;
  --trs-head: 'Crimson Pro', Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--trs-body);
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--trs-ink);
  background: var(--trs-flax);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--trs-rust); text-decoration-thickness: 1px; text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--trs-head); font-weight: 600; line-height: 1.15; margin: 0 0 .45em; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
h2 { font-size: clamp(1.55rem, 3vw, 2.3rem); }
h3 { font-size: 1.22rem; }

.roamwrap { width: min(1220px, 92vw); margin: 0 auto; }

/* ---- скип-ссылка ---- */
.dartline {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--trs-ink); color: var(--trs-flax); padding: 10px 18px;
}
.dartline:focus { left: 12px; }

/* ---- шапка ---- */
.navband {
  background: var(--trs-flax);
  border-bottom: 1px solid var(--trs-line);
  position: sticky; top: 0; z-index: 50;
}
.roamnav { display: flex; align-items: center; gap: 26px; padding: 14px 0; }
.roamnav .tarsemark { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--trs-ink); }
.roamnav .tarsemark img { width: 38px; height: 38px; border-radius: 50%; }
.roamnav .tarsemark b { font-family: var(--trs-head); font-size: 1.35rem; letter-spacing: .14em; }
.navlinks { display: flex; gap: 20px; margin-left: auto; flex-wrap: wrap; }
.navlinks a { color: var(--trs-ink); text-decoration: none; font-size: .94rem; font-weight: 500; }
.navlinks a:hover { color: var(--trs-rust); text-decoration: underline; }
.navburger { display: none; margin-left: auto; background: none; border: 1px solid var(--trs-line); border-radius: 8px; padding: 8px 12px; font: inherit; color: var(--trs-ink); cursor: pointer; }
@media (max-width: 860px) {
  .navburger { display: block; }
  .navlinks { display: none; width: 100%; flex-direction: column; gap: 4px; padding: 8px 0 14px; }
  .navlinks.navswung { display: flex; }
  .roamnav { flex-wrap: wrap; }
}

/* ---- полосы ---- */
.plainband { padding: 58px 0; }
.creamband { padding: 58px 0; background: var(--trs-tint); }
.duskband, .mapleband {
  padding: 58px 0;
  background: var(--trs-dusk);
  color: var(--trs-duskink);
  --trs-kick: #c9a487;
  --trs-accent: #e8b9a4;
  --trs-ink: var(--trs-duskink);
}
.duskband a, .mapleband a, .roamfoot a { color: #e8b9a4; }
/* кнопки со своей заливкой из-под перекраски ссылок вынуть */
.duskband a.flaxbtn, .mapleband a.flaxbtn, .roamfoot a.flaxbtn, .roamhero a.flaxbtn { color: #fff; }
.duskband a.ghostbtn, .mapleband a.ghostbtn, .roamfoot a.ghostbtn { color: inherit; }
.herokick, .kickline { color: var(--trs-kick); font-size: .82rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 10px; }

/* ---- герой ---- */
.roamhero { position: relative; background: var(--trs-dusk); color: var(--trs-duskink); --trs-kick: #c9a487; --trs-accent: #e8b9a4; overflow: hidden; }
.roamhero .herodeck { position: relative; max-width: 46em; padding: 84px 0; }
.roamline { color: #fff; }
.herolead { font-size: 1.13rem; max-width: 34em; color: inherit; }
.heroacts { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 22px; }
@media (max-width: 860px) {
  .roamhero .herodeck { padding: 52px 0; }
}

/* ---- кнопки ---- */
.flaxbtn, .ghostbtn, .buybtn {
  display: inline-block; padding: 13px 26px; border-radius: 999px;
  font: 600 .95rem var(--trs-body); text-decoration: none; cursor: pointer; border: 0;
}
.flaxbtn, .buybtn { background: var(--trs-rust); color: #fff; }
.flaxbtn:hover, .buybtn:hover { background: #7a3729; }
/* надпись кнопки покупки — растр (_mk-btn.js, looktag.png 130x20): блоком, чтобы не плавала базовая линия */
.buybtn img { display: block; width: 130px; height: 20px; }
.ghostbtn { background: transparent; color: inherit; border: 1.5px solid currentColor; }
.ghostbtn:hover { border-color: var(--trs-rust); color: var(--trs-rust); }

/* ---- карточка товара (плитка) ---- */
.pleatgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1020px) { .pleatgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .pleatgrid { grid-template-columns: repeat(2, 1fr); } }
.drapecard {
  background: var(--trs-card); border: 1px solid var(--trs-line); border-radius: 14px;
  overflow: hidden; display: flex; flex-direction: column; min-height: 0;
  color: var(--trs-ink);
}
.drapecard > a { color: inherit; text-decoration: none; display: flex; flex-direction: column; flex: 1; }
.drapepic { display: block; aspect-ratio: 4 / 5; position: relative; background: #fff; }
.drapepic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.drapename { padding: 12px 14px 4px; font-weight: 500; font-size: .93rem; line-height: 1.4; }
.drapemeta { padding: 0 14px 14px; margin-top: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.flaxtag { font-family: var(--trs-head); font-size: 1.18rem; font-weight: 600; }
.flaxstars { color: var(--trs-accent); font-size: .86rem; white-space: nowrap; }
.drapecard .flaxbtn, .drapecard .buybtn { margin: 0 14px 14px; padding: 9px 18px; font-size: .87rem; align-self: start; }

/* ---- плитки разделов ---- */
.wardgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
@media (max-width: 1020px) { .wardgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .wardgrid { grid-template-columns: repeat(2, 1fr); } }
.wardtile {
  position: relative; border-radius: 14px; overflow: hidden; background: var(--trs-card);
  border: 1px solid var(--trs-line); text-decoration: none; color: var(--trs-ink); display: block;
}
.wardtile .drapepic { aspect-ratio: 4 / 5; }
.wardtile figcaption { padding: 12px 14px; }
.wardtile b { font-family: var(--trs-head); font-size: 1.08rem; font-weight: 600; display: block; }
.wardcount { color: var(--trs-kick); font-size: .85rem; }
.wardtile:hover b { color: var(--trs-rust); }

/* ---- полоса ценностей ---- */
.valuerow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 780px) { .valuerow { grid-template-columns: 1fr; } }
.valuecell { text-align: center; padding: 8px 12px; }
.valuecell svg { width: 44px; height: 44px; stroke: var(--trs-rust); margin-bottom: 10px; }
.duskband .valuecell svg { stroke: #e8b9a4; }

/* ---- usp-строка героя ---- */
.gustband { border-top: 1px solid var(--trs-line); border-bottom: 1px solid var(--trs-line); background: var(--trs-tint); }
.gustband .roamwrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; padding-top: 36px; padding-bottom: 36px; }
@media (max-width: 860px) { .gustband .roamwrap { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (max-width: 560px) { .gustband .roamwrap { grid-template-columns: 1fr; gap: 20px; } }
.gustcell { font-size: .92rem; margin: 0; line-height: 1.55; }
.gustcell b { display: block; font-family: var(--trs-head); font-size: 1.14rem; font-weight: 600; margin-bottom: 7px; }

/* ---- статистика ---- */
.maplestat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; text-align: center; }
@media (max-width: 720px) { .maplestat { grid-template-columns: repeat(2, 1fr); } }
.maplestat b { display: block; font-family: var(--trs-head); font-size: 2.2rem; color: inherit; }
.maplestat span { color: var(--trs-kick); font-size: .9rem; }

/* ---- материалы / промо-дуэт ---- */
.spotpiece { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: center; }
@media (max-width: 860px) { .spotpiece { grid-template-columns: 1fr; } }
.spotpiece .drapepic { aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; border: 1px solid var(--trs-line); }
.spotcopy p { max-width: 36em; }

/* ---- цитаты ---- */
.sayrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 860px) { .sayrow { grid-template-columns: 1fr; } }
.saycard {
  background: var(--trs-card); border: 1px solid var(--trs-line); border-radius: 14px;
  padding: 20px 22px; font-size: .96rem;
}
.saycard footer { color: var(--trs-kick); margin-top: 10px; font-size: .87rem; }

/* ---- журнал ---- */
.jotrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1020px) { .jotrow { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .jotrow { grid-template-columns: 1fr; } }
.jotcard {
  background: var(--trs-card); border: 1px solid var(--trs-line); border-radius: 14px;
  padding: 20px 22px; text-decoration: none; color: var(--trs-ink); display: block;
}
.jotcard b { font-family: var(--trs-head); font-size: 1.12rem; display: block; margin-bottom: 6px; }
.jotcard span { font-size: .9rem; }
.jotcard:hover b { color: var(--trs-rust); }

/* ---- крошки ---- */
.roamcrumb { font-size: .86rem; padding: 16px 0 0; }
.roamcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.roamcrumb li + li::before { content: '\203A'; margin-right: 8px; color: var(--trs-kick); }
.roamcrumb a { color: var(--trs-kick); }

/* ---- карточка товара (страница) ---- */
.piecetop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; padding: 30px 0 54px; }
@media (max-width: 860px) { .piecetop { grid-template-columns: 1fr; } }
.piecepics { position: sticky; top: 84px; align-self: start; background: #fff; border: 1px solid var(--trs-line); border-radius: 14px; overflow: hidden; }
@media (max-width: 860px) { .piecepics { position: static; } }
.piecefacts h1 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.buyrow { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 16px 0 6px; }
.buyrow .flaxtag { font-size: 1.7rem; }
.factlist { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 10px; }
.factlist li { padding-left: 20px; position: relative; }
.factlist li::before { content: ''; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--trs-rust); }
.packline { font-size: .9rem; color: var(--trs-kick); }

/* ряды на карточке */
.tonerow, .pairrow, .morerow { padding: 34px 0; }
.tonerow { border-top: 1px solid var(--trs-line); }
.sundownband { text-align: center; }
.sundownband .flaxtag { font-size: 1.6rem; margin-right: 14px; }

/* ---- подборщик ---- */
.legform { max-width: 720px; }
.legstep { margin-bottom: 26px; }
.legstep h2 { font-size: 1.3rem; }
.legchoice { display: flex; gap: 10px; flex-wrap: wrap; }
.legchoice button {
  font: 500 .93rem var(--trs-body); padding: 10px 20px; border-radius: 999px;
  border: 1.5px solid var(--trs-line); background: var(--trs-card); color: var(--trs-ink); cursor: pointer;
}
.legchoice button[aria-pressed="true"] { background: var(--trs-rust); border-color: var(--trs-rust); color: #fff; }
.legout { margin-top: 30px; }

/* ---- сервисные страницы и статьи ---- */
.pagebody { padding: 40px 0 64px; }
.proselock { max-width: 760px; }
.proselock h2 { margin-top: 1.6em; }
.hemcrest { color: var(--trs-kick); }
.foldtable { border-collapse: collapse; width: 100%; margin: 20px 0; font-size: .94rem; }
.foldtable th, .foldtable td { border: 1px solid var(--trs-line); padding: 10px 12px; text-align: left; }
.foldtable th { background: var(--trs-tint); font-weight: 600; }
.duskband .foldtable th { background: rgba(255, 255, 255, .08); }
address { font-style: normal; }

/* ---- топ-подборки ---- */
.toppicks { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.toppicks h2 { margin: 0; }
.toppicks a { font-size: .92rem; }

/* ---- подвал ---- */
.roamfoot { background: var(--trs-dusk); color: var(--trs-duskink); --trs-kick: #c9a487; --trs-accent: #e8b9a4; margin-top: 70px; }
.footfields { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 28px; padding: 48px 0 30px; }
@media (max-width: 860px) { .footfields { grid-template-columns: 1fr 1fr; } }
.footfields b { font-family: var(--trs-head); display: block; margin-bottom: 10px; font-size: 1.05rem; }
.footfields ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.footfields a { color: var(--trs-duskink); text-decoration: none; font-size: .92rem; }
.footfields a:hover { text-decoration: underline; }
.footscript { font-size: .88rem; color: #cbb9a8; max-width: 34em; }
.roamfoot address { font-size: .88rem; color: var(--trs-duskink); margin: 12px 0 4px; }
.footfine { border-top: 1px solid rgba(255, 255, 255, .14); padding: 18px 0 26px; font-size: .84rem; color: #cbb9a8; display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
/* дисклеймер-картинка: потолок в px, единицы только px (растр 380 css-px, retina x3) */
.hemtag { max-width: min(380px, 100%); height: auto; display: block; }

/* доступность */
:focus-visible { outline: 3px solid var(--trs-sky); outline-offset: 2px; }