/* Ported from the frozen S2 prototype (listing.css). Rules unchanged: scripts/css-check.mjs proves it. Only comments differ, with the sample tenant's name removed. */
/* S2 · Category listing. Tokens only: Atelier structure, the tenant palette.
   Motion: fast, eased out, and off under prefers-reduced-motion (end of file). */

:root {
  --ls-gutter: clamp(16px, 4vw, 40px);           /* the same gutter as .sc-wrap */
  --ls-ease-out: cubic-bezier(0.32, 0.72, 0, 1); /* sheets, header, reveals: quick start, long settle */
  --ls-hdr-h: 0px;                               /* phone header height, set by listing.js */
  --ls-bar-top: var(--ls-hdr-h);
}
.ls { outline: 0; }

/* ── Phone header: stays at hand, steps aside while reading down ────── */
@media (max-width: 959px) {
  .sc-header {
    position: sticky; top: 0;
    transition: transform var(--ui-dur-slow) var(--ls-ease-out);
  }
  html.ls-hdr-hidden { --ls-bar-top: 0px; }
  html.ls-hdr-hidden .sc-header { transform: translateY(-100%); }
}

/* ── Head: a woven band ──────────────────────────────────────────────
   A fine warp-and-weft texture in the accent, at a whisper, behind the title:
   the page reads as cloth before a single photograph loads. */
.ls-head { display: grid; gap: var(--ui-space-4); padding-block: var(--ui-space-4) var(--ui-space-6); }
.ls-crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--ui-text-xs); letter-spacing: 0.04em; color: var(--ui-text-subtle); }
.ls-crumbs a { text-decoration: none; color: var(--ui-text-muted); transition: color var(--ui-dur-fast) var(--ui-ease); }
.ls-crumbs a:hover { color: var(--ui-accent); }
.ls-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: var(--ui-space-3); justify-items: start;
  grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--ui-space-8);
  padding: clamp(28px, 5vw, 64px) clamp(20px, 4vw, 56px);
  background: linear-gradient(120deg, var(--ui-accent-soft), color-mix(in srgb, var(--ui-accent-soft) 35%, var(--ui-bg)) 70%);
  border: 1px solid color-mix(in srgb, var(--ui-accent-border) 55%, transparent);
}
.ls-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0.55;
  background:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--ui-accent) 7%, transparent) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--ui-accent) 5%, transparent) 0 1px, transparent 1px 6px);
  mask-image: linear-gradient(100deg, transparent 30%, #000 85%);
}
.ls-hero > :not(.ls-fan) { grid-column: 1; }
.ls-fan { grid-column: 2; grid-row: 1 / span 3; align-self: center; position: relative; width: clamp(180px, 20vw, 280px); aspect-ratio: 5 / 4; }
.ls-fan__card {
  position: absolute; top: 50%; left: 50%; width: 44%; aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--ui-surface); padding: 5px; box-shadow: var(--ui-shadow-md);
  transform-origin: 50% 120%; transition: transform var(--ui-dur-slow) var(--ui-ease-spring);
  animation: ls-deal 700ms var(--ls-ease-out) both;
}
.ls-fan__card svg, .ls-fan__card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ls-fan__card:nth-child(1) { transform: translate(-50%, -50%) translateX(-58%) rotate(-9deg); animation-delay: 60ms; }
.ls-fan__card:nth-child(2) { transform: translate(-50%, -50%) translateY(-6%); z-index: 2; }
.ls-fan__card:nth-child(3) { transform: translate(-50%, -50%) translateX(58%) rotate(9deg); animation-delay: 120ms; }
@media (hover: hover) {
  .ls-hero:hover .ls-fan__card:nth-child(1) { transform: translate(-50%, -50%) translateX(-66%) rotate(-13deg); }
  .ls-hero:hover .ls-fan__card:nth-child(3) { transform: translate(-50%, -50%) translateX(66%) rotate(13deg); }
}
/* The trio is dealt into place on first paint. */
@keyframes ls-deal { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
.ls-title { font-size: clamp(var(--ui-text-3xl), 5.5vw, var(--ui-text-5xl)); font-weight: var(--ui-weight-display); line-height: 1; text-wrap: balance; max-width: 18ch; }
/* Every item carries its separator in front. The line is shifted left by one
   separator and that strip is clipped, so no line, first or wrapped, starts with a mark. */
.ls-meta { margin: 0 0 0 -28px; display: flex; flex-wrap: wrap; gap: 6px 0; font-size: var(--ui-text-sm); color: var(--ui-text-muted); clip-path: inset(0 0 0 28px); }
.ls-meta > span::before { content: ''; display: inline-block; width: 4px; height: 4px; transform: rotate(45deg); background: var(--ui-accent-border); vertical-align: middle; margin: -2px 12px 0; }
.ls-meta b { color: var(--ui-text); font-weight: var(--ui-weight-strong); font-variant-numeric: tabular-nums; }

/* Phone head: the band runs edge to edge like an app's title area, the trio
   becomes a small fan beside the title, and the crumbs stay on one line. */
@media (max-width: 719px) {
  .ls-head { padding-block: var(--ui-space-3) var(--ui-space-4); gap: var(--ui-space-4); }
  .ls-crumbs { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
  .ls-crumbs > :last-child { overflow: hidden; text-overflow: ellipsis; }
  .ls-hero {
    margin-inline: calc(-1 * var(--ls-gutter)); border-inline: 0;
    padding: var(--ui-space-6) var(--ls-gutter) var(--ui-space-5);
    gap: var(--ui-space-2) var(--ui-space-3);
  }
  .ls-hero .ui-eyebrow { font-size: 10.5px; }
  .ls-title { font-size: clamp(2rem, 9.5vw, 2.6rem); }
  .ls-fan { grid-row: 1 / span 2; width: 104px; }
  .ls-fan__card { padding: 3px; }
  .ls-hero > .ls-meta { grid-column: 1 / -1; font-size: var(--ui-text-xs); margin-top: var(--ui-space-1); }
}
@media (max-width: 349px) { .ls-fan { display: none; } }

/* Subcategory chips, each with a thumbnail of what is inside */
.ls-subs { display: flex; gap: var(--ui-space-3); overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--ls-gutter)); padding: 2px var(--ls-gutter) 4px; scroll-snap-type: x proximity; scroll-padding-inline: var(--ls-gutter); }
.ls-subs::-webkit-scrollbar { display: none; }
.ls-subs a {
  flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 10px;
  min-height: 54px; text-decoration: none; padding: 5px 16px 5px 5px; font-size: var(--ui-text-sm);
  background: var(--ui-surface); border: 1px solid var(--ui-border);
  transition: border-color var(--ui-dur-fast) var(--ui-ease), background-color var(--ui-dur-base) var(--ui-ease), box-shadow var(--ui-dur-base) var(--ui-ease), transform var(--ui-dur-base) var(--ui-ease);
}
.ls-subs a:hover { border-color: var(--ui-accent-border); box-shadow: var(--ui-shadow-sm); transform: translateY(-1px); }
.ls-subs a:active { transform: scale(0.97); }
.ls-subs a[aria-current='page'] { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.ls-subs a[aria-current='page'] span:not(.ls-subs__img, .ls-subs__all) { color: var(--ui-accent); font-weight: var(--ui-weight-strong); }
.ls-subs__img, .ls-subs__all { width: 34px; height: 42px; overflow: hidden; flex: none; background: var(--ui-surface-3); }
.ls-subs__img svg, .ls-subs__img img { width: 100%; height: 100%; object-fit: cover; }
.ls-subs__all { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; }
.ls-subs__all > span { overflow: hidden; }
.ls-subs__all svg, .ls-subs__all img { width: 100%; height: 100%; object-fit: cover; }
.ls-subs small { color: var(--ui-text-subtle); font-variant-numeric: tabular-nums; }
@media (max-width: 719px) {
  .ls-subs { mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
  .ls-subs a { min-height: 50px; padding-right: 14px; }
}

/* Editorial tile: one per long list, linking to an existing collection */
.ls-story {
  position: relative; isolation: isolate; overflow: hidden; text-decoration: none;
  display: grid; align-content: end; gap: var(--ui-space-3);
  /* As tall as its row (a card and its label), so the words never crowd the mark. */
  align-self: stretch; min-height: 100%; padding: 96px clamp(18px, 2.4vw, 28px) clamp(18px, 2.4vw, 28px);
  background: var(--ui-accent); color: var(--ui-accent-fg);
}
.ls-story::before {
  content: ''; position: absolute; inset: var(--ui-space-2); border: 1px solid color-mix(in srgb, var(--ui-accent-fg) 30%, transparent); z-index: -1;
  transition: inset var(--ui-dur-slow) var(--ls-ease-out);
}
.ls-story::after {
  content: ''; position: absolute; inset: 0; z-index: -2; opacity: 0.18;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ui-accent-fg) 30%, transparent) 0 1px, transparent 1px 10px);
}
.ls-story .ui-eyebrow { color: var(--ui-accent-fg); opacity: 0.85; }
.ls-story__mark { position: absolute; top: clamp(18px, 2.4vw, 32px); left: clamp(18px, 2.4vw, 32px); width: 64px; padding: 6px; background: var(--ui-bg); }
.ls-story__mark img { width: 100%; height: auto; display: block; }
.ls-story__t { font-family: var(--ui-font-display); font-weight: var(--ui-weight-display); font-size: clamp(var(--ui-text-lg), 1.9vw, var(--ui-text-2xl)); line-height: 1.1; letter-spacing: var(--ui-tracking-display); }
.ls-story__p { font-size: var(--ui-text-sm); opacity: 0.88; line-height: 1.5; }
.ls-story__cta { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ui-text-xs); letter-spacing: var(--ui-tracking-label); text-transform: uppercase; font-weight: var(--ui-weight-strong); padding-top: var(--ui-space-2); border-top: 1px solid color-mix(in srgb, var(--ui-accent-fg) 30%, transparent); }
.ls-story__cta .sc-icon { width: 14px; height: 14px; transition: transform var(--ui-dur-base) var(--ls-ease-out); }
.ls-story:hover::before, .ls-story:active::before { inset: var(--ui-space-3); }
.ls-story:hover .ls-story__cta .sc-icon { transform: translateX(4px); }
.ls-story:focus-visible { outline: var(--ui-ring-width) solid var(--ui-ring); outline-offset: 3px; }
/* Phone: a full-width band between rows, the mark on the left, never a cramped column. */
@media (max-width: 719px) {
  .ls-story {
    grid-column: 1 / -1; min-height: 0; align-content: center; gap: var(--ui-space-2);
    padding: var(--ui-space-6) var(--ui-space-5) var(--ui-space-6) 108px;
  }
  .ls-story__mark { top: 50%; translate: 0 -50%; left: var(--ui-space-5); width: 64px; }
  .ls-story__t { font-size: var(--ui-text-xl); }
  .ls-story__p { font-size: var(--ui-text-xs); }
  .ls-story__cta { justify-self: start; }
}

.ls-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: start; }
.ls-results { min-width: 0; }
@media (min-width: 1100px) { .ls-body { grid-template-columns: 252px minmax(0, 1fr); gap: var(--ui-space-10); } }

/* ── Toolbar: count, Filter, Sort ───────────────────────────────────── */
.ls-bar { display: flex; align-items: center; gap: var(--ui-space-2); padding-bottom: var(--ui-space-4); border-bottom: 1px solid var(--ui-border); }
.ls-count { font-size: var(--ui-text-sm); color: var(--ui-text-muted); margin: 0 auto 0 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ls-count b { color: var(--ui-text); font-weight: var(--ui-weight-strong); }
.ls-tool {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px; cursor: pointer; white-space: nowrap;
  background: var(--ui-surface); color: var(--ui-text); border: 1px solid var(--ui-border-strong);
  font-size: var(--ui-text-sm); letter-spacing: 0.02em;
  transition: border-color var(--ui-dur-fast) var(--ui-ease), color var(--ui-dur-fast) var(--ui-ease), transform var(--ui-dur-fast) var(--ui-ease);
}
.ls-tool:hover, .ls-tool[aria-expanded='true'] { border-color: var(--ui-accent); color: var(--ui-accent); }
.ls-tool:active { transform: scale(0.97); }
.ls-tool:focus-visible { outline: var(--ui-ring-width) solid var(--ui-ring); outline-offset: var(--ui-ring-offset); }
.ls-tool .sc-icon { width: 18px; height: 18px; }
.ls-tool__k { color: var(--ui-text-muted); transition: color var(--ui-dur-fast) var(--ui-ease); }
.ls-tool:hover .ls-tool__k, .ls-tool[aria-expanded='true'] .ls-tool__k { color: inherit; }
.ls-tool__v { font-weight: var(--ui-weight-strong); }
.ls-tool__chev { transition: transform var(--ui-dur-base) var(--ls-ease-out); }
.ls-tool[aria-expanded='true'] .ls-tool__chev { transform: rotate(180deg); }
.ls-tool__dot { position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--ui-accent); }
.ls-n {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--ui-accent); color: var(--ui-accent-fg);
  font-size: 11px; font-weight: var(--ui-weight-strong); display: inline-grid; place-items: center; font-variant-numeric: tabular-nums;
  animation: ls-pop var(--ui-dur-slow) var(--ui-ease-spring) both;
}
@keyframes ls-pop { from { transform: scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 1100px) { .ls-tool--filter { display: none; } }
@media (min-width: 720px) { .ls-tool__dot { display: none; } }
@media (max-width: 719px) {
  .ls-tool { padding: 0 12px; }
  .ls-tool__v, .ls-tool__chev { display: none; }
  .ls-tool--sort .ls-tool__k { color: inherit; }
}

/* Below the rail breakpoint the toolbar sits under the header while the grid
   scrolls: full width, frosted, with a hairline only once it is stuck. */
@media (max-width: 1099px) {
  .ls-bar {
    position: sticky; top: var(--ls-bar-top); z-index: 20;
    margin-inline: calc(-1 * var(--ls-gutter)); padding: var(--ui-space-2) var(--ls-gutter);
    background: color-mix(in srgb, var(--ui-bg) 90%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid transparent;
    transition: top var(--ui-dur-slow) var(--ls-ease-out), border-color var(--ui-dur-base) var(--ui-ease), box-shadow var(--ui-dur-base) var(--ui-ease);
  }
  .ls-bar.is-stuck { border-bottom-color: var(--ui-border); box-shadow: 0 10px 22px -18px color-mix(in srgb, var(--ui-shadow-color) 45%, transparent); }
}

/* Sort: a menu under the button from 640px; a bottom sheet on a phone. */
.ls-sortwrap { position: relative; }
.ls-sortpop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 252px; padding: 6px;
  background: var(--ui-surface); border: 1px solid var(--ui-border); box-shadow: var(--ui-shadow-lg);
  transform-origin: top right; opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.98);
  transition: opacity var(--ui-dur-base) var(--ui-ease), transform var(--ui-dur-base) var(--ls-ease-out), visibility 0s linear var(--ui-dur-base);
}
.ls-sortpop.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.ls-sortpop__t { display: block; padding: 8px 12px 6px; font-size: 10.5px; text-transform: uppercase; letter-spacing: var(--ui-tracking-label); color: var(--ui-text-subtle); font-weight: var(--ui-weight-strong); }
.ls-sortopt {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3);
  min-height: 44px; padding: 0 12px; background: none; border: 0; cursor: pointer; text-align: left;
  font-size: var(--ui-text-sm); color: var(--ui-text);
  transition: background-color var(--ui-dur-fast) var(--ui-ease), color var(--ui-dur-fast) var(--ui-ease);
}
.ls-sortopt:hover, .ls-sortopt:focus-visible { background: var(--ui-surface-2); outline: 0; }
.ls-sortopt[aria-selected='true'] { color: var(--ui-accent); font-weight: var(--ui-weight-strong); }
.ls-sortopt .sc-icon { width: 18px; height: 18px; opacity: 0; transform: scale(0.5); transition: opacity var(--ui-dur-fast) var(--ui-ease), transform var(--ui-dur-base) var(--ui-ease-spring); }
.ls-sortopt[aria-selected='true'] .sc-icon { opacity: 1; transform: none; }
.ls-sortsheet .sc-sheet__body { padding: 0 0 var(--ui-space-3); gap: 0; }
.ls-sortsheet .ls-sortopt { min-height: 56px; padding: 0 var(--ui-space-5); font-size: var(--ui-text-base); border-bottom: 1px solid var(--ui-border); }
.ls-sortsheet .ls-sortopt:last-child { border-bottom: 0; }

/* Active filter chips: one swipeable row on a phone */
.ls-chips { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); padding-top: var(--ui-space-4); }
.ls-chips:empty { display: none; }
.ls-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 8px 0 12px; font-size: var(--ui-text-sm);
  background: var(--ui-accent-soft); color: var(--ui-accent); border: 1px solid var(--ui-accent-border); cursor: pointer;
  animation: ls-in var(--ui-dur-base) var(--ls-ease-out) both;
  transition: border-color var(--ui-dur-fast) var(--ui-ease), transform var(--ui-dur-fast) var(--ui-ease);
}
.ls-chip:hover { border-color: var(--ui-accent); }
.ls-chip:active { transform: scale(0.96); }
.ls-chip .sc-icon { width: 14px; height: 14px; }
.ls-chip--clear { background: transparent; border-color: transparent; color: var(--ui-text-muted); text-decoration: underline; text-underline-offset: 3px; padding-inline: 8px; animation: none; }
@keyframes ls-in { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
@media (max-width: 719px) {
  .ls-chips {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(-1 * var(--ls-gutter)); padding: var(--ui-space-3) var(--ls-gutter) 0;
    mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
  }
  .ls-chips::-webkit-scrollbar { display: none; }
  .ls-chip { flex: none; }
}

/* ── Grid ────────────────────────────────────────────────────────────── */
.ls-grid { display: grid; gap: var(--ui-space-8) var(--ui-space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: var(--ui-space-5); }
@media (min-width: 720px) { .ls-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ui-space-10) var(--ui-space-6); } }
@media (min-width: 1440px) { .ls-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) and (max-width: 1439px) { .ls-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Cards rise into place as they scroll into view, a row at a time. The class
   is set by the script, so without it every card simply shows. */
.ls-grid.js-reveal > :is(.pc, .ls-story) {
  opacity: 0; transform: translateY(16px);
  transition: opacity 520ms var(--ls-ease-out), transform 640ms var(--ls-ease-out);
  transition-delay: var(--ls-d, 0ms);
}
.ls-grid.js-reveal > .is-in { opacity: 1; transform: none; }
.ls-sk { display: grid; gap: var(--ui-space-3); }
.ls-more { display: grid; justify-items: center; gap: var(--ui-space-3); padding-block: var(--ui-space-10) 0; font-size: var(--ui-text-sm); color: var(--ui-text-muted); }
.ls-progress { width: min(240px, 60%); height: 2px; background: var(--ui-border); position: relative; overflow: hidden; }
.ls-progress span { position: absolute; inset: 0 auto 0 0; background: var(--ui-accent); transition: width var(--ui-dur-slow) var(--ls-ease-out); }
.ls-sentinel { height: 1px; }

.ls-empty .ui-empty { padding-block: var(--ui-space-12); animation: ls-in var(--ui-dur-slow) var(--ls-ease-out) both; }

/* ── Facets (rail and sheet share the markup) ───────────────────────── */
.ls-rail { display: none; }
@media (min-width: 1100px) {
  .ls-rail {
    display: block; position: sticky; top: var(--ui-space-4); max-height: calc(100dvh - 32px); overflow-y: auto; padding-right: var(--ui-space-3);
    scrollbar-width: thin; scrollbar-color: transparent transparent;
  }
  .ls-rail:hover, .ls-rail:focus-within { scrollbar-color: var(--ui-border-strong) transparent; }
}
.ls-facet { border-bottom: 1px solid var(--ui-border); }
.ls-facet__t {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3);
  min-height: 52px; padding: 0; background: none; border: 0; cursor: pointer; text-align: left;
  font-size: var(--ui-text-xs); text-transform: uppercase; letter-spacing: var(--ui-tracking-label); font-weight: var(--ui-weight-strong); color: var(--ui-text);
  transition: color var(--ui-dur-fast) var(--ui-ease);
}
.ls-facet__t:hover { color: var(--ui-accent); }
.ls-facet__t:focus-visible { outline: var(--ui-ring-width) solid var(--ui-ring); outline-offset: 2px; }
.ls-facet__t .ls-on {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%;
  font-size: var(--ui-text-xs); text-transform: none; letter-spacing: 0; color: var(--ui-accent); font-weight: var(--ui-weight-medium); margin-inline-start: auto;
}
.ls-facet__t svg { transition: transform var(--ui-dur-base) var(--ls-ease-out); color: var(--ui-text-subtle); flex: none; }
.ls-facet__t[aria-expanded='true'] svg { transform: rotate(180deg); }
.ls-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--ui-dur-slow) var(--ls-ease-out); }
.ls-panel.is-open { grid-template-rows: 1fr; }
.ls-panel > div { overflow: hidden; }
.ls-panel__in { padding-bottom: var(--ui-space-4); display: grid; gap: 2px; opacity: 0; transition: opacity var(--ui-dur-base) var(--ui-ease); }
.ls-panel.is-open .ls-panel__in { opacity: 1; }
.ls-opt { display: flex; align-items: center; gap: var(--ui-space-3); min-height: 38px; font-size: var(--ui-text-sm); cursor: pointer; }
.ls-opt input { appearance: none; width: 18px; height: 18px; border: 1px solid var(--ui-border-strong); background: var(--ui-surface); display: grid; place-content: center; flex: none; margin: 0; cursor: pointer; transition: background-color var(--ui-dur-fast) var(--ui-ease), border-color var(--ui-dur-fast) var(--ui-ease); }
.ls-opt input::after { content: ''; width: 10px; height: 6px; border: 2px solid var(--ui-accent-fg); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform var(--ui-dur-fast) var(--ui-ease-spring); }
.ls-opt input:checked { background: var(--ui-accent); border-color: var(--ui-accent); }
.ls-opt input:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.ls-opt input:focus-visible { outline: var(--ui-ring-width) solid var(--ui-ring); outline-offset: var(--ui-ring-offset); }
.ls-opt span { flex: 1; min-width: 0; transition: color var(--ui-dur-fast) var(--ui-ease); }
.ls-opt:hover span { color: var(--ui-accent); }
.ls-opt small { color: var(--ui-text-subtle); font-variant-numeric: tabular-nums; }
.ls-opt[data-zero] { opacity: 0.45; }
.ls-find { height: 38px; margin-bottom: var(--ui-space-2); font-size: var(--ui-text-sm); }

.ls-tree a { display: flex; justify-content: space-between; align-items: center; gap: var(--ui-space-3); min-height: 36px; text-decoration: none; font-size: var(--ui-text-sm); color: var(--ui-text-muted); transition: color var(--ui-dur-fast) var(--ui-ease); }
.ls-tree a:hover { color: var(--ui-accent); }
.ls-tree a[aria-current='page'] { color: var(--ui-accent); font-weight: var(--ui-weight-strong); }
.ls-tree a small { color: var(--ui-text-subtle); font-variant-numeric: tabular-nums; font-weight: 400; }
.ls-tree .ls-tree__sub { padding-left: var(--ui-space-3); border-left: 1px solid var(--ui-border); }

.ls-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: var(--ui-space-3) var(--ui-space-1); padding-top: 2px; }
.ls-sw { position: relative; display: grid; justify-items: center; gap: 6px; cursor: pointer; font-size: 11px; color: var(--ui-text-muted); text-align: center; line-height: 1.2; }
.ls-sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.ls-sw i { width: 30px; height: 30px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--ui-text) 16%, transparent); box-shadow: 0 0 0 3px var(--ui-bg); transition: box-shadow var(--ui-dur-base) var(--ls-ease-out), transform var(--ui-dur-base) var(--ls-ease-out); }
.ls-sw:hover i { transform: scale(1.08); }
.ls-sw input:checked + i { box-shadow: 0 0 0 2px var(--ui-bg), 0 0 0 4px var(--ui-accent); }
.ls-sw input:focus-visible + i { outline: var(--ui-ring-width) solid var(--ui-ring); outline-offset: 4px; }
.ls-sw[data-zero] { opacity: 0.4; }

.ls-bands { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ui-space-2); }
.ls-band { position: relative; cursor: pointer; }
.ls-band input { position: absolute; opacity: 0; }
.ls-band span { display: grid; place-items: center; text-align: center; min-height: 48px; padding: 6px; border: 1px solid var(--ui-border-strong); font-size: var(--ui-text-xs); background: var(--ui-surface); transition: border-color var(--ui-dur-fast) var(--ui-ease), background-color var(--ui-dur-fast) var(--ui-ease), color var(--ui-dur-fast) var(--ui-ease); }
.ls-band:hover span { border-color: var(--ui-accent-border); }
.ls-band small { display: block; color: var(--ui-text-subtle); font-variant-numeric: tabular-nums; }
.ls-band input:checked + span { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent); }
.ls-band input:focus-visible + span { outline: var(--ui-ring-width) solid var(--ui-ring); outline-offset: 2px; }
.ls-band[data-zero] { opacity: 0.45; }
/* In the 252px rail the bands read as a list: label left, count right, never wrapped. */
.ls-rail .ls-bands { grid-template-columns: 1fr; gap: 6px; }
.ls-rail .ls-band span { display: flex; justify-content: space-between; align-items: center; min-height: 40px; padding: 0 12px; text-align: left; }

.ls-stock { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3); min-height: 56px; border-bottom: 1px solid var(--ui-border); font-size: var(--ui-text-sm); }

/* ── Filter sheet (below 1100px) ────────────────────────────────────── */
.ls-sheet .sc-sheet__panel { height: 92dvh; max-height: 92dvh; }
@media (min-width: 640px) { .ls-sheet .sc-sheet__panel { height: auto; max-height: 86dvh; width: min(560px, 92vw); } }
.ls-sheet .sc-sheet__head { gap: var(--ui-space-2); }
.ls-sheet__title { display: flex; align-items: baseline; gap: var(--ui-space-3); min-width: 0; }
.ls-sheet__n { font-size: var(--ui-text-xs); color: var(--ui-accent); font-weight: var(--ui-weight-strong); white-space: nowrap; }
.ls-sheet__clear {
  margin-inline-start: auto; min-height: 44px; padding: 0 var(--ui-space-2); background: none; border: 0; cursor: pointer;
  font-size: var(--ui-text-sm); color: var(--ui-text-muted); text-decoration: underline; text-underline-offset: 3px;
  transition: color var(--ui-dur-fast) var(--ui-ease), opacity var(--ui-dur-base) var(--ui-ease);
}
.ls-sheet__clear:hover { color: var(--ui-accent); }
.ls-sheet__clear[disabled] { opacity: 0; pointer-events: none; }
.ls-sheet .sc-sheet__body { padding-top: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; gap: 0; }
.ls-sheet__foot {
  position: sticky; bottom: 0; display: grid;
  padding: var(--ui-space-3) var(--ui-space-5) calc(var(--ui-space-3) + env(safe-area-inset-bottom, 0px));
  background: var(--ui-surface); border-top: 1px solid var(--ui-border);
}
.ls-sheet__foot .ui-btn { width: 100%; min-height: var(--ui-control-h-lg); font-size: var(--ui-text-base); }
.ls-applyn { display: inline-block; }
.ls-applyn.is-tick { animation: ls-roll var(--ui-dur-base) var(--ls-ease-out); }
@keyframes ls-roll { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Bigger targets for a thumb */
.ls-sheet .ls-facet__t { min-height: 56px; }
.ls-sheet .ls-opt { min-height: 48px; }
.ls-sheet .ls-opt input { width: 20px; height: 20px; }
.ls-sheet .ls-tree a { min-height: 44px; }
.ls-sheet .ls-swatches { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
.ls-sheet .ls-sw { padding-block: 4px; }
.ls-sheet .ls-sw i { width: 36px; height: 36px; }
.ls-sheet .ls-band span { min-height: 56px; font-size: var(--ui-text-sm); }

/* Phone sheets settle in, and follow the finger when dragged down by the handle or head. */
@media (max-width: 639px) {
  .ls-sheet .sc-sheet__panel, .ls-sortsheet .sc-sheet__panel { transition: transform 460ms var(--ls-ease-out); }
  .ls-sheet .sc-grab, .ls-sortsheet .sc-grab { width: 44px; height: 5px; margin-top: 8px; }
  .ls-drag { touch-action: none; cursor: grab; }
}
.sc-sheet__panel.is-dragging { transition: none !important; }

/* Back to top */
.ls-top {
  position: fixed; right: var(--ls-gutter); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 20;
  width: 48px; height: 48px; display: grid; place-items: center; cursor: pointer;
  background: color-mix(in srgb, var(--ui-surface) 92%, transparent); color: var(--ui-text); border: 1px solid var(--ui-border-strong); box-shadow: var(--ui-shadow-md);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transform: translateY(12px) scale(0.9); pointer-events: none;
  transition: opacity var(--ui-dur-base) var(--ui-ease), transform var(--ui-dur-slow) var(--ls-ease-out), color var(--ui-dur-fast) var(--ui-ease);
}
.ls-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.ls-top:hover { color: var(--ui-accent); border-color: var(--ui-accent); }
.ls-top svg { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .sc-header, .ls-bar, .ls-panel, .ls-panel__in, .ls-top, .ls-progress span, .ls-subs a, .ls-story::before, .ls-sortpop,
  .ls-tool, .ls-tool__chev, .ls-facet__t svg, .ls-sw i, .ls-sortopt .sc-icon, .ls-fan__card, .ls-story__cta .sc-icon,
  .ls-sheet .sc-sheet__panel, .ls-sortsheet .sc-sheet__panel { transition: none; }
  .ls-chip, .ls-n, .ls-fan__card, .ls-applyn.is-tick, .ls-empty .ui-empty { animation: none; }
  .ls-grid.js-reveal > :is(.pc, .ls-story) { opacity: 1; transform: none; transition: none; }
  .ls-subs a:active, .ls-tool:active, .ls-chip:active { transform: none; }
}

/* ── Dussehra festive theme (owner, 9 Oct 2026) ─────────────────────────────────────────────
   On while the Home shows its seasonal version (html.ls-festive, set by listing.js from the
   season file); off from the day after, when S2 is exactly as frozen. The Home's festive
   language, where the Home shows it: the hero panel lamp-lit maroon with a gold hairline, the
   title in cream Playfair, gold eyebrow, rule and separators; Playfair for the story line and
   the no-results title. Layout, content, cards, chips, filters and sheets are unchanged. */
html.ls-festive .ls-hero {
  --lf-gold: #d6b06a; --lf-cream: #f3e3c3;
  background: radial-gradient(70% 140% at 85% 50%, #4a1520, #2a0b10 62%, #1d0709);
  border-color: rgba(214, 176, 106, 0.55);
  box-shadow: inset 0 0 0 6px #1d0709, inset 0 0 0 7px rgba(214, 176, 106, 0.28);
  color: var(--lf-cream);
}
html.ls-festive .ls-hero::before {
  opacity: 0.5;
  background:
    repeating-linear-gradient(0deg, rgba(214, 176, 106, 0.08) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg, rgba(214, 176, 106, 0.06) 0 1px, transparent 1px 7px);
}
html.ls-festive .ls-hero .ui-eyebrow { display: inline-flex; align-items: center; gap: 12px; color: var(--lf-gold); }
html.ls-festive .ls-hero .ui-eyebrow::after { content: ''; width: 40px; height: 1px; background: linear-gradient(90deg, var(--lf-gold), transparent); }
html.ls-festive .ls-title { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; font-weight: 500; letter-spacing: 0; line-height: 1.04; color: var(--lf-cream); }
html.ls-festive .ls-meta { color: rgba(243, 227, 195, 0.82); }
html.ls-festive .ls-meta b { color: var(--lf-cream); }
html.ls-festive .ls-meta > span::before { background: var(--lf-gold); }
html.ls-festive .ls-story__t { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; font-weight: 500; letter-spacing: 0; line-height: 1.15; }
html.ls-festive .ls-empty .ui-empty__title { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; font-weight: 500; letter-spacing: 0; color: var(--ui-accent); }

/* ── Card variation under review: the owner's S2 reference card (9 Oct 2026, ?card=arch) ──────
   The arch and the photo window are traced from the reference image's pixels (card 1) and drawn
   in a 100 x 162 box: a pointed crown, four scallops each side, straight sides, a photo window with
   two-step lower corners. Peach band at the crown fading to cream down the sides; a white highlight
   and a gold rim round the photo; a defined cream body below with the same tan edge, rounded
   bottom corners and a soft shadow. Sizes are in card-width units (cqw), as measured. Only on this
   listing, only with the switch; the shared card (Home New Arrivals, S3) is untouched. */
html.ls-card-arch .pa { position: relative; display: flex; flex-direction: column; min-width: 0; container-type: inline-size;
  transition: transform var(--ui-dur-slow) var(--ui-ease), filter var(--ui-dur-slow) var(--ui-ease); }
html.ls-card-arch .pa__top { position: relative; display: block; aspect-ratio: 100 / 162; filter: drop-shadow(0 -4px 5px rgba(150, 90, 60, 0.07)); transition: filter var(--ui-dur-slow) var(--ui-ease); }
html.ls-card-arch .pa__win { position: absolute; inset: 0; overflow: hidden; background: #5a2a1c;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 162' preserveAspectRatio='none'%3E%3Cpath d='M50 9.15 C50.65 9.91 52.83 12.71 53.92 13.73 C55.01 14.74 55.12 14.63 56.54 15.25 C57.95 15.87 61 16.52 62.42 17.43 C63.83 18.34 63.62 20.08 65.03 20.7 C66.45 21.31 69.5 20.7 70.92 21.13 C72.33 21.57 72.33 22.73 73.53 23.31 C74.73 23.89 76.91 24.15 78.1 24.62 C79.3 25.09 79.85 25.16 80.72 26.14 C81.59 27.12 82.35 29.56 83.33 30.5 C84.31 31.45 85.51 31.23 86.6 31.81 C87.69 32.39 88.89 33.01 89.87 33.99 C90.85 34.97 91.61 35.95 92.48 37.69 C93.36 39.43 94.5 43.1 95.1 44.44 C95.7 45.79 95.91 45.53 96.08 45.75 L96.08 135.29 C95.97 135.4 95.53 135.08 95.42 135.95 C95.32 136.82 95.5 139.65 95.42 140.52 C95.35 141.39 95.53 140.63 94.99 141.18 C94.44 141.72 93.21 143.03 92.16 143.79 C91.1 144.55 89.65 144.44 88.67 145.75 C87.69 147.06 87.04 150.44 86.27 151.63 C85.51 152.83 85.37 152.4 84.1 152.94 C82.83 153.49 79.81 154.03 78.65 154.9 C77.49 155.77 78.25 157.41 77.12 158.17 C76 158.93 75.05 159.04 71.9 159.48 C68.74 159.91 60.46 160.57 58.17 160.78 L50 160.78 L41.83 160.78 C39.54 160.57 31.26 159.91 28.1 159.48 C24.95 159.04 24 158.93 22.88 158.17 C21.75 157.41 22.51 155.77 21.35 154.9 C20.19 154.03 17.17 153.49 15.9 152.94 C14.63 152.4 14.49 152.83 13.73 151.63 C12.96 150.44 12.31 147.06 11.33 145.75 C10.35 144.44 8.9 144.55 7.84 143.79 C6.79 143.03 5.56 141.72 5.01 141.18 C4.47 140.63 4.65 141.39 4.58 140.52 C4.5 139.65 4.68 136.82 4.58 135.95 C4.47 135.08 4.03 135.4 3.92 135.29 L3.92 45.75 C4.09 45.53 4.3 45.79 4.9 44.44 C5.5 43.1 6.64 39.43 7.52 37.69 C8.39 35.95 9.15 34.97 10.13 33.99 C11.11 33.01 12.31 32.39 13.4 31.81 C14.49 31.23 15.69 31.45 16.67 30.5 C17.65 29.56 18.41 27.12 19.28 26.14 C20.15 25.16 20.7 25.09 21.9 24.62 C23.09 24.15 25.27 23.89 26.47 23.31 C27.67 22.73 27.67 21.57 29.08 21.13 C30.5 20.7 33.55 21.31 34.97 20.7 C36.38 20.08 36.17 18.34 37.58 17.43 C39 16.52 42.05 15.87 43.46 15.25 C44.88 14.63 44.99 14.74 46.08 13.73 C47.17 12.71 49.35 9.91 50 9.15 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 162' preserveAspectRatio='none'%3E%3Cpath d='M50 9.15 C50.65 9.91 52.83 12.71 53.92 13.73 C55.01 14.74 55.12 14.63 56.54 15.25 C57.95 15.87 61 16.52 62.42 17.43 C63.83 18.34 63.62 20.08 65.03 20.7 C66.45 21.31 69.5 20.7 70.92 21.13 C72.33 21.57 72.33 22.73 73.53 23.31 C74.73 23.89 76.91 24.15 78.1 24.62 C79.3 25.09 79.85 25.16 80.72 26.14 C81.59 27.12 82.35 29.56 83.33 30.5 C84.31 31.45 85.51 31.23 86.6 31.81 C87.69 32.39 88.89 33.01 89.87 33.99 C90.85 34.97 91.61 35.95 92.48 37.69 C93.36 39.43 94.5 43.1 95.1 44.44 C95.7 45.79 95.91 45.53 96.08 45.75 L96.08 135.29 C95.97 135.4 95.53 135.08 95.42 135.95 C95.32 136.82 95.5 139.65 95.42 140.52 C95.35 141.39 95.53 140.63 94.99 141.18 C94.44 141.72 93.21 143.03 92.16 143.79 C91.1 144.55 89.65 144.44 88.67 145.75 C87.69 147.06 87.04 150.44 86.27 151.63 C85.51 152.83 85.37 152.4 84.1 152.94 C82.83 153.49 79.81 154.03 78.65 154.9 C77.49 155.77 78.25 157.41 77.12 158.17 C76 158.93 75.05 159.04 71.9 159.48 C68.74 159.91 60.46 160.57 58.17 160.78 L50 160.78 L41.83 160.78 C39.54 160.57 31.26 159.91 28.1 159.48 C24.95 159.04 24 158.93 22.88 158.17 C21.75 157.41 22.51 155.77 21.35 154.9 C20.19 154.03 17.17 153.49 15.9 152.94 C14.63 152.4 14.49 152.83 13.73 151.63 C12.96 150.44 12.31 147.06 11.33 145.75 C10.35 144.44 8.9 144.55 7.84 143.79 C6.79 143.03 5.56 141.72 5.01 141.18 C4.47 140.63 4.65 141.39 4.58 140.52 C4.5 139.65 4.68 136.82 4.58 135.95 C4.47 135.08 4.03 135.4 3.92 135.29 L3.92 45.75 C4.09 45.53 4.3 45.79 4.9 44.44 C5.5 43.1 6.64 39.43 7.52 37.69 C8.39 35.95 9.15 34.97 10.13 33.99 C11.11 33.01 12.31 32.39 13.4 31.81 C14.49 31.23 15.69 31.45 16.67 30.5 C17.65 29.56 18.41 27.12 19.28 26.14 C20.15 25.16 20.7 25.09 21.9 24.62 C23.09 24.15 25.27 23.89 26.47 23.31 C27.67 22.73 27.67 21.57 29.08 21.13 C30.5 20.7 33.55 21.31 34.97 20.7 C36.38 20.08 36.17 18.34 37.58 17.43 C39 16.52 42.05 15.87 43.46 15.25 C44.88 14.63 44.99 14.74 46.08 13.73 C47.17 12.71 49.35 9.91 50 9.15 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
html.ls-card-arch .pa__img { position: absolute; inset: 0; transition: opacity var(--ui-dur-slow) var(--ui-ease), transform 900ms var(--ui-ease); }
html.ls-card-arch .pa__img > svg, html.ls-card-arch .pa__img > img { width: 100%; height: 100%; object-fit: cover; }
html.ls-card-arch .pa__img--a img { object-position: 50% 30%; }
html.ls-card-arch .pa__img--b { opacity: 0; transform: scale(1.04); }
html.ls-card-arch .pa__pallu { object-position: 50% 90%; transform: scale(1.12); }
html.ls-card-arch .pa__frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* Frame: one image rendered from the reference's measured layer profiles (band, bevel, highlight,
   outer edge, varying around the arch as in the reference); a fine rim marks the photo's edge. */
html.ls-card-arch .pa__rim { fill: none; stroke: rgba(92, 52, 30, 0.55); stroke-width: 0.8; vector-effect: non-scaling-stroke; }
html.ls-card-arch .pa__tag { position: absolute; z-index: 2; top: 22.6%; left: 9.5%; padding: 0.9cqw 3.2cqw 0.7cqw; border-radius: 1.6cqw;
  font-size: max(8.5px, 4.6cqw); font-weight: var(--ui-weight-strong); letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.3; white-space: nowrap;
  color: var(--ui-accent); background: rgba(255, 250, 246, 0.94); }
html.ls-card-arch .pa__tag--one { color: #fbf2e8; background: var(--ui-accent); }
html.ls-card-arch .pa__tag--sold { color: var(--ui-text-muted); }
html.ls-card-arch .pa__body { flex: 1; display: flex; flex-direction: column; padding: 6.9cqw 4.5cqw 2.6cqw 3.9cqw; margin-top: -1px;
  /* Owner, 9 Oct 2026: no border, no shadow; the cream fades from the frame's colour at the top
     to fully transparent at the bottom. */
  background: linear-gradient(180deg, rgb(251, 237, 221) 0%, rgba(252, 241, 232, 0.85) 20%, rgba(252, 245, 240, 0.45) 60%, rgba(252, 245, 240, 0) 100%); border-radius: 0; box-shadow: none;
  margin-inline: var(--pa-inset, 0.67cqw); }
html.ls-card-arch .pa__eyebrow { font-family: var(--ui-font-display); font-size: max(8.5px, 4.85cqw); line-height: 1.2; text-transform: uppercase; letter-spacing: 0.11em; color: #6e1834; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ls-card-arch .pa__title { margin-top: 4.9cqw; font-family: var(--ui-font-display); font-size: max(13px, 8.5cqw); line-height: 1.28; letter-spacing: 0.035em; color: #4a3b3c; text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; transition: color var(--ui-dur-base) var(--ui-ease); }
html.ls-card-arch .pa__title::after { content: ''; position: absolute; inset: 0; } /* the whole card opens the saree */
html.ls-card-arch .pa__title:focus-visible { outline: 0; }
html.ls-card-arch .pa:has(.pa__title:focus-visible) { outline: var(--ui-ring-width) solid var(--ui-ring); outline-offset: 4px; border-radius: 6.5cqw; }
html.ls-card-arch .pa__facts { margin-top: 4.2cqw; display: flex; flex-wrap: wrap; margin-left: -19px; clip-path: inset(0 0 0 19px); font-family: var(--ui-font-display); font-size: max(10.5px, 6.8cqw); line-height: 1.2; color: #7d6d69; letter-spacing: 0.01em; }
html.ls-card-arch .pa__facts > span::before { content: ''; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: #b9a29c; vertical-align: middle; margin: -2px 8px 0; }
html.ls-card-arch .pa__foot { padding-top: 6cqw; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 3cqw; row-gap: 4cqw; }
html.ls-card-arch .pa__price { grid-column: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 3cqw; }
html.ls-card-arch .pa__price .ui-price { font-family: var(--ui-font-display); font-size: max(14px, 9.0cqw); line-height: 1.1; font-weight: 600; letter-spacing: 0.01em; color: #2a191b; }
html.ls-card-arch .pa__compare { text-decoration: line-through; color: var(--ui-text-subtle); font-size: max(10px, 5cqw); }
html.ls-card-arch .pa__save { font-size: max(10px, 5cqw); font-weight: var(--ui-weight-strong); color: var(--ui-success); }
html.ls-card-arch .pa__dots { grid-column: 1; display: inline-flex; gap: 3.6cqw; margin-top: -0.6cqw; }
html.ls-card-arch .pa__dots i { width: max(10px, 6.8cqw); height: max(10px, 6.8cqw); border-radius: 50%; box-shadow: 0 0 0 1px rgba(42, 25, 27, 0.10); }
html.ls-card-arch .pa__bag { grid-column: 2; grid-row: 1 / span 2; position: relative; z-index: 2; width: max(44px, 23.5cqw); height: max(44px, 23cqw); align-self: start; margin-top: 0.6cqw; display: grid; place-items: center; cursor: pointer;
  border-radius: 4.5cqw; border: 1px solid #eccfd4; background: #fbeced; color: var(--ui-accent); transition: background var(--ui-dur-base) var(--ui-ease), transform var(--ui-dur-base) var(--ui-ease); }
html.ls-card-arch .pa__bag .sc-icon { width: max(22px, 12cqw); height: max(22px, 12cqw); stroke-width: 1.6; }
html.ls-card-arch .pa__bag:hover { background: #f6dde2; }
html.ls-card-arch .pa__bag:active { transform: scale(0.94); }
html.ls-card-arch .pa__bag:focus-visible { outline: var(--ui-ring-width) solid var(--ui-ring); outline-offset: 2px; }
html.ls-card-arch .pa--sold .pa__img { filter: saturate(0.35); }
html.ls-card-arch .pa--sold .pa__title, html.ls-card-arch .pa--sold .pa__eyebrow { color: var(--ui-text-muted); }
@media (hover: hover) {
  html.ls-card-arch .pa:hover { transform: translateY(-4px); }
  html.ls-card-arch .pa:hover .pa__top { filter: drop-shadow(0 -5px 7px rgba(150, 90, 60, 0.11)); }
  html.ls-card-arch .pa:hover .pa__img--a { opacity: 0; transform: scale(1.03); }
  html.ls-card-arch .pa:hover .pa__img--b { opacity: 1; transform: none; }
  html.ls-card-arch .pa:hover .pa__title { color: var(--ui-accent); }
}
@media (prefers-reduced-motion: reduce) {
  html.ls-card-arch .pa, html.ls-card-arch .pa__img, html.ls-card-arch .pa__title, html.ls-card-arch .pa__bag { transition: none; }
}

/* ══ S2 redesign, 9 Oct 2026 (owner): category header and filters ═════════════════════════════
   Same content and behaviour as frozen; a richer, calmer finish in the Home's language. The
   card variation (?card=arch) stays separate. */

/* ── Category header: crest, eyebrow between rules, title, facts, divider; the category's photo
   fading in on the right; the owner's temple-landscape ornament along the foot of the words ── */
.ls-hero {
  --lh-gold: #b08a4a; --lh-ink: var(--ui-accent);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); align-items: stretch; column-gap: 0; row-gap: 0;
  padding: 0; min-height: clamp(270px, 25vw, 360px); justify-items: stretch;
  background: radial-gradient(90% 120% at 18% 30%, #fffaf3, #f8ecdf 75%); border: 1px solid #e6d2bd;
  box-shadow: inset 0 0 0 6px #fbf3ea, inset 0 0 0 7px rgba(176, 138, 74, 0.32);
}
.ls-hero::before { opacity: 0.22; }
.ls-hero > :not(.ls-fan) { grid-column: auto; }
.ls-head > .ls-hero, .ls-head > .ls-subswrap { min-width: 0; } /* never wider than the page */
.ls-hero:not(:has(.ls-hero__media)) { grid-template-columns: minmax(0, 1fr); }
.ls-hero__text { grid-column: 1; position: relative; z-index: 2; display: grid; justify-items: center; align-content: center; text-align: center; gap: 10px;
  padding: clamp(28px, 3.6vw, 48px) clamp(20px, 3.6vw, 52px) clamp(96px, calc(9.4vw + 26px), 150px); }
.ls-hero__crest { color: var(--lh-gold); line-height: 0; }
.ls-hero__crest svg { width: 34px; height: auto; }
.ls-hero__eyebrow { display: inline-flex; align-items: center; gap: 12px; letter-spacing: 0.3em; color: var(--lh-ink); }
.ls-hero__eyebrow i { width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--lh-gold)); }
.ls-hero__eyebrow i:last-child { transform: scaleX(-1); }
.ls-hero .ls-title { max-width: 16ch; }
.ls-hero .ls-meta { margin: 0; clip-path: none; justify-content: center; }
.ls-hero .ls-meta > span::before { display: none; }
.ls-hero .ls-meta > span + span::before { display: inline-block; }
.ls-hero__rule { display: flex; align-items: center; gap: 10px; margin-top: 4px; color: var(--lh-gold); }
.ls-hero__rule i { width: clamp(40px, 5vw, 70px); height: 1px; background: linear-gradient(90deg, transparent, currentColor); }
.ls-hero__rule i:last-child { transform: scaleX(-1); }
.ls-hero__rule b { width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid currentColor; }
.ls-hero__media { grid-column: 2; position: relative; display: grid; place-items: center; overflow: hidden; }
.ls-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%); mask-image: linear-gradient(90deg, transparent 0%, #000 26%); }
.ls-hero__media .ls-fan { grid-column: auto; grid-row: auto; }
.ls-hero__orn { position: absolute; z-index: 1; left: 0; bottom: 10px; width: calc(100% / 1.9); height: auto; padding-inline: 4%; box-sizing: border-box; opacity: 0.62; pointer-events: none; }
.ls-hero:not(:has(.ls-hero__media)) .ls-hero__orn { left: 50%; translate: -50% 0; width: min(70%, 720px); }
@media (prefers-reduced-motion: no-preference) {
  .ls-hero__img { animation: ls-hero-in 1.2s var(--ls-ease-out) both; }
  @keyframes ls-hero-in { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
}
/* Festive: lamp-lit maroon, cream words, gold line-work (the existing festive rules carry the type) */
html.ls-festive .ls-hero { --lh-gold: #d6b06a; --lh-ink: #d6b06a;
  background: radial-gradient(80% 140% at 20% 40%, #4a1520, #2a0b10 62%, #1d0709); border-color: rgba(214, 176, 106, 0.55);
  box-shadow: inset 0 0 0 6px #1d0709, inset 0 0 0 7px rgba(214, 176, 106, 0.3); }
html.ls-festive .ls-hero .ui-eyebrow::after { display: none; }
html.ls-festive .ls-hero__orn { opacity: 0.55; }
/* Tablets: a little shorter */
@media (max-width: 1099px) { .ls-hero { min-height: 240px; } }
/* Phones: the words on the left over the panel, the photo fading in behind them on the right */
@media (max-width: 719px) {
  .ls-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; position: relative; }
  .ls-hero__text { justify-items: start; text-align: left; gap: 6px; padding: 22px 18px 86px; max-width: 74%; }
  .ls-hero__crest svg { width: 26px; }
  .ls-hero__eyebrow i:first-child { display: none; }
  .ls-hero .ls-meta { justify-content: flex-start; }
  .ls-hero__rule { display: none; }
  .ls-hero__media { position: absolute; inset: 0 0 0 42%; z-index: 0; }
  .ls-hero__img { -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.55) 40%, #000 80%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.55) 40%, #000 80%); }
  .ls-hero__orn, .ls-hero:not(:has(.ls-hero__media)) .ls-hero__orn { left: 0; translate: none; width: min(74%, 300px); padding-inline: 18px 0; bottom: 8px; opacity: 0.42; }
  html.ls-festive .ls-hero__orn { opacity: 0.45; }
}

/* ── Sub-category chips: photo chips; the current one filled plum; arrows when they overflow ── */
.ls-subswrap { position: relative; }
.ls-subs a { border-radius: 12px; border-color: #ead9c8; background: #fffaf6; padding: 6px 16px 6px 6px; min-height: 60px; }
.ls-subs a:hover { border-color: #d9b993; }
.ls-subs__img, .ls-subs__all { width: 40px; height: 48px; border-radius: 8px; }
.ls-subs a[aria-current='page'] { background: var(--ui-accent); border-color: var(--ui-accent); }
.ls-subs a[aria-current='page'] span:not(.ls-subs__img, .ls-subs__all), .ls-subs a[aria-current='page'] small { color: #fff6f0; }
.ls-subsarrow { position: absolute; z-index: 2; top: 50%; translate: 0 -50%; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: #fffaf6; color: var(--ui-accent); border: 1px solid #e3cdb7; box-shadow: 0 6px 16px -10px rgba(98, 26, 63, 0.45); transition: opacity var(--ui-dur-base) var(--ui-ease); }
.ls-subsarrow--prev { left: -14px; } .ls-subsarrow--prev svg { rotate: 90deg; }
.ls-subsarrow--next { right: -14px; } .ls-subsarrow--next svg { rotate: -90deg; }
.ls-subsarrow:disabled { opacity: 0; pointer-events: none; }
.ls-subsarrow:focus-visible { outline: var(--ui-ring-width) solid var(--ui-ring); outline-offset: 2px; }

/* ── Filters: a "Refine" panel; serif-led sections; custom checkboxes; counts as soft pills ── */
@media (min-width: 1100px) {
  .ls-rail { background: #fffaf6; border: 1px solid #ecdccb; border-radius: 16px; padding: 2px 18px 14px; box-shadow: 0 14px 34px -28px rgba(98, 26, 63, 0.45); }
}
.ls-railhead { display: flex; align-items: baseline; gap: 10px; padding: 16px 0 12px; border-bottom: 1px solid rgba(176, 138, 74, 0.4); }
.ls-railhead__t { font-family: var(--ui-font-display); font-size: 1.15rem; letter-spacing: 0.02em; color: var(--ui-accent); }
.ls-railhead__n { flex: 1; font-size: 12px; color: var(--ui-text-subtle); }
.ls-railhead__clear { border: 0; background: none; padding: 0; min-height: 32px; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--ui-accent); text-decoration: underline; text-underline-offset: 3px; }
.ls-facet { border-bottom-color: rgba(176, 138, 74, 0.22); }
.ls-facet__t { min-height: 50px; font-family: var(--ui-font-display); font-size: 1rem; text-transform: none; letter-spacing: 0.03em; font-weight: 400; color: #3a2a2c; }
.ls-facet__t svg { color: #b08a4a; }
.ls-opt { position: relative; min-height: 38px; padding: 0 8px; margin-inline: -8px; border-radius: 8px; transition: background-color var(--ui-dur-fast) var(--ui-ease); }
.ls-opt:hover { background: #f8ede6; }
.ls-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.ls-opt__box { width: 18px; height: 18px; flex: none; border-radius: 5px; border: 1.5px solid #c9ad8c; background: #fff; display: grid; place-items: center;
  transition: background-color var(--ui-dur-fast) var(--ui-ease), border-color var(--ui-dur-fast) var(--ui-ease); }
.ls-opt__box::after { content: ''; width: 9px; height: 5px; border: 2px solid #fff6f0; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform var(--ui-dur-fast) var(--ui-ease); }
.ls-opt input:checked + .ls-opt__box { background: var(--ui-accent); border-color: var(--ui-accent); }
.ls-opt input:checked + .ls-opt__box::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.ls-opt input:focus-visible + .ls-opt__box { outline: var(--ui-ring-width) solid var(--ui-ring); outline-offset: 2px; }
.ls-opt .ls-opt__box { flex: none; } /* the older .ls-opt span { flex: 1 } must not stretch the box */
.ls-opt__t { flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.3; padding-block: 4px; }
.ls-opt small { min-width: 26px; padding: 1px 7px; border-radius: 999px; background: #f4e8de; text-align: center; font-size: 11px; }
.ls-opt--more { display: none; }
.ls-facet.is-all .ls-opt--more, .ls-facet.is-finding .ls-opt--more { display: flex; }
.ls-showmore { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 0 2px; border: 0; background: none; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--ui-accent); }
.ls-showmore svg { width: 14px; height: 14px; transition: transform var(--ui-dur-base) var(--ui-ease); }
.ls-showmore[aria-expanded='true'] svg { transform: rotate(180deg); }
.ls-showmore:focus-visible { outline: var(--ui-ring-width) solid var(--ui-ring); outline-offset: 2px; border-radius: 4px; }
.ls-band span { border-radius: 10px; border-color: #e3cdb7; background: #fff; }
.ls-band input:checked + span { background: #f6e5ec; border-color: var(--ui-accent); }
.ls-swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ls-tree a { padding: 0 10px; margin-inline: -10px; border-radius: 8px; }
.ls-tree a:hover { background: #f8ede6; }
.ls-tree a[aria-current='page'] { background: #f6e5ec; }
.ls-stock { padding-block: 14px; }
/* Festive: the same panel, warmed; Playfair for the panel and section titles */
html.ls-festive .ls-rail { background: #fdf5ee; border-color: #e9d2bc; }
html.ls-festive .ls-railhead__t, html.ls-festive .ls-facet__t { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; }
html.ls-festive .ls-railhead__t { font-weight: 500; font-size: 1.25rem; }
@media (prefers-reduced-motion: reduce) {
  .ls-opt, .ls-opt__box, .ls-opt__box::after, .ls-showmore svg, .ls-subsarrow { transition: none; }
  .ls-hero__img { animation: none; }
}

/* ══ S2 second review, 9 Oct 2026 (owner): a slim category header; calmer, cleaner filters ══════
   Overrides the header and filter rules above; behaviour, colours and the card variation unchanged. */

/* ── Slim header: one band, no photograph; the ornament inline at the right ── */
.ls-hero.ls-hero--slim { display: flex; align-items: center; gap: 12px clamp(20px, 3vw, 44px); flex-wrap: nowrap; min-height: 0;
  padding: clamp(16px, 1.8vw, 24px) clamp(18px, 2.6vw, 36px); grid-template-columns: none; }
.ls-hero--slim .ls-hero__text { display: grid; justify-items: start; align-content: center; gap: 4px; padding: 0; text-align: left; flex: 0 1 auto; min-width: 0; max-width: none; }
.ls-hero--slim .ls-hero__eyebrow { gap: 8px; letter-spacing: 0.26em; font-size: 10.5px; }
.ls-hero--slim .ls-hero__eyebrow::after { display: none; }
.ls-hero--slim .ls-hero__crest { color: var(--lh-gold); }
.ls-hero--slim .ls-hero__crest svg { width: 20px; height: auto; display: block; }
.ls-hero--slim .ls-title { font-size: clamp(1.9rem, 2.9vw, 2.6rem); line-height: 1.05; max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-hero--slim .ls-meta { flex: 1 1 auto; justify-content: flex-start; align-self: center; margin: 0; padding-left: clamp(14px, 2vw, 28px); border-left: 1px solid color-mix(in srgb, var(--lh-gold) 45%, transparent); font-size: var(--ui-text-sm); row-gap: 4px; }
.ls-hero--slim .ls-hero__orn { position: relative; left: auto; bottom: auto; translate: none; width: auto; height: clamp(48px, 5vw, 76px); padding: 0; flex: none; margin-left: auto; opacity: 0.55; align-self: flex-end; margin-bottom: -4px; }
html.ls-festive .ls-hero--slim .ls-hero__orn { opacity: 0.5; }
@media (max-width: 1099px) { .ls-hero--slim .ls-hero__orn { height: 52px; } }
/* Phones: the title with its eyebrow; the facts as one compact line below; the ornament faint behind, at the right */
@media (max-width: 719px) {
  .ls-head { gap: var(--ui-space-3); padding-block: var(--ui-space-2) var(--ui-space-3); }
  .ls-hero.ls-hero--slim { display: grid; gap: 6px; padding: 12px 14px 12px; position: relative; }
  .ls-hero--slim .ls-hero__text { max-width: 100%; gap: 2px; position: relative; z-index: 1; }
  .ls-hero--slim .ls-hero__eyebrow { font-size: 9.5px; }
  .ls-hero--slim .ls-hero__eyebrow i { display: none; }
  .ls-hero--slim .ls-title { font-size: 1.65rem; }
  .ls-hero--slim .ls-meta { position: relative; z-index: 1; padding-left: 0; border-left: 0; font-size: 11.5px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
  .ls-hero--slim .ls-meta::-webkit-scrollbar { display: none; }
  .ls-hero--slim .ls-hero__orn { position: absolute; right: 6px; bottom: 4px; height: 44px; opacity: 0.28; margin: 0; }
  html.ls-festive .ls-hero--slim .ls-hero__orn { opacity: 0.3; }
  /* Sub-category chips, slimmer on a phone */
  .ls-subs a { min-height: 44px; padding: 4px 12px 4px 4px; gap: 8px; }
  .ls-subs__img, .ls-subs__all { width: 30px; height: 36px; border-radius: 6px; }
}

/* ── Filters: same panel colours; less chrome, clearer selected states ── */
@media (min-width: 1100px) { .ls-rail { border-color: rgba(176, 138, 74, 0.2); border-radius: 14px; padding: 0 16px 10px; box-shadow: 0 10px 28px -26px rgba(98, 26, 63, 0.4); } }
.ls-railhead { padding: 14px 0 10px; border-bottom-color: rgba(176, 138, 74, 0.26); }
.ls-railhead__t { font-size: 1.05rem; }
html.ls-festive .ls-railhead__t { font-size: 1.12rem; }
.ls-facet { border-bottom-color: rgba(176, 138, 74, 0.14); }
.ls-facet:last-child { border-bottom: 0; }
.ls-facet__t { min-height: 44px; font-size: 0.95rem; }
.ls-panel__in { padding-bottom: 10px; gap: 0; }
/* Options: a finer checkbox; the chosen row reads at a glance; counts quiet unless chosen */
.ls-opt { min-height: 34px; gap: 10px; }
.ls-opt__box { width: 16px; height: 16px; border-radius: 4px; border-color: #ccb59a; }
.ls-opt__box::after { width: 8px; height: 4px; }
.ls-opt small { min-width: 0; padding: 0; background: none; color: var(--ui-text-subtle); font-size: 11.5px; }
.ls-opt:has(input:checked) { background: color-mix(in srgb, var(--ui-accent) 7%, transparent); }
.ls-opt:has(input:checked) .ls-opt__t { color: var(--ui-accent); font-weight: 600; }
.ls-opt:has(input:checked) small { color: var(--ui-accent); }
.ls-opt[data-zero] { opacity: 0.4; }
/* Category tree: the current one marked by a gold bar, not a block */
.ls-tree a { min-height: 34px; }
.ls-tree a[aria-current='page'] { background: none; box-shadow: inset 2px 0 0 var(--ui-accent); padding-left: 12px; }
.ls-tree .ls-tree__sub { border-left-color: rgba(176, 138, 74, 0.25); }
.ls-stock { padding-block: 10px; }
/* Price: soft pills instead of boxed tiles; the count follows the label */
.ls-bands { grid-template-columns: 1fr; gap: 6px; }
.ls-band span { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; padding: 6px 14px; text-align: left;
  border: 0; border-radius: 999px; background: color-mix(in srgb, #b08a4a 10%, transparent); font-size: var(--ui-text-sm); transition: background-color var(--ui-dur-fast) var(--ui-ease), color var(--ui-dur-fast) var(--ui-ease); }
.ls-band small { display: inline; color: var(--ui-text-subtle); font-size: 11.5px; }
.ls-band:hover span { background: color-mix(in srgb, #b08a4a 16%, transparent); }
.ls-band input:checked + span { background: var(--ui-accent); color: #fff6f0; border: 0; }
.ls-band input:checked + span small { color: rgba(255, 246, 240, 0.8); }
.ls-band input:focus-visible + span { outline: var(--ui-ring-width) solid var(--ui-ring); outline-offset: 2px; }
/* Colour: tighter grid; the chosen swatch ringed */
.ls-swatches { gap: 10px 4px; }
.ls-sw i { width: 26px; height: 26px; }
/* Phone sheet: everything stays at least 44px to tap */
.ls-sheet .ls-opt, .ls-sheet .ls-tree a, .ls-sheet .ls-band span, .ls-sheet .ls-facet__t { min-height: 44px; }
@media (prefers-reduced-motion: reduce) { .ls-band span { transition: none; } }
/* Slim header, layout fixes: the title keeps its width; the facts take what is left (desktop),
   go to a second row (tablets) and wrap (phones). */
.ls-hero--slim .ls-hero__text { flex: none; max-width: 52%; }
.ls-hero--slim .ls-title { overflow: visible; }
.ls-hero--slim .ls-meta { flex: 1 1 auto; min-width: 0; }
@media (min-width: 1100px) { .ls-hero--slim .ls-hero__orn { height: clamp(46px, 4vw, 64px); } }
@media (min-width: 720px) and (max-width: 1099px) {
  .ls-hero.ls-hero--slim { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'text orn' 'meta orn'; gap: 8px 20px; align-items: end; }
  .ls-hero--slim .ls-hero__text { grid-area: text; max-width: 100%; }
  .ls-hero--slim .ls-meta { grid-area: meta; padding-left: 0; border-left: 0; flex-wrap: wrap; }
  .ls-hero--slim .ls-hero__orn { grid-area: orn; align-self: end; height: 64px; }
}
@media (max-width: 719px) {
  .ls-hero--slim .ls-hero__text { max-width: 100%; }
  .ls-hero--slim .ls-meta { flex-wrap: wrap; overflow: visible; white-space: normal; row-gap: 2px; }
  .ls-hero--slim .ls-meta > span { white-space: nowrap; }
  .ls-hero--slim .ls-hero__orn { height: 38px; opacity: 0.22; right: 4px; bottom: 3px; }
  html.ls-festive .ls-hero--slim .ls-hero__orn { opacity: 0.24; }
}
/* The slim ornament's size, stated above the earlier header's ornament rules (they were more specific). */
.ls-head .ls-hero.ls-hero--slim .ls-hero__orn { position: relative; left: auto; right: auto; bottom: auto; translate: none; width: auto; padding: 0; height: clamp(46px, 4vw, 64px); flex: none; margin: 0 0 -4px auto; align-self: flex-end; }
@media (min-width: 720px) and (max-width: 1099px) { .ls-head .ls-hero.ls-hero--slim .ls-hero__orn { height: 64px; margin: 0; } }
@media (max-width: 719px) { .ls-head .ls-hero.ls-hero--slim .ls-hero__orn { position: absolute; right: 4px; bottom: 3px; height: 38px; margin: 0; } }
/* A chosen option never dims, even when other filters bring its count to 0. */
.ls-opt[data-zero]:has(input:checked), .ls-band[data-zero]:has(input:checked), .ls-sw[data-zero]:has(input:checked) { opacity: 1; }

/* ── Owner, 9 Oct 2026 (third review): the filter panel a shade lighter, same identity ── */
@media (min-width: 1100px) { .ls-rail { background: #fffcf9; } }
html.ls-festive .ls-rail { background: #fef9f4; }
/* The empty checkbox's outline at 3:1 against the panel (it was about 1.9:1). */
.ls-opt__box { border-color: #a8875f; }

/* ── Category navigation, text-only "jewel" pills (owner, 9 Oct 2026) ──────────────────────────
   No images. Name and count on a light pill with a gold hairline; the current one solid plum with a
   small gold diamond. One slim row over a fine gold baseline; it scrolls sideways when it overflows. */
.ls-subswrap { padding-bottom: 10px; }
.ls-subswrap::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(176, 138, 74, 0.45), rgba(176, 138, 74, 0.12) 70%, transparent); pointer-events: none; }
.ls-subswrap .ls-subs { gap: 8px; padding-block: 2px; align-items: center; }
.ls-subswrap .ls-subs a { flex: none; display: inline-flex; align-items: center; gap: 0; min-height: 38px; padding: 0 16px; border-radius: 999px;
  border: 1px solid rgba(176, 138, 74, 0.38); background: #fffcf9; box-shadow: none; color: #3a2a2c; text-decoration: none; white-space: nowrap;
  font-family: var(--ui-font-display); font-size: 0.92rem; letter-spacing: 0.02em;
  transition: background-color var(--ui-dur-base) var(--ui-ease), border-color var(--ui-dur-base) var(--ui-ease), color var(--ui-dur-base) var(--ui-ease); }
.ls-subswrap .ls-subs a > span { color: inherit; font-weight: inherit; }
.ls-subswrap .ls-subs a small { display: inline-flex; align-items: center; margin-left: 10px; padding-left: 10px; border-left: 1px solid rgba(176, 138, 74, 0.38); font-family: var(--ui-font-body); font-size: 11.5px; color: var(--ui-text-subtle); font-variant-numeric: tabular-nums; }
.ls-subs__gem { display: none; width: 6px; height: 6px; margin-right: 9px; transform: rotate(45deg); background: #d6b06a; flex: none; }
.ls-subswrap .ls-subs a:hover { border-color: color-mix(in srgb, var(--ui-accent) 45%, transparent); background: color-mix(in srgb, var(--ui-accent) 5%, #fffcf9); transform: none; box-shadow: none; }
.ls-subswrap .ls-subs a:active { transform: scale(0.97); }
.ls-subswrap .ls-subs a:focus-visible { outline: var(--ui-ring-width) solid var(--ui-ring); outline-offset: 2px; }
.ls-subswrap .ls-subs a[aria-current='page'] { background: var(--ui-accent); border-color: var(--ui-accent); color: #fff6f0; }
.ls-subswrap .ls-subs a[aria-current='page'] .ls-subs__gem { display: block; }
.ls-subswrap .ls-subs a[aria-current='page'] small { color: rgba(255, 246, 240, 0.78); border-left-color: rgba(214, 176, 106, 0.6); }
html.ls-festive .ls-subswrap .ls-subs a:not([aria-current='page']) { background: #fef9f4; }
html.ls-festive .ls-subswrap .ls-subs a:not([aria-current='page']) { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; }
html.ls-festive .ls-subswrap .ls-subs a[aria-current='page'] { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; }
.ls-subswrap .ls-subsarrow { width: 32px; height: 32px; top: calc(50% - 5px); }
@media (max-width: 719px) {
  .ls-subswrap .ls-subs a { min-height: 44px; padding: 0 15px; font-size: 0.9rem; }
  .ls-subswrap { padding-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { .ls-subswrap .ls-subs a { transition: none; } }
/* Tighter: the row's own padding trimmed; desktop pills 36px, phone pills stay 44px to tap. */
.ls-subswrap { padding-bottom: 8px; }
.ls-subswrap .ls-subs { padding-block: 0; }
.ls-subswrap .ls-subs a { min-height: 36px; }
@media (max-width: 719px) {
  .ls-subswrap { padding-bottom: 5px; }
  .ls-subswrap .ls-subs a { min-height: 44px; }
}

/* ── Owner, 9 Oct 2026 (final spacing pass): nothing said twice, no idle space ────────────────────
   The category header band is unchanged (owner). The count lives in the header facts only (the
   toolbar keeps it for screen readers); the gaps around the header, pills, toolbar and grid shrink. */
.ls-bar { justify-content: flex-end; }
/* Desktop: Sort at the right, beside the active filters (one row instead of two). */
@media (min-width: 1100px) {
  .ls-results { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--ui-space-4); }
  .ls-results > .ls-bar { grid-column: 2; grid-row: 1; padding-bottom: var(--ui-space-3); border-bottom: 0; }
  .ls-results > .ls-chips { grid-column: 1; grid-row: 1; padding: 0 0 var(--ui-space-3); align-self: center; }
  .ls-results > [data-resbody] { grid-column: 1 / -1; grid-row: 2; border-top: 1px solid var(--ui-border); }
}
@media (min-width: 720px) { .ls-head { gap: 14px; padding-block: 16px 14px; } }
/* Tablet: Filter at the left, Sort at the right, in a slimmer sticky row. */
@media (min-width: 720px) and (max-width: 1099px) { .ls-bar { justify-content: space-between; padding-block: 6px; } }
/* Phones: no breadcrumb row (Home is the logo; the parent is the "All" pill and the header's own
   eyebrow), tighter gaps, and Filter and Sort as two equal halves of one 44px row. */
@media (max-width: 719px) {
  .ls-head { gap: var(--ui-space-2); padding-block: var(--ui-space-2); }
  .ls-head > .ls-crumbs { display: none; }
  .ls-subswrap { padding-bottom: 0; }
  .ls-subswrap::after { display: none; }
  .ls-bar { padding-block: 6px; gap: var(--ui-space-2); }
  .ls-bar > .ls-tool--filter { flex: 1 1 0; justify-content: center; }
  .ls-bar > .ls-sortwrap { flex: 1 1 0; display: flex; }
  .ls-bar > .ls-sortwrap > .ls-tool--sort { flex: 1; justify-content: center; }
  .ls-grid { padding-top: var(--ui-space-3); }
  .ls-chips { padding-top: var(--ui-space-2); }
}