/* Catalog page */
.cat-hero { padding-bottom: var(--s6); border-bottom: 1px solid var(--border); }
.cat-hero h1 { font-size: var(--text-3xl); font-weight: 900; letter-spacing: -0.02em; }
.cat-hero p { font-size: var(--text-md); color: var(--ink-2); margin-top: var(--s2); max-width: 60ch; }

/* Control bar */
.ctrlbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding-block: var(--s5); flex-wrap: wrap; }
.ctrlbar__left { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.filter-toggle { display: none; align-items: center; gap: 8px; font-weight: 600; font-size: var(--text-base); border: 1.5px solid var(--border-2); border-radius: var(--r-md); padding: var(--s2) var(--s4); }
.result-count { font-size: var(--text-base); color: var(--ink-2); }
.result-count strong { color: var(--ink); }
.chips { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 2px; font-size: var(--text-xs); font-weight: 600; background: var(--brand-tint); color: var(--brand); border: 1px solid transparent; border-radius: var(--r-full); padding: 6px 6px 6px 14px; transition: background .15s ease, border-color .15s ease; }
.chip:hover { background: #fff; border-color: var(--brand-tint); }
.chip a[data-filter] { display: inline-flex; align-items: center; justify-content: center; color: var(--brand); font-size: 1rem; line-height: 1; width: 20px; height: 20px; margin-left: 4px; border-radius: 50%; text-decoration: none; transition: background .15s ease, color .15s ease; }
.chip a[data-filter]:hover { background: var(--brand); color: #fff; }
.chips__clear { display: inline-flex; align-items: center; font-size: var(--text-xs); font-weight: 600; color: var(--ink-2); text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color .15s, color .15s; }
.chips__clear:hover { color: var(--brand); text-decoration-color: var(--brand); }
.ctrlbar__right { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.sort, .perpage { display: flex; align-items: center; gap: var(--s3); font-size: var(--text-base); color: var(--ink-2); font-weight: 500; }
.sort select, .perpage select { border: 1.5px solid var(--border-2); border-radius: var(--r-md); padding: var(--s2) var(--s4); font-weight: 600; color: var(--ink); background: #fff; cursor: pointer; }

/* Layout */
.cat-layout { display: grid; grid-template-columns: 260px 1fr; gap: var(--s8); align-items: start; padding-bottom: var(--s16); }

/* AJAX catalog filtering: brief dimmed state while a fetch is in flight. */
.cat-main.is-loading { opacity: .5; pointer-events: none; transition: opacity .15s ease; }

/* Filters */
.filters { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s6); position: sticky; top: var(--s4); }
.filters__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s5); }
.filters__head h2 { font-size: var(--text-lg); font-weight: 700; }
.filters__close { display: none; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; font-size: 1.6rem; line-height: 1; color: var(--ink-3); }
.fgroup { padding-block: var(--s5); border-top: 1px solid var(--border); }
.fgroup:first-of-type { border-top: none; padding-top: 0; }
.fgroup h3 { font-size: var(--text-base); font-weight: 600; margin-bottom: var(--s3); font-family: var(--font-body); }
.fcheck, .ftoggle { display: flex; align-items: center; gap: var(--s3); font-size: var(--text-base); color: var(--ink-2); padding: 6px 0; cursor: pointer; }
.fcheck span { margin-left: auto; font-size: var(--text-xs); color: var(--ink-3); }
.fcheck input { width: 17px; height: 17px; accent-color: var(--brand); }
.ftoggle { justify-content: space-between; }
.ftoggle input { display: none; }
.switch { width: 38px; height: 22px; border-radius: var(--r-full); background: var(--border-2); position: relative; transition: background .15s; flex-shrink: 0; }
.switch::after { content:''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: var(--sh-sm); }
.ftoggle input:checked + .switch { background: var(--emerald); }
.ftoggle input:checked + .switch::after { transform: translateX(16px); }
.price-set { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.price-inputs { display: flex; align-items: center; gap: var(--s2); flex: 1 1 100%; min-width: 0; }
.price-inputs input { flex: 1 1 0; min-width: 0; width: 100%; border: 1.5px solid var(--border-2); border-radius: var(--r-sm); padding: var(--s2) var(--s3); font-size: var(--text-base); text-align: center; }
.price-inputs span { color: var(--ink-3); flex-shrink: 0; }
.btn-set { flex: 0 0 auto; margin-left: auto; background: #fff; color: var(--ink); border: 1.5px solid var(--border-2); border-radius: var(--r-sm); padding: var(--s2) var(--s5); font-weight: 600; font-size: var(--text-base); cursor: pointer; transition: border-color .12s, color .12s; }
.btn-set:hover { border-color: var(--brand); color: var(--brand); }
.range { width: 100%; accent-color: var(--brand); margin-top: var(--s2); }
.range--cta { accent-color: var(--cta); }
.range-scale { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--ink-3); margin-top: 4px; }
/* Customer rating filter */
.frate { gap: var(--s2); }
.frate input { width: 17px; height: 17px; accent-color: var(--brand); flex-shrink: 0; }
.rstars { display: inline-flex; align-items: center; gap: 1px; flex-shrink: 0; }
.rstars svg.on { color: #F5A623; }
.rstars svg.off { color: var(--border-2); }
.savings-val { margin-bottom: var(--s2); }
.fhint { font-size: var(--text-xs); color: var(--ink-3); margin-top: var(--s2); }
.filters .btn { margin-top: var(--s4); }

/* Load more */
.load-more-wrap { display: flex; justify-content: center; margin-top: var(--s10); }
.load-more { min-width: 200px; justify-content: center; }
.load-more.is-loading { opacity: .6; pointer-events: none; }

/* Empty state (reference snippet kept in DOM-less; documented) */

/* ===== MOBILE ===== */
@media (max-width: 760px) {
  .cat-hero h1 { font-size: var(--text-2xl); }
  .filter-toggle { display: inline-flex; }
  .ctrlbar { padding-block: var(--s4); }
  .ctrlbar__left { gap: var(--s3); width: 100%; }
  .ctrlbar__right { width: 100%; }
  .sort { width: 100%; justify-content: space-between; }
  .sort select { flex: 1; max-width: 60%; }
  .chips { width: 100%; }
  .cat-layout { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  /* Filters become slide-in drawer */
  .filters {
    position: fixed; inset: 0 0 0 auto; width: 86%; max-width: 340px; z-index: 100;
    border-radius: 0; overflow-y: auto; transform: translateX(100%); transition: transform .25s ease;
    box-shadow: var(--sh-lg);
  }
  .filters.open { transform: translateX(0); }
  .filters__close { display: inline-flex; }
  .page { min-width: 36px; height: 36px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

/* ===== All Deals по пакету 18.10.2026 =====
   Боковой фильтр, счётчик результатов и пагинация убраны; фильтры стали
   двумя компактными рядами, на мобильном они прокручиваются вбок. */
/* Классы страницы All Deals — с префиксом deals-, НЕ ad-: блокировщики рекламы (EasyList: ##.ad-hero, ##.ad-row, ##.ad-grid) прятали заголовок, фильтры и товары. */
.deals-hero { padding: 8px 0 22px; }
.deals-hero h1 { font-size: 30px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; margin: 0 0 6px; color: var(--ink); }
.deals-hero p { font-size: 15px; line-height: 1.55; color: var(--ink-2); margin: 0; }

.deals-filters { display: flex; flex-direction: column; gap: 18px; margin: 18px 0 36px; }
.deals-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
/* Бренды отделены от категорий воздухом и тонкой линией — иначе два ряда
   пилюль читаются как один слипшийся блок. */
.deals-row--brands { gap: 8px; padding-top: 16px; border-top: 1px solid var(--border); }
.deals-row__lbl { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-right: 6px; }
.deals-pill { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: var(--r-full); background: var(--surface-2, #F3F4F7); color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; }
.deals-pill:hover { background: var(--border); color: var(--ink); text-decoration: none; }
.deals-pill.is-on { background: var(--brand-tint, #EFF1FB); color: var(--brand); }
.deals-pill--brand { background: #fff; border: 1px solid var(--border); font-size: 13px; height: 34px; }
.deals-pill--brand.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.deals-clear { font-size: 13px; font-weight: 700; color: var(--brand); text-decoration: none; margin-left: 8px; }
.deals-clear:hover { text-decoration: underline; }
.deals-sort { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.deals-sort__lbl { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.deals-sort form, .deals-sort .woocommerce-ordering { margin: 0; }
.deals-sort select { height: 40px; line-height: 1.2; border: 1px solid var(--border); border-radius: var(--r-md); padding: 0 32px 0 12px; font: inherit; font-size: 14px; background: #fff; }

/* ===== Свой выпадающий список сортировки =====
   Нативный select остаётся в DOM (работает без JS и отправляет форму),
   но прячется, когда скрипт собрал кастомный виджет. */
.hs-select { position: relative; }
/* Скрытый нативный select: без left/top его static-позиция уезжала за правый край и растягивала страницу (на телефоне — до 1139px). */
.hs-select__native { position: absolute; left: 0; top: 0; width: 1px !important; height: 1px !important; max-width: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hs-select__btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 196px; height: 40px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: #fff; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; transition: border-color .15s; }
.hs-select__btn:hover { border-color: var(--border-2); }
.hs-select__btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.hs-select.is-open .hs-select__btn { border-color: var(--brand); }
.hs-select__chev { flex: none; width: 14px; height: 14px; color: var(--ink-3); transition: transform .15s; }
.hs-select.is-open .hs-select__chev { transform: rotate(180deg); }
.hs-select__menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 100%; z-index: 40; display: none; padding: 6px; background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: 0 14px 34px rgba(16, 18, 29, .12); }
.hs-select.is-open .hs-select__menu { display: block; }
.hs-select__opt { display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 14px; color: var(--ink); text-align: left; white-space: nowrap; cursor: pointer; }
.hs-select__opt:hover, .hs-select__opt:focus-visible { background: var(--surface-2, #F3F4F7); outline: none; }
.hs-select__opt.is-on { background: var(--brand-tint, #EFF1FB); color: var(--brand); font-weight: 700; }

/* Компактный рейтинг: «4.8(212)» — число и счётчик без пробела между ними
   (общий gap .card__rating = 6px их разводил). */
.card__rating--compact { gap: 6px; }
.card__rating--compact .rating-num { margin-right: -6px; }
.card__new { position: absolute; top: var(--s3); left: var(--s3); z-index: 2; font-size: 11px; font-weight: 700; color: var(--brand); background: var(--brand-tint, #EFF1FB); border-radius: var(--r-full); padding: 3px 9px; }

@media (max-width: 1100px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .deals-hero h1 { font-size: 24px; }
  .deals-filters { gap: 14px; }
  .deals-row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 4px; }
  .deals-row--brands { padding-top: 14px; }
  .deals-row::-webkit-scrollbar { display: none; }
  .deals-sort { margin-left: 0; }
  .hs-select__menu { right: auto; left: 0; }
}
@media (max-width: 640px) { .grid-3 { grid-template-columns: minmax(0, 1fr); } }

/* ===== All Deals на телефоне: компактнее (22.10.2026) =====
   Товары списком (фото слева, цена и кнопка снизу строки), ужатые шапка страницы и ряды чипов.
   Метка .deals-grid стоит только на сетке этой страницы — категории и избранное не затронуты. */
@media (max-width: 760px) {
  .deals-hero { padding: 0 0 6px; }
  .deals-hero h1 { font-size: 22px; margin-bottom: 2px; }
  .deals-hero p { font-size: 13px; line-height: 1.4; }
  .deals-filters { gap: 8px; margin: 10px 0 16px; }
  .deals-row { gap: 8px; }
  .deals-row--brands { padding-top: 8px; }
  .deals-row__lbl { white-space: nowrap; }
  .deals-pill { height: 32px; padding: 0 13px; font-size: 13px; }
  .deals-pill--brand { height: 30px; font-size: 12.5px; }

  /* Список: одна строка на товар — фото слева, текст справа; цена и кнопка прижаты к низу строки. */
  .deals-grid { display: flex; flex-direction: column; gap: 10px; }
  .deals-grid .card { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: stretch; }
  .deals-grid .card__media { width: auto; height: auto; aspect-ratio: auto !important; padding: 8px; border: 0; display: flex; align-items: center; justify-content: center; position: relative; min-width: 0; overflow: hidden; }
  .deals-grid .card__media > a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-width: 0; }
  .deals-grid .card__media img { max-width: 100%; max-height: 100px; width: auto; height: auto; object-fit: contain; }
  .deals-grid .card__fav { width: 28px; height: 28px; top: 4px; right: 4px; }
  .deals-grid .card__fav svg { width: 14px; height: 14px; }

  .deals-grid .card__body {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto auto 1fr;
    column-gap: 8px; row-gap: 3px; padding: 10px 10px 10px 4px;
  }
  .deals-grid .card__cat { grid-area: 1 / 1; font-size: 10.5px; }
  .deals-grid .card__body > .badge { grid-area: 1 / 2; justify-self: end; font-size: 11px; padding: 2px 8px; }
  /* Названия у Amazon длинные (MacBook — 8 строк): держим две, полное — по ссылке. */
  .deals-grid .card__name { grid-area: 2 / 1 / 3 / 3; font-size: 13px; line-height: 1.3; min-height: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .deals-grid .card__specs { display: none; }
  .deals-grid .card__rating { grid-area: 3 / 1; }
  .deals-grid .card__meta { grid-area: 3 / 2; justify-self: end; font-size: 11px; }
  .deals-grid .card__meta .badge { font-size: 11px; padding: 2px 8px; }
  .deals-grid .card__save-line { grid-area: 4 / 1 / 5 / 3; font-size: 11px; line-height: 1.3; }
  .deals-grid .card__pricing { grid-area: 5 / 1; align-self: end; }
  .deals-grid .price-now { font-size: 17px; }
  .deals-grid .price-now--tba { font-size: 12px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
  .deals-grid .price-was { font-size: 12px; }
  .deals-grid .card__actions { grid-area: 5 / 2; align-self: end; }
  .deals-grid .card__actions .btn { width: auto; height: 34px; padding: 0 12px; font-size: 13px; }
}