/* =============================================================================
   Shop archive — header, filters sidebar, toolbar, grid.
   ========================================================================== */

.ho-shop { padding-block: var(--ho-6) var(--ho-12); }

.ho-shop__head { margin-bottom: var(--ho-5); }

.ho-shop__title {
  margin: 0;
  font-size: var(--ho-fs-2xl);
  font-weight: 900;
}
@media (min-width: 768px) { .ho-shop__title { font-size: var(--ho-fs-3xl); } }

.ho-shop__count { margin: 4px 0 0; font-size: var(--ho-fs-sm); color: var(--ho-ink-400); }

.ho-shop__description {
  max-width: 76ch;
  margin-top: var(--ho-3);
  font-size: var(--ho-fs-sm);
  color: var(--ho-ink-500);
  line-height: 2.1;
}

/* The sub-category chips are gone: the picture rail above the archive already
   lists the same categories, and repeating them as counted pills pushed the
   first product row off a phone screen. `.ho-subcats` is kept out of the markup
   rather than hidden, so nothing is downloaded for it. */

/* A head with a visually hidden title collapses so the grid starts higher. */
/* The shop's own heading is visually hidden, so the box is empty. It must not
   carry spacing: the compact-header rule further down gives every head a
   bottom margin, and on an empty box that margin collapsed away on the PHP
   page but not inside Elementor's wrappers — 12px of difference between the
   two. The doubled class outranks that later rule. */
.ho-shop__head.ho-shop__head--quiet { margin: 0; }

/* Layout ------------------------------------------------------------------ */

.ho-shop__layout { display: block; }

@media (min-width: 992px) {
  .ho-shop__layout {
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr);
    gap: var(--ho-6);
    align-items: start;
  }
}

/* Sidebar becomes a bottom sheet below 992px. */
.ho-shop__sidebar {
  position: fixed;
  inset: 0;
  z-index: var(--ho-z-sheet);
}
.ho-shop__sidebar[hidden] { display: none; }
.ho-shop__sidebar .ho-sheet__backdrop { position: absolute; inset: 0; opacity: 0; transition: opacity var(--ho-base-t); }
.ho-shop__sidebar.is-open .ho-sheet__backdrop { opacity: 1; }

.ho-shop__filters {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border-radius: var(--ho-r-lg) var(--ho-r-lg) 0 0;
  background: var(--ho-surface);
  box-shadow: var(--ho-shadow-lg);
  transform: translateY(100%);
  transition: transform var(--ho-base-t);
  padding-bottom: env(safe-area-inset-bottom);
}
.ho-shop__sidebar.is-open .ho-shop__filters { transform: translateY(0); }

@media (min-width: 992px) {
  .ho-shop__sidebar {
    position: sticky;
    inset: auto;
    top: calc(var(--ho-header-h) + var(--ho-4));
    display: block !important;
    z-index: 1;
  }
  .ho-shop__sidebar[hidden] { display: block !important; }
  .ho-shop__filters {
    position: static;
    transform: none;
    border: 1px solid var(--ho-line-soft);
    border-radius: var(--ho-r-md);
    box-shadow: none;
    /*
     * A sticky column does not scroll its own content, so a filter list taller
     * than the screen used to bury «اعمال فیلتر» below the fold with no way to
     * reach it. Capping the height and scrolling inside keeps the button
     * reachable at any viewport height.
     */
    max-height: calc(100vh - var(--ho-header-h) - var(--ho-8));
    overflow-y: auto;
    scrollbar-width: none;
  }
  .ho-shop__filters::-webkit-scrollbar { width: 0; display: none; }
}

/* Filters ----------------------------------------------------------------- */

.ho-filters { display: grid; gap: var(--ho-4); padding: var(--ho-3) var(--ho-4); }

.ho-filters__reset {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--ho-fs-sm);
  font-weight: 700;
  color: var(--ho-danger);
}

.ho-filters__group { margin: 0; padding: 0; border: 0; }
.ho-filters__group + .ho-filters__group { padding-top: var(--ho-4); border-top: 1px solid var(--ho-line-soft); }

.ho-filters__legend {
  padding: 0;
  margin-bottom: var(--ho-2);
  font-size: var(--ho-fs-sm);
  font-weight: 800;
  color: var(--ho-ink-900);
}

/* Side by side in the phone's bottom sheet, where width is the cheap axis and
   height is not. The desktop sidebar is a narrow column, so there they stack. */
.ho-filters__switches {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ho-2);
}
.ho-filters__switches .ho-switch { gap: 6px; font-size: var(--ho-fs-xs); }
.ho-filters__switches .ho-switch__label { min-width: 0; }

@media (max-width: 340px), (min-width: 992px) {
  .ho-filters__switches { grid-template-columns: 1fr; }
  .ho-filters__switches .ho-switch { font-size: var(--ho-fs-sm); }
}

.ho-filters__price { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ho-2); }
.ho-filters__price label { display: grid; gap: 4px; font-size: var(--ho-fs-xs); color: var(--ho-ink-400); }
.ho-filters__price input { min-height: 42px; font-size: var(--ho-fs-sm); }

.ho-filters__list {
  display: grid;
  gap: 2px;
  max-height: 280px;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ho-filters__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ho-2);
  padding: 8px var(--ho-2);
  border-radius: var(--ho-r-xs);
  color: var(--ho-ink-600);
  font-size: var(--ho-fs-sm);
  font-weight: 600;
}
.ho-filters__list a:hover { background: var(--ho-cream-100); color: var(--ho-amber-600); }
.ho-filters__list a.is-active { background: var(--ho-amber-50); color: var(--ho-amber-700); font-weight: 800; }


/* Switch ------------------------------------------------------------------ */

.ho-switch {
  display: flex;
  align-items: center;
  gap: var(--ho-2);
  padding: 4px 0;
  cursor: pointer;
  font-size: var(--ho-fs-sm);
  font-weight: 600;
  color: var(--ho-ink-600);
}
.ho-switch input { position: absolute; opacity: 0; width: 0; height: 0; }

.ho-switch__track {
  position: relative;
  flex: none;
  width: 40px; height: 23px;
  border-radius: var(--ho-r-pill);
  background: var(--ho-line);
  transition: background var(--ho-fast);
}
.ho-switch__thumb {
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--ho-shadow-xs);
  transition: transform var(--ho-fast);
}
.ho-switch input:checked + .ho-switch__track { background: var(--ho-amber-500); }
.ho-switch input:checked + .ho-switch__track .ho-switch__thumb { transform: translateX(-17px); }
.ho-switch input:focus-visible + .ho-switch__track { outline: 3px solid var(--ho-amber-300); outline-offset: 2px; }

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

.ho-shop__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ho-3);
  margin-bottom: var(--ho-4);
  padding: var(--ho-2) var(--ho-3);
  border: 1px solid var(--ho-line-soft);
  border-radius: var(--ho-r-md);
  background: var(--ho-surface);
}

.ho-shop__toolbar .woocommerce-ordering { margin: 0; margin-inline-start: auto; }
.ho-shop__toolbar select {
  min-height: 38px;
  padding-block: 0;
  border-radius: var(--ho-r-pill);
  font-size: var(--ho-fs-sm);
  font-weight: 700;
}

.ho-shop__filter-count {
  min-width: 18px;
  padding: 0 5px;
  border-radius: var(--ho-r-pill);
  background: var(--ho-amber-500);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}

/* =============================================================================
   Category rail above the archive (restored from the previous version).
   ========================================================================== */

/* The rail runs straight into the archive heading; a full section gap between
   the two pushed the first row of products off the fold on a phone. */
.ho-cat-rail { margin-bottom: var(--ho-3); }

.ho-cat-rail__list {
  display: flex;
  gap: var(--ho-2);
  margin: 0;
  padding: 0 0 var(--ho-2);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  margin-inline: calc(var(--ho-gutter) * -1);
  padding-inline: var(--ho-gutter);
}
.ho-cat-rail__list::-webkit-scrollbar { display: none; }
@media (min-width: 992px) { .ho-cat-rail__list { margin-inline: 0; padding-inline: 0; } }

.ho-cat-rail__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 76px;
  flex: none;
  scroll-snap-align: start;
  color: var(--ho-ink-700);
}

.ho-cat-rail__thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px; height: 62px;
  padding: 3px;
  border: 1.5px solid var(--ho-line);
  border-radius: 50%;
  background: var(--ho-surface);
  color: var(--ho-amber-500);
  overflow: hidden;
  box-shadow: var(--ho-shadow-xs);
  transition: border-color var(--ho-fast), transform var(--ho-fast);
}
.ho-cat-rail__item:hover .ho-cat-rail__thumb { transform: translateY(-2px); border-color: var(--ho-amber-300); }
.ho-cat-rail__thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.ho-cat-rail__item.is-active .ho-cat-rail__thumb { border-width: 2.5px; border-color: var(--ho-amber-500); }
.ho-cat-rail__item.is-active .ho-cat-rail__name { color: var(--ho-amber-600); }

.ho-cat-rail__name {
  font-size: var(--ho-fs-xs);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

/* ---------------------------------------------- compact archive header --- */

.ho-shop__head { margin-bottom: var(--ho-3); }

/* The category name is the page's only <h1>, so it stays for search engines —
   but at a size that reads as a label above the grid rather than a banner,
   which is what keeps two product cards on the fold. */
.ho-shop__title { font-size: var(--ho-fs-md); }
@media (min-width: 768px) { .ho-shop__title { font-size: var(--ho-fs-xl); } }

.ho-shop__about {
  margin-top: var(--ho-12);
  padding-top: var(--ho-8);
  border-top: 1px solid var(--ho-line);
}
.ho-shop__about-title { margin-bottom: var(--ho-4); font-size: var(--ho-fs-lg); }

/* Auto-loading archives hide the button and show a status line instead. */
.ho-load-more--auto .ho-js-load-more { display: none; }

/* With the button hidden, the box is empty and 0px tall until a page is
   loading. An empty box must not carry spacing: its margin used to collapse
   into the description below on the PHP page, but not through Elementor's
   flex wrappers — so the same archive came out 32px taller in Elementor. The
   spacing now sits on the status line, which only exists while it shows. */
.ho-load-more--auto { margin-top: 0; }
.ho-load-more--auto .ho-load-more__status { margin-top: var(--ho-4); }

.ho-load-more__status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ho-2);
  margin: 0;
  padding: var(--ho-5);
  color: var(--ho-ink-400);
  font-size: var(--ho-fs-sm);
  font-weight: 700;
}
.ho-load-more__status[hidden] { display: none; }
.ho-load-more__status .ho-spinner { color: var(--ho-amber-500); }

/* The apply button stays on screen while the filter list scrolls behind it. */
.ho-filters__apply {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-inline: calc(var(--ho-4) * -1);
  margin-bottom: calc(var(--ho-4) * -1);
  padding: var(--ho-3) var(--ho-4);
  background: linear-gradient(to top, var(--ho-surface) 70%, rgba(255, 255, 255, 0));
}

/* ----------------------------------------------------------------- sort --- */

/* WooCommerce's own control is an unstyled `<select>`. The native menu is kept
   — it is the right picker on a phone — but the box around it now matches the
   rest of the toolbar and carries its own chevron. */
.ho-sort {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding-inline: var(--ho-3) var(--ho-2);
  border: 1px solid var(--ho-line);
  border-radius: var(--ho-r-pill);
  background: var(--ho-surface);
  transition: border-color var(--ho-fast), box-shadow var(--ho-fast);
}
.ho-sort:focus-within {
  border-color: var(--ho-amber-400);
  box-shadow: 0 0 0 4px var(--ho-amber-50);
}

.ho-sort__label { display: inline-flex; color: var(--ho-ink-400); }

.ho-sort__select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 0;
  padding: 0 0 0 var(--ho-4);
  border: 0 !important;
  background: transparent;
  box-shadow: none !important;
  color: var(--ho-ink-800);
  font-family: inherit;
  font-size: var(--ho-fs-sm);
  font-weight: 700;
  cursor: pointer;
}
.ho-sort__select:focus { outline: none; }

.ho-sort__chevron {
  position: absolute;
  inset-inline-end: var(--ho-3);
  color: var(--ho-ink-400);
  pointer-events: none;
}