/* ============================================================
   Автотерм catalog.css — магазин, категории, фильтры.
   Подключается на is_shop()/is_product_taxonomy(). Mobile-first.
   Воспроизводит вид прода чисто: без #page-специфичности и !important-войн
   (родителя GoStore нет). Десктоп: strip + панель фильтров; мобайл: сетка + шиты.
   ============================================================ */
@layer components {

  /* ---------- Раскладка, сетка ---------- */
  .at-catalog { padding-bottom: var(--s-7); }
  .at-page-head .term-description, .at-page-head .page-description { max-width: 66ch; color: var(--text-mid); }
  .at-toolbar .woocommerce-ordering { margin: 0; }
  .at-toolbar .woocommerce-ordering select.orderby { min-height: var(--tap); border: 1px solid var(--line-strong); border-radius: var(--r-md); background-color: var(--bg-base); font: inherit; font-size: var(--fs-sm); color: var(--text); padding-left: var(--s-4); }

  /* ---------- Боковая панель ---------- */
  .at-fcat { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 40px; color: var(--text); font-size: var(--fs-sm); text-decoration: none; }
  .at-fcat:hover { color: var(--primary-text); text-decoration: none; }
  .at-fcat[aria-current] { color: var(--primary-text); font-weight: var(--fw-700); }
  a.at-fopt { text-decoration: none; }
  a.at-fopt:hover { color: var(--primary-text); text-decoration: none; }
  .at-fopt__box { display: grid; place-items: center; width: 20px; height: 20px; flex: none; border: 2px solid var(--line-strong); border-radius: 5px; background: var(--bg-base); color: transparent; transition: background var(--t-1), border-color var(--t-1); }
  .at-fopt__box .at-icon { width: 14px; height: 14px; }
  .at-fopt.is-active .at-fopt__box { background: var(--primary); border-color: var(--primary); color: #fff; }
  a.at-fopt:hover .at-fopt__box { border-color: var(--primary); }
  .at-price-form { display: grid; gap: var(--s-3); }
  .at-cat-grid { display: none; }        /* плитки разделов только без боковой панели (ниже) */

  /* ---------- Применённые фильтры (как .at-chip макета) ---------- */
  .at-active-pills { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-4); }
  .at-active-pills__label { font-size: var(--fs-xs); color: var(--text-mid); }
  .at-active-pills__list { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); }
  .at-active-pills__pill { display: inline-flex; align-items: center; gap: var(--s-1); min-height: 36px; padding: 0 var(--s-2) 0 var(--s-3); border-radius: var(--r-pill); background: var(--primary-soft); color: var(--primary-ink); font-size: var(--fs-xs); font-weight: var(--fw-600); text-decoration: none; }
  .at-active-pills__pill:hover { background: #FFE4D4; color: var(--primary-ink); text-decoration: none; }
  .at-active-pills__x { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 16px; line-height: 1; }
  .at-active-pills__reset { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--bg-base); color: var(--text-mid); font-size: var(--fs-xs); font-weight: var(--fw-600); text-decoration: none; }
  .at-active-pills__reset:hover { color: var(--primary-text); text-decoration: none; }

  /* ---------- SEO-блок категории (под сеткой) ---------- */
  .at-cat-seo { margin: var(--sp-6) 0; padding: var(--sp-5); background: var(--bg-section); border-radius: var(--radius); color: var(--text-mid); }
  .at-cat-seo h2, .at-cat-seo h3 { color: var(--text); }

  /* ---------- Без боковой панели: плитки разделов, бар и шторки (< 64em) ---------- */
  .at-mob-action-bar { display: none; }   /* десктоп по умолчанию, до мобильного правила */
  .woocommerce-ordering select.orderby:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
  @media (max-width: 63.99em) {
    .woocommerce-ordering { display: none; }   /* без боковой панели сортировка в шторке */

    .at-cat-grid { display: block; margin: 0 0 14px; }
    .at-cat-grid__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .at-cat-grid__card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 12px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--bg-base); text-decoration: none; min-height: 88px; transition: border-color .15s, transform .15s; }
    .at-cat-grid__card:active { transform: scale(.98); }
    .at-cat-grid__icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--bg-section); color: var(--text-mid); flex-shrink: 0; }
    .at-cat-grid__icon svg { width: 22px; height: 22px; }
    .at-cat-grid__card--cold .at-cat-grid__icon { background: var(--secondary-soft); color: var(--secondary); }
    .at-cat-grid__card--hot .at-cat-grid__icon { background: var(--primary-soft); color: var(--primary); }
    .at-cat-grid__card--parts .at-cat-grid__icon { background: var(--bg-section); color: var(--text-mid); }
    .at-cat-grid__name { font-family: var(--font-head); font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.2; }
    .at-cat-grid__count { font-size: 11px; font-weight: 500; color: var(--text-light); }
    .at-cat-grid__card.is-current { border-color: transparent; }
    .at-cat-grid__card--cold.is-current { background: var(--secondary); }
    .at-cat-grid__card--hot.is-current { background: var(--primary); }
    .at-cat-grid__card--parts.is-current { background: #374151; }
    .at-cat-grid__card.is-current .at-cat-grid__name, .at-cat-grid__card.is-current .at-cat-grid__count { color: #fff; }
    .at-cat-grid__card.is-current .at-cat-grid__icon { background: rgba(255,255,255,.2); color: #fff; }
    .at-cat-grid__toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--bg-base); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; margin: 0 0 10px; }
    .at-cat-grid__toggle:hover { border-color: var(--secondary); }
    .at-cat-grid__toggle-text { flex: 1; text-align: left; }
    .at-cat-grid__chevron { transition: transform .2s; }
    .at-cat-grid.is-expanded .at-cat-grid__chevron { transform: rotate(180deg); }
    .at-cat-grid.is-collapsed .at-cat-grid__list { display: none; }
    .at-cat-grid.is-collapsed.is-expanded .at-cat-grid__list { display: grid; }

    /* Бар «Фильтры/Сортировка» */
    .at-mob-action-bar { display: flex; position: sticky; top: var(--header-h); z-index: 300; margin: 0 0 var(--s-3); background: var(--bg-page); padding: var(--s-2) 0; gap: var(--s-2); }
    .at-mob-action-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 16px; background: var(--bg-base); border: 1.5px solid var(--line); border-radius: 24px; cursor: pointer; color: var(--text); font-size: 13px; font-weight: 600; }
    .at-mob-action-btn:active, .at-mob-action-btn.is-open { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
    .at-mob-filter-badge { display: inline-flex; align-items: center; justify-content: center; background: var(--primary); color: #fff; border-radius: 10px; font-size: 10px; font-style: normal; font-weight: 700; min-width: 16px; height: 16px; padding: 0 4px; margin-left: 2px; }
  }

  /* Bottom-sheet фильтров/сортировки (общий, чтобы JS работал на всех ширинах) */
  .at-sheet-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0); z-index: 1200; pointer-events: none; transition: background .25s; }
  .at-sheet-backdrop.is-on { display: block; background: rgba(0,0,0,.45); pointer-events: auto; }
  .at-sheet { display: none; flex-direction: column; position: fixed; bottom: 8px; left: 8px; right: 8px; z-index: 1300; background: var(--bg-base); border-radius: 20px; max-height: calc(88dvh - 8px); transform: translateY(calc(100% + 12px)); transition: transform .3s cubic-bezier(.32,.72,0,1); }
  .at-sheet { display: flex; }
  .at-sheet:not(.is-open) { pointer-events: none; }
  .at-sheet.is-open { transform: translateY(0); }
  .at-sheet__drag { width: 40px; height: 4px; background: #DFE2E8; border-radius: 2px; margin: 10px auto 0; flex-shrink: 0; }
  .at-sheet__hd { display: flex; align-items: center; gap: 12px; padding: 14px 20px 12px; font-size: 17px; font-weight: 700; color: var(--text); font-family: var(--font-head); border-bottom: 1px solid var(--bg-section); flex-shrink: 0; }
  .at-sheet__hd > span:first-child { flex: 1 1 auto; }
  .at-sheet__reset { font-size: 14px; font-weight: 600; color: var(--primary); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
  .at-sheet__x { width: 32px; height: 32px; background: #374151; border: none; border-radius: 50%; padding: 0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; cursor: pointer; }
  .at-sheet__bd { overflow-y: auto; flex: 0 1 auto; overscroll-behavior: contain; }
  .at-sheet__ft { flex-shrink: 0; display: flex; align-items: center; gap: 14px; padding: 12px 20px calc(12px + var(--bottom-inset)); border-top: 1px solid var(--bg-section); }
  .at-sheet__apply { flex: 1; background: var(--primary); color: #fff; border: none; border-radius: 12px; font-size: 16px; font-weight: 700; padding: 14px 20px; cursor: pointer; }
  html.at-no-scroll, html.at-no-scroll body { overflow: hidden; }
  .at-mob-filters__group { padding: 16px 20px; border-bottom: 1px solid var(--bg-section); }
  .at-mob-filters__group-label { font-size: 11px; font-weight: 700; color: var(--text-light); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 12px; }
  .at-mob-filters__chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .at-mob-filters__chip-input { position: absolute; opacity: 0; pointer-events: none; }
  .at-mob-filters__chip { display: inline-flex; align-items: center; padding: 10px 18px; border: 1.5px solid var(--line); border-radius: 24px; font-size: 14px; font-weight: 500; color: var(--text); cursor: pointer; transition: all .12s; }
  .at-mob-filters__chip.is-active, .at-mob-filters__chip-input:checked + .at-mob-filters__chip { border-color: var(--secondary); background: var(--secondary-soft); color: var(--secondary); font-weight: 700; }
  .at-mob-filters__price-row { display: flex; align-items: center; gap: 10px; }
  .at-mob-filters__price-input { flex: 1; min-width: 0; border: 1.5px solid var(--line); border-radius: 10px; padding: 13px 14px; font-size: 15px; color: var(--text); outline: none; }
  .at-mob-filters__sku-input { width: 100%; box-sizing: border-box; height: 44px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 10px; font-size: 15px; color: var(--text); background: var(--bg-base); outline: none; }
  .at-mob-filters__sku-input:focus { border-color: var(--secondary); }
  .at-sheet-sort__list { list-style: none; margin: 0; padding: 8px 0; }
  .at-sheet-sort__list li { border-bottom: 1px solid var(--bg-section); }
  .at-sheet-sort__row { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; font-size: 15px; color: var(--text); text-decoration: none; }
  .at-sheet-sort__row.is-active { color: var(--primary); font-weight: 700; }
}