/* =========================================================================
   DTA Collectibles — product category archive

   Implements category-leaf.html. Loaded only on product_cat archives.

   Mockup class -> theme class, where they differ:
     .results   -> .dta-archive__body       the two-column row
     .listing   -> .dta-archive__results    the right-hand column
     .toolbar   -> .dta-toolbar             wraps woocommerce_before_shop_loop
     .pager     -> .dta-pager               wraps woocommerce_after_shop_loop
     .intro     -> .dta-intro               rendered by the intro mu-plugin

   Depends on tokens.css for every value. No colour, size or spacing is
   invented here.
   ====================================================================== */

/* =========================================================================
   1. RECLAIM THE ROW
   =========================================================================

   This is the half of the sidebar fix that lives in CSS, and it does not work
   without the other half in inc/layout.php. Read both together.

   inc/layout.php removes oceanwp_display_sidebar() from ocean_before_primary
   and ocean_after_primary, so the sidebar element is never printed. It does
   NOT switch the layout to full-width, because full-width removes the column
   grid as well as the sidebar and the facet rail would end up stacked above
   the products in a single column.

   The consequence of taking the gentler route is that the body keeps its
   `content-left-sidebar` class and OceanWP keeps narrowing #primary to leave
   room for a sidebar that is no longer there. So the row is widened here.

   If the sidebar ever reappears, it will visibly collide with the layout
   rather than being hidden by a rule here. That is on purpose: a silent
   `display:none` on #right-sidebar would mask exactly the failure this file
   is written to make obvious, and would still ship 154,000 characters of
   widget markup to every visitor.
   ====================================================================== */

/* The row's WIDTH is not set here. chrome.css sets it on .container site-wide,
   so the header, this row and the footer all read one number — see the shell
   note in that file. What stays here is the two rules specific to this
   template: taking #content-wrap out of the column layout, and widening
   #primary to fill the row the sidebar used to share.

   The advanced search releases its sidebar the same way and needs the same two
   rules, so the qualifier names both pages. See section 6 for why :is() rather
   than a second selector. */

:is(body.tax-product_cat, body.dta-search-page, body.dta-home-page, body.dta-shop-page) #content-wrap {
  display: block;
}

:is(body.tax-product_cat, body.dta-search-page, body.dta-home-page, body.dta-shop-page) #primary.content-area {
  width: 100%;
  max-width: none;
  float: none;
  margin-left: 0;
  margin-right: 0;
}

:is(body.tax-product_cat, body.dta-search-page, body.dta-home-page, body.dta-shop-page) #content.site-content {
  padding-bottom: var(--s-6);
}

/* The mockups get border-box from a global reset in their own base CSS, which
   is not ported here — only the tokens are. Most themes set it globally and
   OceanWP does, but the image box is width:100% plus a 1px border, so if the
   host ever stops setting it every card overflows its grid track by 2px.
   Scoped to what this file owns rather than left to the theme. */
.dta-archive,
.dta-archive *,
.dta-archive *::before,
.dta-archive *::after { box-sizing: border-box; }

/* Type floor for the whole archive. OceanWP sets no fonts — there are no font
   settings in the theme mods — so this is the first thing that does. */
:is(body.tax-product_cat, body.dta-search-page, body.dta-home-page, body.dta-shop-page) .dta-archive {
  font-family: var(--f-sans);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  color: var(--c-text);
}

.dta-archive h1,
.dta-archive h2,
.dta-archive h3 {
  font-family: var(--f-sans);
  color: var(--c-text-strong);
  line-height: var(--lh-tight);
  font-weight: var(--w-semibold);
  text-wrap: balance;
}

.dta-archive a {
  color: var(--c-accent);
  text-underline-offset: 2px;
}
.dta-archive a:hover { color: var(--c-accent-hover); }

.dta-archive :focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* Visually hidden, still reachable by keyboard and screen reader. Used for
   every label the design does not draw. */
.dta-archive .skip {
  position: absolute;
  left: -9999px;
}
.dta-archive .skip:focus {
  left: auto;
  background: var(--c-dark);
  color: var(--c-text-invert);
  padding: var(--s-3) var(--s-4);
  z-index: 10;
}

/* Figures line up in columns all over this page.

   .sku left this list on Sept 10 with the SKU itself. It is the only class in
   the theme that was card-only — the product page and the run page both render
   a SKU, but as a <dd> in a specs list, and the cart as plain text — so with
   the card's <span class="sku"> gone there is nothing under .dta-archive for
   either rule to reach. */
.dta-archive .price,
.dta-archive .tnum,
.dta-archive .facet span,
.dta-archive .siblings i {
  font-feature-settings: var(--num-tabular);
}

/* =========================================================================
   2. INTRO
   =========================================================================

   The markup belongs to mu-plugins/dta-archive-intro.php, and these rules are
   now bound to what it actually emits:

     section.dta-intro
       h1.dta-intro__title
       p                          only when dta_archive_copy() has an entry
       dl.dta-intro__tallies
         div.dta-tally
           dt                     the figure
           dd                     the label

   The element selectors are kept alongside the class ones so the block still
   reads correctly if the mu-plugin's markup shifts.
   ====================================================================== */

.dta-intro {
  border-bottom: var(--rule);
  padding-bottom: var(--s-5);
  margin-bottom: var(--s-5);
}

.dta-intro h1,
.dta-intro__title {
  font-size: var(--t-xl);
  font-weight: var(--w-bold);
  margin: 0 0 var(--s-3);
}

.dta-intro p {
  margin: 0 0 var(--s-4);
  max-width: 66ch;
}

.dta-intro b {
  color: var(--c-text-strong);
  font-weight: var(--w-semibold);
}

.dta-archive__description {
  max-width: 66ch;
  margin-bottom: var(--s-5);
}

/* A <dl> laid out as a row of figure-over-label pairs. Each pair is wrapped in
   a div, which is what lets the dl be a flex row at all — dt and dd are
   siblings, so without the wrapper they could not be stacked in pairs. */
.dta-intro__tallies {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6);
  margin: var(--s-4) 0 0;
  font-family: var(--f-narrow);
  font-size: var(--t-sm);
}

.dta-tally dt {
  font-family: var(--f-sans);
  font-size: var(--t-lg);
  font-weight: var(--w-bold);
  color: var(--c-text-strong);
  line-height: 1;
  font-feature-settings: var(--num-tabular);
}

/* dd carries a 40px inline start margin by default, which is what pushed the
   labels away from their figures. */
.dta-tally dd {
  margin: 0;
  color: var(--c-text);
}

/* =========================================================================
   3. LATERAL LINKS — the one-line sibling row
   ====================================================================== */

.dta-archive .siblings {
  font-family: var(--f-narrow);
  font-size: var(--t-sm);
  margin: 0 0 var(--s-5);
  padding-bottom: var(--s-5);
  border-bottom: var(--rule);
  max-width: none;
}

.dta-archive .siblings b {
  color: var(--c-text-strong);
  font-weight: var(--w-semibold);
  margin-right: var(--s-3);
}

.dta-archive .siblings a {
  margin-right: var(--s-3);
  white-space: nowrap;
}

.dta-archive .siblings i {
  font-style: normal;
  color: var(--c-text);
}

/* =========================================================================
   4. THE ROW — facet rail + results
   ====================================================================== */

.dta-archive__body {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: var(--s-7);
  align-items: start;
}

/* The rail sits first in the DOM here, unlike the theme sidebar it replaces —
   which renders after the content and is moved left in CSS. Nothing needs
   reordering: source order and visual order agree, which is also the order a
   screen reader and a keyboard get. */
.dta-archive .facets {
  font-family: var(--f-narrow);
  /* The rail is the control surface for the whole page, so it is set at body
     size rather than at the secondary size the mockup used. --t-sm reads as
     fine print next to the merchandise; this is the thing people came to use. */
  font-size: var(--t-base);
  border-top: 2px solid var(--c-dark);
  padding-top: var(--s-4);
}

.dta-archive .facets h2 {
  font-family: var(--f-sans);
  font-size: var(--t-md);
  font-weight: var(--w-semibold);
  color: var(--c-text-strong);
  margin: 0 0 var(--s-4);
}

.dta-archive .facet {
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-5);
  border-bottom: var(--rule);
}
.dta-archive .facet:last-child { border-bottom: 0; }

.dta-archive .facet .ft {
  color: var(--c-text-strong);
  font-weight: var(--w-semibold);
  display: block;
  margin-bottom: var(--s-2);
}

.dta-archive .facet ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dta-archive .facet li { margin-bottom: var(--s-1); }

.dta-archive .facet a,
.dta-archive .facet .facet__flat {
  color: var(--c-text);
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-1) 0;
}
.dta-archive .facet a:hover { color: var(--c-accent); }

.dta-archive .facet a span,
.dta-archive .facet .facet__flat span {
  color: var(--c-border-focus);
}

/* The currently applied value. */
.dta-archive .facet a.is-on {
  color: var(--c-text-strong);
  font-weight: var(--w-semibold);
}

/* A value shown without a link, because that axis is not filterable on this
   install. Still a real figure, so it keeps the row shape. */
.dta-archive .facet .facet__flat {
  cursor: default;
}
/* ---- Condition: checkboxes, not links ----------------------------------

   The only facet that is a form. A grade is one of a set a buyer will take
   several of — "VF, VF/NM and NM" is one decision, not three — and every other
   axis on this rail is one-at-a-time by nature: one price band, one publisher,
   one decade. So this one gets checkboxes and an Apply, and the rest keep their
   links.

   The row shape deliberately matches .facet a above — name left, count right,
   same padding — so the rail reads as one rail rather than as a form dropped
   into it. The box is what is added, not a different row.
   ------------------------------------------------------------------------ */

.dta-archive .facet--condition {
  margin: 0 0 var(--s-5);
}

.dta-archive .facet--condition .check {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) 0;
  color: var(--c-text);
  cursor: pointer;
  /* The whole row is the target, not the 13px box. */
  min-height: 28px;
}

.dta-archive .facet--condition .check:hover { color: var(--c-accent); }

.dta-archive .facet--condition .check input {
  /* OceanWP sizes form controls globally; a checkbox in a rail needs its own
     floor or it arrives at 13px with the theme's input padding around it. */
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 0;
  flex: none;
  accent-color: var(--c-accent);
}

.dta-archive .facet--condition .check .nm { flex: 1 1 auto; }
.dta-archive .facet--condition .check .n  { color: var(--c-border-focus); }

.dta-archive .facet--condition .check input:checked ~ .nm {
  color: var(--c-text-strong);
  font-weight: var(--w-semibold);
}

.dta-archive .facet--condition .check input:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.dta-archive .facet--condition .apply-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin: var(--s-3) 0 0;
}

/* THE RESTING STATE IS QUIET AND THE UNAPPLIED STATE IS NOT.

   Apply is always present — without JavaScript nothing can know the boxes have
   moved, and a button that appears only when it is needed would never appear at
   all on that path. So it sits there muted, which reads as "this is how you
   submit" rather than as "something is pending".

   .is-dirty is set by the script the moment the boxes stop matching the URL.
   That is the state worth shouting about: a ticked box that is not applied and
   looks applied is the whole failure mode of a checkbox facet. */
.dta-archive .facet--condition .apply {
  font-family: var(--f-narrow);
  font-size: var(--t-sm);
  font-weight: var(--w-semibold);
  color: var(--c-text-strong);
  background: var(--c-surface);
  border: var(--rule-strong);
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-4);
  min-height: 36px;
  cursor: pointer;
}

.dta-archive .facet--condition.is-dirty .apply {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-text-invert);
}

.dta-archive .facet--condition .apply:hover,
.dta-archive .facet--condition .apply:focus-visible {
  border-color: var(--c-accent);
  color: var(--c-accent);
}

.dta-archive .facet--condition.is-dirty .apply:hover,
.dta-archive .facet--condition.is-dirty .apply:focus-visible {
  background: var(--c-accent-hover);
  border-color: var(--c-accent-hover);
  color: var(--c-text-invert);
}

.dta-archive .facet--condition .dirty-note {
  font-family: var(--f-narrow);
  font-size: var(--t-xs);
  line-height: var(--lh-snug);
  color: var(--c-accent);
}

/* The form carries .facet, which sets the bottom margin; the button row and the
   two footnotes below it keep the link styling the other facets use. */
.dta-archive .facet--condition .more,
.dta-archive .facet--condition .note a {
  display: inline;
}


.dta-archive .facet .more {
  color: var(--c-accent);
  text-decoration: underline;
  display: inline;
}

.dta-archive .facet .note {
  font-size: var(--t-sm);
  line-height: var(--lh-snug);
  margin: var(--s-2) 0 0;
  color: var(--c-text);
}

/* ---- Decade sparkline -------------------------------------------------
   Bar heights are inline, because they are data. Everything else is here. */

.dta-archive .spark {
  display: flex;
  gap: 1px;
  align-items: flex-end;
  margin-bottom: var(--s-1);
}

.dta-archive .sparknote {
  font-size: var(--t-sm);
  line-height: var(--lh-snug);
  margin: 0 0 var(--s-3);
  color: var(--c-text);
}

/* .facet a is display:flex, so the bars need the same specificity to win. */
.dta-archive .facet .ydec {
  flex: 1;
  text-decoration: none;
  text-align: center;
  min-width: 0;
  display: block;
  padding: 0;
}

.dta-archive .facet .ydec i {
  display: block;
  width: 100%;
  background: var(--c-dark-mid);
  border-radius: 1px 1px 0 0;
}
.dta-archive .facet a.ydec:hover i { background: var(--c-accent); }

.dta-archive .facet .ydec b {
  font-family: var(--f-narrow);
  /* Was a hand-set 9px in the mockup. On the scale, and the widened rail has
     room for it: eleven decades across 240px is ~21px a bar. */
  font-size: var(--t-xs);
  font-weight: var(--w-regular);
  color: var(--c-text);
  display: block;
  padding-top: 2px;
  font-feature-settings: var(--num-tabular);
}
.dta-archive .facet a.ydec:hover b { color: var(--c-accent); }

/* ---- Range boxes and the find field ---------------------------------- */

/* Two fields and a submit do not fit across a 210px rail — the third child
   squeezes the inputs until "From" clips to "Fron". The fields keep the row and
   the button wraps beneath at full width, which is also a better tap target
   than a button sized by its text.

   The mockup draws no button here at all; it does not have to submit anything. */
.dta-archive .rangebox {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  margin-top: var(--s-3);
}

.dta-archive .rangebox input {
  flex: 1 1 0;
}

.dta-archive .rangebox button {
  flex: 1 0 100%;
}

.dta-archive .rangebox input,
.dta-archive .facet .find {
  width: 100%;
  min-width: 0;
  font-family: var(--f-narrow);
  font-size: var(--t-base);
  border: var(--rule);
  padding: var(--s-2);
  border-radius: var(--radius);
  color: var(--c-text-strong);
  background: var(--c-surface);
}

.dta-archive .rangebox button {
  font-family: var(--f-narrow);
  font-size: var(--t-sm);
  font-weight: var(--w-semibold);
  background: var(--c-dark);
  color: var(--c-text-invert);
  border: 0;
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-3);
  cursor: pointer;
  white-space: nowrap;
}
.dta-archive .rangebox button:hover { background: var(--c-darker); }

/* =========================================================================
   5. TOOLBAR — result count and sort
   =========================================================================

   The theme opens div.oceanwp-toolbar.clr at priority 10 on
   woocommerce_before_shop_loop and closes it at 40. Inside it, after the
   grid/list nav is unhooked, sit our count (priority 29) and our sort control
   (30). WooCommerce's own form.woocommerce-ordering used to hold that slot; it
   is removed by name in inc/layout.php on the pages this file styles, because
   three of the five sorts it offers — popularity, average rating, relevance —
   are not true of a catalogue of single copies with no reviews.

   OceanWP's own result_count at 31 renders nothing on this page, which is why
   inc/layout.php supplies one. The .woocommerce-result-count rule below is kept
   in case it ever starts producing output again.

   .dta-toolbar is ours and wraps the whole action; the inner div is laid out by
   class where it is known and by `> *` where it is not.
   ====================================================================== */

.dta-toolbar {
  padding-bottom: var(--s-4);
  border-bottom: var(--rule);
  margin-bottom: var(--s-5);
}

.dta-toolbar > *,
.dta-toolbar .oceanwp-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-4);
}

/* The count is placed first visually rather than relying on hook order. It
   rendered AFTER the sort control on staging even though it is hooked at 29 and
   catalog_ordering at 30, so the DOM order is not something to depend on. It is
   a static label, so ordering it costs no keyboard or reading-order sense. */
:is(body.tax-product_cat, body.dta-search-page, body.dta-home-page, body.dta-shop-page) .dta-toolbar .dta-count {
  order: -1;
  margin-right: auto;
}

:is(body.tax-product_cat, body.dta-search-page, body.dta-home-page, body.dta-shop-page) .dta-toolbar .dta-count,
:is(body.tax-product_cat, body.dta-search-page, body.dta-home-page, body.dta-shop-page) .dta-toolbar .woocommerce-result-count {
  font-family: var(--f-narrow);
  font-size: var(--t-sm);
  font-feature-settings: var(--num-tabular);
  margin: 0;
  color: var(--c-text);
}

:is(body.tax-product_cat, body.dta-search-page, body.dta-home-page, body.dta-shop-page) .dta-toolbar .dta-count b {
  color: var(--c-text-strong);
  font-weight: var(--w-semibold);
}

/* WooCommerce's own ordering form is unhooked on leaves in inc/layout.php and
   replaced by form.dta-sort below. This rule stays for the pages that still
   carry it — the shop page and new arrivals, which are their own page types in
   the pass and have not been through it yet. */
.dta-toolbar .woocommerce-ordering {
  margin: 0 0 0 auto;
}

/* The ported control. Laid out as a label and a select rather than a bare
   select, because "Most recently added" sitting alone at the right of a rule
   does not read as a control until you have clicked it once. */
.dta-toolbar .dta-sort {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin: 0 0 0 auto;
}

.dta-toolbar .dta-sort label {
  font-family: var(--f-narrow);
  font-size: var(--t-sm);
  color: var(--c-text);
}

/* The select is sized by its longest option and the options differ in length by
   a lot, so the control jumps width as the visitor changes it. Pinned to the
   width of the longest label at this size, with the shorter ones padded by the
   browser rather than the box resizing under the pointer. */
.dta-toolbar .dta-sort select {
  min-width: 19ch;
}

/* Submitted by the select's own change handler. The button only exists for a
   visitor without it, and then it needs to look like the rest of the page. */
.dta-toolbar .dta-sort noscript button {
  font-family: var(--f-narrow);
  font-size: var(--t-sm);
  border: var(--rule);
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-3);
  background: var(--c-surface);
  color: var(--c-text-strong);
  cursor: pointer;
}

.dta-toolbar select {
  font-family: var(--f-narrow);
  font-size: var(--t-sm);
  border: var(--rule);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius);
  background: var(--c-surface);
  color: var(--c-text-strong);
}

/* OceanWP's grid/list toggle is removed in inc/layout.php, not hidden here.
   Hiding it was the first attempt and it was wrong: it took away the control
   and left the feature — the stored view preference, the body class and the
   list-view rules all stayed, so a visitor whose saved choice was "list" got
   the list layout over this grid with no way to switch back.

   This rule is a backstop for a control that arrives from somewhere the PHP
   does not reach. If it is ever doing real work, the unhook has stopped
   matching and that is what wants fixing. */
.dta-toolbar .oceanwp-grid-list,
.dta-toolbar .grid-list-nav { display: none; }

/* =========================================================================
   6. PRODUCT LOOP
   =========================================================================

   One box shape for every archetype. Portrait comics, square-ish slabs and
   landscape lobby cards sit in the same frame, CONTAINED rather than cropped,
   so rows align and nothing is hidden by a crop.

   These selectors carry the body class AND the full ul/li chain, which is not
   decoration. OceanWP's own grid rules are
   `.woocommerce ul.products li.product` — exactly the same specificity as a
   plain `.dta-archive ul.products li.product`, so which one wins comes down to
   stylesheet order, and stylesheet order is not something this file can
   guarantee: the enqueue's dependency on the theme's handle is silently dropped
   if that handle is not registered when it runs.

   Staging proved the hazard is real — the theme's loop-title rule was winning
   there. Qualifying with the body class puts these a full class ahead, so they
   win on specificity and order stops mattering.

   WHY THE QUALIFIER NAMES THREE PAGES. The advanced search draws the same card
   from the same content-product.php, and it is not a product_cat archive, so a
   selector naming only that body class left it unstyled. :is() is what admits
   it without weakening anything: it takes the specificity of its most specific
   argument, and every argument here is a single class on `body`, so these
   selectors weigh exactly what they weighed before.

   `body.dta-home-page` is the third, added when the front page shipped: its
   "Just in" band includes the same content-product.php. `body.dta-shop-page`
   is the fourth, for the cart's "From the same titles" row — which is the one
   this comment predicted. New arrivals is NOT a fifth, because it carries
   `dta-search-page` itself — see the note on the enqueue in inc/layout.php.

   THIS LIST IS THE EXTENSION POINT, and adding to it is the supported way to
   give a new page the card. The failure it prevents is a quiet one: a page that
   renders the card without a listed body class still LOOKS nearly right,
   because WooCommerce's own grid rules take over. It reads as a styling
   near-miss rather than as a missing qualifier, which is a slow thing to find.

   The alternative was a second copy of the card in search.css, which was
   written and then removed. One design, one definition — a card that changes
   changes once.

   Landscape stock below is the deliberate exception: it keys on the CATEGORY
   slug on the body, which a search result page does not have, so a lobby card
   in a result list gets the shared 3/4 box. That is correct — a mixed result
   list has no single shape to switch to.
   ====================================================================== */

:is(body.tax-product_cat, body.dta-search-page, body.dta-home-page, body.dta-shop-page) .dta-archive ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--s-5) var(--s-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

:is(body.tax-product_cat, body.dta-search-page, body.dta-home-page, body.dta-shop-page) .dta-archive ul.products::before,
:is(body.tax-product_cat, body.dta-search-page, body.dta-home-page, body.dta-shop-page) .dta-archive ul.products::after {
  content: none; /* OceanWP clearfix, meaningless in a grid. */
}

:is(body.tax-product_cat, body.dta-search-page, body.dta-home-page, body.dta-shop-page) .dta-archive ul.products li.product {
  width: auto;
  max-width: none;
  float: none;
  margin: 0;
  padding: 0;
  clear: none;
  /* Grid children default to min-width:auto, which refuses to shrink below
     their content — that is what let long headings push a card wider than its
     track and spill the price out of it. */
  min-width: 0;
}

/* -------------------------------------------------------------------------
   BACKSTOP: neutralise list view.

   inc/layout.php unhooks the grid/list feature and strips its classes from the
   body, the <ul> and each <li>, so in normal operation none of these selectors
   match anything. They exist because the theme's list-view rules are more
   specific than the grid rules above — they qualify with the view class, which
   this file cannot out-specify without either enumerating OceanWP's selectors
   or doing this.

   Every !important in this file is in this block, apart from the two
   conventional ones in the reduced-motion query at the end. The reason is
   narrow: a layout the design does not have must not be able to win. Nothing
   on the normal rendering path is forced this way.

   If these ever start doing visible work, the unhook in layout.php has stopped
   matching and that is the thing to fix.
   ---------------------------------------------------------------------- */

.dta-archive ul.products.list-view,
.dta-archive ul.products.grid-view {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
}

.dta-archive ul.products li.product.list-view,
.dta-archive ul.products.list-view li.product {
  display: block !important;
  width: auto !important;
  float: none !important;
  min-width: 0 !important;
}

/* List view floats the image out beside the text and sizes it as a thumbnail.
   The box is the design: full width of the card, above the title. */
.dta-archive ul.products.list-view li.product .shot {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 var(--s-2) !important;
}

.dta-archive ul.products.list-view li.product .shot img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
}

/* -------------------------------------------------------------------------
   The same properties on the NORMAL path, held by specificity rather than by
   force. The theme sizes loop images with selectors like
   `.woocommerce ul.products li.product a img`, which outweighs a plain
   `.dta-archive li.product .shot img`; qualifying with the body class wins
   without an !important that would then apply everywhere for ever.
   ---------------------------------------------------------------------- */

:is(body.tax-product_cat, body.dta-search-page, body.dta-home-page, body.dta-shop-page) .dta-archive li.product .shot {
  float: none;
  width: 100%;
  max-width: none;
}

:is(body.tax-product_cat, body.dta-search-page, body.dta-home-page, body.dta-shop-page) .dta-archive li.product .shot img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  margin: 0;
}

:is(body.tax-product_cat, body.dta-search-page, body.dta-home-page, body.dta-shop-page) .dta-archive ul.products li.product > a {
  text-decoration: none;
  display: block;
  color: inherit;
}

:is(body.tax-product_cat, body.dta-search-page, body.dta-home-page, body.dta-shop-page) .dta-archive ul.products li.product .shot {
  background: var(--c-surface-sunk);
  border: var(--rule);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  margin-bottom: var(--s-2);
  display: flex;
  align-items: center;
  justify-content: center;
}

:is(body.tax-product_cat, body.dta-search-page, body.dta-home-page, body.dta-shop-page) .dta-archive ul.products li.product .shot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  margin: 0;
}

/* Landscape stock overrides the shared box. Driven by the category slug on the
   body, so it needs no per-product class and costs nothing at render. */
body.term-lobby-cards .dta-archive ul.products li.product .shot,
body.term-stills .dta-archive ul.products li.product .shot,
body.term-arcade-and-exhibit-cards .dta-archive ul.products li.product .shot {
  aspect-ratio: 4 / 3;
}

/* -------------------------------------------------------------------------
   The card's own type, held at a specificity that beats the theme's.

   OceanWP styles the loop title and price with
   `.woocommerce ul.products li.product .woocommerce-loop-product__title`
   — four classes and two elements — which outweighed the plain `.dta-archive`
   prefix these rules used to carry. On staging that showed as an 18px accent-red
   heading over a 20px green price: not a design decision, a lost cascade. The
   heading then ran to four lines and dominated the picture it was describing,
   which on a page selling pictures is backwards.

   Qualifying with the body class and the full list/item chain wins on
   specificity rather than on load order, which no enqueue priority can undo.
   ---------------------------------------------------------------------- */

:is(body.tax-product_cat, body.dta-search-page, body.dta-home-page, body.dta-shop-page) .dta-archive ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--f-sans);
  font-weight: var(--w-semibold);
  /* One step up from the mockup's --t-sm. At four columns the card is wide
     enough to carry it in two lines, and a composed heading is the thing that
     makes this page worth indexing — it has to be readable at a glance. */
  font-size: var(--t-base);
  color: var(--c-text-strong);
  line-height: var(--lh-snug);
  display: block;
  margin: 0 0 var(--s-1);
  padding: 0;
  font-feature-settings: var(--num-tabular);
  overflow-wrap: anywhere;
}

:is(body.tax-product_cat, body.dta-search-page, body.dta-home-page, body.dta-shop-page) .dta-archive ul.products li.product .meta {
  font-family: var(--f-narrow);
  /* The mockup sets this at --t-xs, one step down, level with the SKU that
     used to sit under it. With the SKU off the card the grade is the only
     thing between the heading and the price, and it is a buying fact rather
     than a reference — so it keeps the step up it was given to separate it
     from a number nobody reads while browsing. */
  font-size: var(--t-sm);
  color: var(--c-text);
  display: block;
}

:is(body.tax-product_cat, body.dta-search-page, body.dta-home-page, body.dta-shop-page) .dta-archive ul.products li.product .price {
  font-family: var(--f-sans);
  font-weight: var(--w-bold);
  /* The strongest thing on the card, and deliberately above the heading. The
     mockup sets price and title at the same step; on a shop where every item is
     one of one and the decision is "is this mine at this price", the figure
     should not be the same weight as the description. */
  font-size: var(--t-md);
  color: var(--c-text-strong);
  display: block;
  margin: var(--s-1) 0 0;
}

:is(body.tax-product_cat, body.dta-search-page, body.dta-home-page, body.dta-shop-page) .dta-archive ul.products li.product .price del,
:is(body.tax-product_cat, body.dta-search-page, body.dta-home-page, body.dta-shop-page) .dta-archive ul.products li.product .price ins {
  color: inherit;
  text-decoration: none;
  background: none;
}

:is(body.tax-product_cat, body.dta-search-page, body.dta-home-page, body.dta-shop-page) .dta-archive ul.products li.product a:hover .woocommerce-loop-product__title {
  color: var(--c-accent);
}

/* =========================================================================
   6b. SHARED BLOCK CHROME — a headed band, and a row of chips
   =========================================================================

   Not from the leaf mockup. These came over with category-hub.html and lived in
   hub.css while the hub was the only page using them; series-archive.html is the
   second, so they are here now — one definition, loaded by every page of this
   design, rather than the same forty lines in two stylesheets drifting apart.

   .band      a section with a rule under it
   .band-head its heading row, optionally with a link pushed right
   .chips     a wrapping row of .chip
   .chip      a bordered link with an optional count
   ====================================================================== */

.band {
  padding: var(--s-6) 0;
  border-bottom: var(--rule);
}

.band-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}

.band-head h2 {
  font-size: var(--t-lg);
  font-weight: var(--w-semibold);
  margin: 0;
}

.band-head .more {
  margin-left: auto;
  font-family: var(--f-narrow);
  font-size: var(--t-sm);
  white-space: nowrap;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.chip {
  font-family: var(--f-narrow);
  font-size: var(--t-sm);
  text-decoration: none;
  color: var(--c-text-strong);
  border: var(--rule);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius);
  white-space: nowrap;
}

.chip:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
}

.chip i {
  font-style: normal;
  color: var(--c-text);
  margin-left: var(--s-2);
  font-feature-settings: var(--num-tabular);
}


/* =========================================================================
   7. PAGER
   ====================================================================== */

.dta-pager {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: var(--rule);
  font-family: var(--f-narrow);
  font-size: var(--t-sm);
}

.dta-pager .woocommerce-pagination ul,
.dta-pager ul.page-numbers {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
}

.dta-pager li { margin: 0; border: 0; }

.dta-pager a.page-numbers,
.dta-pager span.page-numbers {
  text-decoration: none;
  color: var(--c-text-strong);
  border: var(--rule);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius);
  font-feature-settings: var(--num-tabular);
  display: block;
  background: var(--c-surface);
}

.dta-pager span.page-numbers.current {
  background: var(--c-dark);
  color: var(--c-text-invert);
  border-color: var(--c-dark);
}

.dta-pager span.page-numbers.dots {
  border: 0;
  background: none;
  color: var(--c-border-focus);
  padding-left: 0;
  padding-right: 0;
}

.dta-pager a.page-numbers:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
}

/* =========================================================================
   8. NARROW
   =========================================================================

   One column under 900px. The rail moves above the products rather than below
   them: someone who came to filter should not have to scroll a 48-card grid to
   find the controls.
   ====================================================================== */

@media (max-width: 900px) {
  .dta-archive__body {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }

  .dta-archive .facets {
    border-top: var(--rule);
  }

  .dta-archive .siblings b {
    display: block;
    margin-bottom: var(--s-2);
  }
}

@media (max-width: 600px) {
  .dta-archive ul.products {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }

  /* Tap targets. Facet rows are the smallest thing on the page. */
  .dta-archive .facet a,
  .dta-archive .facet .facet__flat {
    padding: var(--s-2) 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dta-archive *,
  .dta-archive *::before,
  .dta-archive *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* -------------------------------------------------------------------------
   An archive filtered down to nothing.

   The block that replaces WooCommerce's "No products were found matching your
   selection." It carries the count as a relationship — "0 of 2,008 shown" —
   because removing the figure loses something the customer wants, which is how
   much sits behind the filter they just applied, and stating the relationship
   beats hiding half of it.

   NO CHIP STYLES HERE. `.chip` and `.chips` are already defined in this
   stylesheet for the facet rail, and the archive's empty state uses the same
   markup as the search's deliberately — same shape, same affordance, one set of
   rules. A second chip style for the same control on a neighbouring page is how
   two pages that solve one problem stop looking like one site.
   ---------------------------------------------------------------------- */

.dta-archive__none {
  padding: var(--s-5) 0;
  max-width: 46rem;
}

.dta-archive__none h2 {
  margin: 0 0 var(--s-3);
}

.dta-archive__none p {
  margin: 0 0 var(--s-4);
}

.dta-archive__none-count {
  color: var(--c-text-strong);
}