  /* The hidden ATTRIBUTE loses to any author display rule (the pager's
     display:flex made setAttribute('hidden') a no-op, so the pager showed on
     one-page result sets with both buttons active). Blanket rule so every
     hidden-toggled element in the block actually hides. */
  .dynasort-search[hidden], .dynasort-search [hidden] { display: none !important; }
  /* Dawn-family themes define --color-background as a bare RGB channel
     triplet ("255,255,255"), which is not a valid color; an invalid var()
     computes to transparent, NOT the #fff fallback, leaving filter panels
     and controls see-through. Registering the token as <color> makes any
     unparseable value resolve to the initial white instead. */
  @property --ds-surface { syntax: "<color>"; inherits: true; initial-value: #fff; }
  .dynasort-search {
    --ds-gap: 1em;
    --ds-radius: var(--media-radius, var(--border-radius, 8px));
    --ds-max-width: var(--page-width, 120rem);
    --ds-muted: color-mix(in srgb, currentColor 58%, transparent);
    --ds-border: color-mix(in srgb, currentColor 16%, transparent);
    --ds-surface: var(--color-background, #fff);
    --ds-overlay-bg: rgba(255,255,255,0.85);
    --ds-overlay-text: #1a1a1a;
    --ds-cols-mobile: 2; --ds-cols-tablet: 3; --ds-cols-desktop: 4;
    --ds-aspect: 1 / 1; --ds-swatch-size: 1.5em; --ds-swatch-radius: 50%; --ds-control-radius: 0.4em;
    color: inherit; font-size: inherit;
    margin: 2rem auto; max-width: var(--ds-max-width); box-sizing: border-box;
  }
  .dynasort-search *, .dynasort-search *::before, .dynasort-search *::after { box-sizing: border-box; }
  .dynasort-search[hidden] { display: none; }
  .dynasort-search :where(button) {
    appearance: none; -webkit-appearance: none;
    margin: 0; padding: 0; border: 0; background: none; box-shadow: none;
    font: inherit; color: inherit; line-height: 1; min-width: 0; min-height: 0; width: auto; text-align: inherit; cursor: pointer;
  }
  .dynasort-search__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin: 0 0 1em; flex-wrap: wrap; }
  .dynasort-search__summary { font-size: 0.95em; color: var(--ds-muted); margin: 0; }
  .dynasort-search__sort { font: inherit; font-size: 0.9em; color: inherit; background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-control-radius); padding: 0.45em 0.7em; }
  .dynasort-search__sort[hidden] { display: none; }
  .dynasort-search__grid { display: grid; grid-template-columns: repeat(var(--ds-cols-mobile), minmax(0, 1fr)); gap: var(--ds-gap); }
  @media (min-width: 750px) { .dynasort-search__grid { grid-template-columns: repeat(var(--ds-cols-tablet), minmax(0, 1fr)); } }
  @media (min-width: 990px) { .dynasort-search__grid { grid-template-columns: repeat(var(--ds-cols-desktop), minmax(0, 1fr)); } }

  .dynasort-search__card { position: relative; display: flex; flex-direction: column; color: inherit; min-width: 0; }
  .dynasort-search__media { position: relative; aspect-ratio: var(--ds-aspect); border-radius: var(--ds-radius); overflow: hidden; background: var(--ds-border); }
  .dynasort-search__media-link { display: block; width: 100%; height: 100%; }
  .dynasort-search__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .dynasort-search__skeleton { aspect-ratio: var(--ds-aspect); border-radius: var(--ds-radius); background: var(--ds-border); opacity: 0.5; }
  .dynasort-search__badges { position: absolute; top: 0.5em; left: 0.5em; display: flex; gap: 0.3em; flex-wrap: wrap; z-index: 1; }
  .dynasort-search__badge { font-size: 0.72em; padding: 0.15em 0.5em; border-radius: 0.25em; line-height: 1.5; font-weight: 500; }
  .dynasort-search__title { display: block; font-size: 1em; margin: 0.4em 0 0.2em; line-height: 1.3; text-decoration: none; color: inherit; }
  .dynasort-search__colorname { font-size: 0.85em; color: var(--ds-muted); }
  .dynasort-search__vendor { font-size: 0.8em; color: var(--ds-muted); margin-top: 0.55em; }
  .dynasort-search__buy { display: block; width: 100%; box-sizing: border-box; margin-top: 0.6em; padding: 0.7em 1em; border: 1px solid currentColor; border-radius: 2em; background: transparent; color: inherit; font: inherit; font-size: 0.95em; text-align: center; cursor: pointer; text-decoration: none; }
  .dynasort-search__buy:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
  .dynasort-search__buy[disabled] { opacity: 0.45; cursor: default; }
  .dynasort-search__price { font-size: 0.98em; margin-top: 0.25em; }
  .dynasort-search__price del { color: var(--ds-muted); margin-right: 0.4em; }
  .dynasort-search__price ins { text-decoration: none; }
  .dynasort-search__save { font-size: 0.85em; color: var(--ds-muted); margin-left: 0.3em; }
  .dynasort-search__price-reveal { font: inherit; font-size: 0.92em; margin-top: 0.25em; padding: 0; border: none; background: none; color: inherit; text-decoration: underline; cursor: pointer; display: block; text-align: inherit; }
  .dynasort-search__rating { font-size: 0.85em; color: var(--ds-muted); margin-top: 0.15em; letter-spacing: 0.05em; }
  .dynasort-search__swatches { display: flex; gap: 0.4em; flex-wrap: wrap; margin-top: 0.6em; align-items: center; }
  .dynasort-search__swatch { width: var(--ds-swatch-size); height: var(--ds-swatch-size); border-radius: var(--ds-swatch-radius); border: 1px solid var(--ds-border); background-size: cover; background-position: center; position: relative; flex: 0 0 auto; }
  .dynasort-search__swatch[aria-pressed="true"] { border: 2px solid currentColor; box-shadow: inset 0 0 0 2px var(--ds-surface); }
  .dynasort-search__swatch--soldout::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top left, transparent 45%, var(--ds-muted) 46%, var(--ds-muted) 54%, transparent 55%); border-radius: var(--ds-swatch-radius); }
  .dynasort-search__swatch-more { font-size: 0.85em; color: var(--ds-muted); text-decoration: none; margin-left: 0.1em; }

  .dynasort-search__sizes { position: absolute; left: 0.6em; right: 0.6em; bottom: 0.6em; display: flex; flex-wrap: wrap; gap: 0.35em; padding: 0.5em; border-radius: var(--ds-control-radius); background: var(--ds-overlay-bg); backdrop-filter: blur(2px); transform: translateY(calc(100% + 0.6em)); opacity: 0; pointer-events: none; transition: transform 0.15s ease, opacity 0.15s ease; }
  @media (hover: hover) and (pointer: fine) { .dynasort-search__card--inline:hover .dynasort-search__sizes { transform: translateY(0); opacity: 1; pointer-events: auto; } }
  .dynasort-search__size { font-size: 0.82em; padding: 0.3em 0.6em; border: 1px solid var(--ds-overlay-text); border-radius: var(--ds-control-radius); background: transparent; color: var(--ds-overlay-text); }
  .dynasort-search__size:disabled { opacity: 0.45; text-decoration: line-through; cursor: default; }
  .dynasort-search__added { position: absolute; left: 0.6em; right: 0.6em; bottom: 0.6em; padding: 0.5em; text-align: center; font-size: 0.85em; border-radius: var(--ds-control-radius); background: var(--ds-overlay-bg); color: var(--ds-overlay-text); backdrop-filter: blur(2px); transform: translateY(calc(100% + 0.6em)); opacity: 0; pointer-events: none; transition: transform 0.18s ease, opacity 0.18s ease; z-index: 3; }
  .dynasort-search__added.is-shown { transform: translateY(0); opacity: 1; }

  /* Filters: 'bar' layout = a horizontal row of collapsible groups above the
     grid (dropdown panels); 'sidebar' layout = a left column on wide screens.
     Facet groups come from the merchant's Search & Discovery filter config via
     the serve response; which layout renders is the app-side setting. */
  .dynasort-search__filters { display: flex; align-items: flex-start; gap: 0.5em; flex-wrap: wrap; margin: 0 0 1.2em; }
  .dynasort-search__filters-label { font-weight: 600; padding: 0.5em 0; margin-right: 0.4em; }
  .dynasort-search__fgroup { position: relative; }
  .dynasort-search__fbtn {
    display: inline-flex; align-items: center; gap: 0.5em; font-size: 0.92em; line-height: 1.4;
    padding: 0.5em 0.95em; border: 1px solid var(--ds-border); border-radius: 999px;
    background: var(--ds-surface); transition: border-color 0.12s ease, background-color 0.12s ease;
  }
  .dynasort-search__fbtn:hover { border-color: color-mix(in srgb, currentColor 45%, transparent); }
  .dynasort-search__fgroup.is-open .dynasort-search__fbtn { border-color: currentColor; }
  /* A group with applied values reads as selected: doubled border + weight
     (no color inversion: background:currentColor plus color:surface is
     circular on the same element, so it cannot be done theme-agnostically). */
  .dynasort-search__fgroup.has-active .dynasort-search__fbtn { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; font-weight: 600; }
  .dynasort-search__fcountbadge { font-size: 0.82em; opacity: 0.75; }
  .dynasort-search__ficon { opacity: 0.7; }
  /* display:block + full-width flex rows: hardened so theme CSS (flexed
     containers, inline labels) can never flatten the value list into a row. */
  .dynasort-search__fpanel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; display: block; min-width: 230px; max-height: 320px; overflow-y: auto; background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.14); padding: 0.55em; }
  .dynasort-search__fvalue { display: flex !important; width: 100%; align-items: center; gap: 0.6em; padding: 0.45em 0.5em; margin: 0; font-size: 0.92em; cursor: pointer; border-radius: 6px; }
  .dynasort-search__fvalue:hover { background: color-mix(in srgb, currentColor 6%, transparent); }
  .dynasort-search__fvalue input { margin: 0; width: 1.05em; height: 1.05em; accent-color: currentColor; flex: 0 0 auto; }
  .dynasort-search__fvalue span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
  .dynasort-search__fcount { color: var(--ds-muted); font-size: 0.88em; flex: 0 0 auto; }
  .dynasort-search__fprice { display: flex; align-items: center; gap: 0.4em; flex-wrap: wrap; padding: 0.3em; }
  .dynasort-search__fprice input { width: 5.5em; font: inherit; padding: 0.4em 0.55em; border: 1px solid var(--ds-border); border-radius: 8px; background: var(--ds-surface); color: inherit; }
  .dynasort-search__fapply { font-size: 0.88em; font-weight: 600; padding: 0.45em 0.95em; border: 1px solid currentColor; border-radius: 999px; transition: background-color 0.12s ease; }
  .dynasort-search__fapply:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
  .dynasort-search__fclear { font-size: 0.88em; color: var(--ds-muted); text-decoration: underline; text-underline-offset: 2px; padding: 0.5em 0.3em; }
  .dynasort-search__fclear:hover { color: inherit; }
  @media (max-width: 749px) {
    /* Mobile: groups stack as a full-width accordion, panels open in flow,
       and the whole list sits behind a single Filter show/hide toggle (the JS
       renders the label as a button and manages is-collapsed) so closed
       groups don't push the results below the fold. */
    .dynasort-search__fgroup { width: 100%; }
    .dynasort-search__fbtn { width: 100%; justify-content: space-between; }
    .dynasort-search__fpanel { position: static; box-shadow: none; min-width: 0; width: 100%; }
    .dynasort-search__fshowhide { font-weight: 600; }
    .dynasort-search__filters.is-collapsed .dynasort-search__fgroup,
    .dynasort-search__filters.is-collapsed .dynasort-search__fclear { display: none; }
  }
  @media (min-width: 990px) {
    .dynasort-search--sidebar { display: grid; grid-template-columns: 230px minmax(0, 1fr); grid-template-areas: "toolbar toolbar" "aside grid" "aside pager" "aside empty"; column-gap: 2em; }
    .dynasort-search--sidebar .dynasort-search__toolbar { grid-area: toolbar; }
    .dynasort-search--sidebar .dynasort-search__filters { grid-area: aside; display: block; margin: 0; align-self: start; }
    .dynasort-search--sidebar .dynasort-search__grid { grid-area: grid; }
    .dynasort-search--sidebar .dynasort-search__pager { grid-area: pager; }
    .dynasort-search--sidebar .dynasort-search__empty { grid-area: empty; }
    .dynasort-search--sidebar .dynasort-search__filters-label { display: block; margin: 0 0 0.5em; }
    .dynasort-search--sidebar .dynasort-search__fgroup { margin-bottom: 0.6em; padding-bottom: 0.2em; }
    /* Sidebar headers are flat full-width bands (reference: classic left-rail
       faceting), never pills. The is-open/has-active pill rules outrank the
       base override on specificity, so they are re-flattened explicitly. */
    .dynasort-search--sidebar .dynasort-search__fbtn { width: 100%; justify-content: space-between; border: 0; border-radius: 6px; padding: 0.5em 0.65em; font-weight: 600; background: color-mix(in srgb, currentColor 6%, transparent); }
    .dynasort-search--sidebar .dynasort-search__fgroup.is-open .dynasort-search__fbtn,
    .dynasort-search--sidebar .dynasort-search__fgroup.has-active .dynasort-search__fbtn { border: 0; box-shadow: none; }
    .dynasort-search--sidebar .dynasort-search__fpanel { position: static; box-shadow: none; border: 0; padding: 0.2em 0 0; min-width: 0; max-height: none; }
    .dynasort-search--sidebar .dynasort-search__fclear { display: block; padding: 0.4em 0; }
  }

  .dynasort-search__pager { display: flex; align-items: center; justify-content: center; gap: 1.2em; margin-top: 1.8em; }
  .dynasort-search__page-btn { font-size: 0.95em; padding: 0.5em 1em; border: 1px solid var(--ds-border); border-radius: var(--ds-control-radius); }
  .dynasort-search__page-btn:disabled { opacity: 0.35; cursor: default; }
  .dynasort-search__page-info { font-size: 0.9em; color: var(--ds-muted); }
  .dynasort-search__empty { font-size: 1em; color: var(--ds-muted); }

  @media (prefers-reduced-motion: reduce) { .dynasort-search__sizes, .dynasort-search__added { transition: none; } }
