/**
 * WooCommerce: the fallback product archive.
 *
 * Serves /shop/, every /product-category/… URL and product search results. The
 * curated Shop by Space and collection pages are section-built and do not load
 * this file.
 *
 * WHAT IS NOT HERE, DELIBERATELY
 *   .page-head / .page-head-inner / .breadcrumb  → assets/css/sections/page-head.css,
 *       enqueued alongside this file by inc/woo-surfaces.php. The archive wears the
 *       same band as About, How It Works, Contact and the FAQ, so it reads those
 *       rules rather than owning a second copy that would drift.
 *   .kit-grid / .kit-card / .lead / .btn-* / .eyebrow / .btn-row → components.css.
 * Only the archive's own chrome lives here: the header band's made-to-order line,
 * the result/sort toolbar, pagination, and the empty state — plus the handful of
 * resets needed to stop WooCommerce's own stylesheet floating the toolbar.
 *
 * WooCommerce's stylesheets are left enqueued on purpose. Dequeuing them would
 * be a store-wide change reaching surfaces this file does not own, so everything
 * below simply outweighs them on specificity and source order.
 *
 * TOKENS ONLY. The single exception is `1px` on hairline borders, which is the
 * established convention across components.css, page-head.css and contact.css
 * and is explicitly permitted by .docs/section-agent-contract.md. Every other
 * length is a token or a font-relative unit.
 */

/* ===========================================================================
   1. HEADER BAND — the made-to-order line
   =========================================================================== */

/* Sits under the lead inside .page-head-inner, which is already a flex column
   with a gap, so this needs no margin of its own. */
.woo-archive-head .woo-archive-note {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  max-width: 62ch;
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--graphite);
}

.woo-archive-head .woo-archive-note .material-symbols-outlined {
  flex-shrink: 0;
  font-size: 1.35em;
  color: var(--eucalypt);
}

/* ===========================================================================
   2. LISTING SHELL
   =========================================================================== */

.woo-archive {
  padding-block: var(--section-space-s);
  padding-inline: var(--space-gutter);
}

.woo-archive-inner {
  max-width: var(--container);
  margin-inline: auto;
}

/* ===========================================================================
   3. TOOLBAR — result count + sort
   =========================================================================== */

.woo-archive-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding-bottom: var(--space-s);
  margin-bottom: var(--space-l);
  border-bottom: 1px solid var(--hairline);
}

/* Woo floats these two apart and adds a bottom margin. The flex row above
   already handles both. */
.woo-archive .woocommerce-result-count {
  float: none;
  margin: 0;
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--graphite);
}

.woo-archive .woocommerce-ordering {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  float: none;
  margin: 0;
}

.woo-archive-sort-label {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--graphite);
}

.woo-archive-sort-field {
  position: relative;
  display: inline-flex;
}

.woo-archive .woocommerce-ordering select.orderby {
  appearance: none;
  -webkit-appearance: none;
  padding: 0.7em 3em 0.7em 1.1em;
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--charcoal);
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}

.woo-archive .woocommerce-ordering select.orderby:hover {
  border-color: var(--coastal-blue);
  box-shadow: var(--shadow-sm);
}

/* The native arrow is suppressed above, so draw one from borders rather than
   an image — no asset, no hardcoded colour, and it follows the token. */
.woo-archive-sort-field::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.1em;
  width: 0.45em;
  height: 0.45em;
  border-right: 0.125em solid var(--deep-ocean);
  border-bottom: 0.125em solid var(--deep-ocean);
  transform: translateY(-0.35em) rotate(45deg);
  pointer-events: none;
}

/* Only ever rendered inside <noscript>. */
.woo-archive-sort-go {
  flex-shrink: 0;
}

/* ===========================================================================
   4. GRID
   ===========================================================================
   components.css steps .kit-grid 3 → 1 at 980px, which is right for a
   three-card homepage row but leaves a category of twelve as a very long
   single column on a tablet. The archive steps 3 → 2 → 1, matching the
   mockup's own collection.css. */

@media (max-width: 980px) {
  .woo-archive .kit-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .woo-archive .kit-grid {
    grid-template-columns: 1fr;
  }
}

/* ===========================================================================
   5. PAGINATION
   =========================================================================== */

.woo-archive .woocommerce-pagination {
  margin-top: var(--space-xl);
  text-align: center;
}

.woo-archive .woocommerce-pagination ul.page-numbers {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3xs);
  margin: 0;
  padding: 0;
  border: 0;
  white-space: normal;
}

.woo-archive .woocommerce-pagination ul.page-numbers li {
  display: block;
  float: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
}

/* Direct children only. Previous/Next each wrap a word and an icon in their own
   spans, and a descendant selector would give those the page-number chrome
   too — two boxes where there should be one. */
.woo-archive .woocommerce-pagination ul.page-numbers li > a,
.woo-archive .woocommerce-pagination ul.page-numbers li > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xs);
  min-width: 3em;
  padding: 0.75em 1em;
  font-family: var(--font-heading);
  font-size: var(--text-small);
  font-weight: 700;
  line-height: 1;
  color: var(--deep-ocean);
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast), color var(--duration-fast),
              border-color var(--duration-fast);
}

.woo-archive .woocommerce-pagination ul.page-numbers li > a:hover {
  color: var(--deep-ocean);
  background: var(--coastal-soft);
  border-color: var(--coastal-blue);
}

.woo-archive .woocommerce-pagination ul.page-numbers li > span.current {
  color: var(--off-white);
  background: var(--deep-ocean);
  border-color: var(--deep-ocean);
}

/* The ellipsis between page ranges is a label, not a control. */
.woo-archive .woocommerce-pagination ul.page-numbers li > span.dots {
  color: var(--graphite);
  background: transparent;
  border-color: transparent;
}

.woo-archive .woocommerce-pagination .material-symbols-outlined {
  font-size: 1.25em;
}

/* ===========================================================================
   6. EMPTY STATE
   =========================================================================== */

.woo-archive-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-s);
  max-width: 58ch;
  margin-inline: auto;
  padding-block: var(--space-2xl);
  text-align: center;
}

.woo-archive-empty-icon {
  display: grid;
  place-items: center;
  width: 4.5em;
  height: 4.5em;
  color: var(--deep-ocean);
  background: var(--coastal-soft);
  border-radius: var(--radius-pill);
}

.woo-archive-empty-icon .material-symbols-outlined {
  font-size: 2em;
}

.woo-archive-empty-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.woo-archive-empty h2 {
  font-size: var(--text-h2);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.woo-archive-empty .lead {
  max-width: none;
}

.woo-archive-empty .btn-row {
  justify-content: center;
}

/* ===========================================================================
   7. NOTICES
   ===========================================================================
   The archive is where an "added to cart" or a coupon error lands after a
   redirect. Woo's own treatment is a grey slab with a purple top border and an
   icon from its private webfont, neither of which belongs to this design. */

.woo-archive .woocommerce-notices-wrapper:empty {
  display: none;
}

.woo-archive .woocommerce-message,
.woo-archive .woocommerce-info,
.woo-archive .woocommerce-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s);
  margin: 0 0 var(--space-l);
  padding: var(--space-s) var(--space-m);
  font-size: var(--text-small);
  line-height: 1.55;
  color: var(--charcoal);
  list-style: none;
  background: var(--pebble);
  border: 1px solid var(--hairline);
  border-left: 0.25em solid var(--eucalypt);
  border-radius: var(--radius-md);
}

/* Woo hangs a webfont glyph off ::before and pads 3.5em to clear it. */
.woo-archive .woocommerce-message::before,
.woo-archive .woocommerce-info::before,
.woo-archive .woocommerce-error::before {
  content: none;
}

.woo-archive .woocommerce-info {
  border-left-color: var(--deep-ocean);
}

.woo-archive .woocommerce-error {
  border-left-color: var(--terracotta-hover);
}

.woo-archive .woocommerce-message .button,
.woo-archive .woocommerce-info .button,
.woo-archive .woocommerce-error .button {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  padding: 0.75em 1.5em;
  font-family: var(--font-heading);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight-secondary);
  letter-spacing: var(--btn-letter-spacing);
  text-transform: var(--btn-text-transform);
  color: var(--deep-ocean);
  background: transparent;
  border: var(--btn-border-width) solid var(--deep-ocean);
  border-radius: var(--btn-radius);
  transition: background var(--duration-fast), color var(--duration-fast);
}

.woo-archive .woocommerce-message .button:hover,
.woo-archive .woocommerce-info .button:hover,
.woo-archive .woocommerce-error .button:hover {
  color: var(--off-white);
  background: var(--deep-ocean);
}

/* No `@media (scripting: none)` rule here on purpose. `.reveal` being
   invisible without JavaScript was a framework-level gap affecting every
   section, not an archive one, and it is now answered once in components.css
   alongside the reduced-motion rule it belongs next to. */

/* ===========================================================================
   9. NARROW SCREENS
   =========================================================================== */

@media (max-width: 640px) {
  .woo-archive-bar {
    align-items: flex-start;
    justify-content: flex-start;
  }

  .woo-archive .woocommerce-ordering {
    width: 100%;
  }

  .woo-archive .woocommerce-ordering select.orderby {
    width: 100%;
  }

  .woo-archive-sort-field {
    flex: 1 1 auto;
  }

  .woo-archive .woocommerce-message .button,
  .woo-archive .woocommerce-info .button,
  .woo-archive .woocommerce-error .button {
    margin-left: 0;
  }
}