/* =====================================================================
   Shop page: heading, category chips, filters, results grid.
   On wide screens filters sit on the left; on phones they open as a
   panel from the "Filters" button.
   ===================================================================== */

.shop-head { padding-top: clamp(32px, 2rem + 2vw, 64px); }
.shop-head .lead { margin-top: var(--s-3); max-width: 60ch; }

/* Category chips: one scrolling row on phones */
.shop-chips {
  margin-top: var(--s-7);
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  margin-inline: calc(var(--gutter) * -1);
  padding: 2px var(--gutter);
}
.shop-chips::-webkit-scrollbar { display: none; }
.shop-chips .chip { white-space: nowrap; }

/* Bar above the grid: count, Filters button, sort */
.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-7);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--c-line-soft);
}
.shop-count { font-size: var(--fs-sm); color: var(--c-text-3); }
.shop-tools { display: flex; align-items: center; gap: var(--s-3); }
.sort-select {
  min-height: 36px;
  padding: 0 32px 0 12px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236e6e73' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.filter-toggle .count { margin-left: 2px; }

/* Layout: filters + grid */
.shop-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--s-8);
  margin-top: var(--s-7);
  align-items: start;
}

/* ---------- Filters ---------- */
.filters { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
.filters-head { display: none; }
.filter-group { margin: 0; padding: var(--s-4) 0 var(--s-5); border: 0; border-bottom: 1px solid var(--c-line-soft); min-width: 0; }
.filter-group legend { padding: 0; float: left; width: 100%; }   /* float: lets legend sit inside the padding like a heading */
.filter-group legend + * { clear: both; }
.link-reset { background: none; color: var(--c-accent); }
.link-reset:hover { text-decoration: underline; }
.filter-group:first-child { padding-top: 0; }
.filter-title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); margin-bottom: var(--s-2); }
.filter-list { max-height: 260px; overflow-y: auto; }
.price-inputs { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s-2); align-items: center; }
.price-inputs .input { min-height: 40px; padding: 8px 10px; font-size: var(--fs-sm); }
.price-inputs span { color: var(--c-text-3); font-size: var(--fs-sm); }
.filters-actions { display: flex; flex-direction: column; gap: var(--s-2); padding-top: var(--s-5); }
.filters-foot { display: none; }

.filter-toggle { display: none; }

/* Phones and tablets: filters become a slide-up panel */
@media (max-width: 959px) {
  .shop-layout { grid-template-columns: 1fr; }
  .filter-toggle { display: inline-flex; }

  .filters {
    position: fixed;
    inset: auto 0 0 0;
    top: auto;
    z-index: var(--z-overlay);
    max-height: 86vh;
    overflow-y: auto;
    padding: 0 var(--gutter) var(--s-6);
    background: #fff;
    border-radius: var(--radius-l) var(--radius-l) 0 0;
    box-shadow: var(--shadow-2);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3);
  }
  .filters.is-open { transform: none; visibility: visible; transition: transform var(--dur-3) var(--ease-out); }
  .filters-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky; top: 0;
    padding: var(--s-4) 0;
    background: #fff;
    z-index: 1;
  }
  .filters-foot {
    display: block;
    position: sticky; bottom: calc(var(--s-6) * -1);
    padding: var(--s-4) 0 var(--s-6);
    background: #fff;
  }
  .filter-list { max-height: none; }
}

/* ---------- Results ---------- */
/* Next to the filters there's less room, so allow slightly narrower cards. */
@media (min-width: 960px) {
  .shop-layout .product-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}
.results-more { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); margin-top: var(--s-9); }
.results-progress { font-size: var(--fs-sm); color: var(--c-text-3); }