/* ==========================================================================
   CLOZSY - SHOP / PRODUCT ARCHIVE  (Phase 6)
   --------------------------------------------------------------------------
   Scope: .clz-shop and its parts only.

   This file adds ONLY what the archive needs on top of what already exists:
     - the product CARD comes from components.css, shared verbatim with home
     - pagination, result count and the ordering select are already tokenised
       in Phase 2's woocommerce.css and are not restyled here
   What remains is the intro, the toolbar rail, the grid and the empty state.

   Rules are prefixed .clz-shop so they sit at (0,2,0) and outrank the
   Elementor kit's global element rules without !important.

   Font sizes are px, never rem: Astra reduces the root font-size at its own
   breakpoints.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. MEASUREMENTS + SHELL
   -------------------------------------------------------------------------- */
.clz-shop {
  --clz-shop-max: var(--clz-header-max);   /* aligns with header and footer */
  --clz-shop-x:   var(--clz-space-7);
  --clz-shop-gap: var(--clz-space-5);
}

.clz-shop .clz-shop__inner {
  width: 100%;
  max-width: var(--clz-shop-max);
  margin-inline: auto;
  padding-inline: var(--clz-shop-x);
}

/* Astra wraps archive output in .ast-container, which caps it at 1240px and
   adds its own gutter. The body class is added only on product archives (see
   inc/shop.php) so this cannot leak to cart, checkout or account. */
body.clz-archive .site-content > .ast-container,
body.clz-archive .ast-container {
  max-width: none;
  padding-inline: 0;
}

/* Elementor 4 shortcode wrappers dissolved so the authored markup is the real
   layout child. */
.clz-shop .clz-shop__row > .elementor-widget-shortcode,
.clz-shop .clz-shop__row > .elementor-widget-shortcode > .elementor-shortcode {
  display: contents;
}

/* --------------------------------------------------------------------------
   2. INTRO
   -------------------------------------------------------------------------- */
.clz-shop .clz-shop__intro {
  padding-block: clamp(40px, 4.6vw, 76px) var(--clz-space-6);
}

.clz-shop .clz-shop__eyebrow {
  display: block;
  margin: 0 0 var(--clz-space-3);
  font-family: var(--clz-font-body);
  font-size: 12px;
  font-weight: var(--clz-fw-semibold);
  line-height: 1.2;
  letter-spacing: var(--clz-ls-caps);
  text-transform: uppercase;
  color: var(--clz-accent);
}

.clz-shop .clz-shop__title {
  margin: 0;
  font-family: var(--clz-font-heading);
  font-size: clamp(30px, 21.2px + 2.35vw, 46px);
  font-weight: var(--clz-fw-semibold);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--clz-text);
}

.clz-shop .clz-shop__lede {
  margin: var(--clz-space-4) 0 0;
  max-width: 52ch;
  font-family: var(--clz-font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--clz-text-secondary);
}

/* Category / term description on a product_cat or product_tag archive. */
.clz-shop .clz-shop__term-desc {
  margin: var(--clz-space-4) 0 0;
  max-width: 62ch;
  font-family: var(--clz-font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--clz-text-secondary);
}

.clz-shop .clz-shop__term-desc p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   3. TOOLBAR
   A hairline rail: count on the left, WooCommerce's own sort control on the
   right. No filter trigger is rendered while there is nothing real to filter
   by (see inc/shop.php).
   -------------------------------------------------------------------------- */
.clz-shop .clz-shop__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--clz-space-3) var(--clz-space-5);
  padding-block: var(--clz-space-4);
  border-block: 1px solid var(--clz-border);
}

/* WooCommerce prints these with its own margins and float-era styles. */
.clz-shop .clz-shop__toolbar .woocommerce-result-count,
.clz-shop .clz-shop__toolbar .woocommerce-ordering {
  margin: 0;
  float: none;
}

.clz-shop .clz-shop__toolbar .woocommerce-result-count {
  font-family: var(--clz-font-body);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--clz-text-muted);
}

.clz-shop .clz-shop__sort {
  display: flex;
  align-items: center;
  gap: var(--clz-space-3);
}

.clz-shop .clz-shop__toolbar .woocommerce-ordering {
  display: flex;
  align-items: center;
}

.clz-shop .clz-shop__sort-label {
  font-family: var(--clz-font-body);
  font-size: 12px;
  font-weight: var(--clz-fw-semibold);
  letter-spacing: var(--clz-ls-caps);
  text-transform: uppercase;
  color: var(--clz-text-muted);
}

.clz-shop .clz-shop__toolbar select.orderby {
  min-width: 11rem;
  padding: 10px 36px 10px 12px;
  border: 1px solid var(--clz-border);
  border-radius: var(--clz-radius-sm);
  background-color: var(--clz-surface);
  background-image: var(--clz-icon-chevron);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
  color: var(--clz-text);
  font-family: var(--clz-font-body);
  font-size: 14px;
  line-height: 1.2;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: border-color var(--clz-transition);
}

.clz-shop .clz-shop__toolbar select.orderby:hover { border-color: var(--clz-border-strong); }

.clz-shop .clz-shop__toolbar select.orderby:focus-visible {
  outline: none;
  border-color: var(--clz-accent);
  box-shadow: var(--clz-ring);
}

/* --------------------------------------------------------------------------
   4. GRID
   4 / 3 / 2 columns. The card itself is the shared component.
   -------------------------------------------------------------------------- */
.clz-shop .clz-shop__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--clz-space-7) var(--clz-shop-gap);
  margin-block: var(--clz-space-7);
}

/* --------------------------------------------------------------------------
   5. PAGINATION
   Phase 2 already tokenises .woocommerce-pagination. Only spacing and the
   mobile touch-target floor are added here.
   -------------------------------------------------------------------------- */
.clz-shop .clz-shop__pagination {
  padding-block: var(--clz-space-5) var(--clz-space-8);
}

.clz-shop .clz-shop__pagination nav.woocommerce-pagination { margin: 0; }

/* --------------------------------------------------------------------------
   6. EMPTY STATE
   Shown instead of WooCommerce's default notice while the catalogue is empty.
   Compact and deliberate, not a giant blank area.
   -------------------------------------------------------------------------- */
.clz-shop .clz-shop__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-block: var(--clz-space-7) var(--clz-space-9);
  padding: clamp(40px, 6vw, 80px) var(--clz-space-5);
  border: 1px solid var(--clz-border);
  border-radius: var(--clz-radius-lg);
  background-color: var(--clz-surface);
}

.clz-shop .clz-shop__empty-title {
  margin: 0;
  font-family: var(--clz-font-heading);
  font-size: clamp(24px, 17.4px + 1.76vw, 36px);
  font-weight: var(--clz-fw-semibold);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--clz-text);
}

/* The one restrained gold detail, matching the footer column rules. */
.clz-shop .clz-shop__empty-title::after {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  margin: var(--clz-space-5) auto 0;
  background-color: var(--clz-accent);
}

.clz-shop .clz-shop__empty-text {
  margin: var(--clz-space-4) 0 0;
  max-width: 46ch;
  font-family: var(--clz-font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--clz-text-secondary);
}

.clz-shop .clz-shop__empty .clz-btn-row { justify-content: center; }

/* --------------------------------------------------------------------------
   7. TABLET  (768px - 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .clz-shop { --clz-shop-x: var(--clz-space-5); }

  .clz-shop .clz-shop__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--clz-space-6) var(--clz-space-4);
  }
}

/* --------------------------------------------------------------------------
   8. MOBILE  (below 768px)
   Two columns is kept deliberately: a single column turns a fashion catalogue
   into an endless scroll. 767.98px for the fractional-viewport reason.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .clz-shop { --clz-shop-x: var(--clz-space-4); }

  .clz-shop .clz-shop__intro { padding-block: var(--clz-space-6) var(--clz-space-5); }

  .clz-shop .clz-shop__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--clz-space-6) var(--clz-space-3);
    margin-block: var(--clz-space-6);
  }

  /* The toolbar stacks so the sort control keeps a comfortable width. */
  .clz-shop .clz-shop__toolbar {
    align-items: stretch;
    gap: var(--clz-space-3);
  }

  .clz-shop .clz-shop__sort,
  .clz-shop .clz-shop__toolbar .woocommerce-ordering { width: 100%; }

  .clz-shop .clz-shop__toolbar select.orderby {
    flex: 1 1 auto;
    width: 100%;
    min-height: 44px;
  }

  /* 44px touch targets for pagination on phones. */
  .clz-shop .clz-shop__pagination nav.woocommerce-pagination ul li a,
  .clz-shop .clz-shop__pagination nav.woocommerce-pagination ul li span {
    min-width: 44px;
    height: 44px;
  }

  .clz-shop .clz-shop__pagination { padding-block: var(--clz-space-4) var(--clz-space-7); }
}

/* Product names must stay readable in a two-up grid on the narrowest phones. */
@media (max-width: 380.98px) {
  .clz-shop .clz-shop__grid { gap: var(--clz-space-5) var(--clz-space-3); }
}