/* ==========================================================================
   Satya Since 1973 — the filter panel
   ========================================================================== */

.s-listing { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 62rem) {
  .s-listing { grid-template-columns: 17rem minmax(0, 1fr); gap: var(--s-8); }
}

/* --------------------------------------------------------------------------
   The desktop panel
   -------------------------------------------------------------------------- */

/* The panel itself does not scroll; the list of groups inside it does.

   It used to carry `overflow-y: auto` with the maroon header stuck to its top,
   so the scrollbar ran the **whole** height of the panel — straight past the
   header, cutting the corner off it. `overflow: hidden` here lets the radius
   clip properly and keeps the header's full curve; the scroll moves to
   `.s-filterform` below, so the bar starts under the header where it belongs. */
.s-filters {
  display: none;
  position: sticky;
  /* Clears the sticky header, so the panel never slides under it. */
  inset-block-start: calc(var(--s-4) + 8rem);
  max-block-size: calc(100vh - 10rem);
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--s-sand);
  border-radius: var(--s-radius);
  background-color: var(--s-ivory, #fffdf8);
}
@media (min-width: 62rem) { .s-filters { display: flex; flex-direction: column; } }

/* The two fixed parts keep their height; the groups take what is left and
   scroll inside it. `min-block-size: 0` because a flex item will not shrink
   below its content otherwise — the same family as the notes above. */
.s-filters > .s-filters__head,
.s-filters > .s-filters__applied { flex: none; }
.s-filters > .s-filterform { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; }

.s-filters__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  background-color: var(--s-maroon-800);
  border-block-end: 2px solid var(--s-gold-600);
}
.s-filters__heading {
  font-family: var(--s-font-display);
  font-size: var(--s-text-lg);
  font-weight: 600;
  color: var(--s-gold-300);
}
.s-filters__clear {
  font-size: var(--s-text-xs);
  font-weight: 600;
  color: rgb(255 255 255 / 0.75);
  border-block-end: 1px solid currentColor;
}
.s-filters__clear:hover { color: var(--s-gold-300); }

.s-filters__group { padding: var(--s-5); }
.s-filters__group + .s-filters__group { border-block-start: 1px solid var(--s-sand-tint); }

.s-filters__title {
  font-family: var(--s-font-body);
  font-size: var(--s-text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--s-maroon-800);
  margin-block-end: var(--s-3);
}

/* --------------------------------------------------------------------------
   A single filter row
   -------------------------------------------------------------------------- */

.s-check {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-block-size: 2.25rem;
  font-size: var(--s-text-sm);
  color: var(--s-ink);
  cursor: pointer;
  border-radius: var(--s-radius-sm);
  padding-inline: var(--s-1);
  transition: color var(--s-fast) var(--s-ease);
}
.s-check:hover { color: var(--s-maroon-700); }

.s-check input {
  inline-size: 1.05rem;
  block-size: 1.05rem;
  flex: none;
  accent-color: var(--s-maroon-700);
  cursor: pointer;
}

/* Every row the same breathing room. premium.css gives every .s-check a
   top-aligned row and a bottom margin, for the checkout's long labels; with
   the 2.25rem minimum height above still in force, a one-line category had
   30px of space under it and a two-line one 16px, so the list looked unevenly
   spaced (13 September 2026). Padding instead of a minimum keeps the same 36px
   tap height for one line and the same space under every row. */
.s-filters__group .s-check { min-block-size: 0; padding-block: 0.4375rem; }

/* The count is the whole reason the panel is worth using: it tells a shopper
   what a tick will do before they spend a click finding out. */
.s-check__count {
  margin-inline-start: auto;
  font-size: var(--s-text-xs);
  font-weight: 600;
  color: var(--s-muted);
}
.s-check:hover .s-check__count { color: var(--s-gold-700); }

.s-filters__range {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-block-start: var(--s-3);
}
.s-filters__range .s-input { min-block-size: 2.375rem; padding: 0.35rem 0.5rem; font-size: var(--s-text-sm); }
.s-filters__range .s-btn { flex: none; }

/* With the script running, every tick has already applied itself, so the
   submit button would be a control that does nothing. It is removed rather
   than left there (DEVELOPMENT_RULES.md §2.1) — and it stays for anyone
   without JavaScript, which is exactly who needs it. */
.s-filters__submit { display: block; }
.js-on .s-filters__submit { display: none; }

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

.s-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }

/* This row used to be given the height of the filter column's maroon header, so
   the two lined up across the page. The column is gone (session 7), so the
   height it was matching is gone with it and the row is the height of its own
   controls. */
.s-toolbar { margin-block-end: var(--s-6); }

/* The count and the chips share this side, on one line where there is room and
   wrapping onto a second where there is not. `min-inline-size: 0` so a long row
   of chips shrinks with the column instead of pushing the sort box off the end
   — the min-content family, again. */
/* A grid item will not shrink below its min-content unless it is told it may.

   `.s-listing` is a grid, and the results column holds a card row whose
   min-content is around 380px. Without this the column stayed 380px wide inside
   a 343px container at every phone width — the document scrolled sideways at
   320, 356 and 375 alike, always to exactly the same 395px. The fourth
   appearance of this family in the project; see PROJECT_HANDOFF.md §5. */
.s-listing > * { min-inline-size: 0; }

/* `0 1 auto`, never `0 0 auto`.

   Refusing to shrink pushed the sort box past the right edge on a phone and
   scrolled the whole document sideways — the one thing this project refuses
   everywhere. It may keep its width where there is room and give it up where
   there is not. */
.s-toolbar__left { min-inline-size: 0; flex: 0 1 auto; }

.s-resultshead {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  min-inline-size: 0;
}

/* Inside the toolbar the count is a label beside the chips rather than a
   paragraph above a grid, so it loses the block spacing it carries when it sits
   on its own with scripts blocked. */
.s-toolbar__left .s-toolbar__count { margin: 0; }
.s-toolbar__left .s-chipbar { margin: 0; }
.s-toolbar__right {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-inline-start: auto;
  /* It must be able to give ground; it was the thing running off the right edge
     of a phone. */
  min-inline-size: 0;
}
.s-toolbar__right form { min-inline-size: 0; }

/* The sort box is as wide as its own longest option and no wider.

   It carried an 11rem floor, which on a short selection — "Featured" — left a
   band of nothing between the word and the chevron. A select already sizes
   itself to the longest thing it can say, so the floor bought nothing but that
   gap. */
.s-sort { min-inline-size: 0; max-inline-size: 100%; }

.s-toolbar__filter { display: inline-flex; align-items: center; gap: var(--s-2); }
@media (min-width: 62rem) { .s-toolbar__filter { display: none; } }

.s-filterbadge {
  display: grid;
  place-items: center;
  min-inline-size: 1.15rem;
  block-size: 1.15rem;
  padding-inline: 0.25rem;
  border-radius: var(--s-radius-pill);
  background-color: var(--s-maroon-700);
  color: var(--s-white);
  font-size: 0.65rem;
  font-weight: 700;
}

/* `display: grid` out-specifies the `hidden` attribute's UA rule, so without
   this the badge shows a nought on every unfiltered page — which is precisely
   the "control that says nothing" the count exists to avoid. */
.s-filterbadge[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Results, while they are being replaced

   Dimmed rather than blanked: the shopper keeps seeing what they had while the
   new set arrives, which makes a fast filter feel instant and a slow one feel
   like it is working rather than broken.
   -------------------------------------------------------------------------- */

[data-results] { transition: opacity var(--s-fast) var(--s-ease); }
[data-results].is-loading { opacity: 0.4; pointer-events: none; }

/* --------------------------------------------------------------------------
   The phone sheet
   -------------------------------------------------------------------------- */

.s-sheet {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: var(--s-z-drawer);
  inline-size: min(22rem, 100vw);
  display: flex;
  flex-direction: column;
  background-color: var(--s-ivory, #fffdf8);
  box-shadow: var(--s-shadow-xl);
  translate: 100% 0;
  /* Out of the tab order while closed, like the menu and the bag. */
  visibility: hidden;
  transition: translate var(--s-base) var(--s-ease-out), visibility 0s linear var(--s-base);
}
.s-sheet.is-open {
  translate: 0;
  visibility: visible;
  transition: translate var(--s-base) var(--s-ease-out), visibility 0s;
}
@media (min-width: 62rem) { .s-sheet { display: none; } }

.s-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  background-color: var(--s-maroon-800);
  color: var(--s-gold-300);
  border-block-end: 2px solid var(--s-gold-600);
}
.s-sheet__head .s-icon-btn { color: var(--s-gold-300); }
.s-sheet__head .s-icon-btn:hover { background-color: rgb(255 255 255 / 0.12); color: var(--s-white); }

.s-sheet__body { flex: 1 1 auto; overflow-y: auto; }

.s-sheet__foot {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-block-start: 1px solid var(--s-sand);
  background-color: var(--s-cream);
}
.s-sheet__foot .s-btn { flex: 1 1 auto; }

/* "Clear all" reads as the odd one out in the chip row, so it looks like one. */
.s-chip--clear { border-style: dashed; color: var(--s-muted); }
.s-chip--clear:hover { border-color: var(--s-maroon-700); color: var(--s-maroon-700); }

.s-chipbar { margin-block: var(--s-3) var(--s-5); }

/* --------------------------------------------------------------------------
   The listing grid sits beside a 17rem filter panel

   Its column count came from the viewport, which ignores the ~19rem the panel
   and its gap take away. At a 1280px viewport that produced five cards of
   160px each — the cramped grid this project has already rejected twice.

   Five across only once the row is genuinely wide enough for it. The numbers
   are the viewport widths at which the remaining space matches what the home
   page has at the same column count.
   -------------------------------------------------------------------------- */

@media (min-width: 62rem) and (max-width: 96.99rem) {
  .s-listing .s-grid > * { flex-basis: calc((100% - 3 * var(--s-col-gap)) / 4); }
}
@media (min-width: 97rem) {
  .s-listing .s-grid > * { flex-basis: calc((100% - 4 * var(--s-col-gap)) / 5); }
}

/* --------------------------------------------------------------------------
   What is applied, at the top of the panel

   The chips are moved in here from the results by `initListing()`. They used to
   sit out on the page above the grid; the client asked in session 7 for the
   toolbar to carry a count and nothing else, and for the filters themselves —
   with "Clear all" — to live beside the boxes that set them.
   -------------------------------------------------------------------------- */

.s-sheet__applied,
.s-filters__applied {
  padding: var(--s-4) var(--s-5);
  border-block-end: 1px solid var(--s-sand-tint);
  background-color: var(--s-cream);
}
.s-sheet__applied[hidden],
.s-filters__applied[hidden] { display: none; }
.s-sheet__applied .s-chipbar,
.s-filters__applied .s-chipbar { margin: 0; }

/* Without a script the chips are never moved, and they read where the server
   put them — above the grid they describe. `.s-chipwrap` is only ever the
   thing that carries them between the two places. */
.s-chipwrap:empty { display: none; }
.js-on [data-results] > .s-chipwrap { display: none; }