/* Подборки: список /podborki/ и страница статьи.
   Макеты «Подборки бой» и «Подборка страница бой» от 03.09.2026.
   Токены системы 1.1 — из style.css; здесь только раскладка. */

:root{--pa-line:#EDE4DE;--pa-sand:#EFE7DF;--pa-sand-line:#DCCFC6;--pa-amber:#8A5C18;--pa-amber-line:#D9C4A8}

/* ── Общее для страницы статьи: узкая колонка 900 ─────────────────── */
.pa__head,.pa__steps,.pa__body,.pa-bad,.pa-near{width:min(900px,100% - 40px);margin-inline:auto}
.pa__head{margin-top:26px}
.pa__sheet .pa__head{margin-top:26px}
.pa__h1{max-width:22ch;margin:14px 0 22px;font-size:clamp(36px,4.4vw,58px);line-height:1.02;letter-spacing:-.04em;text-wrap:balance}
.pa__lead{max-width:64ch;margin:0 0 16px;font-size:clamp(18px,1.6vw,21px);line-height:1.5;text-wrap:pretty}
.pa__facts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin-top:26px;padding-top:20px;border-top:1px solid var(--border);font-size:14px;color:var(--muted)}
.pa__facts-n{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.pa__facts a{color:var(--muted)}
.pa__facts a:hover{color:var(--burgundy)}
/* Обложка первым экраном, во всю ширину окна. Высота задана прямо,
   а не через aspect-ratio: кадр 16:9 на широком экране занял бы 810
   пикселей и увёл бы заголовок за нижний край. Атрибуты width и height,
   которые проставляет WordPress, снимаем — иначе они перебьют высоту */
.pa__cover{display:block;width:100%;height:clamp(320px,40vw,660px);
  object-fit:cover;object-position:center center}

/* Лист с текстом наезжает на снимок снизу — так в макете. Фон тот же,
   что у страницы: лист не выделяется, он вырезает картинку */
.pa__sheet{position:relative;margin-top:-64px;padding-top:22px;
  background:var(--porcelain);border-radius:28px 28px 0 0}
/* Без обложки нахлёста нет: наезжать не на что */
.pa__cover + .pa .pa__sheet{margin-top:-64px}
.pa:first-child .pa__sheet{margin-top:0;padding-top:0;border-radius:0}
.pa__crumbs{width:min(900px,100% - 40px);margin:0 auto}

/* Навигация по шагам — номера кружками, как в макете */
.pa__steps{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:26px}
.pa__steps .eyebrow{margin-right:6px}
.pa__steps a{display:inline-flex;align-items:center;justify-content:center;min-width:46px;min-height:44px;padding:0 14px;background:var(--white);border:1px solid var(--border);border-radius:999px;font-size:15px;font-weight:600;color:var(--burgundy);font-variant-numeric:tabular-nums;transition:background .15s,color .15s,border-color .15s}
.pa__steps a:hover{background:var(--burgundy);border-color:var(--burgundy);color:var(--white)}

/* Плашка БАД: после лида, перед первой карточкой; кегль не мельче текста */
.pa-bad{display:flex;gap:20px;margin-top:32px;padding:28px 30px;background:var(--pa-sand);border:1px solid var(--pa-sand-line);border-radius:22px}
.pa-bad svg{width:28px;height:28px;flex:none;margin-top:3px;fill:none;stroke:var(--burgundy);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pa-bad p{max-width:56ch;margin:0;font-size:20px;line-height:1.45;font-weight:600;color:#2A2024;text-wrap:pretty}

/* ── Секции: шаг или группа ───────────────────────────────────────── */
.pa__body{margin-top:16px}
.pa__section{padding:44px 0 8px;margin-top:32px;border-top:1px solid var(--border);scroll-margin-top:110px}
.pa__section-head{display:flex;align-items:baseline;gap:22px;margin-bottom:10px}
.pa__num{flex:none;font-size:54px;line-height:.9;font-weight:600;letter-spacing:-.05em;color:var(--burgundy);font-variant-numeric:tabular-nums}
.pa__section h2{font-size:clamp(26px,2.6vw,34px);line-height:1.08;letter-spacing:-.03em;text-wrap:balance}
.pa__note{max-width:60ch;margin:0 0 30px;font-size:17px;line-height:1.5;font-style:italic;color:var(--muted);text-wrap:pretty}
.pa__p{max-width:68ch;margin:0 0 24px;font-size:18px;line-height:1.65;text-wrap:pretty}
.pa__p--in-group{max-width:66ch;margin:0 0 18px;font-size:17px;line-height:1.6}
.pa__card-wrap{margin:0 0 28px}
.pa__mark-note{max-width:64ch;margin:12px 0 0;font-size:14px;line-height:1.5;color:var(--muted);text-wrap:pretty}
.pa__finale{max-width:68ch;margin:36px 0 0;font-size:20px;line-height:1.55;text-wrap:pretty}

/* Карточка товара в тексте: снимок 4:5, описание, действие */
.pa-card{display:grid;grid-template-columns:132px minmax(0,1fr) 224px;gap:24px;align-items:center;padding:18px;background:var(--white);border:1px solid var(--pa-line);border-radius:22px}
.pa-card--in-group{grid-template-columns:120px minmax(0,1fr) 224px;gap:22px;margin-bottom:18px;padding:16px;border-radius:20px}
.pa-card__ph{display:block;aspect-ratio:4/5;overflow:hidden;border-radius:14px;background:var(--white)}
.pa-card__ph img{width:100%;height:100%;object-fit:cover}
.pa-card__none{display:grid;place-items:center;width:100%;height:100%;padding:10px;background:rgba(229,196,200,.3);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--burgundy);text-align:center}
.pa-card__body{min-width:0}
.pa-card__brand{margin:0 0 6px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pa-card__name{display:block;margin-bottom:8px;font-size:20px;line-height:1.25;font-weight:600;letter-spacing:-.02em;color:var(--ink);text-wrap:pretty}
.pa-card--in-group .pa-card__name{font-size:19px}
.pa-card__name:hover{color:var(--burgundy)}
.pa-card__meta{margin:0;font-size:15px;color:var(--muted)}
.pa-card__data{display:inline-flex;align-items:center;margin:10px 0 0;padding:4px 12px;background:var(--pa-sand);border-radius:999px;font-size:13px;color:var(--muted)}
.pa-card__act{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.pa-card__price{margin:0;font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.pa-card__price--none{color:var(--muted)}
.pa-card__price del{margin-right:8px;font-size:14px;font-weight:400;color:var(--muted)}
.pa-card__price ins{text-decoration:none;background:0}

/* Пометки: уйдёт по кнопке / альтернатива / вручную */
.pa-mark{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border:1px solid transparent;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.02em}
.pa-mark--main{background:var(--burgundy);border-color:var(--burgundy);color:var(--white)}
.pa-mark--alt{background:transparent;border-color:#C9B3B8;color:var(--burgundy)}
.pa-mark--manual{background:var(--white);border-color:var(--pa-amber-line);color:var(--pa-amber)}

/* Кнопка карточки и «Добавить всё» — таблетка; плагин красит
   .add_to_cart_button своим серым, поэтому имя класса удваиваем */
.pa-btn.pa-btn{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:48px;padding:0 20px;background:var(--burgundy);border:1px solid var(--burgundy);border-radius:999px;font:inherit;font-size:14px;font-weight:600;color:var(--white);text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s}
.pa-btn.pa-btn:hover:not([disabled]){background:var(--burgundy-hover);border-color:var(--burgundy-hover);color:var(--white)}
.pa-btn.pa-btn.added{background:#2F7A55;border-color:#2F7A55}
.pa-btn.pa-btn[disabled]{background:var(--pa-sand);border-color:var(--pa-sand);color:var(--muted);cursor:not-allowed}
.pa-btn--big.pa-btn--big{min-height:56px;padding:0 32px;font-size:16px}
.pa-card .added_to_cart{display:none}

/* Группа выбора: песочная плашка, «или» между карточками */
.pa-group{margin:0 0 32px;padding:26px 26px 8px;background:var(--pa-sand);border:1px solid var(--pa-sand-line);border-radius:26px}
.pa-group > .pa-mark{margin-bottom:14px}
.pa-group h3{margin:0 0 8px;font-size:23px;line-height:1.2;letter-spacing:-.025em;text-wrap:balance}
.pa-group__sub{max-width:62ch;margin:0 0 24px;font-size:15px;line-height:1.5;color:var(--muted);text-wrap:pretty}
.pa-group__h4{margin:0 0 8px;font-size:16px;font-weight:700;letter-spacing:.02em;color:var(--burgundy)}
.pa-or{display:flex;align-items:center;gap:16px;margin:22px 0}
.pa-or span:first-child,.pa-or span:last-child{flex:1 1 auto;height:1px;background:var(--border)}
.pa-or span:nth-child(2){flex:none;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--burgundy)}

/* Перечень позиций без карточек — текст со ссылками */
.pa-list{margin:0 0 28px}
.pa-list p{max-width:66ch;margin:0 0 12px;font-size:18px;line-height:1.9;text-wrap:pretty}
.pa-list a{text-decoration:underline;text-decoration-color:rgba(75,16,37,.35);text-underline-offset:3px}
.pa-list a:hover{text-decoration-color:var(--burgundy)}
.pa-list__sku{font-size:14px;color:var(--muted)}

/* Итог и кнопка «Добавить всё» — только в пошаговой */
.pa-sum{margin:36px 0 0;padding:30px;background:var(--white);border:1px solid var(--pa-line);border-radius:26px}
.pa-sum__row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px}
.pa-sum__nums{display:flex;flex-wrap:wrap;gap:28px 44px}
.pa-sum__nums .eyebrow{margin:0 0 4px}
.pa-sum__n{margin:0;font-size:28px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pa-sum__n--acc{color:var(--burgundy)}
.pa-sum__n--warn{color:var(--pa-amber)}
.pa-sum__act{flex:none;width:min(320px,100%)}
.pa-sum__hint{margin:10px 0 0;font-size:13px;line-height:1.45;color:var(--muted)}
.pa-sum__skipped{margin-top:24px;padding-top:20px;border-top:1px solid var(--pa-line)}
.pa-sum__skipped p{margin:0 0 4px;font-size:14px;line-height:1.5;color:var(--muted)}
.pa-sum__skipped strong{color:var(--ink)}

/* «Все позиции подборки» — плитки каталога во всю ширину */
.pa-all{margin-top:64px;padding-top:36px;border-top:1px solid var(--border)}
.pa-all__head{margin-bottom:22px}
.pa-all__head h2{margin:0 0 6px;font-size:26px;letter-spacing:-.025em}
.pa-all__head p{margin:0;font-size:15px;color:var(--muted)}
.pa-all__link{display:inline-flex;align-items:center;gap:8px;min-height:52px;margin-top:20px;font-size:15px;font-weight:600}
/* Кнопка подборки: бордовая пилюля у всех карточек одинаково, прижата
   к низу — сколько бы ни было текста выше, кнопки стоят на одной линии */
.pb-card__go{display:inline-flex;align-items:center;justify-content:center;
  align-self:flex-start;margin-top:auto;min-height:52px;padding:0 26px;
  background:var(--burgundy);color:var(--white);border-radius:var(--radius-pill);
  font-size:15px;font-weight:600}
.pb-card__go:hover{background:var(--burgundy-hover);color:var(--white)}
.pa-all__link svg,.pb-card__go svg,.pa-near svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Соседние подборки */
.pa-near{margin-top:64px;margin-bottom:96px}
.pa-near h2{margin:0 0 18px}
.pa-near__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pa-near__grid a{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 24px;background:var(--white);border:1px solid var(--pa-line);border-radius:20px;color:var(--ink);transition:border-color .15s}
.pa-near__grid a:hover{border-color:var(--burgundy)}
.pa-near__grid svg{width:18px;height:18px;flex:none;stroke:var(--burgundy)}
.pa-near__name{display:block;margin-bottom:4px;font-size:18px;font-weight:600;letter-spacing:-.02em;text-wrap:pretty}
.pa-near__n{display:block;font-size:13px;color:var(--muted)}

/* ── Список подборок ──────────────────────────────────────────────── */
/* ── Первый экран: иллюстрация и карточка поверх неё ──────────────── */
.pb-hero{margin-top:18px}
.pb-hero__ph{display:block;width:100%;height:clamp(340px,42vw,640px);
  object-fit:cover;
  /* 56% по вертикали: лоток стоит ниже середины кадра, и центровка
     по умолчанию срезала бы его нижний край */
  object-position:center 56%}

/* Карточка наезжает на снимок снизу — так в макете. Отрицательный
   отступ ровно на 96: меньше выглядит случайным зазором, больше
   съедает композицию лотка */
.pb-head{position:relative;max-width:760px;margin:-96px 0 0;
  padding:36px 40px 34px;background:var(--porcelain);
  border-radius:28px 28px 0 0}
.pb-head h1{max-width:20ch;font-size:clamp(34px,4.6vw,62px);line-height:1.02;letter-spacing:-.04em;text-wrap:balance}
.pb-head p{max-width:56ch;margin:18px 0 0;font-size:18px;line-height:1.55;color:var(--muted);text-wrap:pretty}
.pb-lead{margin-top:40px}
.pb-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:24px}
.pb-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--pa-line);border-radius:24px;overflow:hidden}
.pb-card--wide{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.pb-card__ph{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--pa-sand)}
.pb-card--wide .pb-card__ph{aspect-ratio:16/10;height:100%}
.pb-card__ph img{width:100%;height:100%;object-fit:cover}
.pb-card__none{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100%;height:100%;font-size:12px;color:var(--muted);background:linear-gradient(160deg,var(--porcelain) 0%,#F1E7E4 58%,rgba(229,196,200,.5) 100%)}
.pb-card__none span:first-child{font-size:26px;font-weight:600;letter-spacing:.14em;color:var(--burgundy);opacity:.32}
.pb-card__body{display:flex;flex-direction:column;gap:14px;padding:28px}
.pb-card--wide .pb-card__body{padding:40px;justify-content:center}
.pb-card__top{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted)}
.pb-card__ico{display:grid;place-items:center;width:40px;height:40px;background:var(--pa-sand);border-radius:999px}
.pb-card__ico svg{width:20px;height:20px;fill:none;stroke:var(--burgundy);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pb-card__count{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.pb-card__kind::before{content:'· ';}
.pb-card__name{margin:0;font-size:clamp(26px,2.4vw,32px);line-height:1.1;letter-spacing:-.03em;text-wrap:balance}
.pb-card--wide .pb-card__name{font-size:clamp(30px,3.2vw,42px)}
.pb-card__name a{color:var(--ink)}
.pb-card__name a:hover{color:var(--burgundy)}
.pb-card__task{max-width:48ch;margin:0;font-size:16px;line-height:1.5;color:var(--muted);text-wrap:pretty}
.pb-card--wide .pb-card__task{font-size:17px}
/* Плашка БАД на анонсе — та же, что на странице, кеглем текста */
.pb-card__bad{margin:0;padding:16px 18px;background:var(--pa-sand);border:1px solid var(--pa-sand-line);border-radius:14px;font-size:15px;line-height:1.45;font-weight:600;color:#2A2024}
.pb-card__foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--pa-line)}
.pb-card__route{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--ink)}
.pb-card__go{margin-top:16px}
.pb-empty__t{margin:0 0 8px;font-size:24px;font-weight:600}
.pb-goods{margin-bottom:96px}
.pb-goods__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;margin-bottom:20px}
.pb-goods__head h2{font-size:22px}
.pb-goods__head p{margin:0;font-size:14px;color:var(--muted)}

/* ── Планшет и телефон ─────────────────────────────────────────────── */
@media (max-width:1024px){
  .pa-card,.pa-card--in-group{grid-template-columns:112px minmax(0,1fr);gap:18px}
  .pa-card__act{grid-column:2;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap}
  .pa-card__act .pa-btn{width:auto;min-width:200px}
  .pb-card--wide{grid-template-columns:minmax(0,1fr)}
  .pb-card--wide .pb-card__ph{aspect-ratio:16/9;height:auto}
  .pb-card--wide .pb-card__body{padding:28px}
}
@media (max-width:760px){
  /* Кегли заголовков по эталонам «Подборки бой моб» и «Подборка
     страница бой моб»: clamp снизу давал на два пункта больше */
  .pb-head h1{font-size:32px}
  /* На телефоне карточка во всю ширину контейнера и с меньшими полями:
     40 по бокам съедали бы треть строки */
  .pb-head{margin-top:-72px;padding:24px 20px 22px;border-radius:22px 22px 0 0}
  .pb-hero__ph{height:340px}
  .pa__h1{font-size:34px;margin:12px 0 18px}
  .pa__section-head{gap:14px}
  .pa__num{font-size:44px}
  .pa-bad{gap:14px;padding:20px 18px}
  .pa-bad p{font-size:17px}
  .pa-group{padding:18px 16px 4px;border-radius:20px}
  .pa-card,.pa-card--in-group{grid-template-columns:96px minmax(0,1fr);gap:14px;padding:14px;border-radius:18px}
  .pa-card__act{grid-column:1 / -1}
  .pa-card__act .pa-btn{width:100%}
  .pa-card__name{font-size:17px}
  .pa-sum{padding:22px}
  .pa-sum__n{font-size:24px}
  .pa-sum__act{width:100%}
  .pa-near__grid,.pb-list{grid-template-columns:minmax(0,1fr)}
  .pb-card__body{padding:20px}
}

/* ── Правки 03.09 по взгляду покупательницы ───────────────────────── */
/* Строка «как пользоваться» — правила названы до первого шага */
.pa__how{max-width:64ch;margin:18px 0 0;padding:14px 18px;background:var(--white);border:1px solid var(--pa-line);border-radius:14px;font-size:15px;line-height:1.5;color:var(--ink)}
/* Плашка БАД на десктопе — не меньше десятой части первого экрана */
@media (min-width:1025px){.pa-bad{padding:44px 36px}.pa-bad p{font-size:22px}}
/* Автообложка: три снимка товаров рядом, пока нет своей */
.pa-collage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:20px;background:var(--burgundy)}
/* Снимки целиком, на белой карточке: обрезка по краям превращала
   упаковку в непонятное пятно */
.pa-collage img{width:100%;height:100%;object-fit:contain;padding:8px;border-radius:12px;background:var(--white)}
.pa__collage.pa-collage{aspect-ratio:16/9;margin-top:26px;border-radius:24px;
  padding:28px 34px;align-items:stretch}
.pb-card__ph .pa-collage{height:100%;align-items:stretch}
.pa-collage img{min-height:0}

/* Подпись «Выбор ИНМОСТ» и плашка БАД у соседних анонсов */
.pa__choice{max-width:64ch;margin:14px 0 0;font-size:14px;line-height:1.5;color:var(--muted)}
.pa__choice strong{color:var(--ink);font-weight:600}
.pa-near__bad{display:block;margin-top:10px;padding:10px 12px;background:var(--pa-sand);border:1px solid var(--pa-sand-line);border-radius:10px;font-size:13px;line-height:1.4;font-weight:600;color:#2A2024;text-wrap:pretty}
.pa-all--link{padding-top:24px}
.pa-all--link .pa-all__head{margin-bottom:0}

/* ── Товары из подборок: одна строка с прокруткой ──────────────────── */
.pb-goods__head{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:12px 20px;margin-bottom:18px}
.pb-goods__head h2{margin:0 0 4px;font-size:22px;font-weight:600;
  letter-spacing:-.02em}
.pb-goods__head p{margin:0;font-size:14px;color:var(--muted)}
.pb-goods__nav{display:flex;gap:10px}
.pb-goods__btn{display:grid;place-items:center;width:48px;height:48px;padding:0;
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius-pill);color:var(--ink);cursor:pointer}
.pb-goods__btn:hover{border-color:var(--burgundy);color:var(--burgundy)}
.pb-goods__btn svg{width:18px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.pb-goods__btn[disabled]{opacity:.35;cursor:default}
.pb-goods__btn[disabled]:hover{border-color:var(--border);color:var(--ink)}

/* Колонки фиксированной ширины: у ленты нет «остатка», который можно
   поделить, — она уезжает за край, и ширину задаём прямо. Нижняя
   граница minmax здесь была бы нулём, и плитки схлопнулись бы
   в полоски, как это уже случалось на витрине каталога */
.pb-rail{display:grid;grid-auto-flow:column;grid-auto-columns:252px;gap:16px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  padding-bottom:4px;scrollbar-width:none;-ms-overflow-style:none}
.pb-rail::-webkit-scrollbar{display:none}
.pb-rail > *{scroll-snap-align:start;min-width:0}

@media (max-width:760px){
  .pb-goods__head h2{font-size:20px}
  /* Стрелки на телефоне лишние: лента листается пальцем */
  .pb-goods__nav{display:none}
  .pb-rail{grid-auto-columns:216px;gap:12px}
}

/* ── Первый экран подборки на телефоне ────────────────────────────── */
@media (max-width:760px){
  /* Меньше нахлёста: на 320 карточка съедала бы треть снимка */
  .pa__sheet{margin-top:-40px;padding-top:18px;border-radius:22px 22px 0 0}
}