/* ============================================================
   Страница-ЛЕНТА «Распродажа» (templates/sale.php). Скоуп — .sale.
   Адаптация дизайн-эталона Rasprodazha.html под живую тему:
   фото CONTAIN на светлом холсте (как каталог), соц-скролл (НЕ TikTok-снап),
   десктоп — горизонтальная карточка. Бейдж «Распродажа» #5b2a9e (New занят #7a48c0).
   ============================================================ */
.sale{
  --accent:#7a48c0;            /* UI-акцент ленты = brand purple (как в макете); бейдж «Распродажа» — изумруд #1f6b4f отдельно */
  --ink:#282828; --ink-strong:#1a1a1a; --muted:#6d6d6d; --muted-soft:#a6a6a6;
  --line:#c4c4c4; --line-soft:#e4e2dd; --sale-bg:#ffffff; --canvas:#ffffff;  /* белый фон/медиа как в макете (--bg:#fff); фото на белом → без серых полос */
  --instock:#48c084; --used:#3a3a3a;
  --glow:0 6px 26px -4px rgba(122,72,192,.22);
  --f-disp:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--sale-bg); color:var(--ink);
  font-family:var(--f-disp);
}
.sale *{box-sizing:border-box}
.sale .feedcol{max-width:none;margin:0;padding:0 24px}

/* ---------- Нативный архив кат.29 как ЛЕНТА (ПОЛНАЯ ширина контента, как каталог) ----------
   Секция несёт .idol-catalog → JS/CSS фильтра каталога работают (десктоп-дропдауны + мобильная шторка).
   Карточки — адаптивная СЕТКА (как каталог), НЕ узкая колонка → горизонтальные детали не режутся. */
.idol-sale-archive{padding-bottom:40px}
.idol-sale-archive.idol-catalog{display:block}
/* Одна колонка ленты (как макет): десктоп — ГОРИЗОНТАЛЬНЫЕ карты (фото слева), на всю ширину контента. */
.idol-sale-archive .main__archive-content .archive-grid{display:flex;flex-direction:column;gap:22px;max-width:none;margin:0;padding:12px 0 2px}
.idol-sale-archive .sale-filterbar{max-width:none;margin:0;padding:14px 0 4px}
.idol-sale-archive .chips{display:flex;flex-wrap:wrap;gap:8px;padding:10px 0 0;border:none}
.idol-sale-archive .woocommerce-pagination{display:flex;justify-content:center;padding:28px 0 0}
/* десктоп: фасеты каталога слева (как в каталоге); на мобиле .ftopbar прячется и едет в шторку */
@media(min-width:901px){
  .idol-sale-archive .ftopbar--sale{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:9px}
}
/* у ленты нет рельсы категорий → кнопку «Категории» каталожной мобильной машинерии скрываем
   (мобильный бар catalog-mobile.js вставляет ВНУТРЬ секции ленты — скоуп секцией; пустую cat-шторку
   не трогаем глобально, чтобы не задеть каталог, — она недостижима без кнопки). */
.idol-sale-archive .idol-mbar .js-mcat{display:none}
.idol-sale-archive .idol-mbar .js-mflt{flex:1}
/* Пагинация ленты = КАТАЛОЖНАЯ. НЕ переопределяем .page-numbers — наследуем глобальный
   стиль бандла (.page-numbers: без рамок/радиуса, current = smoke-фон + brand-текст), тот же,
   что в каталоге. Раньше тут были рамки+радиус+фиолетовая current → отличалось от каталога.
   «Показать ещё» (BeRocket LMP .lmp_button.btn) и так общая. */
.sale .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Hero ---------- */
.sale-hero{padding:28px 0 20px}
.sale-hero__h1{font-family:var(--f-disp);font-weight:800;font-size:clamp(32px,10vw,50px);line-height:1;letter-spacing:.01em;text-transform:uppercase;margin:0;color:var(--ink-strong)}
.sale-hero__p{margin:14px 0 0;font-weight:500;font-size:16px;line-height:1.5;color:var(--muted);max-width:48ch}
.sale-hero__p .accent{color:var(--accent);font-weight:700}

/* ---------- Trust strip ---------- */
.trust{display:flex;flex-direction:column;gap:10px;margin:22px 0 4px}
.trust__row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tcard{padding:15px 16px;background:#fff;border:1px solid var(--line-soft);border-radius:8px}
.tcard b{display:block;font-weight:700;font-size:14px;color:var(--ink-strong)}
.tcard span{display:block;font-weight:500;font-size:12.5px;color:var(--muted);line-height:1.35;margin-top:3px}
.tcard--hero{border-color:var(--accent);box-shadow:var(--glow)}
.tcard--hero b{font-size:16px}
.tcard--hero .plus{color:var(--accent);font-weight:800}
@media(max-width:400px){.trust__row{grid-template-columns:1fr}}

/* ---------- Sticky filter bar ---------- */
.filterbar{position:sticky;top:0;z-index:40;background:rgba(245,245,245,.94);-webkit-backdrop-filter:saturate(1.4) blur(8px);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line-soft)}
.filterbar__in{display:flex;align-items:center;gap:9px;padding:11px 16px}
.qscroll{display:flex;gap:8px;overflow-x:auto;flex:1;scrollbar-width:none}
.qscroll::-webkit-scrollbar{display:none}
.pill{flex:none;display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:#fff;font-family:var(--f-disp);font-weight:600;font-size:13px;color:var(--ink);white-space:nowrap;cursor:pointer;text-decoration:none;transition:.16s}
.pill:hover{border-color:var(--ink)}
.pill.is-on{background:var(--accent);border-color:var(--accent);color:#fff}
.fltbtn{flex:none;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border:1px solid var(--ink);border-radius:999px;background:#fff;font-family:var(--f-disp);font-weight:700;font-size:13px;color:var(--ink);cursor:pointer}
.fltbtn:hover{background:var(--ink);color:#fff}
.fltbtn .n{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--accent);color:#fff;font-size:11px;font-weight:800}
.fltbtn:hover .n{background:#fff;color:var(--ink)}

/* ---------- Применённые фильтры ---------- */
.applied{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:14px 0 2px}
.achip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 6px 0 11px;border:1px solid var(--line-soft);border-radius:999px;background:#fff;font-size:12.5px;font-weight:600;color:var(--ink)}
.achip a{display:inline-flex;align-items:center;justify-content:center;position:relative;width:18px;height:18px;border-radius:50%;background:var(--sale-bg);color:var(--muted);text-decoration:none;font-size:11px;line-height:1}
.achip a::before{content:"";position:absolute;inset:-13px -4px}/* K5: tap ~44px по высоте, +4px по X (в пределах gap 8px — без перекрытия соседних чипов) */
.achip a:hover{background:var(--accent);color:#fff}
.applied__clear{margin-left:2px;font-size:12.5px;font-weight:700;color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* ---------- Шторка фильтров (bottom-sheet) ---------- */
.sheet2{position:fixed;inset:0;z-index:1200}
.sheet2__scrim{position:absolute;inset:0;background:rgba(20,16,28,.42);opacity:0;transition:opacity .22s}
.sheet2.is-open .sheet2__scrim{opacity:1}
.sheet2__panel{position:absolute;left:0;right:0;bottom:0;max-height:88vh;display:flex;flex-direction:column;background:var(--sale-bg);border-radius:18px 18px 0 0;box-shadow:0 -10px 40px -8px rgba(0,0,0,.3);transform:translateY(100%);transition:transform .26s cubic-bezier(.22,.61,.36,1)}
.sheet2.is-open .sheet2__panel{transform:none}
.sheet2__head{display:flex;align-items:center;justify-content:space-between;padding:18px 18px 12px;border-bottom:1px solid var(--line-soft)}
.sheet2__head b{font-family:var(--f-disp);font-weight:800;font-size:18px;color:var(--ink-strong)}
.sheet2__x{width:34px;height:34px;border:none;border-radius:50%;background:#fff;color:var(--ink);font-size:15px;cursor:pointer}
.sheet2__body{overflow-y:auto;padding:6px 18px 16px;-webkit-overflow-scrolling:touch}
.fblock{padding:16px 0;border-bottom:1px solid var(--line-soft)}
.fblock:last-child{border-bottom:none}
.fblock__t{font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:10px}
.frow{display:flex;align-items:center;gap:10px;padding:7px 0;font-weight:600;font-size:15px;color:var(--ink);cursor:pointer}
.frow input{width:18px;height:18px;accent-color:var(--accent)}
.fprice{display:flex;align-items:center;gap:10px}
.fprice input{flex:1;min-width:0;height:46px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:#fff;font-family:var(--f-disp);font-size:16px;color:var(--ink)}
.fprice input:focus{outline:none;border-color:var(--accent)}
.fprice span{color:var(--muted-soft)}
.fbrands{display:flex;flex-direction:column;gap:2px;max-height:240px;overflow-y:auto}
.fcheck{display:flex;align-items:center;gap:10px;padding:7px 0;font-weight:600;font-size:15px;color:var(--ink);cursor:pointer}
.fcheck input{width:18px;height:18px;accent-color:var(--accent)}
.sheet2__foot{display:flex;align-items:center;gap:12px;padding:14px 18px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line-soft);background:var(--sale-bg)}
.sheet2__reset{flex:none;font-weight:700;font-size:14px;color:var(--muted);text-decoration:none;padding:0 6px}
.sheet2__show{flex:1;height:52px;border:none;border-radius:12px;background:var(--accent);color:#fff;font-family:var(--f-disp);font-weight:800;font-size:16px;cursor:pointer;box-shadow:var(--glow)}
.sheet2__show:hover{background:#4a2182}

/* ---------- Feed ---------- */
.feed{display:flex;flex-direction:column;gap:22px;padding:18px 0 6px}
.sale-empty{padding:40px 0;text-align:center;color:var(--muted)}
.post{background:#fff;border:1px solid var(--line-soft);border-radius:14px;overflow:hidden;box-shadow:0 2px 12px -6px rgba(0,0,0,.08);transition:box-shadow .3s,border-color .3s,transform .12s}
.post:hover{box-shadow:var(--glow);border-color:#e1d8f0}
.post:active{transform:scale(.995)}
/* Scroll-reveal: карты плавно появляются при прокрутке (вайбовый листинг). Гейт .js-reveal (его ставит
   JS) → без JS карты видимы. JS добавляет .in в зоне видимости. */
.js-reveal .post.reveal{opacity:0;transform:translateY(22px)}
.js-reveal .post.reveal.in{opacity:1;transform:none;transition:opacity .5s cubic-bezier(.22,.61,.36,1),transform .5s cubic-bezier(.22,.61,.36,1)}
/* tabular-цифры — цена/смотрят не «прыгают» по ширине (скилл: number-tabular) */
.post__price b,.post__price s,.post__viewers b{font-variant-numeric:tabular-nums}

/* media: фото CONTAIN на холсте (вся вещь видна, как в каталоге) */
.post__media{position:relative;aspect-ratio:3/4;background:transparent;overflow:hidden}
/* Галерея-слайдер карточки: горизонтальный scroll-snap + точки-индикаторы (всегда, даже 1 фото) */
.post__gallery{position:absolute;inset:0}
.post__slides{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.post__slides::-webkit-scrollbar{display:none}
.post__slide{flex:0 0 100%;height:100%;scroll-snap-align:center;display:block}
.post__img{width:100%;height:100%;object-fit:contain;object-position:center;display:block;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
@media(hover:hover){.post:hover .post__img{transform:scale(1.04)}}
.post__dots{position:absolute;left:0;right:0;top:14px;z-index:3;display:flex;justify-content:center;gap:12px;pointer-events:none}
.post__dot{position:relative;width:7px;height:7px;border-radius:50%;background:rgba(20,18,24,.28);box-shadow:0 0 0 3px rgba(255,255,255,.35);cursor:pointer;transition:.2s;pointer-events:auto}
.post__dot::before{content:"";position:absolute;inset:-11px -3px}/* K5: tap выше, узкий по X (без перекрытия соседних точек, gap 12px) */
.post__dot.is-on{background:var(--accent);transform:scale(1.3)}

/* overlays */
.post__viewers{position:absolute;top:14px;left:14px;z-index:3;display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 13px;border-radius:999px;background:rgba(20,18,24,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font-weight:600;font-size:12px}
.post__viewers b{font-weight:800}
.post__viewers .dotlive{width:7px;height:7px;border-radius:50%;background:var(--instock);box-shadow:0 0 0 0 rgba(72,192,132,.5);animation:salepulse 1.8s infinite}
@keyframes salepulse{0%{box-shadow:0 0 0 0 rgba(72,192,132,.5)}70%{box-shadow:0 0 0 7px rgba(72,192,132,0)}100%{box-shadow:0 0 0 0 rgba(72,192,132,0)}}
.post__fav{position:absolute;top:13px;right:13px;z-index:3;width:44px;height:44px;display:grid;place-items:center;border-radius:999px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);box-shadow:0 2px 11px rgba(0,0,0,.09);color:#6a6a6a;cursor:pointer;transition:.16s}
.post__fav:hover,.post__fav.is-on{color:var(--accent)}
.post__fav .icons{font-size:20px}
.post__cond{position:absolute;left:15px;bottom:15px;z-index:3}
.bdg2{height:28px;display:inline-flex;align-items:center;padding:0 12px;border-radius:6px;font-weight:700;font-size:12px;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.bdg2--used{background:var(--used);color:#fff}

/* тема рисует свои .badges (Хит/New/−%) поверх фото — позиционируем в угол */
/* Бейджи — НИЗ-ЛЕВО (как на всех карточках товара); «N смотрят» — верх-лево; доты — ВЕРХ-центр.
   Доты и шильдики на противоположных краях фото → не пересекаются, доты не мешают свайпу. */
.post__media .badges{position:absolute;left:15px;bottom:15px;z-index:4;display:flex;flex-wrap:wrap;gap:6px}

/* info */
.post__b{padding:18px 18px 20px;display:flex;flex-direction:column}
.post__title{display:block;text-decoration:none;color:inherit;line-height:1.45}
.post__brand{font-family:var(--f-disp);font-weight:800;font-size:16px;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-strong);overflow-wrap:break-word}
.post__name{display:block;font-weight:500;font-size:15px;color:var(--ink);margin-top:3px;overflow-wrap:break-word}
.post__name--solo{margin-top:0}
.post__title:hover .post__name{color:var(--accent)}
.post__price{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin-top:13px}
.post__price b{font-weight:700;font-size:20px;color:var(--ink-strong);white-space:nowrap}
.post__price s{font-weight:500;font-size:15px;color:var(--muted-soft)}
.post__price .pct{font-weight:700;font-size:13px;color:var(--accent)}
/* Инфо-чипсы тела карточки (размер/состояние) — как в макете */
.post__meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}
.mchip{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;background:var(--sale-bg);border:1px solid var(--line-soft);font-weight:600;font-size:12px;color:var(--ink);white-space:nowrap;text-transform:uppercase;letter-spacing:.04em}
/* «Под заказ» — товар скуплен, но заказываем. Мягкий чип у цены (не алярм):
   приглушённый ink на тёплом нейтральном фоне, маленькая точка-маркер. */
.mchip--backorder{color:#4a4a4a;background:#faf8f4;border-color:#e2ddd4}
.mchip--backorder::before{content:"";width:6px;height:6px;border-radius:50%;background:#b9a36a;margin-right:7px;flex:none}
.post__story{margin-top:15px}
.post__story-h{font-weight:800;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.post__story-h::before{content:"";width:15px;height:1.5px;background:var(--accent);flex:none}
.post__desc{font-weight:400;font-size:14px;line-height:1.6;color:#3d3f46}
.post__desc .clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post__desc.is-open .clamp{-webkit-line-clamp:unset}
.post__more{margin-top:6px;font-family:var(--f-disp);font-weight:600;font-size:13.5px;color:var(--accent);background:none;border:none;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* Триггер «Таблица размеров» в карточке (открывает шторку — sale.js). Скромная
   текст-кнопка с иконкой-линейкой над CTA. */
.post__sizelink{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:0;border:none;background:none;cursor:pointer;font-family:var(--f-disp);font-weight:600;font-size:13px;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px;transition:.16s}
.post__sizelink:hover{color:var(--accent);text-decoration-color:var(--accent)}
.post__sizelink svg{flex:none;color:var(--muted);transition:.16s}
.post__sizelink:hover svg{color:var(--accent)}

/* CTA на каталожном компоненте .btn (двойной CTA ленты). Глобальный вид .btn не трогаем — только раскладка. */
.post__cta{display:flex;flex-direction:column;gap:9px;margin-top:16px}
.post__cta .btn{width:100%;cursor:pointer;text-transform:uppercase;letter-spacing:.08em}
.post__cta .btn .icons{font-size:16px;margin-right:8px;--icon-size:18px}
/* «В Telegram» = ghost-кнопка на СВЕТЛОМ теле карточки. Каталожный модификатор color:transparent
   рассчитан на ТЁМНЫЙ фон (бел. текст/бордер) → на белом теле невидим. Делаем видимый ghost
   (тёмный текст + бордер, как .sbtn--ghost в макете). Скоуп .post__cta — баннер/глобал не трогаем. */
.post__cta .btn.color\:transparent{background:#fff;color:var(--ink);border:1px solid var(--line);--icon-bg-color:var(--ink)}
.post__cta .btn.color\:transparent:hover{border-color:var(--accent);color:var(--accent);--icon-bg-color:var(--accent)}
.post__cta .btn.is-added{background:var(--instock)!important;border-color:var(--instock)!important;color:#fff!important}

/* ---------- Load more ---------- */
.loadwrap{display:flex;justify-content:center;padding:24px 0 30px}
.loadmore2{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;width:100%;border:1px solid var(--ink);border-radius:8px;background:#fff;color:var(--ink);font-family:var(--f-disp);font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:.2s}
.loadmore2:hover{background:var(--ink);color:#fff}

/* ---------- Subscribe ---------- */
/* Блок подписки = ШТАТНЫЙ .cta (info.css, скоуп .info-scope), как на блоге — см.
   chunks/sale-subscribe.php. info.css подключается на ленте в idol_sale_assets().
   Локальных стилей подписки не держим (единый источник дизайна сбора почты). */
/* Отступ от пагинации/ленты до тёмного блока сбора почты — иначе «РАССЫЛКА» налезала
   впритык на нумерованную пагинацию. */
.idol-sale-archive .idol-sale-subscribe{margin-top:40px}

/* ---------- Desktop: ГОРИЗОНТАЛЬНАЯ карта (фото слева + инфо справа), как в макете ---------- */
@media(min-width:760px){
  .sale-hero{padding-top:40px}
  .sale-hero__h1{font-size:clamp(40px,5vw,58px)}
  .idol-sale-archive .main__archive-content .archive-grid{gap:26px}
  .post{display:grid;grid-template-columns:minmax(320px,42%) 1fr;align-items:stretch}
  .post__b{padding:32px 40px;justify-content:center}
  .post__cta{flex-direction:row}
  .post__cta .btn{flex:1;width:auto}
  .post__cta .btn:last-child{flex:0 0 auto;padding:0 26px}
}
@media(min-width:1200px){
  .post{grid-template-columns:minmax(360px,40%) 1fr}
  .post__cta .btn:first-child{flex:0 0 clamp(200px,40%,280px)}
}

@media(prefers-reduced-motion:reduce){
  .post__viewers .dotlive{animation:none}
  .js-reveal .post.reveal{opacity:1;transform:none}
  .js-reveal .post.reveal.in{transition:none}
}