/* Каталог — новая схема (handoff/BRIEF.md, карточка «Витрина»). Цвета и размеры — только переменные из tokens.css. Плитки задач и .vs2-label/.vs2-row — assets/goal-tiles.css.
   Отличия от образца по решениям Никиты 28.10: заголовки Manrope, на телефоне 2 товара в ряд, «+» на оранжевом — тёмный. */
.vs2{--vs2-head:Manrope,"Manrope Fallback",Inter,"Inter Fallback",sans-serif;font-family:var(--vs-font);color:var(--vs-ink);padding-top:32px}
.vs2 a{text-decoration:none}
.vs2-wrap{max-width:var(--vs-container);margin:0 auto;padding:0 var(--vs-page-pad)}
.vs2-head{padding-top:24px;padding-bottom:32px;display:flex;flex-direction:column;gap:40px}
.vs2-intro{display:flex;flex-direction:column;gap:14px;max-width:760px}
.vs2-label--light{color:#CFE1F8}
.vs2-h1{margin:0;font:var(--vs-h1);font-family:var(--vs2-head);font-weight:800;letter-spacing:-.02em;color:var(--vs-ink)}
.vs2-h1 span{color:var(--vs-blue)}
.vs2-lead{margin:0;font-size:17px;line-height:1.55;color:var(--vs-text-muted)}

/* Линейки */
.vs2-lines{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center}
.vs2-line{display:flex;align-items:center;gap:12px;min-height:44px;padding:10px 14px 10px 10px;border-radius:12px;border:1px solid transparent;color:var(--vs-ink);font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;transition:border-color .15s,color .15s}
.vs2-line-n{color:var(--vs-text-muted);font-weight:500}
.vs2-line-ic{width:36px;height:36px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.vs2-line-ic--blue{background:var(--vs-blue);color:#fff}
.vs2-line-ic--green{background:var(--vs-green-tint);color:var(--vs-green-ink)}
.vs2-line-ic--amber{background:var(--vs-amber-tint);color:var(--vs-amber-ink)}
.vs2-line-ic--tint{background:var(--vs-blue-tint);color:var(--vs-blue-dark)}

/* Задачи */
.vs2-goals-sec{padding-bottom:48px;display:flex;flex-direction:column;gap:20px}
.vs2-label a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.vs2-lead p{margin:0}
.vs2-end .vs-faq-block{align-self:stretch;width:100%;max-width:48rem;margin:0 auto 8px}

/* Панель фильтров */
.vs2-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 0;border-top:1px solid var(--vs-border);border-bottom:1px solid var(--vs-border)}
.vs2-bar-l{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.vs2-filter-btn{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 4px;background:none;border:0;font:inherit;font-size:15px;font-weight:600;color:var(--vs-ink);cursor:pointer}
.vs2-chips{display:flex;gap:8px;flex-wrap:wrap}
.vs2-chip{height:36px;display:inline-flex;align-items:center;padding:0 14px;border-radius:var(--vs-radius-pill);border:1px solid var(--vs-border);background:#fff;font:inherit;font-size:14px;color:var(--vs-ink);cursor:pointer}
.vs2-chip:hover{border-color:var(--vs-blue)}
.vs2-chip[aria-pressed=true]{border-color:var(--vs-blue);background:var(--vs-blue-tint);color:var(--vs-blue-dark);font-weight:500}
/* Кнопки фильтра (вариант 3, решение Никиты 13.11.2026): у каждой значок и свой цвет, число товаров; нажатая — значок становится галочкой.
   Формы — синие, «Детям» — жёлтая как линейка, «Со скидкой» — красная как плашка −40% (точка пульсирует в ритме её кольца). Кнопки «Все задачи» (a.vs2-chip) не трогаем. */
.vs2-chips .vs2-chip{--c:var(--vs-blue);--c-ink:var(--vs-blue-dark);--c-tint:var(--vs-blue-tint);position:relative;height:38px;gap:8px;padding:0 13px 0 11px;-webkit-tap-highlight-color:transparent;transition:background-color .2s ease,border-color .2s ease,color .2s ease,opacity .2s ease,transform .15s cubic-bezier(.23,1,.32,1)}
.vs2-chips .vs2-chip--amber{--c:#B7791F;--c-ink:var(--vs-amber-ink);--c-tint:var(--vs-amber-tint)}
.vs2-chips .vs2-chip--sale{--c:var(--vs-sale);--c-ink:#B42318;--c-tint:#FDECEA}
.vs2-chips .vs2-chip:hover{border-color:var(--vs-border)}
.vs2-chips .vs2-chip:active{transform:scale(.96)}
.vs2-chips .vs2-chip:focus-visible{outline:2px solid var(--vs-blue);outline-offset:2px}
.vs2-chip-ic{position:relative;width:16px;height:16px;flex:none;color:var(--c)}
.vs2-chip-ic svg{position:absolute;inset:0;transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .2s ease}
.vs2-chip-ck{opacity:0;transform:scale(.5)}
.vs2-chip-ck path{stroke-dasharray:20;stroke-dashoffset:20}
.vs2-chip-n{font-size:12px;font-weight:600;color:var(--vs-text-muted);font-variant-numeric:tabular-nums;transition:color .2s ease}
.vs2-chip-n:empty{display:none}
.vs2-chips .vs2-chip[aria-pressed=true]{background:var(--c-tint);border-color:var(--c);color:var(--c-ink);font-weight:600}
.vs2-chips .vs2-chip[aria-pressed=true] .vs2-chip-n{color:var(--c-ink)}
.vs2-chip[aria-pressed=true] .vs2-chip-main{opacity:0;transform:scale(.5) rotate(-30deg)}
.vs2-chip[aria-pressed=true] .vs2-chip-ck{opacity:1;transform:none}
.vs2-chip[aria-pressed=true] .vs2-chip-ck path{animation:vs2-chip-draw .35s .05s cubic-bezier(.23,1,.32,1) forwards}
.vs2-chips .vs2-chip.is-zero{opacity:.45}
.vs2-chip.is-bump .vs2-chip-n{display:inline-block;animation:vs2-chip-bump .3s cubic-bezier(.23,1,.32,1)}
.vs2-chip-dot{position:absolute;top:-2px;right:-2px;width:9px;height:9px;border-radius:50%;background:var(--vs-sale);border:2px solid #fff}
.vs2-chip-dot::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--vs-sale);animation:vs2-chip-ring 2.6s cubic-bezier(.23,1,.32,1) infinite}
.vs2-chip[aria-pressed=true] .vs2-chip-dot{display:none}
@media (hover:hover) and (pointer:fine){
  .vs2-chips .vs2-chip:hover{background:var(--c-tint);border-color:transparent;color:var(--c-ink)}
  .vs2-chips .vs2-chip:hover .vs2-chip-main{transform:scale(1.18) rotate(-8deg)}
  .vs2-chips .vs2-chip[aria-pressed=true]:hover{border-color:var(--c)}
  .vs2-chips .vs2-chip.is-zero:hover{background:#fff;border-color:var(--vs-border);color:var(--vs-ink)}
  .vs2-chips .vs2-chip.is-zero:hover .vs2-chip-main{transform:none}
}
@keyframes vs2-chip-draw{to{stroke-dashoffset:0}}
@keyframes vs2-chip-bump{40%{transform:translateY(-3px)}}
@keyframes vs2-chip-ring{0%{transform:scale(1);opacity:.85}75%,100%{transform:scale(2.4);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .vs2-chips .vs2-chip,.vs2-chip-ic svg{transition:none}
  .vs2-chip-dot::after{animation:none;display:none}
  .vs2-chip.is-bump .vs2-chip-n{animation:none}
  .vs2-chip[aria-pressed=true] .vs2-chip-ck path{animation:none;stroke-dashoffset:0}
}
.vs2-sort{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--vs-text-muted)}
.vs2-sort select{height:40px;padding:0 12px;border-radius:10px;border:1px solid var(--vs-border);background:#fff;font:inherit;font-size:14px;color:var(--vs-ink)}
.vs2-allgoals{display:flex;flex-wrap:wrap;gap:8px;padding:16px 0;border-bottom:1px solid var(--vs-border)}
.vs2-allgoals[hidden]{display:none}

/* Сетка */
.vs2-wrap#vs2-filters{padding-bottom:24px}
.vs2-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--vs-gap-grid)}
.vs2-card{position:relative;background:var(--vs-photo-bg);border-radius:var(--vs-radius-card);display:flex;flex-direction:column;overflow:hidden;transition:box-shadow .2s}
.vs2-card:hover{box-shadow:var(--vs-shadow-hover)}
.vs2-card.vs2-later{display:none}
.vs2-grid.is-all .vs2-card.vs2-later{display:flex}
.vs2-card[hidden]{display:none !important}
.vs2-card--feat,.vs2-card--story{grid-column:span 2}
.vs2-pill{position:absolute;top:16px;left:16px;z-index:2;height:26px;display:inline-flex;align-items:center;padding:0 10px;border-radius:var(--vs-radius-pill);font-size:12px;font-weight:600}
.vs2-pill--sale{background:var(--vs-sale);color:#fff;font-weight:700;box-shadow:0 3px 10px rgba(217,45,32,.25)}
/* Кольцо скидки, как у кнопки чата; у соседних карточек старт сдвинут, чтобы сетка не мигала разом */
.vs2-pill--sale::before{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid var(--vs-sale);opacity:0;pointer-events:none;animation:vs2-sale-ring 2.6s cubic-bezier(.23,1,.32,1) var(--vs-sale-d,0s) infinite}
.vs2-card:nth-child(4n+2) .vs2-pill--sale{--vs-sale-d:.65s}
.vs2-card:nth-child(4n+3) .vs2-pill--sale{--vs-sale-d:1.3s}
.vs2-card:nth-child(4n+4) .vs2-pill--sale{--vs-sale-d:1.95s}
@keyframes vs2-sale-ring{0%{transform:scale(1);opacity:.85}75%,100%{transform:scale(1.3,1.75);opacity:0}}
@media (prefers-reduced-motion:reduce){.vs2-pill--sale::before{animation:none;display:none}}
.vs2-pill--right{left:auto;right:16px}
.vs2-pill--amber{background:var(--vs-amber-tint);color:var(--vs-amber-ink)}
.vs2-pill--blue{background:var(--vs-blue-tint);color:var(--vs-blue-dark)}
.vs2-pill--hit{top:20px;left:20px;height:38px;padding:0 16px;background:var(--vs-blue);color:#fff;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 4px 12px rgba(1,112,239,.3)}   /* ярко-синяя, белый текст 4,6:1 (решение Никиты 10.11.2026) */
.vs2-photo{height:var(--vs-card-photo-h);display:flex;align-items:center;justify-content:center;padding:20px 24px 8px}
.vs2-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:12px}
.vs2-body{padding:0 24px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.vs2-eyebrow{font:var(--vs-eyebrow);letter-spacing:.1em;text-transform:uppercase;color:var(--vs-text-muted);line-height:1.35}
.vs2-title{margin:0;font:var(--vs-card-title);font-family:var(--vs2-head);font-weight:700;color:var(--vs-blue-dark)}
.vs2-link{color:inherit}
.vs2-link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.vs2-link:focus-visible{outline:none}
.vs2-card:has(.vs2-link:focus-visible){outline:2px solid var(--vs-blue);outline-offset:3px}
.vs2-text{margin:0;font:var(--vs-card-text);color:var(--vs-text-muted)}
.vs2-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:12px}
.vs2-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.vs2-now{font:var(--vs-price);color:var(--vs-ink)}
.vs2-old{font-size:13px;color:var(--vs-text-muted)}
.vs2 .vs2-cta{position:relative;z-index:2;flex:none;display:inline-flex !important;align-items:center;justify-content:center;width:var(--vs-cta-size);height:var(--vs-cta-size);min-height:0 !important;padding:0 !important;margin:0 !important;border-radius:var(--vs-radius-pill) !important;background:var(--vs-orange) !important;color:var(--vs-ink) !important;border:0 !important;font-size:0 !important;line-height:0}
.vs2 .vs2-cta:hover{background:var(--vs-orange-hover) !important}
.vs2 .vs2-cta:focus-visible{outline:2px solid var(--vs-blue);outline-offset:2px}
.vs2 .vs2-cta.loading{opacity:.6}
.vs2 .vs2-cta.added::after,.vs2 .added_to_cart{display:none !important}

/* Флагман */
.vs2-card--feat{min-height:520px}
.vs2-photo--feat{flex:1;height:auto;min-height:280px;padding:58px 32px 8px}
.vs2-photo--feat .vs2-img{max-height:483px;margin:-29px 0}   /* у банки в квадрате прозрачные поля ~6% сверху и снизу — не растим из-за них карточку */
.vs2-body--feat{padding:0 32px 32px;gap:10px;flex:none}
/* Фото и текст всех карточек ряда лежат на общих дорожках сетки (subgrid): в ряду с Магнием соседние банки стоят на одной оси с ним,
   а не прижаты к верху (решение Никиты 11.11.2026). Старые браузеры без subgrid остаются на flex-раскладке выше. */
@supports (grid-template-rows:subgrid){
  .vs2-card{display:grid;grid-template-rows:subgrid;grid-row:span 2}
  .vs2-grid.is-all .vs2-card.vs2-later{display:grid}
  .vs2-card--feat{min-height:0}
  .vs2-card--feat .vs2-photo--feat{height:auto}   /* на телефоне общее .vs2-photo{height:170px} не должно сжимать фото Магния (в flex его растягивал flex:1) */
  .vs2-card--story .vs2-story{grid-row:1 / -1;align-self:end}
  @media(min-width:1101px){
    .vs2-photo:not(.vs2-photo--feat){height:auto;min-height:var(--vs-card-photo-h);container-type:size}   /* тянется на высоту дорожки ряда */
    .vs2-photo:not(.vs2-photo--feat) .vs2-img{max-height:calc(var(--vs-card-photo-h) - 28px)}             /* как при прежней фиксированной высоте */
    /* ряд с Магнием (дорожка выше обычных 260px): сдвиг на 19px — у фото Магния поле 58px сверху и 8px снизу, у обычных 20/8 */
    @container (min-height:300px){.vs2-photo:not(.vs2-photo--feat) .vs2-img{margin-top:38px}}
  }
}
.vs2-title--feat{font-size:26px;letter-spacing:-.01em}
.vs2-text--feat{font-size:15px;line-height:1.5;max-width:440px}
.vs2-foot--feat{margin-top:10px;gap:16px;flex-wrap:wrap}
.vs2-now--feat{font-size:24px}
.vs2-old--feat{font-size:15px}
.vs2-feat-act{display:flex;align-items:center;gap:12px}
.vs2-ghost{position:relative;z-index:2;height:44px;display:inline-flex;align-items:center;padding:0 20px;border-radius:var(--vs-radius-pill);border:1px solid var(--vs-blue-dark);color:var(--vs-blue-dark);font-size:14px;font-weight:600}
.vs2-ghost:hover{background:#fff}

/* Редакционная вставка */
.vs2-card--story{background:var(--vs-blue-dark);color:#fff;min-height:360px;justify-content:flex-end}
.vs2-story{padding:40px;display:flex;flex-direction:column;gap:14px;max-width:520px}
.vs2-story-h{margin:0;font-family:var(--vs2-head);font-size:28px;font-weight:800;line-height:1.15;letter-spacing:-.01em;color:#fff}
.vs2-story-p{margin:0;font-size:15px;line-height:1.5;color:#DCE9F9}
.vs2-story-btn{margin-top:8px;align-self:flex-start;height:44px;display:inline-flex;align-items:center;padding:0 20px;border-radius:var(--vs-radius-pill);background:#fff;color:var(--vs-blue-dark);font-size:14px;font-weight:600}

/* Низ */
.vs2-empty{margin:24px 0 0;font-size:15px;color:var(--vs-text-muted)}
.vs2-reset{margin-left:8px;background:none;border:0;padding:0;font:inherit;color:var(--vs-blue-dark);text-decoration:underline;cursor:pointer}
.vs2-end{padding-top:32px;padding-bottom:64px;display:flex;flex-direction:column;gap:24px;align-items:center}
.vs2-showmore{height:48px;display:inline-flex;align-items:center;padding:0 28px;border-radius:var(--vs-radius-pill);border:1px solid var(--vs-ink);background:#fff;color:var(--vs-ink);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.vs2-showmore:hover{background:var(--vs-tile)}
.vs2-disclaimer{margin:0;font-size:12px;color:var(--vs-text-muted);text-align:center}

/* Адаптив: 2 колонки до 1100px; на телефоне тоже 2 (решение Никиты 28.10; вариант «1 в ряд» — попробовать позже) */
/* Линейки: при наведении и нажатии фон подкрашивается цветом линейки, квадрат иконки становится насыщенным */
.vs2-line{--line-bg:var(--vs-blue-tint);--line-ink:var(--vs-blue-dark);--line-solid:var(--vs-blue)}
.vs2-line--green{--line-bg:var(--vs-green-tint);--line-ink:var(--vs-green-ink);--line-solid:#1E7B34}
.vs2-line--amber{--line-bg:var(--vs-amber-tint);--line-ink:var(--vs-amber-ink);--line-solid:#B7791F}
.vs2-line--tint{--line-bg:#FEEBD6;--line-ink:#8A4700;--line-solid:var(--vs-orange)}
.vs2-line-ic{transition:background-color .2s ease,color .2s ease,transform .2s cubic-bezier(.23,1,.32,1)}
.vs2-line:focus-visible,.vs2-line:active{background:var(--line-bg);border-color:transparent;color:var(--line-ink)}
.vs2-line:focus-visible .vs2-line-ic,.vs2-line:active .vs2-line-ic{background:var(--line-solid);color:#fff}
.vs2-line:focus-visible .vs2-line-n,.vs2-line:active .vs2-line-n{color:inherit}
@media(hover:hover) and (pointer:fine){
  .vs2-line:hover{background:var(--line-bg);border-color:transparent;color:var(--line-ink)}
  .vs2-line:hover .vs2-line-ic{background:var(--line-solid);color:#fff;transform:scale(1.06)}
  .vs2-line:hover .vs2-line-n{color:inherit}
}

.vs2-pill--feat-off{top:20px;right:20px;height:44px;padding:0 18px;font-size:20px;font-weight:800}   /* крупная скидка на флагмане */
/* «Хит продаж» на обычной карточке (товар с галочкой «рекомендуемый»; главная, 12.11.2026) — справа, в размер остальных плашек */
.vs2-card:not(.vs2-card--feat) .vs2-pill--hit{top:16px;left:auto;right:16px;height:26px;padding:0 10px;font-size:11px;letter-spacing:.06em}
.vs2--home{padding-top:0}   /* блок «Наша продукция» на главной: отступ задаёт секция */

@media(max-width:1100px){
  .vs2-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vs2-wrap{padding:0 24px}
}
@media(max-width:640px){
  .vs2-wrap{padding:0 16px}
  .vs2-head{gap:24px}
  .vs2-h1{font-size:34px}
  .vs2-lead{font-size:16px}
  .vs2-lines{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-16px;padding-right:16px;gap:8px}
  .vs2-lines::-webkit-scrollbar{display:none}
  .vs2-line{flex:none}
  .vs2-goals-sec{padding-bottom:32px}
  .vs2-bar-l{gap:8px;width:100%}
  .vs2-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-16px;padding:4px 16px 4px 2px}   /* отступ сверху — чтобы точка на «Со скидкой» не обрезалась */
  .vs2-chips::-webkit-scrollbar{display:none}
  .vs2-chip{flex:none}
  .vs2-grid{gap:10px}
  .vs2-card{border-radius:16px}
  .vs2-photo{height:170px;padding:36px 10px 6px}
  .vs2-pill{top:10px;left:10px;height:24px;padding:0 8px;font-size:11px}
  .vs2-pill--right{left:auto;right:10px}
  .vs2-pill--feat-off{top:10px;right:10px;height:32px;padding:0 12px;font-size:15px}
  .vs2-pill--hit{top:10px;left:10px;height:28px;padding:0 10px;font-size:11px}
  .vs2-card:not(.vs2-card--feat) .vs2-pill--hit{top:10px;right:10px;height:24px;padding:0 6px;font-size:9px;letter-spacing:0}   /* умещается рядом с «−40%» на карточке 158px с зазором */
  .vs2-body{padding:0 12px 12px;gap:6px}
  .vs2-eyebrow{font-size:10px;letter-spacing:.06em}
  .vs2-title{font-size:15px;line-height:1.25}
  .vs2-text{font-size:13px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .vs2-now{font-size:17px}
  .vs2-old{font-size:12px}
  .vs2-card--feat{min-height:0}
  .vs2-photo--feat{min-height:220px;padding:46px 6px 8px}
  .vs2-photo--feat .vs2-img{max-height:345px;margin:-21px 0}
  .vs2-body--feat{padding:0 16px 20px}
  .vs2-title--feat{font-size:22px}
  .vs2-card--story{min-height:0}
  .vs2-story{padding:28px 20px}
  .vs2-story-h{font-size:22px}
}
@media(prefers-reduced-motion:reduce){.vs2-card,.vs2-line,.vs2-line-ic{transition:none}.vs2-line:hover .vs2-line-ic{transform:none}}