/* ==========================================================================
   LUXORA — shop / category / search page (owner: PAGE-SHOP)
   DESIGN §8.2 · §7.9 (rail + sheet) · §7.10 (toolbar + sort) · §7.16 · §7.18
   Tokens only. Logical properties only. Shared components come from
   components.css (.chip .checkbox .size-chip .accordion .tabs .pagination
   .empty-state .btn .input); this file adds page layout + the few page-only
   pieces (rail, toolbar, sort menu, dual range, bottom sheet).
   ========================================================================== */

.shop { display: flex; flex-direction: column; }

/* --------------------------------------------------------------------------
   01  Page head — breadcrumbs · title + count · note · sub-category chips · tabs
   -------------------------------------------------------------------------- */
.shop__headwrap { padding-block-start: var(--sp-5); }
.shop__crumbs { margin-block-end: var(--sp-3); min-block-size: 1.2em; }
.shop__crumbs .skeleton--line { margin: 0; }
.shop__head { padding-block: var(--sp-6) var(--sp-6); }
.shop__titlerow { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-4); }
.shop__title { margin: 0; min-inline-size: 0; overflow-wrap: anywhere; }
.shop__title .skeleton--line { margin: 0; }
.shop__title .latin { font-family: var(--font-latin-display); font-size: 1.08em; }
.shop__count {
  margin: 0;
  font-family: var(--font-latin-body);
  font-variant-numeric: lining-nums tabular-nums;
  font-size: var(--fs-small);
  color: var(--muted);
  white-space: nowrap;
  unicode-bidi: plaintext;
}
html[lang="ar"] .shop__count { font-family: var(--font-body); }
.shop__count .num { font-family: var(--font-latin-body); }
.shop__note { margin: var(--sp-3) 0 0; max-inline-size: 60ch; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); }
html[lang="ar"] .shop__note { max-inline-size: 34rem; }

/* refine-search field (search results only) */
.shop__refine { position: relative; max-inline-size: 480px; margin-block-start: var(--sp-5); }
.shop__refine-input { padding-inline-end: var(--hit); }
.shop__refine-btn { position: absolute; inset-inline-end: -12px; inset-block-start: calc(var(--input-h) / 2 - var(--hit) / 2); }

/* sub-category chips */
.shop__subcats { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-start: var(--sp-5); }
.shop__subcats .chip { text-decoration: none; }
.shop__subcats .num { color: var(--muted); font-size: var(--fs-caption); }
.chip--active .num, .shop__subcats .chip--active .num { color: var(--accent-ink); opacity: .8; }

/* quick category tabs */
.shop__tabs { margin-block-start: var(--sp-2); }
.shop__tabs .tab { display: inline-flex; align-items: center; min-block-size: 40px; padding-block: 0 12px; }

/* --------------------------------------------------------------------------
   02  Sticky toolbar — DESIGN §7.10
   -------------------------------------------------------------------------- */
.shop__toolbar {
  position: sticky;
  inset-block-start: var(--header-h-scrolled);
  z-index: var(--z-toolbar);
  background: var(--bg);
  border-block: 1px solid var(--line);
  margin-block-start: var(--sp-5);
}
.shop__toolbar-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--sp-5);
  block-size: var(--toolbar-h);
}
.shop__toolbar-start, .shop__toolbar-end { display: flex; align-items: center; gap: var(--sp-4); block-size: 100%; }
.shop__toolbar-mid { min-inline-size: 0; block-size: 100%; display: flex; align-items: center; }

/* "Filters" toggle with the oxblood count */
.shop__filters-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  block-size: 100%;
  font-size: var(--fs-small);
  color: var(--ink);
  transition: color var(--dur-2);
}
.shop__filters-btn:hover { color: var(--accent); }
.shop__filters-btn .icon { inline-size: 18px; block-size: 18px; }
.shop__filters-btn--mobile { display: none; }
.shop__fcount {
  display: inline-grid;
  place-items: center;
  min-inline-size: 16px;
  block-size: 16px;
  padding-inline: 4px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-latin-body);
  font-variant-numeric: lining-nums tabular-nums;
  font-size: 10px;
  line-height: 1;
}
.shop__fcount[hidden] { display: none; }

/* applied chips row */
.shop__applied {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  inline-size: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
  padding-block: var(--sp-2);
}
.shop__applied::-webkit-scrollbar { display: none; }
.shop__applied .chip { flex: none; }
.shop__applied .chip__remove { position: relative; }
.shop__applied .chip__remove::before { content: ''; position: absolute; inset: -15px; }   /* 44px hit on the × */
.shop__applied .chip .num { font-family: var(--font-latin-body); }
.shop__applied .btn--ghost { flex: none; }
.shop__applied .chip__swatch { --swatch: var(--chip-swatch, var(--surface-3)); }

/* density toggle (pill track) */
.shop__density {
  display: none;
  align-items: center;
  gap: 2px;
  block-size: 32px;
  padding: 2px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
}
.shop__density-btn {
  display: inline-grid;
  place-items: center;
  inline-size: 28px;
  block-size: 28px;
  border-radius: var(--r-pill);
  color: var(--muted);
  transition: color var(--dur-1), background-color var(--dur-1);
}
.shop__density-btn .icon { inline-size: 16px; block-size: 16px; }
.shop__density-btn:hover { color: var(--ink); }
.shop__density-btn[aria-pressed="true"] { color: var(--ink); background: var(--bg); }
.shop__density-btn--6 { display: none; }
@media (min-width: 1024px) { .shop__density { display: inline-flex; } }
@media (min-width: 1536px) { .shop__density-btn--6 { display: inline-grid; } }

/* sort button + dropdown */
.shop__sort { position: relative; block-size: 100%; display: flex; align-items: center; }
.shop__sort-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  block-size: 100%;
  font-size: var(--fs-small);
  color: var(--ink);
  white-space: nowrap;
  transition: color var(--dur-2);
}
.shop__sort-btn:hover { color: var(--accent); }
.shop__sort-btn .icon { inline-size: 16px; block-size: 16px; transition: transform var(--dur-2) var(--ease-in-out); }
.shop__sort-btn[aria-expanded="true"] .icon { transform: rotate(180deg); }
.shop__sort-label { color: var(--muted); }
.shop__sort-menu {
  position: absolute;
  inset-block-start: calc(100% + 1px);
  inset-inline-end: 0;
  z-index: var(--z-dropdown);
  inline-size: 240px;
  padding-block: var(--sp-2);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  opacity: 0;
  translate: 0 -6px;
  transition: opacity 120ms var(--ease-in), translate 120ms var(--ease-in);
}
.shop__sort-menu[hidden] { display: none; }
.shop__sort-menu.is-open { opacity: 1; translate: 0 0; transition: opacity 200ms var(--ease-out), translate 200ms var(--ease-out); }
.shop__sort-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  inline-size: 100%;
  min-block-size: var(--hit);
  padding-inline: var(--sp-4);
  font-size: var(--fs-small);
  color: var(--ink-2);
  transition: background-color var(--dur-1), color var(--dur-1);
}
.shop__sort-row:hover, .shop__sort-row:focus-visible { background: var(--surface-2); color: var(--ink); outline: none; }
.shop__sort-row[aria-checked="true"] { color: var(--ink); }
.shop__sort-row .icon { inline-size: 16px; block-size: 16px; color: var(--accent); opacity: 0; }
.shop__sort-row[aria-checked="true"] .icon { opacity: 1; }

/* mobile applied chips row (in flow, under the sticky bar) */
.shop__applied-row { display: none; border-block-end: 1px solid var(--line); }
.shop__applied-row .shop__applied { padding-block: var(--sp-2); }

/* --------------------------------------------------------------------------
   03  Body — rail + results — DESIGN §7.9 / §7.8
   -------------------------------------------------------------------------- */
.shop__body { display: grid; grid-template-columns: minmax(0, 1fr); padding-block: var(--sp-6) var(--section-y); }
.shop__rail { display: none; }
.shop__results { min-inline-size: 0; }
.shop__results[aria-busy="true"] .shop__pagination { visibility: hidden; }

@media (min-width: 1024px) {
  .shop__body { padding-block-start: var(--sp-7); column-gap: var(--sp-7); }
  .shop__body.has-rail { grid-template-columns: var(--rail-w) minmax(0, 1fr); }
  .shop__body.has-rail .shop__rail {
    display: block;
    position: sticky;
    inset-block-start: calc(var(--header-h-scrolled) + var(--toolbar-h) + var(--sp-5));
    max-block-size: calc(100vh - var(--header-h-scrolled) - var(--toolbar-h) - var(--sp-5));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    padding-block-end: var(--sp-6);
  }
  .shop__rail::-webkit-scrollbar { display: none; }
  /* density inside a rail layout: 4 is allowed (DESIGN toggle 3 | 4 | 6) */
  .shop__body.has-rail .grid-products[data-density="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* results grid transitions — DESIGN §5.8 (dim while swapping, cards fade back staggered) */
.shop__grid { transition: opacity 160ms var(--ease-in-out); }
.shop__grid.is-busy { opacity: .4; pointer-events: none; }
.shop__grid.is-fresh > .card { animation: shop-card-in var(--dur-4) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes shop-card-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }

/* empty / error / not-found */
.shop__state[hidden] { display: none; }
.shop__state .empty-state { padding-block: var(--sp-9); }
.shop__suggest { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-block-start: var(--sp-4); }
.shop__suggest .chip { text-decoration: none; }
.shop__suggest-label { inline-size: 100%; margin-block-end: var(--sp-1); font-size: var(--fs-eyebrow); font-weight: var(--fw-medium); letter-spacing: var(--ls-eyebrow); text-transform: var(--tt-caps); color: var(--muted); }
.shop__state .empty-state > .btn { margin-block-start: var(--sp-4); }

/* --------------------------------------------------------------------------
   04  Filter panel (rail + sheet share it) — DESIGN §7.9
   -------------------------------------------------------------------------- */
.shop__panel .accordion__trigger { font-size: var(--fs-body); }
.shop__panel .accordion__body { padding-block-end: var(--sp-2); }
.shop__panel .accordion__body > :last-child { margin-block-end: var(--sp-4); }
.shop__group-count { margin-inline-start: auto; margin-inline-end: var(--sp-3); font-family: var(--font-latin-body); font-variant-numeric: tabular-nums; font-size: var(--fs-caption); color: var(--accent); }

.shop__list { list-style: none; margin: 0; padding: 0; }
.shop__list--scroll { max-block-size: 352px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; padding-inline-end: var(--sp-2); }
.shop__list .checkbox { inline-size: 100%; }
.shop__list .checkbox__label { display: flex; align-items: baseline; gap: var(--sp-2); flex: 1 1 auto; min-inline-size: 0; }
.shop__opt-name { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop__opt-count { font-family: var(--font-latin-body); font-variant-numeric: lining-nums tabular-nums; font-size: var(--fs-caption); color: var(--muted); }
.shop__list .checkbox.is-zero { color: var(--muted); }
.shop__list .checkbox.is-zero .checkbox__box { border-color: var(--line); }
.shop__list-sub { margin-block: var(--sp-2) var(--sp-1); font-size: var(--fs-eyebrow); font-weight: var(--fw-medium); letter-spacing: var(--ls-eyebrow); text-transform: var(--tt-caps); color: var(--muted); }
.shop__list-sub:first-child { margin-block-start: 0; }
.shop__none { margin: 0; font-size: var(--fs-caption); color: var(--muted); }

/* search-within (maisons) */
.shop__within { position: relative; margin-block: var(--sp-1) var(--sp-3); }
.shop__within .input { block-size: 40px; padding-inline-end: var(--sp-5); font-size: var(--fs-small); }
.shop__within .icon { position: absolute; inset-inline-end: 0; inset-block-start: 10px; inline-size: 18px; block-size: 18px; color: var(--muted); pointer-events: none; }

/* colours: 20px swatch + name + count */
.shop__color {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  inline-size: 100%;
  min-block-size: 32px;
  font-size: var(--fs-small);
  color: var(--ink);
  text-align: start;
  transition: color var(--dur-1);
}
.shop__color .swatch__dot { --swatch-size: 20px; flex: none; }
.shop__color:hover .swatch__dot { box-shadow: 0 0 0 1px var(--ink); }
.shop__color[aria-pressed="true"] .swatch__dot { box-shadow: 0 0 0 1px var(--line-strong), 0 0 0 3px var(--bg), 0 0 0 4px var(--ink); }
.shop__color[aria-pressed="true"] .shop__opt-name { font-weight: var(--fw-medium); }
.shop__color.is-zero { color: var(--muted); }
.shop__color.is-zero .swatch__dot { opacity: .45; }
.shop__color .shop__opt-name { flex: 1 1 auto; }
@media (max-width: 1023.98px) { .shop__color { min-block-size: var(--hit); } }

/* sizes: EU ascending, always LTR */
.shop__sizes { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.shop__sizes .size-chip.is-zero { color: var(--muted); border-color: var(--line); }

/* price: dual-thumb range + min/max inputs — DESIGN §7.9 */
.shop__range { position: relative; block-size: var(--hit); margin-block: var(--sp-2) var(--sp-3); }
.shop__range-track { position: absolute; inset-inline: 7px; inset-block-start: 50%; block-size: 1px; background: var(--line-strong); }
.shop__range-fill { position: absolute; inset-inline-start: var(--lo, 0%); inset-inline-end: calc(100% - var(--hi, 100%)); inset-block-start: 0; block-size: 1px; background: var(--ink); }
.shop__range input[type="range"] {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;
}
.shop__range input[type="range"]::-webkit-slider-runnable-track { background: transparent; block-size: 100%; }
.shop__range input[type="range"]::-moz-range-track { background: transparent; block-size: 100%; }
.shop__range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  inline-size: 14px;
  block-size: 14px;
  margin-block-start: 15px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 3px var(--bg);
  pointer-events: auto;
  cursor: grab;
}
.shop__range input[type="range"]::-moz-range-thumb {
  inline-size: 14px;
  block-size: 14px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 3px var(--bg);
  pointer-events: auto;
  cursor: grab;
}
.shop__range input[type="range"]:focus-visible { outline: none; }
.shop__range input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--focus); outline-offset: 3px; }
.shop__range input[type="range"]:focus-visible::-moz-range-thumb { outline: 2px solid var(--focus); outline-offset: 3px; }
.shop__price-fields { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; column-gap: var(--sp-3); }
.shop__price-fields .field__label { font-size: var(--fs-caption); letter-spacing: 0; text-transform: none; color: var(--muted); font-weight: 400; }
.shop__price-fields .input { block-size: 40px; font-family: var(--font-latin-body); font-variant-numeric: lining-nums tabular-nums; }
.shop__price-dash { padding-block-end: 12px; color: var(--muted); }
.shop__price-cur { display: block; margin-block-start: var(--sp-2); font-size: var(--fs-caption); color: var(--muted); }
.shop__price-apply { margin-block-start: var(--sp-3); }

/* clear all at the bottom of the panel */
.shop__panel-foot { padding-block-start: var(--sp-4); }

/* --------------------------------------------------------------------------
   05  Bottom sheet (mobile filters · mobile sort) — DESIGN §7.9
   -------------------------------------------------------------------------- */
.sheet { position: fixed; inset: 0; z-index: var(--z-drawer); }
.sheet[hidden] { display: none; }
.sheet__scrim { position: absolute; inset: 0; background: var(--scrim); opacity: 0; transition: opacity 240ms var(--ease-in-out); }
.sheet__panel {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: flex;
  flex-direction: column;
  block-size: var(--sheet-h);
  max-block-size: 100dvh;
  background: var(--surface);
  box-shadow: var(--shadow-2);
  translate: 0 100%;
  transition: translate 200ms var(--ease-in);
  touch-action: none;
}
.sheet.is-open .sheet__scrim { opacity: 1; }
.sheet.is-open .sheet__panel { translate: 0 0; transition: translate var(--dur-3) var(--ease-out); will-change: transform; }
.sheet.is-closing .sheet__scrim { opacity: 0; }
.sheet.is-dragging .sheet__panel { transition: none; }
.sheet__handle { display: grid; place-items: center; inline-size: 100%; block-size: var(--hit); flex: none; cursor: grab; }
.sheet__handle span { inline-size: 36px; block-size: 4px; border-radius: var(--r-pill); background: var(--line-strong); }
.sheet__head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); block-size: 56px; padding-inline: var(--sp-4); border-block-end: 1px solid var(--line); }
.sheet__title { margin: 0; }
.sheet__close { margin-inline-end: -12px; }
.sheet__body { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--sp-4) var(--sp-4); touch-action: pan-y; }
.sheet__foot { flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + var(--safe-b)); border-block-start: 1px solid var(--line); background: var(--surface); }
.sheet__foot .btn--ghost { min-inline-size: 0; padding-inline: var(--sp-3); }
.sheet--sort .sheet__panel { block-size: auto; max-block-size: 80svh; }
.sheet--sort .sheet__body { padding-block-end: calc(var(--sp-2) + var(--safe-b)); }
.sheet--sort .shop__sort-row { min-block-size: 52px; padding-inline: 0; font-size: var(--fs-body); border-block-end: 1px solid var(--line); }
.sheet--sort .shop__sort-row:last-child { border-block-end: 0; }
.sheet--sort .shop__sort-row:hover { background: transparent; }
.sheet .shop__panel .accordion__trigger { min-block-size: 56px; }

/* --------------------------------------------------------------------------
   06  Pagination extras — DESIGN §7.18
   -------------------------------------------------------------------------- */
.shop__pagination[hidden] { display: none; }
.shop__pagination .pagination__load { margin-block-end: var(--sp-2); }

/* --------------------------------------------------------------------------
   07  Mobile (<1024): Filter · Sort bar above the title band — DESIGN §8.2
   -------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  .shop__toolbar { order: -2; margin-block-start: 0; inset-block-start: var(--header-h-mobile); border-block-start: 0; }
  .shop__applied-row { order: -1; }
  .shop__applied-row:not([hidden]) { display: block; }
  .shop__toolbar-inner { grid-template-columns: 1fr 1fr; column-gap: 0; block-size: var(--toolbar-h-mobile); }
  .shop__toolbar-mid { display: none; }
  .shop__toolbar-start, .shop__toolbar-end { justify-content: center; }
  .shop__toolbar-start { border-inline-end: 1px solid var(--line); }
  .shop__filters-btn { display: none; inline-size: 100%; justify-content: center; }
  .shop__filters-btn--mobile { display: inline-flex; }
  .shop__sort { inline-size: 100%; }
  .shop__sort-btn { inline-size: 100%; justify-content: center; }
  .shop__sort-menu { display: none !important; }   /* mobile uses the sort sheet */
  .shop__headwrap { padding-block-start: var(--sp-4); }
  .shop__head { padding-block: var(--sp-4) var(--sp-5); }
  .shop__subcats, .shop__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .shop__subcats::-webkit-scrollbar { display: none; }
  .shop__subcats .chip { flex: none; }
  .shop__body { padding-block-start: var(--sp-4); }
}
@media (max-width: 479.98px) {
  .shop__title { font-size: var(--fs-h2); }
  .sheet__foot { grid-template-columns: auto minmax(0, 1fr); }
}