/* The rug listings (shop, collections, product search), 2026-10-14 after Raouf's references: the film at the top of /shop/ after
   hali.com.au/collections/all, and the listing after au.armadillorugs.com/collections/shop-all: a "Filter by" bar of drop-downs,
   the count and sort on one line, and even tiles (each rug on a quiet ground, name, details, Enquire). Loaded after the hung-rug
   block style (inc/pages.php) and scoped to .collection-body, so the home page's rugs keep their own look. */

/* ---------- the film (blocks/collection-film) ---------- */
.collection-film { position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: end;
  box-sizing: border-box; padding: calc(var(--header-h, 56px) + var(--sp-7, 48px)) var(--gutter, 16px) var(--sp-7, 48px); }
.collection-film:not(.has-media) { padding-top: var(--sp-6, 32px); padding-bottom: var(--sp-4, 16px); }
.collection-film.has-media { min-height: clamp(460px, 82svh, 980px); color: var(--c-on-photo); }
.cf-media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* darker at the top for the header and at the bottom left for the words (WCAG 1.4.3 over a photo or film) */
.collection-film.has-media::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--c-photo-shade) 78%, transparent) 0, color-mix(in srgb, var(--c-photo-shade) 20%, transparent) 24%, color-mix(in srgb, var(--c-photo-shade) 10%, transparent) 45%, color-mix(in srgb, var(--c-photo-shade) 82%, transparent) 100%),
              linear-gradient(to right, color-mix(in srgb, var(--c-photo-shade) 55%, transparent), transparent 70%); }
.cf-copy { box-sizing: border-box; width: 100%; max-width: var(--page-max, 1440px); margin-inline: auto; }
.cf-title { margin: 0; font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.02; letter-spacing: -0.01em; }
.cf-lede { max-width: 34rem; margin: var(--sp-4, 16px) 0 0; font: 400 clamp(1rem, 1.4vw, 1.125rem) / 1.6 var(--font-ui); }
.collection-film.has-media :is(.cf-title, .cf-lede) { color: var(--c-on-photo); text-shadow: 0 1px 18px color-mix(in srgb, var(--c-photo-shade) 40%, transparent); }
.cf-toggle { position: absolute; right: var(--gutter, 16px); bottom: var(--sp-5, 24px); min-height: 44px; padding: 0 var(--sp-4, 16px);
  border: 1px solid color-mix(in srgb, var(--c-on-photo) 60%, transparent); background: color-mix(in srgb, var(--c-photo-shade) 35%, transparent);
  color: var(--c-on-photo); font: 500 var(--fs-small, 0.8125rem) / 1 var(--font-ui); letter-spacing: 0.06em; cursor: pointer; }
/* .cf-toggle hover is the sweep in buttons.css */
.cf-toggle:focus-visible { outline: 3px solid var(--c-on-photo); outline-offset: 3px; }
@media (min-width: 700px) { .collection-film { padding-inline: max(var(--gutter, 16px), calc((100% - var(--page-max, 1440px)) / 2 + var(--gutter, 16px))); } }
.wp-block-group.collection-head.is-crumbs { padding-top: var(--sp-5, 24px); padding-bottom: 0; }

/* ---------- the "Filter by" bar ---------- */
.collection-body { display: block !important; }
.collection-body .facet-filter { position: static; max-height: none; overflow: visible; margin: 0 0 var(--sp-2, 8px); }
.collection-body .facet-panel { border-top: 1px solid var(--c-rule); border-bottom: 1px solid var(--c-rule); }
.collection-body .facet-summary { min-height: 56px; font: 500 var(--fs-small, 0.8125rem) / 1 var(--font-ui); letter-spacing: 0.04em; }
.collection-body .facet-summary::after { font-size: 1.25rem; }
.collection-body .facet-filter .facet { position: relative; margin: 0; padding: 0; border: 0; }
/* with JavaScript (assets/js/shop.js) each group is a drop-down: a button with the group's name, the options in a panel */
.facet-drop-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0; border: 0; background: none; color: var(--c-text);
  font: 500 var(--fs-small, 0.8125rem) / 1 var(--font-ui); letter-spacing: 0.04em; cursor: pointer; }
.facet-drop-btn::after { content: ""; width: 0; height: 0; border: 4px solid transparent; border-top-color: currentColor; margin-top: 4px; transition: transform 0.2s ease; }
.facet-drop-btn[aria-expanded="true"]::after { transform: rotate(180deg); margin-top: -4px; }
.facet-drop-btn:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; }
.facet-drop-btn .facet-drop-n { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--c-muted); }
.js-drops .facet > legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.facet-pop[hidden] { display: none; }
.collection-body .facet-filter label.facet-link { min-height: 40px; }
@media (max-width: 999px) {
  .js-drops .facet { border-bottom: 1px solid var(--c-rule) !important; }
  .js-drops .facet-drop-btn { width: 100%; justify-content: space-between; }
  .facet-pop { padding: 0 0 var(--sp-3, 12px); }
  .collection-body .facet-actions { padding: var(--sp-4, 16px) 0 0; }
}
@media (min-width: 1000px) {
  .collection-body .facet-panel { display: flex; align-items: center; flex-wrap: wrap; gap: 0 var(--sp-6, 32px); }
  .collection-body .js-drops .facet-panel > .facet-summary { flex: none; pointer-events: none; color: var(--c-muted); }   /* stands open on desktop (facet-filter render.php opens it at 1000 px); without the drop-downs it stays a working disclosure */
  .collection-body .js-drops .facet-panel > .facet-summary::after { content: none; }
  .collection-body .facet-panel[open] > .facet-body { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-6, 32px); padding: 0; flex: 1 1 auto; }
  .js-drops .facet-pop { position: absolute; top: calc(100% + 4px); left: -16px; z-index: 30; box-sizing: border-box; min-width: 15rem; max-height: min(60vh, 520px);
    overflow-y: auto; padding: var(--sp-3, 12px) var(--sp-4, 16px); background: var(--c-page); border: 1px solid var(--c-rule);
    box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--c-ink) 45%, transparent); }
  .collection-body .facet-actions { position: static; margin-left: auto; padding: var(--sp-2, 8px) 0; background: none; }
  .collection-body .facet-actions::before { content: none; }
  .collection-body .facet-actions .btn { min-height: 40px; padding-block: 0; }
  .collection-body .facet-filter:not(.js-drops) .facet-panel { display: block; }
  .facet-filter:not(.js-drops) .facet-body { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0 var(--sp-6, 32px); padding: var(--sp-3, 12px) 0; }
}

/* ---------- count and sort ---------- */
.collection-body .collection-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4, 16px); margin: 0 0 var(--sp-5, 24px); padding: var(--sp-2, 8px) 0; border: 0; }
.collection-body .ct-count { margin: 0; color: var(--c-muted); font: 500 var(--fs-small, 0.8125rem) / 1 var(--font-ui); letter-spacing: 0.04em; }
.collection-body .ct-sort-link, .collection-body .ct-sort-label { font-size: var(--fs-small, 0.8125rem); letter-spacing: 0.02em; }

/* ---------- the tiles ---------- */
.collection-body .wall.shop-grid { display: block; padding: 0 0 var(--sp-8, 72px); background: none; }
.collection-body .shop-grid .wc-block-product-template { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--sp-7, 48px) var(--sp-4, 16px) !important; margin: 0; padding: 0; }
@media (min-width: 800px) { .collection-body .shop-grid .wc-block-product-template { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: var(--sp-8, 64px) var(--sp-5, 24px) !important; } }
@media (min-width: 1200px) { .collection-body .shop-grid .wc-block-product-template { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
.collection-body .shop-grid .wc-block-product-template > li { width: auto !important; max-width: none !important; margin: 0 !important; min-width: 0; }
.collection-body .shop-grid .hung-rug { width: 100% !important; max-width: none; }
.collection-body .shop-grid .hung-rug .mat { box-sizing: border-box; width: 100% !important; max-width: none !important; aspect-ratio: 4 / 5 !important; margin: 0;
  position: relative; display: block; padding: 0; background: color-mix(in srgb, var(--c-text) 5%, var(--c-page)); box-shadow: none; overflow: hidden; }
/* the photo sits inside the tile with even margins, whatever its shape (a 4 m runner and a square rug both fit) */
.collection-body .shop-grid .rug-photo { position: absolute; top: 9%; left: 13%; width: 74%; height: 82%; object-fit: contain; filter: drop-shadow(0 10px 14px color-mix(in srgb, var(--c-ink) 22%, transparent));
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.collection-body .shop-grid .hung-rug:hover .rug-photo { transform: scale(1.04); }
.collection-body .shop-grid .wall-label { padding: var(--sp-4, 16px) 0 0; }
.collection-body .shop-grid .wall-label-name { margin: 0 0 6px; font: 500 0.9375rem / 1.4 var(--font-ui); letter-spacing: 0.01em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.collection-body .shop-grid :is(.wall-label-meta, .wall-label-size) { font-size: var(--fs-small, 0.8125rem); letter-spacing: 0.04em; }
.collection-body .shop-grid .wall-label-price:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .collection-body .shop-grid .rug-photo { transition: none; } .collection-body .shop-grid .hung-rug:hover .rug-photo { transform: none; } }
html[data-motion="none"] .collection-body .shop-grid .hung-rug:hover .rug-photo { transform: none; }
.collection-body .shop-grid .wall-label :is(.sarabi-enquire, .wall-label-ask) { margin-top: var(--sp-2, 8px); }
.collection-body .shop-grid .wall-label-vl { margin-top: 0; }

/* rugs or runners in one click, beside the count (blocks/collection-toolbar) */
.collection-body .collection-toolbar { flex-wrap: wrap; }
.collection-body .ct-sort { margin-left: auto; }
.ct-type { display: inline-flex; border: 1px solid var(--c-rule); }
.ct-type-link { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--sp-4, 16px); color: var(--c-text); text-decoration: none;
  font: 500 var(--fs-small, 0.8125rem) / 1 var(--font-ui); letter-spacing: 0.04em; transition: background-color 0.25s ease, color 0.25s ease; }
.ct-type-link + .ct-type-link { border-left: 1px solid var(--c-rule); }
/* hover is the sweep in buttons.css */
.ct-type-link[aria-current="true"] { background-color: var(--c-text); color: var(--c-page); }
.ct-type-link:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
@media (max-width: 699px) { .ct-type { order: 3; width: 100%; } .ct-type-link { flex: 1; justify-content: center; } }
@media (max-width: 699px) { .cf-toggle { top: calc(var(--header-h, 56px) + var(--sp-3, 12px)); bottom: auto; min-height: 40px; } }