/* ==========================================================================
   ARCHIVE PRODUCT LAYOUT — sidebar/content split, query title, results
   toolbar (count + sort). /shop only. Split out of archive-product-reskin.css,
   scope (#wp--skip-link--target) and every !important kept 1:1. Loads only on
   is_shop(), after wp2025custom-reskin (which supplies :root tokens + reset).

   Product-card styling (the .wc-block-product shell/image/price/button) lives
   in product-card-reskin.css, scoped under .wp-block-woocommerce-product-collection
   and enqueued on the homepage too. The grid tracks + pagination below are
   /shop-only chrome and stay here. The homepage product-section pattern
   defines its own grid in product-section.css.

   Coupling: the min-width:768px row/column split below MUST stay equal to the
   max-width:767.98px overlay breakpoint in archive-product-filter-reskin.css
   — otherwise the two disagree in the 601-767px gap (row layout, collapsed
   filter). Sidebar track width (240px) is a plain CSS literal — no matching
   design token exists.
   ========================================================================== */

#wp--skip-link--target .archive-product-layout {
  display: flex !important;
  flex-direction: column;
  gap: 2rem;
  margin-top: 1.5rem;
}

#wp--skip-link--target .archive-product-content {
  min-width: 0;
  margin-top: 0;
}

#wp--skip-link--target .archive-product-layout>.wc-block-product-filters {
  width: 100% !important;
}

@media (min-width: 768px) {
  #wp--skip-link--target .archive-product-layout {
    flex-direction: row;
    align-items: flex-start;
  }

  #wp--skip-link--target .archive-product-layout>.wc-block-product-filters {
    flex: 0 0 240px;
    width: 240px !important;
  }

  #wp--skip-link--target .archive-product-layout>.archive-product-content {
    flex: 1 1 auto;
    min-width: 0;
  }
}

#wp--skip-link--target .wp-block-query-title {
  font-size: 2rem !important;
  font-weight: 700;
  margin: 0.5rem 0 0;
  letter-spacing: -0.01em;
}

/* --- Toolbar: result count + sort ---
   Gutenberg renders this row as an inline-styled flex group (justify:
   space-between, nowrap) — on extra-small screens the two children (result
   count + sort select) don't fit side by side and overflow. Target the
   group via :has() since its wp-container-core-* class is a per-render
   generated id we can't hardcode. */
@media (max-width: 400px) {
  #wp--skip-link--target .wp-block-group:has(> .wc-block-product-results-count) {
    flex-wrap: wrap !important;
    row-gap: 0.75rem;
  }

  #wp--skip-link--target .wc-block-catalog-sorting {
    width: 100%;
  }

  #wp--skip-link--target .wc-block-catalog-sorting .orderby {
    width: 100%;
  }
}

#wp--skip-link--target .wc-block-product-results-count {
  color: var(--muted);
  font-size: 0.875rem;
}

#wp--skip-link--target .woocommerce-result-count {
  margin: 0;
}

#wp--skip-link--target .wc-block-catalog-sorting .orderby {
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.5rem 2rem 0.5rem 1rem;
  font-size: 0.875rem;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23191918' stroke-width='1.5' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E") no-repeat right 0.9rem center !important;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

#wp--skip-link--target .wc-block-catalog-sorting .orderby:hover {
  border-color: var(--border-400);
}

#wp--skip-link--target .wc-block-catalog-sorting .orderby:focus-visible {
  border-color: var(--accent-600);
}

/* --- Product grid ---
   grid-auto-rows: max-content + align-items: start keeps each row sized to
   its own content only — without it, grid's default row stretch plus the
   image's aspect-ratio box could disagree with the track's computed height
   in some engines and let the pagination nav render inside the last row's
   box instead of fully below it. */
#wp--skip-link--target .wc-block-product-template {
  list-style: none;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: max-content;
  align-items: start;
  gap: 1.5rem;
  padding: 0;
  margin: 1.5rem 0;
  clear: both;
  overflow: visible;
}

/* --- Pagination --- */
#wp--skip-link--target .wp-block-query-pagination {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

#wp--skip-link--target .wp-block-query-pagination-numbers {
  display: flex !important;
  gap: 0.375rem;
}

#wp--skip-link--target .page-numbers {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  border-radius: 999px;
  font-size: 0.875rem;
  color: var(--muted);
}

#wp--skip-link--target a.page-numbers:hover {
  background: var(--surface) !important;
  color: var(--fg);
}

#wp--skip-link--target .page-numbers.current {
  background: var(--fg) !important;
  color: var(--bg);
  font-weight: 700;
}

#wp--skip-link--target .wp-block-query-pagination-next {
  display: flex !important;
  align-items: center;
  min-height: 40px;
  padding: 0 1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
}

#wp--skip-link--target .wp-block-query-pagination-next:hover {
  background: var(--surface) !important;
  border-color: var(--border-400);
}