/* The hung wall: each rug on a gallery-white mat with a wall label, drawn to scale where the real size is known.
   Ported from the approved Direction 1 mockup (hung wall section). --m is pixels per metre; --l and --w are the rug's
   real length and width in centimetres, set inline by blocks/hung-rug/render.php. Fallbacks after each token keep the
   wall working if a token is renamed. */

.wall {
  --m: 100px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--sp-6, 32px) var(--sp-6, 32px);
  padding: var(--sp-5, 24px) var(--sp-5, 24px) var(--sp-7, 48px);
  background: var(--c-wall);
}

@media (min-width: 1000px) and (max-width: 1299px) {
  .wall { --m: 88px; }
}

@media (min-width: 700px) and (max-width: 999px) {
  .wall { --m: 84px; }
}

/* the 1 m scale bar above the wall; it sets --m itself because it sits outside .wall */
.scale-bar {
  --m: 100px;
  margin: var(--sp-4, 16px) 0 0;
  font: 400 var(--fs-small, 0.8125rem) / 1.4 var(--font-ui, system-ui, sans-serif);
  color: var(--c-muted);
}

.scale-bar span {
  display: inline-block;
  width: var(--m);
  height: 2px;
  margin-right: var(--sp-3, 12px);
  vertical-align: middle;
  background: var(--c-text);
}

@media (min-width: 1000px) and (max-width: 1299px) {
  .scale-bar { --m: 88px; }
}

@media (min-width: 700px) and (max-width: 999px) {
  .scale-bar { --m: 84px; }
}

/* one hung rug */
.hung-rug {
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
  margin: 0;
  width: 11rem;
}

.hung-rug.is-to-scale {
  width: max(calc(var(--w) / 100 * var(--m) + var(--mat-pad, 10px) * 2), 168px);
  max-width: 100%;   /* responsive audit 2026-10-12: a 2.6 m rug at 84 px/m was 250 px in a 155 px column (page wider than the screen, 700 to 1040 px) */
}

.mat {
  display: block;
  box-sizing: content-box;
  padding: var(--mat-pad, 10px);
  background: var(--c-mat);
  box-shadow: var(--shadow-mat);
}

.hung-rug.is-to-scale .mat {
  width: calc(var(--w) / 100 * var(--m));
  max-width: calc(100% - var(--mat-pad, 10px) * 2);
  aspect-ratio: var(--w) / var(--l);
  margin-inline: auto;
}

.hung-rug.is-tile .mat {
  box-sizing: border-box;
  aspect-ratio: 3 / 4;
}

.rug-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.rug-photo-missing {
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--c-muted);
  font: 400 var(--fs-small, 0.8125rem) / 1.4 var(--font-ui, system-ui, sans-serif);
}

/* the wall label */
.wall-label {
  padding: var(--sp-4, 16px) 2px 0;
  font: 400 var(--fs-small, 0.8125rem) / 1.55 var(--font-ui, system-ui, sans-serif);
  color: var(--c-muted);
}

.wall-label > * {
  display: block;
}

.wall-label-name {
  margin: 0 0 var(--sp-2, 8px);
  font: 500 var(--fs-label-name, 1.375rem) / 1.2 var(--font-display, Georgia, serif);
  color: var(--c-text);
  text-decoration: none;
}

/* the whole tile opens the rug page; the button and the enquiry link sit above that layer */
.wall-label-name::after {
  content: "";
  position: absolute;
  inset: 0;
}

.wall-label-name:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.wall-label-name:focus-visible {
  outline: none;
}

.wall-label-name:focus-visible::after {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
}

.wall-label .sarabi-enquire {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin-top: var(--sp-3, 12px);
  font: 500 var(--fs-small, 0.8125rem) / 1.2 var(--font-ui, system-ui, sans-serif);
  color: var(--c-link);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.wall-label-vl {
  position: relative;
  z-index: 2;
  min-height: 32px;
  margin: 2px 0 0;
  padding: 0;
  border: 0;
  background: none;
  font: 500 var(--fs-small, 0.8125rem) / 1.2 var(--font-ui, system-ui, sans-serif);
  color: var(--c-link);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  cursor: pointer;
}

.wall-label-vl:focus-visible,
.wall-label .sarabi-enquire:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
}

/* tablet and desktop: Woo's columns-3 grid made 150 px columns whatever the wall's width; columns now take the space they have
   (at least 220 px each), so rugs keep close to true scale and a wide rug never spills into its neighbour (responsive audit 2026-10-12) */
@media (min-width: 700px) {
  .wall .wc-block-product-template.wc-block-product-template__responsive {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    column-gap: var(--sp-6, 32px);   /* long names ran into the next label (2026-10-12) */
  }
  .wall .wc-block-product-template > li { min-width: 0; }
}

/* phones: two columns, a smaller scale, and the size in words */
@media (max-width: 699px) {
  /* the grid goes on the rug list itself: on .wall it put Woo's notices box in column one and the whole list in column two
     (stress test, 320 px: page 17 px wider than the screen) */
  .wall {
    --m: 44px;   /* was 34 px: a 3 m rug drew 100 px wide on a phone (2026-10-12); max-width still caps the widest */
    display: block;
    padding: var(--sp-5, 24px) var(--sp-3, 12px) var(--sp-6, 32px);
  }

  .wall .wc-block-product-template.wc-block-product-template__responsive {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-6, 32px) var(--sp-4, 16px);
    margin: 0;
    padding: 0;
  }

  .wall .wc-block-product-template > li {
    width: auto;
    min-width: 0;
    margin: 0;
  }

  .scale-bar {
    display: none;
  }

  .hung-rug,
  .hung-rug.is-to-scale {
    width: auto;
  }

  .wall-label-name {
    font-size: 1.125rem;
  }

  .wall-label-size {
    display: block;
  }
}

/* "Ask about this rug" on the wall label: same look as the viewing-list button, above the tile's click layer */
.wall-label-ask {
  position: relative;
  z-index: 2;
  width: fit-content;
  min-height: 32px;
  margin: 2px 0 0;
  font: 500 var(--fs-small, 0.8125rem) / 1.2 var(--font-ui, system-ui, sans-serif);
  color: var(--c-link);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.wall-label-ask:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
}

/* the label on its own (product page): no mat, no scale width */
.hung-rug.is-label-only {
  width: auto;
}

/* phones: every link and button on the label is a 44 px target (WCAG 2.5.8, with room to spare) */
@media (max-width: 699px) {
  .wall-label-vl,
  .wall-label-ask,
  .wall-label .sarabi-enquire {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 10px;
  }
}

/* a sold rug's own page (the label only; sold rugs never hang in a grid) */
.wall-label-status {
  margin: var(--sp-2, 8px) 0;
  color: var(--c-text);
  font-weight: 600;
}

/* a collection or filter with no rugs */
.wall-empty {
  max-width: 40rem;
  margin: var(--sp-6, 32px) auto;
  padding: 0 var(--sp-4, 16px);
  color: var(--c-text);
  text-align: center;
}

/* product grid pagination: 44 px targets (WCAG 2.5.8; numbers measured 9 to 20 px wide) */
.wall .wp-block-query-pagination a,
.wall .wp-block-query-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--sp-2, 8px);
}

/* the note under "Add to viewing list" when the list is full */
.wall-label-note {
  display: block;
  margin-top: 4px;
  color: var(--c-text);
  font: 400 var(--fs-small, 0.8125rem) / 1.4 var(--font-ui, system-ui, sans-serif);
}

/* Collection head (templates/taxonomy-product_cat.html, archive-product.html): the page gutter, then the collection copy from
   inc/seo-parity.php. These rules were in listing.css, which product archives never load, so on collection pages the heading
   sat flush against the screen edge and the weave links ran together (found 2026-10-11 while checking the filter panel). */
/* .wp-block-group: core's .has-global-padding (root padding 0 in theme.json) prints later at the same specificity */
.wp-block-group.collection-head {
  box-sizing: border-box;
  max-width: var(--page-max, 1440px);
  margin-inline: auto;
  padding-inline: var(--gutter, 16px);
}

/* the head lines up with the filters and the wall at the page gutter, not in a centred 720 px column */
.wp-block-group.collection-head.is-layout-constrained > * {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* collection copy (inc/seo-parity.php): intro and weave links above the grid, description below it */
.sarabi-cat-intro { margin-bottom: var(--sp-5); max-width: 46rem; }
.sarabi-cat-intro p { margin: 0; color: var(--c-muted); }
.sarabi-cat-weaves { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.sarabi-cat-weaves a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-4);
  border: 1px solid var(--c-field); color: var(--c-text); font: 400 var(--fs-ui) / 1 var(--font-ui); text-decoration: none; }
.sarabi-cat-weaves a:hover { border-color: var(--c-text); text-decoration: underline; text-underline-offset: 4px; }
.sarabi-cat-desc { max-width: 46rem; margin: var(--sp-8) auto 0; padding-inline: var(--gutter); line-height: 1.7; }
.sarabi-cat-desc a { text-decoration: underline; text-underline-offset: 2px; }


/* ---------- collection pages, redesign 2026-10-12 (Raouf: "a professional redesign of /shop/") ----------
   Baymard (product lists): filters visible beside the results on desktop, an overview of applied filters (the chips), the result
   count, and sorting beside the filters. Gallery convention: works hang centred on one eye-level line, so labels line up. */
.wp-block-group.collection-head { padding-top: var(--sp-6, 32px); padding-bottom: var(--sp-5, 24px); }
.wp-block-group.collection-head h1 { margin-top: var(--sp-3, 12px); font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.02; letter-spacing: -0.01em; }
.wp-block-group.collection-body { box-sizing: border-box; max-width: var(--page-max, 1440px); margin-inline: auto; padding-inline: var(--gutter, 16px); }
.collection-body .facet-filter { max-width: none; padding-inline: 0; }
.collection-body .scale-bar { margin: 0 0 var(--sp-3, 12px); }

/* count and sort */
.collection-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2, 8px) var(--sp-5, 24px);
  margin: 0 0 var(--sp-4, 16px); padding-bottom: var(--sp-2, 8px); border-bottom: 1px solid var(--c-rule); }
.ct-count { margin: 0; font: 500 var(--fs-ui, 0.9375rem) / 1.3 var(--font-ui); color: var(--c-text); font-variant-numeric: tabular-nums; }
.ct-sort { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-1, 4px); }
.ct-sort-label { margin-right: var(--sp-2, 8px); font: 400 var(--fs-ui, 0.9375rem) / 1 var(--font-ui); color: var(--c-muted); }
.ct-sort-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-3, 12px); border-bottom: 2px solid transparent;
  font: 400 var(--fs-ui, 0.9375rem) / 1 var(--font-ui); color: var(--c-text); text-decoration: none; }
.ct-sort-link:hover { border-bottom-color: var(--c-field); }
.ct-sort-link[aria-current="true"] { border-bottom-color: var(--c-brand); font-weight: 600; }
.ct-sort-link:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }

/* desktop: the filters stand open in a sticky column beside the wall */
@media (min-width: 1100px) {
  .wp-block-group.collection-body { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); gap: 0 var(--sp-7, 48px); align-items: start; }
  .collection-body .facet-filter { position: sticky; top: var(--sp-4, 16px); max-height: calc(100svh - var(--sp-6, 32px)); overflow-y: auto; margin: 0;
    padding-right: var(--sp-2, 8px); scrollbar-width: thin; }
  .collection-body .facet-panel { border-bottom: 0; }
  .collection-body .facet-summary { font: 500 1.375rem / 1.2 var(--font-display); }
  .collection-body .facet-body { display: block; padding-top: var(--sp-2, 8px); }
  .collection-body .facet-filter .facet { padding-bottom: var(--sp-4, 16px); border-bottom: 1px solid var(--c-rule); }
  .collection-body .facet-filter label.facet-link { min-height: 36px; }
  .collection-body .facet-actions { position: sticky; bottom: 0; padding: var(--sp-3, 12px) 0; background: var(--c-page); }
  /* the list scrolls under the button: a short fade instead of a half-cut option */
  .collection-body .facet-actions::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 40px; pointer-events: none;
    background: linear-gradient(to bottom, transparent, var(--c-page)); }
}

/* the tile: one action. The price guard's "Enquire" slot stays in the markup for the guard and its tests, but on the wall it
   repeated "Ask about this rug" right under it, so only the Ask link shows. */
.wall .wall-label-price { display: none; }
.wall .wall-label-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.wall .wall-label-ask { margin-top: var(--sp-3, 12px); }
.wall .wall-label-vl { color: var(--c-muted); }

/* eye-level hang: each rug takes two rows of the wall's grid (art, label) through subgrid, the art is centred on the row's middle
   line and every label in the row starts on the same line */
@supports (grid-template-rows: subgrid) {
  .wall .wc-block-product-template.wc-block-product-template__responsive > li { display: grid; grid-template-columns: minmax(0, 1fr); grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; position: relative; }
  .wall .wc-block-product-template > li > .hung-rug { display: contents; }
  .wall .wc-block-product-template > li > .hung-rug > .mat { align-self: center; justify-self: start; }
  .wall .wc-block-product-template > li > .hung-rug > .wall-label { align-self: start; }
}

/* ---------- one frame height for every rug (2026-10-12, Raouf: "rugs and runners get messy") ----------
   A 4 m runner drawn to scale stood 417 px tall beside 250 px rugs, so its row grew and the rest floated. Every rug now hangs in
   a frame of the same height (--frame): drawn to scale while it fits, a piece taller than the frame (mostly long runners) is
   scaled down to the frame. The wall's rows alternate frame and label, so every row is the same height. */
.wall { --frame: 300px; }
@media (max-width: 699px) { .wall { --frame: 190px; } }
.wall .hung-rug.is-to-scale .mat {
  width: min(calc(var(--w) / 100 * var(--m)), calc(var(--frame) * var(--w) / var(--l)));
}
.wall .hung-rug.is-tile .mat { width: min(100%, calc(var(--frame) * 3 / 4)); }
@supports (grid-template-rows: subgrid) {
  .wall .wc-block-product-template.wc-block-product-template__responsive {
    grid-auto-rows: calc(var(--frame) + var(--mat-pad, 10px) * 2) auto;
    row-gap: var(--sp-7, 48px);
  }
  /* the two rows of one rug sit together; the gap above applies between rugs */
  .wall .wc-block-product-template.wc-block-product-template__responsive > li { row-gap: var(--sp-4, 16px); }
}
@media (max-width: 699px) {
  @supports (grid-template-rows: subgrid) {
    .wall .wc-block-product-template.wc-block-product-template__responsive { row-gap: var(--sp-6, 32px); }
  }
}
/* every wall's rug list is the same grid (the home "New in the collection" list was set to flex in home.css and, with the per-rug
   subgrid, collapsed into one column, 2026-10-12) */
.wall .wc-block-product-template.wc-block-product-template__responsive { display: grid; }
@media (min-width: 700px) {
  .wall .wc-block-product-template.wc-block-product-template__responsive { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
}
/* a photo never stretches its mat: a rug with no size on record (drawn as a 3:4 tile) has a tall photo that pushed the mat to
   699 px past its frame (runners page, 2026-10-12); the photo shrinks to fit inside instead */
.wall .mat { min-height: 0; overflow: hidden; }
.wall .hung-rug.is-tile .mat { max-height: calc(var(--frame) + var(--mat-pad, 10px) * 2); }