/* ==========================================================================
   Home — trust sections (owner: trust).
   «Отзывы» (src/js/home/reviews.js): the head with the average rating and round arrows over a scroll-snap row of
   review cards (3 / 2 / ~1.15 per view) and dots under it; the section is hidden when there are no reviews.
   «Вопросы и ответы» (src/js/home/faq.js): a search in the head; category tabs across the full width; the open
   category's groups as cards in two columns that end on one line; search results as cards «Категория ›
   Подзаголовок».
   Same light language as the rest of the home page: white islands on the paper, the section titles in
   Alumni Sans 900 + .oblique (home.css .home-h2), Golos Text for everything else, blue only where it means
   something (open state, links, focus).
   ========================================================================== */

/* ---------------------------------------------------------------- Отзывы */
/* Four cards a view, not three (owner 06.10.2026: «карточки слишком большие… на страницу помещаются только три…
   под первым отзывом очень много свободного места»). A review is three or four lines, so the card was sized for a
   text that is not there: 330px of reserved height put a hand's width of white under most of them. The card is
   narrower, its body is set one step down, and the min-height is only what the skeleton needs — the cards still
   share a row's height, so what is left of the unevenness is a long review beside a short one, not padding. */
.trev {
  --trev-per: 4;                 /* cards per view: 4 from 1300px, 3 from 1024px, 2 from 768px, ~1.15 on phones */
  --trev-gap: 14px;
  --trev-bleed-l: 0px;           /* phones: the row runs on to the screen edges */
  --trev-bleed-r: 0px;
}
@media (max-width: 1299.98px) {
  .trev { --trev-per: 3; }
}
@media (max-width: 1023.98px) {
  .trev { --trev-per: 2; }
}

/* Head, right: the average rating chip and the round arrows, on the head's bottom line. */
.trev__side { display: flex; flex: none; align-items: center; gap: 12px; }
.trev__score {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 0;
  padding: 0 16px 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  white-space: nowrap;
}
.trev__score.is-loading { padding: 0; border-color: transparent; background: transparent; }
.trev__score-stars { position: relative; display: inline-flex; }
.trev__score-base,
.trev__score-top { display: inline-flex; gap: 2px; }
/* the filled stars over the grey ones, cut at the average (4,7 → 94 %) */
.trev__score-top { position: absolute; inset: 0 auto 0 0; width: var(--fill, 100%); overflow: hidden; }
.trev__score-stars svg { flex: none; width: 16px; height: 16px; }
.trev__score-base svg { fill: var(--line-strong); }
.trev__score-top svg { fill: var(--accent); }
/* the narrowest phones: one star instead of five (below) */
.trev__score-one { display: none; }
.trev__score-one svg { width: 16px; height: 16px; fill: var(--accent); }
.trev__score-value { font-size: var(--fs-lg); font-weight: 700; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.trev__score-count { font-size: var(--fs-sm); line-height: 1.2; color: var(--ink-3); }

.trev__nav { display: flex; gap: 8px; }
.trev__arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.trev__arrow svg { width: 20px; height: 20px; }
.trev__arrow:hover { border-color: var(--accent); color: var(--accent-ink); }
.trev__arrow:active { background: var(--accent-tint); }
.trev__arrow:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* at the ends: aria-disabled (the button keeps focus), drawn quiet */
.trev__arrow[aria-disabled='true'] { border-color: var(--line); background: var(--surface-2); color: #B3B7BE; cursor: default; }

/* The row: a native scroller with snap points (swipe, trackpad, keyboard focus all scroll it). The padding keeps
   the card shadows and focus rings unclipped; on phones it is the screen gutter the row bleeds into. */
.trev__viewport {
  display: flex;
  gap: var(--trev-gap);
  margin: -8px calc(-1 * var(--trev-bleed-r)) -22px calc(-1 * var(--trev-bleed-l));
  padding: 8px var(--trev-bleed-r) 22px var(--trev-bleed-l);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--trev-bleed-l) var(--trev-bleed-r);
  scrollbar-width: none;
}
.trev__viewport::-webkit-scrollbar { display: none; }
.trev__viewport.is-loading { overflow: hidden; }

/* One review. Cards of a row share its height (flex stretch); the item sits on the card's bottom edge.
   No min-height any more, and the text is cut at four lines rather than five (owner 2026-10-07: «между отзывом
   и островком очень много свободного места»): a row is now exactly as tall as its longest review needs, so the
   slack above the islands is what one unusually long review leaves — not what a reserved fifth line left on
   every card whether or not anybody wrote that far. */
.trev-card {
  display: flex;
  flex: 0 0 calc((100% - (var(--trev-per) - 1) * var(--trev-gap)) / var(--trev-per));
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 14px 14px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(25, 27, 32, .04), 0 14px 26px -20px rgba(25, 27, 32, .2);
  scroll-snap-align: start;
}
.trev-card__top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.trev-card__avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--av-bg, var(--accent-tint));
  color: var(--av-fg, var(--accent-ink));
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
}
.trev-card__who { display: grid; flex: 1 1 auto; gap: 3px; min-width: 0; }
.trev-card__name {
  overflow: hidden;
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trev-card__date { font-size: var(--fs-xs); line-height: 1.3; color: var(--ink-3); }
.trev-card__game {
  display: inline-flex;
  flex: none;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1;
  color: var(--ink-2);
  white-space: nowrap;
}
.trev-card__game::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--trev-game, var(--ink-3)); }
.trev-card__game--cs2 { --trev-game: #E0A100; }
.trev-card__game--dota2 { --trev-game: #C8402E; }
.trev-card__stars { display: inline-flex; align-self: flex-start; gap: 2px; }
.trev-card__stars svg { width: 16px; height: 16px; fill: var(--line-strong); }
.trev-card__stars svg.is-on { fill: var(--accent); }

/* Five lines, then «Читать полностью» opens it in place and «Свернуть» closes it again (home/reviews.js).
   Owner, 06.10.2026: the card should be short and the rest should be behind the link, not laid out in full — a
   review is a glance, and the one a reader wants in full they will open. Five lines is the size the owner
   pointed at on 06.10.2026 — the height of a card with the first review open. The body is the page's own 15px:
   it was dropped to 13px when the cards were first made smaller, and the owner noticed. */
.trev-card__body { display: grid; justify-items: start; gap: 4px; min-width: 0; }
.trev-card__text {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}
.trev-card.is-open .trev-card__text { display: block; overflow: visible; -webkit-line-clamp: unset; line-clamp: none; }
.trev-card__more {
  position: relative;
  padding: 2px 0;
  border: 0;
  border-radius: 4px;
  background: none;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.3;
  color: var(--accent-ink);
  cursor: pointer;
}
.trev-card__more::before { content: ''; position: absolute; inset: -10px -6px; }
.trev-card__more:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }
.trev-card__more:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* The item from the order: picture, name, wear / hero; the whole row links to its page. */
.trev-card__item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  /* On the card's bottom edge, so the islands of a row stand on one line (owner, 06.10.2026: «островки с
     товаром находятся на разной высоте»). The cards of a row share its height, so a short review leaves slack
     above the island — that slack is one or two lines now that the review itself is cut to five. */
  margin-top: auto;
  /* One height for every island, whatever the item is called: a name that takes two lines would otherwise make
     its island taller than the one beside it, and the row would look ragged even with the bottoms aligned. */
  min-height: 68px;
  padding: 7px 8px 7px 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.trev-card__item:hover { border-color: rgba(55, 129, 252, .4); background: #F5F9FF; color: var(--ink); }
.trev-card__item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.trev-card__thumb {
  display: grid;
  place-items: center;
  width: 52px;
  height: 40px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--accent-tint);
}
.trev-card__thumb img { display: block; width: 100%; height: 100%; padding: 4px; object-fit: contain; }
.trev-card__item--art .trev-card__thumb img { padding: 0; object-fit: cover; }
.trev-card__thumb .pcard__noimg { display: grid; place-items: center; width: 100%; height: 100%; color: var(--ink-3); }
.trev-card__item-text { display: grid; gap: 2px; min-width: 0; }
/* a long name takes a second line (the 48px picture already makes the row that tall) */
.trev-card__item-name {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.trev-card__item-detail { overflow: hidden; font-size: var(--fs-xs); line-height: 1.3; color: var(--ink-3); text-overflow: ellipsis; white-space: nowrap; }
.trev-card__item-go { display: grid; color: var(--ink-3); transition: color var(--dur-fast) var(--ease-out); }
.trev-card__item:hover .trev-card__item-go { color: var(--accent-ink); }

/* Loading: the same boxes with grey bars. */
.trev-card--skeleton { box-shadow: none; }
.trev-card--skeleton .skeleton { background: #ECEDEA; }
.trev-sk__score { width: 212px; height: 44px; border-radius: var(--radius-pill); }
.trev-sk__avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; }
.trev-sk__line { height: 11px; margin: 4px 0; }
.trev-sk__line--sm { height: 9px; margin: 2px 0; }
.trev-sk__stars { width: 88px; height: 16px; }
.trev-sk__item { width: 100%; height: 54px; margin-top: auto; border-radius: var(--radius-sm); }

/* Dots: where the row is (one per snap position); a click scrolls there. */
.trev__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; }
.trev__dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--line-strong);
  cursor: pointer;
  transition: width var(--dur-med) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.trev__dot::before { content: ''; position: absolute; inset: -10px -4px; }
.trev__dot:hover { background: #B3B7BE; }
.trev__dot.is-on { width: 24px; background: var(--accent); }

@media (max-width: 767.98px) {
  .trev {
    --trev-per: 1.15;
    --trev-gap: 12px;
    --trev-bleed-l: var(--main-pad-left);
    --trev-bleed-r: var(--main-pad-right);
  }
  /* the chip on the left, the arrows on the right, under the lead */
  .trev__side { flex: 1 1 100%; justify-content: space-between; gap: 8px; }
  .trev__score { gap: 8px; padding: 0 12px 0 10px; }
  .trev__score-base,
  .trev__score-top { gap: 1px; }
  .trev__score-stars svg { width: 14px; height: 14px; }
  .trev-card { padding: 14px 14px 12px; border-radius: 20px; }
  .trev__dots { margin-top: 16px; }
}
@media (max-width: 379.98px) {
  .trev__score-stars { display: none; }
  .trev__score-one { display: grid; }
  .trev-sk__score { width: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  .trev__arrow,
  .trev__dot,
  .trev-card__item,
  .trev-card__item-go { transition: none; }
}

/* ---------------------------------------------------------------- Вопросы и ответы */
/* Categories (the main headings) → the open category's heading strip → its groups (subheadings) as cards in two
   columns that faq.js arrange() splits so both end on one line, with no empty space: the shorter column's question
   rows share the small difference. One column under 760px of section width. */
.tfaq { container: tfaq / inline-size; }

/* Head: the title on the left, the search on the right, both on the head's bottom line (under the title when
   the row is too narrow). */
/* (grows: beside the title and the lead it takes the rest of the line, on a line of its own the whole line) */
.tfaq__search { flex: 1 1 380px; min-width: min(100%, 300px); }
.tfaq__search-box .search__icon { left: 16px; }
.tfaq .tfaq__search-input {
  min-height: 52px;
  padding-left: 46px;
  border-color: var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: var(--fs-md);
}
.tfaq .tfaq__search-input:hover { border-color: var(--line-control); }
.tfaq .tfaq__search-input:focus { border-color: var(--accent); }
.tfaq__search-clear { right: 4px; }

/* Categories. faq.js sets [data-layout] from the section width: tiles (one row; icon and count over the title),
   rows (icon · title · count; --tfaq-per a row, so rows are 4 + 3, never a gap at a row end) or chips (a row that
   scrolls sideways; also the form before the script runs). */
.tfaq__tabs {
  --tfaq-gap: 10px;
  position: relative;      /* the visually-hidden counts stay inside the scrolling row */
  display: flex;
  gap: var(--tfaq-gap);
  margin: 0 0 22px;
}
.tfaq__tabs[data-layout='tiles'],
.tfaq__tabs[data-layout='rows'] { flex-wrap: wrap; }
.tfaq__tabs[data-layout='tiles'] > .tfaq__tab,
.tfaq__tabs[data-layout='rows'] > .tfaq__tab {
  flex: 1 1 calc((100% - (var(--tfaq-per, var(--tfaq-n)) - 1) * var(--tfaq-gap)) / var(--tfaq-per, var(--tfaq-n)) - 1px);
  min-width: 0;
}
/* (the chip row runs on to the screen's right edge, so a cut chip shows there is more) */
.tfaq__tabs:not([data-layout='tiles']):not([data-layout='rows']) {
  margin: -4px calc(-1 * var(--main-pad-right)) 14px 0;
  padding: 4px var(--main-pad-right) 4px 0;          /* keeps the focus rings unclipped */
  scroll-padding-inline: 0 var(--main-pad-right);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.tfaq__tabs::-webkit-scrollbar { display: none; }

.tfaq__tab {
  position: relative;      /* keeps its visually-hidden count inside (no page overflow from the chip row) */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: 'icon title count';
  align-items: center;
  flex: none;
  gap: 10px;
  min-height: 56px;
  padding: 8px 12px 8px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.tfaq__tab-icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--surface-sunken);
  color: var(--ink-2);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.tfaq__tab-icon svg { width: 20px; height: 20px; }
.tfaq__tab-text { grid-area: title; display: grid; min-width: 0; }
.tfaq__tab-title { min-width: 0; text-wrap: balance; }
/* The lead belongs to the open tile only, and only where a tile is wide enough to carry it (tiles, below). */
.tfaq__tab-lead { display: none; }
.tfaq__tab-count {
  grid-area: count;
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-2);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.tfaq__tab:hover { border-color: #C9DBFB; background: #F3F7FF; }
.tfaq__tab:hover .tfaq__tab-icon { background: var(--accent-tint); color: var(--accent-ink); }
.tfaq__tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tfaq__tab[aria-selected='true'] { border-color: var(--accent-strong); background: var(--accent-strong); color: #FFFFFF; }
.tfaq__tab[aria-selected='true']:hover { border-color: var(--accent-hover); background: var(--accent-hover); }
.tfaq__tab[aria-selected='true'] .tfaq__tab-icon { background: rgba(255, 255, 255, .18); color: #FFFFFF; }
.tfaq__tab[aria-selected='true'] .tfaq__tab-count { background: #FFFFFF; color: var(--accent-ink); }
/* while searching: the counts are matches, categories without any step back */
.tfaq__tabs.is-searching .tfaq__tab-count { background: var(--accent-tint); color: var(--accent-ink); }
.tfaq__tab.is-empty { color: var(--ink-3); }
.tfaq__tab.is-empty .tfaq__tab-icon { opacity: .6; }
.tfaq__tabs.is-searching .tfaq__tab.is-empty .tfaq__tab-count { background: transparent; color: var(--ink-3); }

/* tiles: the category name in the display face, set on the tile's bottom line */
.tfaq__tabs[data-layout='tiles'] .tfaq__tab {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: 'icon count' 'title title';
  align-content: space-between;
  align-items: start;
  row-gap: 14px;
  min-height: 116px;
  padding: 12px 12px 14px 14px;
  border-radius: 20px;
}
.tfaq__tabs[data-layout='tiles'] .tfaq__tab-count { justify-self: end; }
.tfaq__tabs[data-layout='tiles'] .tfaq__tab-text { align-self: end; gap: 7px; }
.tfaq__tabs[data-layout='tiles'] .tfaq__tab-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.625rem;
  line-height: .9;
  text-transform: uppercase;
  font-synthesis: none;
}
/* The open tile says what the section is about — the sentence that used to be repeated under the row beside a
   second «ОСНОВНОЕ». Tiles never wrap, so the row can simply give the open one the width: flex-basis 0 turns the
   whole row into shares, and the open tile takes 2.4 of them. Three lines are kept clear whatever the category,
   so switching tabs does not change the row's height and shift the board under it. */
.tfaq__tabs[data-layout='tiles'] > .tfaq__tab { flex-basis: 0; }
.tfaq__tabs[data-layout='tiles'] > .tfaq__tab[aria-selected='true'] { flex-grow: 2.75; }
.tfaq__tabs[data-layout='tiles'] .tfaq__tab[aria-selected='true'] .tfaq__tab-lead {
  display: -webkit-box;
  min-height: calc(3 * 1.35em);
  overflow: hidden;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: 1.35;
  color: rgba(255, 255, 255, .86);
  text-wrap: pretty;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

/* chips */
.tfaq__tabs:not([data-layout='tiles']):not([data-layout='rows']) .tfaq__tab {
  gap: 8px;
  min-height: 44px;
  padding: 4px 8px 4px 5px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.tfaq__tabs:not([data-layout='tiles']):not([data-layout='rows']) .tfaq__tab-icon { width: 34px; height: 34px; border-radius: 50%; }
.tfaq__tabs:not([data-layout='tiles']):not([data-layout='rows']) .tfaq__tab-icon svg { width: 18px; height: 18px; }

/* The open category (or the search results). */
.tfaq__main { min-width: 0; }
.tfaq__view.is-entering { animation: tfaq-in 260ms var(--ease-out); }
@keyframes tfaq-in { from { opacity: 0; transform: translateY(6px); } }

/* Its lead. The open category's name is NOT repeated here — it is already on the open tile, in the display face,
   two lines above (owner 06.10.2026). Where a tile is wide enough the tile shows this sentence too, and this copy
   drops out of sight but stays in the accessibility tree; where the categories are a chip row it is the only copy
   and shows as a line under them. */
.tfaq__view-head { margin: 0 0 16px; padding: 0 4px; }
.tfaq__view-lead { min-width: 0; margin: 0; font-size: var(--fs-md); line-height: 1.45; color: var(--ink-2); }
.tfaq__tabs[data-layout='tiles'] + .tfaq__main .tfaq__view-head {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The board: two columns (faq.js puts the cards). The shorter column's cards take the height the other column has
   more, each by its number of questions (--tfaq-rows, set by faq.js), and spread it over their question rows — so
   both columns end on one line and every row grows alike (faq.js keeps that to a few px a row, or uses one
   column). .is-measuring: nothing stretched while faq.js measures the cards. */
.tfaq__board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 16px;
}
.tfaq__col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tfaq__col > .tfaq__card { flex-grow: var(--tfaq-rows, 1); }
.tfaq__board.is-single { grid-template-columns: minmax(0, 1fr); }
.tfaq__board.is-single > .tfaq__col + .tfaq__col { display: none; }
.tfaq__board.is-measuring { align-items: start; }
.tfaq__board.is-measuring .tfaq__col > * { flex-grow: 0; }
.tfaq__board.is-measuring .tfaq__group { min-height: 0 !important; }
/* faq.js: while an answer's height animates, the group cards hold their heights (.is-held, a min-height set
   inline); a column far shorter than the other (answers opened there) keeps its cards' own heights. */
.tfaq__col > .tfaq__group.is-held,
.tfaq__col.is-loose > .tfaq__group { flex-grow: 0; }

/* A group: its subheading, then its questions. */
.tfaq__group {
  container: tfaq-card / inline-size;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 6px 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(25, 27, 32, .04);
}
.tfaq__group-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6px 14px;
  padding: 14px 12px 14px 14px;
}
.tfaq__group-title { display: grid; gap: 8px; min-width: 0; margin: 0; font: inherit; }
.tfaq__group-name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2rem;
  line-height: .9;
  text-transform: uppercase;
  font-synthesis: none;
  color: var(--ink);
}
/* (no .oblique here: the card subheadings are upright — see faq.js) */
/* search results: the category above the subheading */
.tfaq__group-cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.tfaq__group-cat svg { flex: none; color: var(--accent-ink); }
.tfaq__group-sep { color: var(--line-control); }
.tfaq__group-count { flex: none; padding-bottom: 1px; font-size: var(--fs-sm); line-height: 1.3; color: var(--ink-3); white-space: nowrap; }

/* The questions of a group: dividers between them; the open one turns pale blue and the dividers on both sides of
   it step away. A stretched card shares the extra height out over its question rows (grid rows stretch alike; each
   row's button takes it), so no blank strip stays under the last question. */
.tfaq__list { display: grid; flex: 1 1 auto; }
.tfaq__item {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  border-radius: 16px;
  scroll-margin-block: 24px;
  transition: background-color var(--dur-med) var(--ease-out);
}
.tfaq__item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 1px;
  background: var(--line);
  transition: opacity var(--dur-med) var(--ease-out);
}
.tfaq__item.is-open { background: #F5F9FF; }
.tfaq__item.is-open::before,
.tfaq__item.is-open + .tfaq__item::before { opacity: 0; }
/* opened from a link (deep link, [data-faq-open]): a short blue ring */
.tfaq__item.is-target { animation: tfaq-target 2.4s var(--ease-out); }
@keyframes tfaq-target {
  0%, 55% { box-shadow: 0 0 0 2px var(--accent); }
  100% { box-shadow: 0 0 0 2px rgba(55, 129, 252, 0); }
}
.tfaq__h { display: grid; margin: 0; font: inherit; }

.tfaq__q {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 58px;
  padding: 12px 10px 12px 14px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.tfaq__q:hover { background: #EEF4FF; }
.tfaq__q:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.tfaq__q-body { display: grid; gap: 4px; min-width: 0; }
.tfaq__q-text { min-width: 0; text-wrap: pretty; }
/* search results: why a question matched when its own text does not have the words */
.tfaq__snip { font-size: var(--fs-sm); font-weight: 400; line-height: 1.45; color: var(--ink-3); }
.tfaq__item.is-open .tfaq__snip { display: none; }

/* Plus → minus: two drawn bars; the upright one lies down when the answer opens. */
.tfaq__icon {
  position: relative;
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: background-color var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}
.tfaq__icon::before,
.tfaq__icon::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  margin: -1px 0 0 -6px;
  border-radius: 1px;
  background: var(--ink);
  transition: transform var(--dur-slow) var(--ease-out), background-color var(--dur-med) var(--ease-out);
}
.tfaq__icon::after { transform: rotate(90deg); }
.tfaq__q:hover .tfaq__icon { border-color: var(--accent); }
.tfaq__item.is-open > .tfaq__h .tfaq__icon { background: var(--accent-strong); border-color: var(--accent-strong); }
.tfaq__item.is-open > .tfaq__h .tfaq__icon::before,
.tfaq__item.is-open > .tfaq__h .tfaq__icon::after { background: #FFFFFF; }
.tfaq__item.is-open > .tfaq__h .tfaq__icon::after { transform: rotate(0deg); }

/* The answer: grid rows 0fr ↔ 1fr animate the height to its content; the text eases in as it opens. */
.tfaq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms var(--ease-out);
}
.tfaq__item.is-open > .tfaq__panel { grid-template-rows: 1fr; }
.tfaq__inner { min-height: 0; overflow: hidden; }
/* hidden="until-found" (closed answers): base.css turns every [hidden] into display:none, which would hide the
   text from find-in-page too. Where content-visibility exists, keep the box and let the browser skip it instead. */
@supports (content-visibility: hidden) {
  .tfaq__inner[hidden='until-found'] { display: block !important; content-visibility: hidden; }
}
.tfaq__a {
  max-width: 72ch;
  padding: 0 18px 18px 14px;
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--ink-2);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 220ms var(--ease-out), transform 320ms var(--ease-out);
}
.tfaq__item.is-open .tfaq__a { opacity: 1; transform: none; }
/* opened by find-in-page or a link (faq.js): no animation */
.tfaq__item.is-instant .tfaq__panel,
.tfaq__item.is-instant .tfaq__a { transition: none; }
.tfaq__a > * { margin: 0; }
.tfaq__a > * + * { margin-top: 10px; }
/* what an answer ends with: «Подробнее» and / or «Написать в поддержку» (faq.js actsHTML) */
.tfaq__a > .tfaq__acts { display: flex; flex-wrap: wrap; gap: 0 22px; margin-top: 4px; }
.tfaq__a b,
.tfaq__a strong { font-weight: 600; color: var(--ink); }
.tfaq__a a:not(.link-btn) { color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.tfaq__a a:not(.link-btn):hover { color: var(--accent-hover); }
/* plain lists from the content (faq-data.js): blue dots, or numbers */
.tfaq__a ul:not([class]),
.tfaq__a ol:not([class]) { display: grid; gap: 6px; padding: 0; list-style: none; }
.tfaq__a ul:not([class]) > li,
.tfaq__a ol:not([class]) > li { position: relative; padding-left: 20px; }
.tfaq__a ul:not([class]) > li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.tfaq__a ol:not([class]) { counter-reset: tfaq-ol; }
.tfaq__a ol:not([class]) > li { padding-left: 28px; counter-increment: tfaq-ol; }
.tfaq__a ol:not([class]) > li::before {
  content: counter(tfaq-ol);
  position: absolute;
  left: 0;
  top: .2em;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent-ink);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1;
}

/* Float: the five wear intervals (core/format.js WEAR_INTERVALS). */
.tfaq__wears {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}
.tfaq__wear {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 10px 10px 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
}
.tfaq__wear-code {
  justify-self: start;
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.5rem;
  line-height: .9;
  font-synthesis: none;
  color: var(--ink);
  transform: skewX(-10deg);
  transform-origin: 0 100%;
}
.tfaq__wear-name { font-size: var(--fs-xs); line-height: 1.3; color: var(--ink-2); }
.tfaq__wear-range { font-size: var(--fs-xs); line-height: 1.3; color: var(--ink-3); }

/* Delivery: the three transfer modes, in the colours the cards and boards use. */
.tfaq__terms { display: grid; gap: 10px; margin-bottom: 0; }
.tfaq__term {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: baseline;
  gap: 2px 14px;
}
.tfaq__term-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.tfaq__term-name svg { flex: none; width: 16px; height: 16px; }
.tfaq__term-name--instant { color: var(--success); }
.tfaq__term-name--within { color: var(--accent-ink); }
.tfaq__term-name--later { color: var(--ink-2); }
.tfaq__term-text { margin: 0; }

/* The order / sale process: numbered steps joined by a thin line. */
.tfaq .tfaq__steps { display: grid; margin: 0; }
.tfaq__step {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  padding-bottom: 12px;
}
.tfaq__step:last-child { padding-bottom: 0; }
.tfaq__step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 13.5px;
  top: 32px;
  bottom: 4px;
  width: 1px;
  background: #C9DBFB;
}
.tfaq__step-num {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-strong);
  color: #FFFFFF;
  font-size: var(--fs-xs);
  font-weight: 700;
}
.tfaq__step-body { padding-top: 2px; line-height: 1.5; }
.tfaq__step-title { font-weight: 600; color: var(--ink); }

/* Lists inside answers (payout methods). */
.tfaq .tfaq__ul { display: grid; gap: 6px; margin-bottom: 0; }
.tfaq__ul li { position: relative; padding-left: 18px; }
.tfaq__ul li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* Trade Protection: the trade, seven protected days, the free item. */
.tfaq__days {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.tfaq__days-end {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-2);
  white-space: nowrap;
}
.tfaq__days-end svg { flex: none; width: 16px; height: 16px; }
.tfaq__days-end--free { color: var(--success); }
.tfaq .tfaq__days-track {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
  margin: 0;
}
.tfaq__day {
  display: grid;
  place-items: center;
  height: 28px;
  border-radius: 7px;
  background: var(--warning-tint);
  color: var(--warning);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.tfaq__days-cap {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--ink-3);
}
.tfaq__days-cap svg { flex: none; width: 14px; height: 14px; color: var(--warning); }

/* Search results: a line with the count and a reset, then the cards «Категория › Подзаголовок»; the words marked. */
.tfaq__rhead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  margin: -6px 0 10px;
  padding: 0 4px;
}
.tfaq__rhead-text { margin: 0; font-size: var(--fs-md); line-height: 1.45; color: var(--ink-2); overflow-wrap: anywhere; }
.tfaq__rhead-text b { font-weight: 700; color: var(--ink); }
.tfaq__rhead-q { font-weight: 600; color: var(--ink); }
.tfaq__rhead-reset { flex: none; font-size: var(--fs-sm); }
.tfaq__mark {
  padding: 0 1px;
  border-radius: 3px;
  background: rgba(55, 129, 252, .2);
  color: inherit;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Nothing found: one card across the width — the message and a reset on the left, the categories to open on the
   right; stacked on narrow boards. */
.tfaq__empty {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 20px 36px;
  min-width: 0;
  padding: 24px 24px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.tfaq__empty-main { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.tfaq__empty-side { align-self: center; min-width: 0; padding-left: 36px; border-left: 1px solid var(--line); }
.tfaq__empty-label {
  margin: 0 0 8px;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@container tfaq (max-width: 879.98px) {
  .tfaq__empty { grid-template-columns: minmax(0, 1fr); }
  .tfaq__empty-side { padding: 18px 0 0; border-top: 1px solid var(--line); border-left: 0; }
}
.tfaq__chip-count { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-3); }
.tfaq__empty-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--accent-tint);
  color: var(--accent-ink);
}
.tfaq__empty-title {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2rem;
  line-height: .88;
  text-transform: uppercase;
  font-synthesis: none;
  color: var(--ink);
}
.tfaq__empty-text { margin: 0; max-width: 52ch; font-size: var(--fs-base); line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; }
.tfaq .tfaq__empty-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tfaq__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 14px 0 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.tfaq__chip svg { flex: none; color: var(--accent-ink); }
.tfaq__chip:hover { border-color: var(--accent); background: #F3F7FF; }
.tfaq__chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tfaq__empty-reset { margin-top: 4px; }

/* «Не нашли ответ?» — one strip under the board, across the section: the icon, the line and the button on the
   right. It is not part of the columns, so it never leaves a gap in them; on narrow boards the button drops under
   the text and takes the width. */
.tfaq__ask {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px 16px;
  margin: 16px 0 0;
  padding: 16px 18px 16px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(25, 27, 32, .04);
}
.tfaq__ask-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--accent-tint);
  color: var(--accent-ink);
}
.tfaq__ask-body { min-width: 0; }
/* The card tier's size (same as .tfaq__group-name), upright — see faq.js. It was at 2.375rem while it carried the
   slant: a skewed glyph is rasterised without hinting, and Alumni Sans 900 is condensed enough that at 1.5rem the
   counters closed up and «НЕ НАШЛИ ОТВЕТ?» read as a blocky smudge beside a clean «ОСНОВНОЕ» (owner, 05.10.2026).
   Upright it is hinted again, so it no longer needs the extra size — and at 2.375rem it would shout as loudly as
   the category heading it sits under. */
.tfaq__ask-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2rem;
  line-height: .9;
  text-transform: uppercase;
  font-synthesis: none;
  color: var(--ink);
}
.tfaq__ask-text { margin: 5px 0 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.tfaq__ask-btn { white-space: nowrap; }
@container tfaq (max-width: 639.98px) {
  .tfaq__ask { grid-template-columns: auto minmax(0, 1fr); }
  .tfaq__ask-btn { grid-column: 1 / -1; width: 100%; }
}

/* Narrow cards (one card's width, not the section's): the wear tiles become rows, the delivery terms stack. */
@container tfaq-card (max-width: 479.98px) {
  .tfaq__wears { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .tfaq__wear {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 10px;
    padding: 8px 12px;
  }
  .tfaq__wear-code { font-size: 1.25rem; }
  .tfaq__term { grid-template-columns: minmax(0, 1fr); }
  .tfaq__days { grid-template-columns: minmax(0, 1fr) auto; }
  .tfaq__days-track { grid-column: 1 / -1; grid-row: 2; }
  .tfaq__group-name { font-size: 2rem; }
}

/* ---------------------------------------------------------------- phones */
@media (max-width: 767.98px) {
  /* the search takes the whole row; the category chips run to the screen edges, the first one aligned with the text */
  .tfaq__search { flex-basis: 100%; }
  .tfaq .tfaq__tabs:not([data-layout='tiles']):not([data-layout='rows']) {
    margin-inline: calc(-1 * var(--main-pad-left)) calc(-1 * var(--main-pad-right));
    padding-inline: var(--main-pad-left) var(--main-pad-right);
    scroll-padding-inline: var(--main-pad-left) var(--main-pad-right);
  }
  .tfaq__view-head { margin-bottom: 14px; }
  .tfaq__view-lead { font-size: var(--fs-base); }
  .tfaq__board,
  .tfaq__col { gap: 12px; }
  .tfaq__group { padding: 4px 4px 6px; border-radius: 20px; }
  .tfaq__group-head { padding: 12px 10px 12px 12px; }
  .tfaq__item::before { left: 12px; right: 12px; }
  .tfaq__q { gap: 12px; padding: 12px 8px 12px 12px; }
  .tfaq__a { padding: 0 12px 16px; }
  .tfaq__empty { padding: 20px 18px 18px; border-radius: 20px; }
  .tfaq__ask { gap: 12px 14px; margin-top: 12px; padding: 14px; border-radius: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .tfaq__tab,
  .tfaq__tab-icon,
  .tfaq__tab-count,
  .tfaq__item,
  .tfaq__item::before,
  .tfaq__q,
  .tfaq__panel,
  .tfaq__a,
  .tfaq__icon,
  .tfaq__icon::before,
  .tfaq__icon::after,
  .tfaq__chip { transition: none; }
  .tfaq__a { transform: none; }
  .tfaq__view.is-entering,
  .tfaq__item.is-target { animation: none; }
  .tfaq__item.is-target { box-shadow: 0 0 0 2px var(--accent); }
}

/* --- the home page's short question list (faq.js faqTeaserHTML) -----------------------------------------------
   The whole board lives on «Важное» since 07.10.2026; what is left here is one island of the questions a
   first-time buyer asks, under the same heading, with «Все вопросы» leading to the rest. No tabs, no search and
   no two-column plan: seven questions do not need to be navigated. */
.tfaq--teaser .tfaq__teaser-card { padding: 6px 20px; }
.tfaq--teaser .tfaq__list { display: grid; }
.tfaq--teaser .tfaq__item + .tfaq__item { border-top: 1px solid var(--line); }
.tfaq--teaser .tfaq__q { padding-block: 16px; }
.tfaq--teaser .tfaq__all { align-self: center; }
@media (max-width: 600px) {
  .tfaq--teaser .tfaq__teaser-card { padding: 4px 14px; }
}