@layer reset, base, parts, pages;
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
  ul[role="list"], .bare { list-style: none; padding: 0; }
  img { display: block; max-inline-size: 100%; block-size: auto; }
  button { font: inherit; color: inherit; }
}
@layer base {
  :root {
    --yd-pink: #ff3764;
    --yd-violet: #6a07d2;
    --yd-violet-deep: #40028a;
    --yd-ink: #1b1029;
    --yd-mute: #5d566b;
    --yd-line: #e3dfea;
    --yd-fog: #f4f2f7;
    --yd-ground: #dedbe3;
    --yd-ok: #1b8a4b;
    --yd-shell: 1240px;
    --yd-pad: clamp(16px, 3vw, 32px);
    --yd-r: 6px;
  }
  html { -webkit-text-size-adjust: 100%; }
  body { font-family: "Work Sans", system-ui, sans-serif; color: var(--yd-ink); background: #fff; line-height: 1.55; font-size: 16px; overflow-x: hidden; }
  h1, h2, h3 { font-family: "Lexend", "Work Sans", sans-serif; line-height: 1.2; font-weight: 600; }
  a { color: var(--yd-violet); text-underline-offset: 3px; }
  .shell { max-inline-size: var(--yd-shell); margin-inline: auto; padding-inline: var(--yd-pad); }
  .vh { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@layer parts {
  /* шапка — как у corporate.mattel: белая полоса, лого слева, разделы справа, тонкая линия снизу */
  .rig { position: sticky; inset-block-start: 0; z-index: 20; background: #fff; border-block-end: 1px solid var(--yd-line); }
  .rig__in { display: flex; align-items: center; gap: 20px; min-block-size: 76px; }
  .rig__logo img { inline-size: 92px; }
  .rig__lines { margin-inline-start: auto; }
  .rig__lines ul { display: flex; gap: 4px 22px; align-items: center; flex-wrap: wrap; }
  .rig__lines a, .rig__more summary { font-weight: 600; font-size: 15px; color: var(--yd-ink); text-decoration: none; cursor: pointer; padding-block: 8px; display: inline-block; }
  .rig__lines a:hover, .rig__lines a[aria-current] { color: var(--yd-violet); }
  .rig__more { position: relative; }
  .rig__more summary { list-style: none; }
  .rig__more summary::after { content: ""; display: inline-block; inline-size: 7px; block-size: 7px; border-inline-end: 2px solid var(--yd-pink); border-block-end: 2px solid var(--yd-pink); transform: rotate(45deg); margin-inline-start: 8px; translate: 0 -3px; }
  .rig__more ul { position: absolute; inset-inline-end: 0; inset-block-start: 100%; background: #fff; border: 1px solid var(--yd-line); padding: 8px 16px; display: block; min-inline-size: 240px; }
  .rig__more li a { display: block; padding-block: 7px; }
  .rig__cta { line-height: 0; }
  .rig__burger { display: none; margin-inline-start: auto; background: none; border: 1px solid var(--yd-line); border-radius: var(--yd-r); padding: 9px 12px; cursor: pointer; font-weight: 600; }
  .rig__burger i { display: block; inline-size: 20px; block-size: 2px; background: var(--yd-ink); margin-block: 4px; }
  .snap { background: none; border: 0; padding: 0; cursor: pointer; line-height: 0; inline-size: min(330px, 100%); transition: translate .15s; }
  .snap img { inline-size: 100%; }
  .snap:hover { translate: 0 -2px; }
  .snap:focus-visible { outline: 3px solid var(--yd-pink); outline-offset: 3px; border-radius: 40px; }
  .rig__cta .snap { inline-size: 200px; }
  .trail { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--yd-mute); padding-block: 18px 6px; display: flex; flex-wrap: wrap; gap: 4px 10px; }
  .trail a { color: var(--yd-mute); text-decoration: none; display: inline-block; padding-block: 4px; }
  .trail a:hover { color: var(--yd-violet); }
  .trail b { font-weight: 400; color: var(--yd-ink); padding-block: 4px; }
  .stars { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--yd-mute); }
  .stars i { --v: 0%; display: inline-block; inline-size: 82px; block-size: 15px; background: linear-gradient(90deg, var(--yd-pink) var(--v), #d9d4e0 var(--v));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 82 15'%3E%3Cpath d='M7.5 0l2.2 4.9 5.3.5-4 3.6 1.2 5.2-4.7-2.8-4.7 2.8 1.2-5.2-4-3.6 5.3-.5zM24.3 0l2.2 4.9 5.3.5-4 3.6 1.2 5.2-4.7-2.8-4.7 2.8 1.2-5.2-4-3.6 5.3-.5zM41 0l2.2 4.9 5.3.5-4 3.6 1.2 5.2L41 11.4l-4.7 2.8 1.2-5.2-4-3.6 5.3-.5zM57.8 0l2.2 4.9 5.3.5-4 3.6 1.2 5.2-4.7-2.8-4.7 2.8 1.2-5.2-4-3.6 5.3-.5zM74.5 0l2.2 4.9 5.3.5-4 3.6 1.2 5.2-4.7-2.8-4.7 2.8 1.2-5.2-4-3.6 5.3-.5z'/%3E%3C/svg%3E") no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 82 15'%3E%3Cpath d='M7.5 0l2.2 4.9 5.3.5-4 3.6 1.2 5.2-4.7-2.8-4.7 2.8 1.2-5.2-4-3.6 5.3-.5zM24.3 0l2.2 4.9 5.3.5-4 3.6 1.2 5.2-4.7-2.8-4.7 2.8 1.2-5.2-4-3.6 5.3-.5zM41 0l2.2 4.9 5.3.5-4 3.6 1.2 5.2L41 11.4l-4.7 2.8 1.2-5.2-4-3.6 5.3-.5zM57.8 0l2.2 4.9 5.3.5-4 3.6 1.2 5.2-4.7-2.8-4.7 2.8 1.2-5.2-4-3.6 5.3-.5zM74.5 0l2.2 4.9 5.3.5-4 3.6 1.2 5.2-4.7-2.8-4.7 2.8 1.2-5.2-4-3.6 5.3-.5z'/%3E%3C/svg%3E") no-repeat; }
  /* карточка товара — сетка с рамками как у shop.mattel, бренд-строка над названием как у popmarket */
  .crates { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); border-block-start: 1px solid var(--yd-line); border-inline-start: 1px solid var(--yd-line); }
  .crate { display: flex; flex-direction: column; gap: 8px; padding: 18px 16px 18px; border-inline-end: 1px solid var(--yd-line); border-block-end: 1px solid var(--yd-line); background: #fff; }
  .crate[hidden] { display: none; }
  .crate__pic { display: block; aspect-ratio: 1; }
  .crate__pic img { inline-size: 100%; block-size: 100%; object-fit: contain; }
  .crate__line { font-size: 12px; color: var(--yd-mute); text-align: center; }
  .crate__name { font-family: "Work Sans", sans-serif; font-size: 15px; font-weight: 700; text-align: center; line-height: 1.35; }
  .crate__name a { color: var(--yd-ink); text-decoration: none; }
  .crate__name a:hover { color: var(--yd-violet); }
  .crate .stars { justify-content: center; }
  .crate__cost { text-align: center; font-weight: 700; font-size: 17px; }
  .crate__cost small { display: block; font-weight: 500; font-size: 12px; color: var(--yd-mute); }
  .crate .snap { inline-size: 100%; margin-block-start: auto; }
  .note { border: 1px solid var(--yd-line); padding: 22px; display: flex; flex-direction: column; gap: 10px; background: #fff; }
  .note__t { font-weight: 700; }
  .note blockquote p { color: var(--yd-ink); font-size: 15px; }
  .note figcaption { font-size: 13px; color: var(--yd-mute); margin-block-start: auto; }
  .notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
  .asks details { border-block-end: 1px solid var(--yd-line); }
  .asks summary { cursor: pointer; padding-block: 16px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
  .asks summary::after { content: "+"; color: var(--yd-pink); font-size: 22px; line-height: 1; }
  .asks details[open] summary::after { content: "–"; }
  .asks details p { padding-block-end: 16px; color: var(--yd-mute); max-inline-size: 75ch; }
  .btn-line { display: inline-block; border: 1.5px solid var(--yd-pink); color: var(--yd-pink); border-radius: 30px; padding: 7px 26px; font-weight: 700; text-decoration: none; font-size: 15px; background: #fff; }
  .btn-line:hover { background: var(--yd-pink); color: #fff; }
  /* подвал — серый блок corporate.mattel: бейдж-лого + колонки ссылок; абзац «о нас» как у poggers */
  .ground { background: var(--yd-ground); margin-block-start: 72px; padding-block: 48px 28px; font-size: 14px; }
  .ground__top { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-block-end: 28px; }
  .ground__badge { display: flex; align-items: center; gap: 16px; }
  .ground__badge span { flex: none; display: block; background: var(--yd-pink); padding: 10px 16px; }
  .ground__badge span img { inline-size: 84px; }
  .ground__badge p { max-inline-size: 46ch; color: var(--yd-ink); }
  .ground__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
  .ground h2 { font-family: "Work Sans", sans-serif; font-size: 14px; font-weight: 700; margin-block-end: 10px; }
  .ground li a { color: var(--yd-ink); text-decoration: none; display: inline-block; padding-block: 4px; }
  .ground li a:hover { color: var(--yd-violet); text-decoration: underline; }
  .ground address { font-style: normal; line-height: 1.7; }
  .ground__fine { border-block-start: 1px solid #c8c3cf; margin-block-start: 28px; padding-block-start: 16px; color: var(--yd-mute); font-size: 12.5px; }
  .dock { display: none; }
}
@layer pages {
  .sec { padding-block: 56px 0; }
  .sec > h2, .sec__h { font-size: clamp(22px, 2.4vw, 30px); margin-block-end: 22px; }
  .lore { padding-block: 56px 0; }
  .lore h2 { font-size: clamp(24px, 2.6vw, 32px); margin-block-end: 18px; }
  .lore h3 { font-size: 18px; margin-block: 0 8px; break-after: avoid; }
  .lore p { margin-block-end: 18px; color: var(--yd-ink); }
  /* раздел: H1 слева, фильтры-колонка слева (popmarket/poggers) */
  .bayhead { display: grid; gap: 10px; padding-block: 8px 24px; }
  .bayhead h1 { font-size: clamp(26px, 3.2vw, 38px); }
  .bayhead p { color: var(--yd-mute); max-inline-size: 75ch; }
  .bayband { background: var(--yd-fog); display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-block-end: 28px; }
  .bayband img { aspect-ratio: 1; object-fit: contain; inline-size: 100%; padding: 14px; mix-blend-mode: multiply; }
  .layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 28px; align-items: start; }
  .sieve { display: grid; gap: 22px; font-size: 14px; position: sticky; inset-block-start: 96px; }
  .sieve h2 { font-family: "Work Sans", sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-block-end: 8px; padding-block-end: 8px; border-block-end: 1px solid var(--yd-line); }
  .sieve label { display: flex; gap: 8px; align-items: center; padding-block: 5px; cursor: pointer; }
  .sieve label em { font-style: normal; color: var(--yd-mute); margin-inline-start: auto; }
  .sieve select { inline-size: 100%; padding: 9px; border: 1px solid var(--yd-line); border-radius: var(--yd-r); background: #fff; font: inherit; }
  .count { font-size: 14px; color: var(--yd-mute); margin-block-end: 12px; }
  .lines-other { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; }
  .lines-other a { display: inline-block; padding-block: 6px; }
  /* карточка товара: галерея + инфо + правая колонка «more to explore» (shop.mattel), таблица деталей (popmarket) */
  .unit { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 170px; gap: 36px; padding-block: 12px 0; align-items: start; }
  .gal__main { border: 1px solid var(--yd-line); aspect-ratio: 1; display: grid; place-items: center; background: #fff; }
  .gal__main img { max-block-size: 100%; object-fit: contain; }
  .gal__row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-block-start: 10px; }
  .gal__row button { border: 1px solid var(--yd-line); background: #fff; padding: 4px; cursor: pointer; aspect-ratio: 1; }
  .gal__row button.pick-on { border-color: var(--yd-violet); }
  .gal__row img { inline-size: 100%; block-size: 100%; object-fit: contain; }
  .info { display: grid; gap: 14px; }
  .info__line a { font-size: 14px; color: var(--yd-ink); }
  .info h1 { font-family: "Work Sans", sans-serif; font-weight: 700; font-size: clamp(22px, 2.3vw, 28px); }
  .info__cost { font-size: 26px; font-weight: 700; }
  .info__stock { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--yd-ok); }
  .info__stock::before { content: ""; inline-size: 9px; block-size: 9px; border-radius: 50%; background: currentColor; }
  .info__stock--late { color: #a35a00; }
  .info__lede { color: var(--yd-ink); }
  .info select { padding: 10px; border: 1px solid var(--yd-line); border-radius: var(--yd-r); font: inherit; background: #fff; inline-size: 100%; max-inline-size: 420px; }
  .info label { display: grid; gap: 6px; font-weight: 600; font-size: 14px; }
  .fold { border: 1px solid var(--yd-line); border-radius: var(--yd-r); background: var(--yd-fog); }
  .fold summary { padding: 13px 16px; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
  .fold summary::after { content: ""; inline-size: 8px; block-size: 8px; border-inline-end: 2px solid var(--yd-ink); border-block-end: 2px solid var(--yd-ink); transform: rotate(45deg); }
  .fold[open] summary::after { transform: rotate(-135deg); }
  .fold ul { padding: 0 16px 14px 34px; display: grid; gap: 6px; }
  .fold dl { padding: 0 16px 14px; display: grid; gap: 0; }
  .fold dl div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding-block: 9px; border-block-end: 1px solid var(--yd-line); font-size: 14px; }
  .fold dt { font-weight: 600; }
  .explore { border-inline-start: 1px solid var(--yd-line); padding-inline-start: 18px; display: grid; gap: 14px; }
  .explore h2 { font-family: "Work Sans", sans-serif; font-size: 13px; font-weight: 700; text-align: center; }
  .explore a { display: grid; gap: 6px; border: 1px solid var(--yd-line); border-radius: var(--yd-r); padding: 8px; text-decoration: none; color: var(--yd-ink); font-size: 12.5px; font-weight: 600; text-align: center; }
  .explore img { aspect-ratio: 1; object-fit: contain; }
  .prose { max-inline-size: 780px; padding-block-end: 12px; }
  .prose h1 { font-size: clamp(26px, 3vw, 36px); margin-block: 6px 18px; }
  .prose h2 { font-size: 21px; margin-block: 28px 10px; }
  .prose p, .prose li { margin-block-end: 12px; }
  .prose ol { padding-inline-start: 22px; }
  .yardpage { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 48px; align-items: start; }
  .yardpage__side { border-inline-start: 3px solid var(--yd-pink); padding: 6px 0 6px 20px; font-size: 14px; display: grid; gap: 12px; }
  .yardpage__side h2 { font-size: 15px; }
  .yardpage__side ol { padding-inline-start: 18px; display: grid; gap: 4px; }
  .yardpage__side a { display: inline-block; padding-block: 4px; color: var(--yd-ink); }
  .yardpage__side a[aria-current] { color: var(--yd-violet); font-weight: 700; }
  .yardpage__side dt { font-weight: 700; }
  .card-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-block: 18px; }
  .card-contact p { border: 1px solid var(--yd-line); padding: 16px; }
  .lead-set { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: center; border: 1px solid var(--yd-line); padding: 16px; margin-block: 18px 6px; }
  .lead-set img { aspect-ratio: 1; object-fit: contain; }
  .lead-set .snap { inline-size: 260px; max-inline-size: 100%; margin-block-start: 8px; }
}
@media (max-width: 1100px) {
  .rig__lines, .rig__cta { display: none; }
  .rig__burger { display: block; }
  .rig.menu-open .rig__lines { display: block; position: absolute; inset-inline: 0; inset-block-start: 100%; background: #fff; border-block-end: 1px solid var(--yd-line); padding: 8px var(--yd-pad) 16px; }
  .rig.menu-open .rig__lines ul { flex-direction: column; align-items: stretch; gap: 0; }
  .rig.menu-open .rig__more ul { position: static; border: 0; padding: 0 0 0 14px; }
  .dock { display: flex; position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 30; background: var(--yd-ink); color: #fff; align-items: center; gap: 12px;
          padding: 8px var(--yd-pad) calc(8px + env(safe-area-inset-bottom)); }
  .dock p { font-size: 13px; line-height: 1.3; flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .dock b { display: block; }
  .dock .snap { inline-size: 176px; flex: none; }
  body { padding-block-end: 76px; }
  .unit { grid-template-columns: 1fr 1fr; }
  .explore { grid-column: 1 / -1; border: 0; padding: 0; grid-template-columns: repeat(3, 1fr); }
  .explore h2 { grid-column: 1 / -1; text-align: start; }
}
@media (max-width: 760px) {
  .unit, .yardpage { grid-template-columns: 1fr; }
  .layout { grid-template-columns: 1fr; }
  .sieve { position: static; grid-template-columns: 1fr 1fr; gap: 12px; }
  .sieve__themes { grid-column: 1 / -1; }
  .crates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crate { padding: 12px 10px; }
  .crate__name { font-size: 13.5px; }
  .bayband img { padding: 4px; }
  .sieve__lines, .crate__line { display: none; }
  .ground__cols { grid-template-columns: 1fr 1fr; }
  .lead-set { grid-template-columns: 92px minmax(0, 1fr); }
  .lead-set .snap { inline-size: 100%; }
  .fold dl div { grid-template-columns: 1fr 1.4fr; }
}

  /* шапка: лого + штамп, все линии строкой с переносом (без бургера) */
  .rig__in { flex-wrap: wrap; gap: 4px 20px; padding-block: 10px 6px; }
  .rig__cta { margin-inline-start: auto; }
  .rig__lines { order: 3; flex-basis: 100%; margin-inline-start: 0; border-block-start: 1px solid var(--yd-line); padding-block-start: 2px; }
  .rig__lines ul { gap: 0 16px; }
  .rig__lines a { font-size: 14.5px; }

@media (max-width: 1100px) {
  .rig__lines, .rig__cta { display: block; }
  .rig__burger { display: none; }
}
@media (max-width: 760px) {
  .rig { position: static; }
  .rig__logo img { inline-size: 70px; }
  .rig__cta .snap { inline-size: 176px; }
  .rig__lines ul { gap: 6px; padding-block: 8px 4px; }
  .rig__lines a { font-size: 13px; padding: 5px 10px; border: 1px solid var(--yd-line); border-radius: 30px; }
}

  /* главная: стена франшиз — каждая линия своей плашкой, кадр и число наборов */
  .fw { background: var(--yd-ink); color: #fff; padding-block: 26px 30px; }
  .fw__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px 40px; flex-wrap: wrap; margin-block-end: 20px; }
  .fw__top h1 { font-size: clamp(26px, 2.7vw, 36px); font-weight: 700; color: #fff; }
  .fw__top p { max-inline-size: 62ch; color: #d8d2e2; font-size: 15px; }
  .fw__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
  .fw-tile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); block-size: 176px; background: var(--tb); color: var(--tf); border-radius: 8px; overflow: hidden; text-decoration: none; transition: translate .15s; }
  .fw-tile:hover { translate: 0 -3px; }
  .fw-tile__txt { display: flex; flex-direction: column; padding: 16px 14px 14px 18px; min-inline-size: 0; }
  .fw-tile__txt b { font-family: Lexend, sans-serif; font-weight: 700; font-size: clamp(19px, 1.7vw, 25px); line-height: 1.1; }
  .fw-tile__txt em { font-style: normal; font-weight: 700; font-size: 15px; margin-block-start: auto; }
  .fw-tile__txt small { font-size: 12.5px; opacity: .88; }
  .fw-tile img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .fw-tile--all { --tb: var(--yd-pink); --tf: #fff; grid-template-columns: 1fr; align-content: space-between; padding-block-end: 14px; }
  .fw-tile--all .fw-tile__txt em { margin-block-start: 6px; }
  .fw-tile--all .snap { inline-size: calc(100% - 32px); margin-inline: 16px; }

  /* выбор линии по возрасту */
  .fsub { color: var(--yd-mute); max-inline-size: 75ch; margin-block: -10px 22px; }
  .fa__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: start; }
  .fa-band { border: 1px solid var(--yd-line); border-block-start: 6px solid var(--yd-violet); padding: 16px 14px; display: grid; gap: 10px; background: #fff; }
  .fa-band--toddler { border-block-start-color: #e4002b; }
  .fa-band--pre { border-block-start-color: #f26b1d; }
  .fa-band--kid { border-block-start-color: #ffcb05; }
  .fa-band--big { border-block-start-color: #28463a; }
  .fa-band__age { font-size: 13px; color: var(--yd-mute); text-transform: uppercase; letter-spacing: .05em; }
  .fa-band__age b { display: block; font-family: Lexend, sans-serif; font-size: 26px; color: var(--yd-ink); letter-spacing: 0; text-transform: none; line-height: 1.1; }
  .fa-band h3 { font-size: 16px; margin-block: 4px 4px; }
  .fa-band header p:last-child { font-size: 13.5px; color: var(--yd-mute); }
  .fa-band__n { font-size: 13px; font-weight: 600; }
  .fa-band__lines { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
  .fa-band__lines a { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 600; text-decoration: none; color: var(--yd-ink); background: var(--yd-fog); border-radius: 30px; padding: 5px 10px; }
  .fa-band__lines a span { color: var(--yd-pink); }
  .fa-set { display: grid; gap: 6px; border-block-start: 1px dashed var(--yd-line); padding-block-start: 10px; }
  .fa-set__pic { display: block; aspect-ratio: 4 / 3; background: var(--yd-fog); }
  .fa-set__pic img { inline-size: 100%; block-size: 100%; object-fit: contain; mix-blend-mode: multiply; }
  .fa-set__name { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
  .fa-set__name a { color: var(--yd-ink); text-decoration: none; }
  .fa-set__cost { font-size: 13px; color: var(--yd-mute); }
  .fa-set .snap { inline-size: 100%; }

  /* лестница наборов по числу деталей */
  .fl { inline-size: 100%; border-collapse: collapse; font-size: 14.5px; }
  .fl th, .fl td { padding: 10px 12px; text-align: start; border-block-end: 1px solid var(--yd-line); vertical-align: middle; }
  .fl thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--yd-mute); border-block-end: 3px solid var(--yd-pink); }
  .fl-set { display: flex; align-items: center; gap: 10px; color: var(--yd-ink); text-decoration: none; font-weight: 600; }
  .fl-set img { inline-size: 56px; block-size: 56px; object-fit: contain; flex: none; background: var(--yd-fog); mix-blend-mode: multiply; }
  .fl-bar { display: block; block-size: 7px; inline-size: calc(var(--p) * 120px); background: var(--yd-pink); border-radius: 4px; margin-block-end: 4px; }
  .fl small { color: var(--yd-mute); font-size: 12px; display: block; }
  .fl-buy { inline-size: 200px; }
  .fl-buy .snap { inline-size: 190px; }

  /* как собирать — страница из инструкции */
  .fs { background: var(--yd-violet); color: #fff; margin-block-start: 56px; padding-block: 44px 48px; }
  .fs h2 { font-size: clamp(22px, 2.4vw, 30px); margin-block-end: 22px; }
  .fs .fsub { color: #e4d6f7; }
  .fs__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
  .fs__list li { background: #fff; color: var(--yd-ink); border-radius: 8px; padding: 18px; position: relative; }
  .fs__no { display: grid; place-items: center; inline-size: 46px; block-size: 46px; border-radius: 50%; background: var(--yd-pink); color: #fff; font-family: Lexend, sans-serif; font-weight: 700; font-size: 22px; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18); margin-block-end: 12px; }
  .fs__list h3 { font-size: 17px; margin-block-end: 6px; }
  .fs__list p { font-size: 14.5px; color: var(--yd-mute); }

  /* отзывы — реплики с кадром набора */
  .fbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 20px; align-items: start; }
  .fb { display: flex; flex-direction: column; gap: 14px; }
  .fb blockquote { position: relative; background: var(--yd-fog); border-radius: 10px; padding: 18px; }
  .fb blockquote::after { content: ""; position: absolute; inset-inline-start: 26px; inset-block-end: -10px; inline-size: 20px; block-size: 20px; background: var(--yd-fog); transform: rotate(45deg); }
  .fb__t { font-weight: 700; margin-block-end: 6px; }
  .fb blockquote p:last-child { font-size: 14.5px; }
  .fb figcaption { display: flex; gap: 12px; align-items: center; font-size: 13px; color: var(--yd-mute); }
  .fb__set { flex: none; }
  .fb__set img { inline-size: 54px; block-size: 54px; object-fit: contain; border: 1px solid var(--yd-line); border-radius: 50%; background: #fff; padding: 4px; }
  .fb figcaption b { color: var(--yd-ink); margin-inline-start: 6px; }

  .fl-lore { max-inline-size: 860px; }
  .fl-lore h3 { font-size: 18px; margin-block: 22px 8px; }
  .fl-lore p { color: var(--yd-ink); }

@media (max-width: 1100px) {
  .fw__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fa__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .fl, .fl tbody, .fl tr { display: block; }
  .fl thead { display: none; }
  .fl tbody tr { border: 1px solid var(--yd-line); border-block-start: 3px solid var(--yd-pink); margin-block-end: 12px; background: #fff; }
  .fl th[scope=row] { display: block; background: var(--yd-fog); }
  .fl td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 12px; text-align: end; }
  .fl td::before { content: attr(data-label); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--yd-mute); text-align: start; }
  .fl td small { display: inline; margin-inline-start: 6px; }
  .fl-bar { display: none; }
  .fl td.fl-buy { display: block; inline-size: auto; border-block-end: 0; }
  .fl td.fl-buy::before { content: none; }
  .fl-buy .snap { inline-size: 100%; max-inline-size: 300px; margin-inline: auto; display: block; }
}
@media (max-width: 760px) {
  .fw { padding-block: 18px 22px; }
  .fw__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .fw-tile { grid-template-columns: 1fr; block-size: auto; }
  .fw-tile img { order: -1; aspect-ratio: 16 / 10; block-size: auto; }
  .fw-tile__txt { padding: 10px 12px 12px; }
  .fw-tile__txt em { margin-block-start: 6px; }
  .fw-tile--all { grid-column: 1 / -1; }
  .fa__row { grid-template-columns: 1fr; }
  .fs__list, .fbs { grid-template-columns: 1fr; }
}