/* ==========================================================================
   SHOP ARCHIVE
   --------------------------------------------------------------------------
   Loaded only on the shop and on product-category/brand/tag archives, after
   components.css. Everything here is additive: the generic card, grid and
   pagination rules stay where they are and this file supplies the archive's
   own furniture (hero, category rail, toolbar, facets, chips, list view,
   loading state).

   Written with logical properties throughout, so the same file is correct in
   RTL and LTR without a single direction-specific override.
   ========================================================================== */

/* --- Archive head: hero + category rail ----------------------------------- */

.kj-shop__head {
  display: grid;
  /*
   * minmax(0, 1fr), not the implicit auto column: an auto track is sized by
   * its items' max-content, and the category rail's row of chips is one long
   * unbreakable line — the track grew to 1436px inside a 1248px container and
   * pushed the whole document sideways. Constraining the track lets the rail
   * below scroll instead of stretching.
   */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kj-s5);
  margin-bottom: var(--kj-s6);
}

.kj-shop__hero {
  display: flex;
  align-items: center;
  gap: var(--kj-s4);
}

.kj-shop__hero-img {
  inline-size: 60px;
  block-size: 60px;
  object-fit: cover;
  border: 1px solid var(--kj-line);
  border-radius: var(--kj-r-md);
  background: var(--kj-surface);
}

.kj-shop__title {
  margin: 0;
  font-size: var(--kj-fs-3xl);
  font-weight: 800;
  line-height: var(--kj-lh-tight);
  color: var(--kj-ink);
}

.kj-shop__hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kj-s3);
  margin-top: var(--kj-s2);
}

.kj-shop__total {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 3px var(--kj-s3);
  font-size: var(--kj-fs-xs);
  font-weight: 700;
  color: var(--kj-primary-ink, var(--kj-primary));
  background: var(--kj-primary-soft);
  border-radius: var(--kj-r-pill);
}

.kj-shop__hero-note {
  font-size: var(--kj-fs-xs);
  color: var(--kj-muted);
}

/* Category rail: one row, scrolls sideways instead of wrapping. */
.kj-catrail {
  min-inline-size: 0;
  margin-inline: calc(var(--kj-gutter) / -2);
}

.kj-catrail__list {
  display: flex;
  gap: var(--kj-s2);
  margin: 0;
  padding: 2px calc(var(--kj-gutter) / 2) var(--kj-s2);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  scrollbar-width: thin;
}

.kj-catrail__item {
  display: inline-flex;
  align-items: center;
  gap: var(--kj-s2);
  min-height: var(--kj-tap);
  padding: var(--kj-s2) var(--kj-s3);
  font-size: var(--kj-fs-sm);
  font-weight: 600;
  color: var(--kj-body);
  white-space: nowrap;
  background: var(--kj-surface);
  border: 1px solid var(--kj-line);
  border-radius: var(--kj-r-pill);
  text-decoration: none;
  scroll-snap-align: start;
  transition: border-color var(--kj-t-fast) var(--kj-ease),
              background var(--kj-t-fast) var(--kj-ease),
              color var(--kj-t-fast) var(--kj-ease),
              box-shadow var(--kj-t-fast) var(--kj-ease);
}

.kj-catrail__item:hover {
  border-color: var(--kj-red-200);
  background: var(--kj-red-50);
  color: var(--kj-primary-ink, var(--kj-primary));
}

.kj-catrail__item.is-active {
  color: var(--kj-primary-ink, var(--kj-primary));
  background: var(--kj-primary-soft);
  border-color: var(--kj-primary);
  box-shadow: var(--kj-sh-xs);
}

.kj-catrail__item:focus-visible {
  outline: 2px solid var(--kj-primary);
  outline-offset: 2px;
}

.kj-catrail__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 28px;
  block-size: 28px;
  border-radius: var(--kj-r-sm);
  color: var(--kj-primary-ink, var(--kj-primary));
  background: var(--kj-surface-2);
}

.kj-catrail__item.is-active .kj-catrail__icon {
  background: var(--kj-surface);
}

.kj-catrail__icon img {
  inline-size: 24px;
  block-size: 24px;
  object-fit: cover;
  border-radius: var(--kj-r-xs);
}

.kj-catrail__count {
  padding: 1px 6px;
  font-size: var(--kj-fs-2xs);
  color: var(--kj-faint);
  background: var(--kj-surface-2);
  border-radius: var(--kj-r-pill);
}

.kj-catrail__item.is-active .kj-catrail__count {
  color: var(--kj-primary-ink, var(--kj-primary));
  background: var(--kj-surface);
}

/* --- Toolbar -------------------------------------------------------------- */

.kj-shop__bar {
  position: sticky;
  top: calc(var(--kj-header-live, var(--kj-header-h)) + var(--kj-s2));
  z-index: var(--kj-z-sticky);
  gap: var(--kj-s2);
  padding: var(--kj-s2) var(--kj-s3);
  box-shadow: var(--kj-sh-xs);
}

.kj-shop__filter-btn {
  align-items: center;
  gap: var(--kj-s2);
  min-height: var(--kj-tap);
  padding-inline: var(--kj-s3);
  font: inherit;
  font-size: var(--kj-fs-sm);
  font-weight: 700;
  color: var(--kj-ink);
  background: var(--kj-surface-2);
  border: 1px solid var(--kj-line);
  border-radius: var(--kj-r-pill);
  cursor: pointer;
}

.kj-shop__filter-btn:hover { border-color: var(--kj-red-200); color: var(--kj-primary-ink, var(--kj-primary)); }
.kj-shop__filter-btn:focus-visible { outline: 2px solid var(--kj-primary); outline-offset: 2px; }

.kj-shop__filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 20px;
  block-size: 20px;
  padding-inline: 5px;
  font-size: var(--kj-fs-2xs);
  font-weight: 800;
  color: var(--kj-on-primary, #fff);
  background: var(--kj-primary-solid, var(--kj-primary));
  border-radius: var(--kj-r-pill);
}
.kj-shop__filter-badge[hidden] { display: none; }

/* Sort: pills on desktop, WooCommerce's select on a phone. */
.kj-sort {
  display: flex;
  align-items: center;
  gap: var(--kj-s2);
  min-inline-size: 0;
}

.kj-sort__label {
  font-size: var(--kj-fs-xs);
  font-weight: 700;
  color: var(--kj-faint);
}

.kj-sort__list {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.kj-sort__list::-webkit-scrollbar { display: none; }

.kj-sort__link {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding-inline: var(--kj-s3);
  font-size: var(--kj-fs-sm);
  font-weight: 600;
  color: var(--kj-muted);
  white-space: nowrap;
  border-radius: var(--kj-r-pill);
  text-decoration: none;
  transition: background var(--kj-t-fast) var(--kj-ease),
              color var(--kj-t-fast) var(--kj-ease);
}

.kj-sort__link:hover { color: var(--kj-ink); background: var(--kj-surface-2); }
.kj-sort__link:focus-visible { outline: 2px solid var(--kj-primary); outline-offset: 2px; }

.kj-sort__link.is-active {
  color: var(--kj-primary-ink, var(--kj-primary));
  background: var(--kj-primary-soft);
  font-weight: 800;
}

.kj-shop__sort-mobile { display: none; }
.kj-shop__sort-mobile .woocommerce-ordering { margin: 0; }

.kj-shop__tools {
  display: flex;
  align-items: center;
  gap: var(--kj-s3);
  margin-inline-start: auto;
}

.kj-shop__tools .kj-shop__count { margin: 0; }

.kj-view {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--kj-surface-2);
  border-radius: var(--kj-r-pill);
}
.kj-view[hidden] { display: none; }

.kj-view__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 32px;
  block-size: 32px;
  color: var(--kj-muted);
  background: transparent;
  border: 0;
  border-radius: var(--kj-r-pill);
  cursor: pointer;
  transition: background var(--kj-t-fast) var(--kj-ease), color var(--kj-t-fast) var(--kj-ease);
}

.kj-view__btn:hover { color: var(--kj-ink); }
.kj-view__btn.is-active {
  color: var(--kj-primary-ink, var(--kj-primary));
  background: var(--kj-surface);
  box-shadow: var(--kj-sh-xs);
}
.kj-view__btn:focus-visible { outline: 2px solid var(--kj-primary); outline-offset: 2px; }

/* --- Active filter chips -------------------------------------------------- */

.kj-fchips {
  margin-bottom: var(--kj-s4);
}

.kj-fchips__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kj-s2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kj-fchip {
  display: inline-flex;
  align-items: center;
  gap: var(--kj-s2);
  min-height: 36px;
  padding-inline: var(--kj-s2) var(--kj-s3);
  font-size: var(--kj-fs-sm);
  color: var(--kj-body);
  background: var(--kj-surface);
  border: 1px solid var(--kj-line);
  border-radius: var(--kj-r-pill);
  text-decoration: none;
  transition: border-color var(--kj-t-fast) var(--kj-ease),
              background var(--kj-t-fast) var(--kj-ease);
}

.kj-fchip:hover { border-color: var(--kj-red-200); background: var(--kj-red-50); }
.kj-fchip:focus-visible { outline: 2px solid var(--kj-primary); outline-offset: 2px; }

.kj-fchip__group { color: var(--kj-faint); font-size: var(--kj-fs-xs); }
.kj-fchip__value { font-weight: 700; color: var(--kj-ink); }

.kj-fchip__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 22px;
  block-size: 22px;
  color: var(--kj-muted);
  background: var(--kj-surface-2);
  border-radius: 50%;
}

.kj-fchip:hover .kj-fchip__x {
  color: var(--kj-on-primary, #fff);
  background: var(--kj-primary-solid, var(--kj-primary));
}

.kj-fchips__clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-inline-start: var(--kj-s2);
  min-height: 36px;
  padding-inline: var(--kj-s3);
  font-size: var(--kj-fs-sm);
  font-weight: 700;
  color: var(--kj-sale-ink, var(--kj-sale));
  text-decoration: none;
  border-radius: var(--kj-r-pill);
}

.kj-fchips__clear:hover { background: var(--kj-sale-soft); }

/* --- Sidebar facets ------------------------------------------------------- */

.kj-filter__head {
  display: flex;
  align-items: center;
  gap: var(--kj-s2);
  min-height: 44px;
  margin: 0 0 var(--kj-s2);
  padding-inline: var(--kj-s1);
  cursor: pointer;
  list-style: none;
  border-radius: var(--kj-r-sm);
}

.kj-filter__head::-webkit-details-marker { display: none; }
.kj-filter__head:hover .kj-filter__title { color: var(--kj-primary-ink, var(--kj-primary)); }
.kj-filter__head:focus-visible { outline: 2px solid var(--kj-primary); outline-offset: 2px; }

.kj-filter > summary .kj-filter__title { margin: 0; }

.kj-filter__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 20px;
  block-size: 20px;
  padding-inline: 5px;
  font-size: var(--kj-fs-2xs);
  font-weight: 700;
  color: var(--kj-muted);
  background: var(--kj-surface-2);
  border-radius: var(--kj-r-pill);
}

.kj-filter__chev {
  margin-inline-start: auto;
  color: var(--kj-faint);
  transition: transform var(--kj-t-fast) var(--kj-ease);
}

.kj-filter[open] > summary .kj-filter__chev { transform: rotate(180deg); }

/* Checkbox rows: the whole row is the hit target, not just the box. */
.kj-opt {
  display: flex;
  align-items: center;
  gap: var(--kj-s2);
  min-height: 38px;
  padding-inline: var(--kj-s1);
  border-radius: var(--kj-r-sm);
  cursor: pointer;
  transition: background var(--kj-t-fast) var(--kj-ease);
}

.kj-opt:hover { background: var(--kj-surface-2); }

.kj-opt input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.kj-opt__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 19px;
  block-size: 19px;
  flex: 0 0 auto;
  color: transparent;
  background: var(--kj-surface);
  border: 1.5px solid var(--kj-line-2, var(--kj-line));
  border-radius: var(--kj-r-xs);
  transition: background var(--kj-t-fast) var(--kj-ease),
              border-color var(--kj-t-fast) var(--kj-ease),
              color var(--kj-t-fast) var(--kj-ease);
}

.kj-opt input:checked + .kj-opt__box {
  color: var(--kj-on-primary, #fff);
  background: var(--kj-primary-solid, var(--kj-primary));
  border-color: var(--kj-primary);
}

.kj-opt input:focus-visible + .kj-opt__box {
  outline: 2px solid var(--kj-primary);
  outline-offset: 2px;
}

.kj-opt__name {
  font-size: var(--kj-fs-sm);
  color: var(--kj-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kj-opt input:checked ~ .kj-opt__name { color: var(--kj-ink); font-weight: 700; }

.kj-opt__count {
  margin-inline-start: auto;
  font-size: var(--kj-fs-2xs);
  color: var(--kj-faint);
}

.kj-filter__more {
  display: block;
  inline-size: 100%;
  min-height: 34px;
  margin-top: var(--kj-s1);
  font: inherit;
  font-size: var(--kj-fs-sm);
  font-weight: 700;
  color: var(--kj-primary-ink, var(--kj-primary));
  background: none;
  border: 0;
  border-radius: var(--kj-r-sm);
  cursor: pointer;
}

.kj-filter__more:hover { background: var(--kj-red-50); }
.kj-filter__more:focus-visible { outline: 2px solid var(--kj-primary); outline-offset: 2px; }

.kj-filters__clear {
  /* A 21px-tall link fails the 24px minimum target size, and this is the one
     control a shopper reaching for "start over" has to hit. */
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding-inline: var(--kj-s2);
  font-size: var(--kj-fs-xs);
  font-weight: 700;
  color: var(--kj-sale-ink, var(--kj-sale));
  border-radius: var(--kj-r-sm);
  text-decoration: none;
}
.kj-filters__clear:hover { background: var(--kj-sale-soft); }
.kj-filters__clear:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Switches replace bare checkboxes for the tri-state row. */
.kj-switches { display: grid; gap: var(--kj-s1); }

.kj-switch {
  display: flex;
  align-items: center;
  gap: var(--kj-s3);
  min-height: 46px;
  padding-inline: var(--kj-s1);
  border-radius: var(--kj-r-sm);
  cursor: pointer;
  transition: background var(--kj-t-fast) var(--kj-ease);
}

.kj-switch:hover { background: var(--kj-surface-2); }

.kj-switch input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.kj-switch__ui {
  position: relative;
  flex: 0 0 auto;
  inline-size: 42px;
  block-size: 24px;
  background: var(--kj-surface-3, var(--kj-surface-2));
  border: 1px solid var(--kj-line);
  border-radius: var(--kj-r-pill);
  transition: background var(--kj-t-fast) var(--kj-ease),
              border-color var(--kj-t-fast) var(--kj-ease);
}

.kj-switch__ui::after {
  content: "";
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 2px;
  inline-size: 18px;
  block-size: 18px;
  background: var(--kj-surface);
  border-radius: 50%;
  box-shadow: var(--kj-sh-xs);
  transition: transform var(--kj-t-base) var(--kj-ease);
}

/* RTL: the knob travels to the inline-end (left) when checked. */
.kj-switch input:checked + .kj-switch__ui {
  background: var(--kj-primary-solid, var(--kj-primary));
  border-color: var(--kj-primary);
}
.kj-switch input:checked + .kj-switch__ui::after { transform: translateX(-18px); }
[dir="ltr"] .kj-switch input:checked + .kj-switch__ui::after { transform: translateX(18px); }

.kj-switch input:focus-visible + .kj-switch__ui { outline: 2px solid var(--kj-primary); outline-offset: 2px; }

.kj-switch__text {
  display: grid;
  gap: 1px;
  font-size: var(--kj-fs-sm);
  color: var(--kj-body);
}

.kj-switch input:checked ~ .kj-switch__text { color: var(--kj-ink); font-weight: 700; }

.kj-switch__hint { font-size: var(--kj-fs-2xs); color: var(--kj-faint); font-weight: 500; }

/*
 * The two price plates are stacked, not side by side: a 264px rail cannot fit
 * "۱۶۸,۰۰۰,۰۰۰ تومان" in half its width, and a price field that clips its own
 * value is a bug a shopper reads as a zero. Full width also gives each field a
 * comfortable tap target on a phone.
 */
.kj-price__row {
  grid-template-columns: minmax(0, 1fr);
}

/* Price fields sit in tinted plates, so the pair reads as one control. */
.kj-price__field {
  padding: var(--kj-s2) var(--kj-s3);
  border: 1px solid var(--kj-line);
  border-radius: var(--kj-r-md);
}

.kj-price__field--from { background: var(--kj-surface-2); }
.kj-price__field--to { background: var(--kj-primary-soft); border-color: var(--kj-red-100, var(--kj-line)); }

.kj-price__label { font-size: var(--kj-fs-2xs); font-weight: 700; color: var(--kj-muted); }
.kj-price__field--to .kj-price__label { color: var(--kj-primary-ink, var(--kj-primary)); }

.kj-price__wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}

.kj-price__input {
  inline-size: 100%;
  min-inline-size: 0;
  padding: 0;
  font-size: var(--kj-fs-sm);
  font-weight: 700;
  color: var(--kj-ink);
  background: none;
  border: 0;
}

.kj-price__input:focus { outline: none; }
.kj-price__input::placeholder { color: var(--kj-faint); font-weight: 500; }

.kj-price__cur { flex: 0 0 auto; font-size: var(--kj-fs-2xs); color: var(--kj-muted); }

.kj-price__field:focus-within {
  border-color: var(--kj-primary);
  box-shadow: 0 0 0 3px var(--kj-primary-ring, var(--kj-primary-soft));
}

/* Dual-handle range ------------------------------------------------------- */

/*
 * The container has no static content — the track, the two handles and the
 * end labels are all absolutely positioned — so its height comes from this
 * padding, and the labels sit in the part left over below the 24px handles.
 */
.kj-range {
  position: relative;
  margin-top: var(--kj-s5);
  padding-block-end: 32px;
}

.kj-range__track {
  position: absolute;
  inset-block-start: 8px;
  inset-inline: 0;
  block-size: 5px;
  background: var(--kj-surface-3, var(--kj-surface-2));
  border-radius: var(--kj-r-pill);
}

.kj-range__fill {
  position: absolute;
  inset-block: 0;
  background: var(--kj-grad-brand, var(--kj-primary));
  border-radius: var(--kj-r-pill);
}

.kj-range__input {
  position: absolute;
  inset-block-start: -3px;
  inset-inline: 0;
  inline-size: 100%;
  block-size: 24px;
  margin: 0;
  background: none;
  appearance: none;
  pointer-events: none; /* only the thumbs are grabbable */
}

.kj-range__input:disabled { opacity: .45; }

.kj-range__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  inline-size: 20px;
  block-size: 20px;
  margin-block-start: 0;
  background: var(--kj-surface);
  border: 2.5px solid var(--kj-primary);
  border-radius: 50%;
  box-shadow: var(--kj-sh-sm);
  cursor: grab;
  pointer-events: auto;
}

.kj-range__input::-moz-range-thumb {
  inline-size: 16px;
  block-size: 16px;
  background: var(--kj-surface);
  border: 2.5px solid var(--kj-primary);
  border-radius: 50%;
  box-shadow: var(--kj-sh-sm);
  cursor: grab;
  pointer-events: auto;
}

.kj-range__input::-moz-range-track { background: none; }
.kj-range__input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--kj-primary); outline-offset: 2px; }
.kj-range__input:focus-visible::-moz-range-thumb { outline: 2px solid var(--kj-primary); outline-offset: 2px; }

.kj-range__ends {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  display: flex;
  justify-content: space-between;
  gap: var(--kj-s2);
  font-size: var(--kj-fs-2xs);
  line-height: 1.5;
  color: var(--kj-faint);
}

/* Drawer footer: only exists in the off-canvas panel. */
.kj-filters__foot { display: none; }

/*
 * Desktop rail.
 *
 * components.css hides the panel's title bar because the original rail had
 * nothing to put in it; the archive now needs it — «حذف فیلترها» belongs at
 * the top of the rail where a shopper looks for it, exactly like the phone
 * version. The close button stays hidden (there is nothing to close).
 *
 * The rail also gets its own scroll: sticky plus taller-than-viewport means
 * the bottom of a long facet list would otherwise be unreachable.
 */
@media (min-width: 992px) {
  .kj-filters__head {
    display: flex;
    gap: var(--kj-s2);
    padding: var(--kj-s3) var(--kj-s4);
    background: var(--kj-surface);
  }

  .kj-filters__head .kj-filters__title { margin-inline-end: auto; }

  .kj-filters {
    max-block-size: calc(100vh - var(--kj-header-live, var(--kj-header-h)) - var(--kj-s6));
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

/* --- Results, loading state, list view ------------------------------------ */

.kj-shop__main { position: relative; }

.kj-shop__main.is-loading::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 3px;
  background: var(--kj-grad-brand, var(--kj-primary));
  border-radius: var(--kj-r-pill);
  animation: kj-shop-progress 1.1s var(--kj-ease) infinite;
  z-index: 2;
}

@keyframes kj-shop-progress {
  0%   { transform: scaleX(.15); opacity: .6; }
  50%  { transform: scaleX(.75); opacity: 1; }
  100% { transform: scaleX(1);   opacity: .4; }
}

.kj-shop__results[aria-busy="true"] {
  opacity: .55;
  pointer-events: none;
  transition: opacity var(--kj-t-fast) var(--kj-ease);
}

@media (prefers-reduced-motion: reduce) {
  .kj-shop__main.is-loading::before { animation: none; transform: scaleX(1); opacity: .8; }
}

/* List view: the same card, laid out as a row. */
[data-kj-shop-results][data-view="list"] .kj-grid--shop {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kj-s3);
}

[data-kj-shop-results][data-view="list"] .kj-card {
  display: grid;
  grid-template-columns: minmax(0, 160px) minmax(0, 1fr);
  align-items: stretch;
}

[data-kj-shop-results][data-view="list"] .kj-card__media {
  aspect-ratio: auto;
  block-size: 100%;
  min-block-size: 148px;
  border-inline-end: 1px solid var(--kj-line);
}

[data-kj-shop-results][data-view="list"] .kj-card__body {
  justify-content: center;
  gap: var(--kj-s2);
  padding: var(--kj-s4);
}

[data-kj-shop-results][data-view="list"] .kj-card__title {
  font-size: var(--kj-fs-md);
  -webkit-line-clamp: 2;
}

/*
 * The foot is a column in a grid card because 200px is too narrow for a price
 * beside a button; in a list row it is the opposite — the body is ~900px wide,
 * so a full-width CTA turns into a red banner. Side by side, with the button
 * capped at a button's size.
 */
[data-kj-shop-results][data-view="list"] .kj-card__foot {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--kj-s4);
  margin-top: var(--kj-s3);
}

[data-kj-shop-results][data-view="list"] .kj-card__prices { flex-direction: row; align-items: baseline; gap: var(--kj-s4); }

[data-kj-shop-results][data-view="list"] .kj-card__cart {
  inline-size: auto;
  min-inline-size: 200px;
}

/* Rating and stock sit together under the title instead of being flung to
   opposite edges of a 900px row. */
[data-kj-shop-results][data-view="list"] .kj-card__meta {
  justify-content: flex-start;
  gap: var(--kj-s5);
}

[data-kj-shop-results][data-view="list"] .kj-card__body { gap: var(--kj-s2); }

[data-kj-shop-results][data-view="list"] .kj-card__quick {
  opacity: 1;
  transform: none;
}

/* --- Pagination wrapper --------------------------------------------------- */

.kj-pagination nav,
.kj-pagination .woocommerce-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--kj-s2);
}

.kj-pagination__arrow { inline-size: 15px; block-size: 15px; }
.kj-pagination .prev,
.kj-pagination .next { gap: 6px; }

/* --- Empty state ---------------------------------------------------------- */

.kj-empty--shop {
  padding-block: var(--kj-s10);
  background: var(--kj-surface);
  border: 1px solid var(--kj-line);
  border-radius: var(--kj-r-lg);
}

.kj-empty__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kj-s3);
  justify-content: center;
  margin-top: var(--kj-s2);
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 991px) {
  /* The toolbar is the one thing worth pinning on a phone: it holds the
     filter button, and the filter panel is off-canvas there. */
  .kj-shop__bar {
    flex-wrap: wrap;
    border-radius: var(--kj-r-md);
  }

  .kj-shop__bar .kj-shop__filter-btn { display: inline-flex; }

  .kj-filters__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kj-s3);
    padding: var(--kj-s3) var(--kj-s4);
    border-block-start: 1px solid var(--kj-line);
    background: var(--kj-surface);
  }

  .kj-filters__found {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-size: var(--kj-fs-sm);
    color: var(--kj-muted);
  }

  .kj-filters__found .kj-num { font-weight: 800; color: var(--kj-ink); }

  .kj-filters__foot .kj-btn { flex: 1 1 auto; justify-content: center; }

  .kj-shop__title { font-size: var(--kj-fs-2xl); }
}

@media (max-width: 767px) {
  /* Pills out, native picker in: a select is what a phone does best. */
  .kj-sort { display: none; }
  .kj-shop__sort-mobile { display: block; flex: 1 1 auto; min-inline-size: 0; }
  .kj-shop__sort-mobile select { inline-size: 100%; }
  .kj-shop__tools { margin-inline-start: 0; }

  .kj-catrail__item { padding-inline: var(--kj-s2) var(--kj-s3); }

  [data-kj-shop-results][data-view="list"] .kj-card {
    grid-template-columns: minmax(0, 120px) minmax(0, 1fr);
  }
  [data-kj-shop-results][data-view="list"] .kj-card__media { min-block-size: 120px; }
  [data-kj-shop-results][data-view="list"] .kj-card__body { padding: var(--kj-s3); }
}

@media (max-width: 575px) {
  .kj-shop__hero { align-items: flex-start; }
  .kj-view { display: none; }
  .kj-fchips__clear { margin-inline-start: 0; }
}