/**
 * 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 the project docs Every other
 * length is a token or a font-relative unit.
 */

/* ===========================================================================
   1. HEADER BAND: breadcrumb, title, intro, made-to-order line, chips
   =========================================================================== */

.woo-archive-head {
  background: var(--surface);
  padding-block: var(--space-l) var(--space-m);
  padding-inline: var(--space-gutter);
}

.woo-archive-head-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}

.woo-archive-head-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  max-width: var(--container-text);
}

.woo-archive-head h1 {
  font-size: var(--text-h1);
}

.woo-archive-head .lead {
  font-size: var(--text-lead);
}

.woo-archive-note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-3xs) var(--space-s);
  border-radius: var(--radius-pill);
  background: var(--brand-tint-soft);
  font-size: var(--text-small);
  font-weight: var(--weight-strong);
  color: var(--brand-primary);
}

.woo-archive-note .icon {
  flex-shrink: 0;
  width: var(--icon-size);
  height: var(--icon-size);
  color: var(--brand-secondary);
}

/* Category chips. Each row scrolls sideways on narrow screens instead of
   wrapping into a wall of pills; from 48rem the rows wrap. */
.shop-chips {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.shop-chip-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  min-width: 0;
}

.shop-chip-label {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  font-size: var(--text-small);
  color: var(--ink);
}

.shop-chip-list {
  display: flex;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0 0 var(--space-3xs);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--hairline-strong) transparent;
}

.shop-chip-list > li {
  flex-shrink: 0;
}

.shop-chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--btn-min-height-sm);
  padding-inline: var(--space-s);
  border: var(--border-thin) solid var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--white);
  font-size: var(--text-small);
  font-weight: var(--weight-strong);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.shop-chip:hover {
  border-color: var(--brand-secondary);
  color: var(--brand-secondary);
}

.shop-chip[aria-current="page"] {
  border-color: var(--brand-accent);
  background: var(--brand-accent);
  color: var(--white);
}

.shop-chip:focus-visible {
  outline: 3px solid var(--brand-secondary);
  outline-offset: 2px;
}

@media (min-width: 48rem) {
  .shop-chip-row {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-s);
  }

  /* Same height as a chip, so the label lines up with the first row. */
  .shop-chip-label {
    display: flex;
    flex: 0 0 9rem;
    align-items: center;
    min-height: var(--btn-min-height-sm);
  }

  .shop-chip-list {
    flex-wrap: wrap;
    overflow: visible;
    padding: 0;
  }
}

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

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

.woo-archive-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  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-block-end: var(--space-s);
  border-bottom: var(--border-hair) 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: var(--weight-strong);
  color: var(--ink-muted);
}

.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-size: var(--text-small);
  font-weight: var(--weight-strong);
  color: var(--ink-muted);
}

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

/* rules/web/form-controls.md: own chevron, inset matches the text inset. */
.woo-archive .woocommerce-ordering select.orderby {
  -webkit-appearance: none;
  appearance: none;
  min-height: var(--btn-min-height-sm);
  padding-block: 0;
  padding-inline: var(--space-xs) var(--space-l);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--weight-strong);
  color: var(--ink);
  background-color: var(--white);
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: right var(--space-xs) center;
  background-size: var(--select-chevron-size) auto;
  border: var(--border-thin) solid var(--hairline);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.woo-archive .woocommerce-ordering select.orderby:hover {
  border-color: var(--brand-secondary);
}

.woo-archive .woocommerce-ordering select.orderby:focus-visible {
  outline: 3px solid var(--brand-secondary);
  outline-offset: 2px;
}

@media (forced-colors: active) {
  .woo-archive .woocommerce-ordering select.orderby {
    appearance: auto;
    background-image: none;
  }
}

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

/* ===========================================================================
   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: var(--btn-min-height-sm);
  min-height: var(--btn-min-height-sm);
  padding: 0 var(--space-xs);
  font-family: var(--font-heading);
  font-size: var(--text-small);
  font-weight: var(--weight-strong);
  line-height: 1;
  color: var(--brand-primary);
  background: var(--white);
  border: var(--border-thin) solid var(--hairline);
  border-radius: var(--radius-pill);
  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(--brand-primary);
  background: var(--brand-tint-soft);
  border-color: var(--brand-tint);
}

.woo-archive .woocommerce-pagination ul.page-numbers li > span.current {
  color: var(--surface);
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}

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

.woo-archive .woocommerce-pagination .icon {
  width: var(--icon-size);
  height: var(--icon-size);
}

/* ===========================================================================
   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: var(--step-icon-size);
  height: var(--step-icon-size);
  color: var(--brand-secondary);
  background: var(--brand-tint-soft);
  border-radius: var(--radius-pill);
}

.woo-archive-empty-icon .icon {
  width: var(--tap-target);
  height: var(--tap-target);
}

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

.woo-archive-empty h2 {
  font-size: var(--text-h2);
}

.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;
  padding: var(--space-s) var(--space-m);
  font-size: var(--text-small);
  line-height: 1.55;
  color: var(--ink);
  list-style: none;
  background: var(--surface-alt);
  border: var(--border-hair) solid var(--brand-support);
  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-color: var(--brand-secondary);
}

.woo-archive .woocommerce-error {
  border-color: var(--brand-accent);
}

.woo-archive .woocommerce-message .button,
.woo-archive .woocommerce-info .button,
.woo-archive .woocommerce-error .button {
  display: inline-flex;
  align-items: center;
  margin-inline-start: auto;
  min-height: var(--btn-min-height-sm);
  padding: 0 var(--space-m);
  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(--brand-primary);
  background: transparent;
  border: var(--btn-border-width) solid var(--brand-primary);
  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(--surface);
  background: var(--brand-primary);
}

/* 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: 40rem) {
  .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-inline-start: 0;
  }
}

/* ===========================================================================
   SHOP LAYOUT: desktop filter sidebar (inc/woo-shop-layout.php)
   Below 62rem nothing changes: the head band's chips stay, the sidebar copy
   is hidden. From 62rem the chips move into a sticky left column and the
   grid drops to three across beside it.
   =========================================================================== */

.woo-archive-layout,
.woo-archive-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  min-width: 0;
}

.woo-archive-filters {
  display: none;
}

@media (min-width: 62rem) {
  .woo-archive-layout {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    align-items: start;
    gap: var(--space-xl);
  }

  .woo-archive-filters {
    display: block;
    position: sticky;
    top: calc(var(--header-height) + var(--space-m));
    padding: var(--space-m);
    background: var(--white);
    border: var(--border-hair) solid var(--hairline);
    border-radius: var(--radius-lg);
  }

  /* The sidebar replaces the head chips on Shop and category pages only;
     search and 404 keep theirs. */
  .graphique-shop-layout .woo-archive-head .shop-chips--head {
    display: none;
  }

  .woo-archive-main .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Sidebar chips read as a vertical link list, not pills. */
.shop-chips--sidebar {
  gap: var(--space-m);
}

.shop-chips--sidebar .shop-chip-row {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2xs);
}

.shop-chips--sidebar .shop-chip-label {
  display: block;
  flex: none;
  min-height: 0;
  padding-block-end: var(--space-2xs);
  border-bottom: var(--border-hair) solid var(--hairline);
  font-size: var(--text-body);
  color: var(--brand-primary);
}

.shop-chips--sidebar .shop-chip-list {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: var(--space-3xs);
  padding: 0;
  overflow: visible;
}

.shop-chips--sidebar .shop-chip {
  display: flex;
  min-height: 0;
  padding: var(--space-3xs) var(--space-xs);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font-weight: 400;
  white-space: normal;
}

.shop-chips--sidebar .shop-chip:hover {
  background: var(--brand-tint-soft);
}

.shop-chips--sidebar .shop-chip[aria-current="page"] {
  background: var(--brand-tint-pink);
  color: var(--brand-accent);
  font-weight: var(--weight-strong);
}

/* ===========================================================================
   VIEW TOGGLE: Grid / List, between the count and the sort
   =========================================================================== */

/* The count takes the slack, so the toggle and sort sit together on the right. */
.woo-archive-bar {
  justify-content: flex-start;
}

.woo-archive .woocommerce-result-count {
  flex: 1 1 auto;
}

.woo-view-toggle {
  display: inline-flex;
  gap: var(--space-3xs);
  padding: var(--space-3xs);
  border: var(--border-hair) solid var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--white);
}

.woo-view-option {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  min-height: var(--btn-min-height-sm);
  padding-inline: var(--space-xs);
  border-radius: var(--radius-pill);
  font-size: var(--text-small);
  font-weight: var(--weight-strong);
  color: var(--ink-muted);
  text-decoration: none;
  transition: background-color var(--duration-fast), color var(--duration-fast);
}

.woo-view-option:hover {
  color: var(--brand-secondary);
}

.woo-view-option[aria-current="true"] {
  background: var(--brand-primary);
  color: var(--white);
}

.woo-view-option:focus-visible {
  outline: 3px solid var(--brand-secondary);
  outline-offset: 2px;
}

/* ===========================================================================
   LIST VIEW: one product per row, photo left, details right
   =========================================================================== */

.woo-archive-main .product-grid.product-grid--list {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-s);
}

.product-grid--list .product-card {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-2xs);
}

.product-grid--list .product-card-body {
  align-items: flex-start;
  gap: var(--space-2xs);
  padding-inline: 0;
  text-align: left;
}

.product-grid--list .product-card-title {
  font-size: var(--text-h4);
}

.product-card-excerpt {
  display: none;
  max-width: var(--container-text);
  font-size: var(--text-small);
  color: var(--ink);
}

.product-card-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-size: var(--text-small);
  font-weight: var(--weight-strong);
  color: var(--brand-secondary);
}

.product-card:hover .product-card-cta {
  color: var(--brand-accent);
}

@media (min-width: 48rem) {
  .product-grid--list .product-card {
    grid-template-columns: 12rem minmax(0, 1fr);
    gap: var(--space-m);
    padding: var(--space-xs);
  }

  .product-card-excerpt {
    display: block;
  }
}