/* ==========================================================================
   THE GENESYS - secondary product archives
   Best sellers · Sales · Favourites · Printers & accessories

   These four are page templates in the parent, separate from the shop archive
   that shop.css dresses. They were the last screens rendering the redesigned
   product card on the parent's un-redesigned chrome - dark cards on a white
   page - so this brings the chrome across.

   ⚠️ NOT scoped under .gns-shop. Those pages wrap their content in the
   parent's `.shop-container`, not the `.gns-shop` wrapper the forked
   archive-product.php emits. shop.css is loaded alongside this file because
   its filter-rail rules (.gns-rail, .gns-group, .gns-option, .gns-pill,
   .gns-range) are already unscoped and the rail is genuinely shared -
   best-seller and sales both call template-parts/sidebar-shop.php.

   ⚠️ These pages keep WooCommerce's own result count and ordering control.
   The shop screen removes them because its forked template renders its own;
   here they are the only ones, which is why `is_shop_screen()` deliberately
   excludes these four and this file exists instead.
   ========================================================================== */

body.gns-archive {
  background-color: var(--gns-bg);
  color: var(--gns-text);
}
body.gns-archive .site,
body.gns-archive #page,
body.gns-archive #content,
body.gns-archive .site-main {
  background-color: var(--gns-bg);
}

/* -------------------------------------------------------------- layout --- */

body.gns-archive .shop-container {
  display: grid;
  grid-template-columns: 250px 1fr;
  align-items: start;
  gap: 28px;
  /*
   * ⚠️ The CAP was the column limiter here, not the grid. `ul.products` below
   * is already `repeat(auto-fill, minmax(240px, 1fr))` and would have found
   * more columns on its own - it never got the room, because a 1400px cap
   * leaves 1074px of results after the 250px rail and its gaps, which is four
   * cards and no more however wide the monitor is.
   *
   * `min(2040px, 100%)` lets the count answer the screen the way the shop's
   * full-bleed grid already does - 4 at 1440, 6 at 1920 - and still stops,
   * because a rail plus nine cards is a spreadsheet rather than a shop.
   */
  max-width: min(2040px, 100%);
  margin: 0 auto;
  padding: 24px 24px 64px;
}

/*
 * The parent offsets .shop-container by --top-margin for its fixed header and
 * subtracts the sidebar width from the main column, which double-counts inside
 * a grid. Both are neutralised, the same way shop.css does for the shop.
 */
body.gns-archive .shop-main-content {
  width: auto;
  min-width: 0;
  margin: 0;
}
body.gns-archive .custom-sidebar {
  width: auto;
  margin: 0;
}

/* The page title is deliberately `.title hidden` in the parent templates. */
body.gns-archive .title.hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------- count + ordering ---- */

/*
 * WooCommerce floats the count left and the parent gives it `margin: 15px 0 0`,
 * so it collided with the ordering form on the same line - the page read
 * "SHOWING 1-8 OF 20 RESULTSORDER BY". Cleared and stacked instead; the shop's
 * own header puts them on one row, but that layout belongs to its forked
 * template, and these four keep the parent's markup.
 */
body.gns-archive .woocommerce-result-count {
  float: none !important;
  margin: 0 0 6px !important;
  font: 500 10px var(--gns-font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gns-muted);
}

body.gns-archive .woocommerce-ordering {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  float: none;
}
body.gns-archive .woocommerce-ordering .order-label {
  margin: 0;
  font: 500 10px var(--gns-font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--gns-muted);
}
body.gns-archive .woocommerce-ordering select {
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--gns-border-strong) !important;
  border-radius: var(--gns-r-pill);
  background-color: transparent !important;
  color: var(--gns-text) !important;
  font-family: var(--gns-font);
  font-size: 12.5px;
  cursor: pointer;
}
body.gns-archive .woocommerce-ordering select option {
  background: var(--gns-surface);
  color: var(--gns-text);
}

/* ---------------------------------------------------------------- grid --- */

body.gns-archive ul.products {
  display: grid;
  /*
   * ⚠️ 232 and 14, matching shop.css - and the two numbers are why. The same
   * product is shown on both pages, so it should be the same size on both. A
   * 240px floor with an 18px gap packed five columns here and stretched them
   * to 289px while the shop drew six at 242; dropping the floor to 232 and the
   * gap to the shop's 14 fits six here too, at 241. The `1fr` ceiling still
   * fills the row exactly - and at 1440 it lands on 264px, which is the width
   * the canvas draws.
   */
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* WooCommerce floats li.product and gives it a percentage width. */
body.gns-archive ul.products li.product,
body.gns-archive ul.products .product {
  float: none;
  clear: none;
  width: auto;
  margin: 0;
}
body.gns-archive ul.products::before,
body.gns-archive ul.products::after { content: none; }

body.gns-archive .woocommerce-info,
body.gns-archive .woocommerce-no-products-found {
  padding: 40px 20px;
  border: 1px solid var(--gns-border);
  border-radius: var(--gns-r-card);
  background: var(--gns-surface);
  color: var(--gns-secondary) !important;
  text-align: center;
}
body.gns-archive .woocommerce-info::before { content: none !important; }

/* ---------------------------------------------------------- pagination --- */
/*
 * Moved to components.css. The shop archive renders the same
 * woocommerce/loop/pagination.php markup but carries `.gns-shop`, not
 * `body.gns-archive`, so a copy scoped here left all 21 shop page numbers on
 * the parent's #7D7D7D - 3.81:1 on the light ground. One rule, both roots.
 */

/* -------------------------------------------- printers-only sidebar ------ */
/*
 * printer-and-accessories.php calls a different part
 * (template-parts/sidebar-accessories.php), which the child does not override,
 * so its markup is the parent's. Dress it to match the shared rail rather than
 * forking a template only to change classes.
 */
body.gns-archive .sidebar-accessories,
body.gns-archive .accessories-sidebar {
  padding: 20px 18px;
  border: 1px solid var(--gns-border);
  border-radius: var(--gns-r-card);
  background: var(--gns-surface);
}
body.gns-archive .checkbox-filter label,
body.gns-archive .filter-item label {
  color: var(--gns-body);
  font-size: 13px;
}

/*
 * The printers page has its own price filter buttons. Unselected they are
 * #7D7D7D on white (4.12:1 in light), selected they are white on flat cyan
 * (2.12:1). Given the shared pill treatment so both themes and both states
 * clear AA.
 */
body.gns-archive .price-button,
body.gns-archive .filter-new-button {
  height: 30px;
  padding: 0 13px;
  border: 1px solid var(--gns-border-strong) !important;
  border-radius: var(--gns-r-pill);
  background: transparent !important;
  color: var(--gns-body) !important;
  font-family: var(--gns-font);
  font-size: 12px;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
body.gns-archive .price-button:hover,
body.gns-archive .filter-new-button:hover {
  border-color: var(--gns-cyan);
  color: var(--gns-text) !important;
}
body.gns-archive .price-button.selected,
body.gns-archive .filter-new-button.selected,
body.gns-archive .price-button.active,
body.gns-archive .filter-new-button.active {
  background: var(--gns-cyan-tint-2) !important;
  border-color: var(--gns-border-cyan) !important;
  color: var(--gns-text) !important;
  font-weight: 700;
}

/* -------------------------------------------------------- results head --- */
/*
 * printer-and-accessories.php is forked into this theme now and renders the
 * SHOP's header row - title, count, sort, grid/list - so shop.css dresses it and
 * the two screens finally read the same. Two things have to be corrected here:
 *
 *   - that head carries `padding: 18px 28px` to sit over the shop's inset grid
 *     (`ul.products { padding: 20px 28px 24px }`). This page's grid runs to the
 *     column edge, so the side padding would hang the heading 28px right of the
 *     first card.
 *   - the count and the sort control inside it are WooCommerce's own elements,
 *     and the rules earlier in this file styled them for the STACKED layout they
 *     had before - mono, uppercase, with a bottom margin each.
 */
body.gns-archive .gns-results__head {
  padding: 0 0 16px;
  margin: 0 0 20px;
}
body.gns-archive .gns-results__head .woocommerce-result-count {
  margin: 0 !important;
  font: 400 12.5px/1.4 var(--gns-font);
  letter-spacing: 0;
  text-transform: none;
  color: var(--gns-secondary-2);
}
body.gns-archive .gns-results__head .woocommerce-ordering { margin: 0; }

/*
 * ⚠️ The heading font, for the same reason gns-base.css states it: the parent
 * sets headings to "Good Times" through theme.json, whose output is
 * `:root :where(h1..h6)` and scores (0,1,0). gns-base.css corrects that to
 * DM Sans - but only under `.gns-scope`, and these pages are wrapped in the
 * parent's `.shop-container`, so they never get it. The shop's title rendered
 * in DM Sans and this one in an all-caps display face, side by side, from the
 * same `.gns-results__title h1` rule.
 */
body.gns-archive .gns-results__title h1 {
  font-family: var(--gns-font);
  text-transform: none;
  letter-spacing: -.02em;
}

/* The loading placeholders follow this grid, not the shop's inset one. */
body.gns-archive .gns-skeleton {
  padding: 0;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
}
body.gns-archive .gns-more { padding-left: 0; padding-right: 0; }

/* ------------------------------------------------------------ responsive - */

@media (max-width: 900px) {
  body.gns-archive .shop-container {
    grid-template-columns: 1fr;
    padding: 16px 16px 48px;
  }

  /*
   * ⚠️ Stack the head. WooCommerce's ordering form is a label plus a full-width
   * select, and beside the layout toggle the pair measured wider than the
   * column: the toggle ended up at x=378 in a 375px viewport, off the screen
   * and unreachable, without producing a scrollbar to reveal it.
   */
  body.gns-archive .gns-results__head {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  body.gns-archive .gns-results__tools {
    flex-wrap: wrap;
    justify-content: space-between;
  }
  body.gns-archive .gns-results__head .woocommerce-ordering,
  body.gns-archive .gns-results__head .woocommerce-ordering select {
    flex: 1 1 auto;
    min-width: 0;
  }
}
@media (max-width: 767px) {
  body.gns-archive ul.products {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
  }
}