/* ==========================================================================
   NOVAURA — Shop archive
   The grid is 2-up on mobile and 4-up on desktop, matching the approved
   design. WooCommerce supplies the markup classes; these style them.
   ========================================================================== */

/* --- Page header --------------------------------------------------------- */
.nva-shop__header {
  max-width: 42rem;
  margin-bottom: var(--nva-s-12);
}

.nva-shop__heading {
  font-family: var(--nva-font-heading);
  font-size: var(--nva-t-page-sm);
  font-weight: var(--nva-w-semi);
  line-height: var(--nva-lh-tight);
  letter-spacing: var(--nva-ls-tight);
}

.nva-shop__lead { margin-top: var(--nva-s-5); }

/* --------------------------------------------------------------------------
   Product grid
   WooCommerce prints <ul class="products columns-N">. The column count is
   driven by CSS grid rather than WooCommerce's float classes, so the
   responsive behaviour is deliberate rather than inherited.
   -------------------------------------------------------------------------- */
.nva-woo ul.products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--nva-s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nva-woo ul.products::before,
.nva-woo ul.products::after { content: none; }

.nva-woo ul.products li.product {
  display: flex;
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
}

/* The card fills its grid cell so rows align regardless of title length. */
.nva-woo ul.products li.product > .nva-product-card { width: 100%; }

@media (min-width: 640px) {
  .nva-woo ul.products { gap: var(--nva-s-6); }
}

@media (min-width: 1024px) {
  .nva-shop__header { margin-bottom: var(--nva-s-16); }

  .nva-woo ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--nva-s-10);
  }
}

@media (min-width: 1280px) {
  .nva-woo ul.products { gap: var(--nva-s-12); }
}

/* --------------------------------------------------------------------------
   Pagination
   WooCommerce owns paging; this is presentation only.
   -------------------------------------------------------------------------- */
.woocommerce-pagination {
  display: flex;
  justify-content: center;
  margin-top: var(--nva-s-16);
}

.woocommerce-pagination ul.page-numbers {
  display: flex;
  align-items: center;
  gap: var(--nva-s-2);
  list-style: none;
  border: 0;
}

.woocommerce-pagination li { border: 0; }

.woocommerce-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding-inline: var(--nva-s-3);
  border: 1px solid var(--nva-line);
  border-radius: var(--nva-r-sm);
  font-size: var(--nva-t-small);
  font-weight: var(--nva-w-medium);
  font-variant-numeric: tabular-nums;
  color: var(--nva-ink-60);
  transition: border-color var(--nva-d-base) var(--nva-ease),
              color var(--nva-d-base) var(--nva-ease);
}
.woocommerce-pagination a.page-numbers:hover {
  border-color: var(--nva-ink);
  color: var(--nva-ink);
}
.woocommerce-pagination .page-numbers.current {
  background-color: var(--nva-ink);
  border-color: var(--nva-ink);
  color: var(--nva-on-dark);
}
.woocommerce-pagination .page-numbers.dots {
  border-color: transparent;
  min-width: auto;
  padding-inline: var(--nva-s-1);
}

/* --------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */
.nva-shop__empty {
  padding-block: var(--nva-s-20);
  text-align: center;
}

.nva-shop__empty-title {
  font-family: var(--nva-font-heading);
  font-size: var(--nva-t-section-sm);
  font-weight: var(--nva-w-semi);
}

.nva-shop__empty-body {
  margin-top: var(--nva-s-4);
  margin-bottom: var(--nva-s-8);
  font-size: var(--nva-t-body);
  color: var(--nva-ink-muted);
}

/* --------------------------------------------------------------------------
   WooCommerce notices
   Shown after an add-to-cart without JavaScript, and for coupon or stock
   messages. Styled to match rather than left as WooCommerce defaults.
   -------------------------------------------------------------------------- */
.woocommerce-notices-wrapper:empty { display: none; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nva-s-4);
  margin-bottom: var(--nva-s-8);
  padding: var(--nva-s-4) var(--nva-s-5);
  border: 1px solid var(--nva-line);
  border-left-width: 2px;
  border-radius: var(--nva-r-sm);
  background-color: var(--nva-surface);
  font-size: var(--nva-t-small);
  list-style: none;
}

.woocommerce-message { border-left-color: var(--nva-approved-fg); }
.woocommerce-info    { border-left-color: var(--nva-blue); }
.woocommerce-error   { border-left-color: var(--nva-red); }

.woocommerce-message .button,
.woocommerce-info .button {
  margin-left: auto;
  padding: var(--nva-s-2) var(--nva-s-5);
  background-color: var(--nva-ink);
  color: var(--nva-on-dark);
  border-radius: var(--nva-r-xs);
  font-size: var(--nva-t-nano);
  font-weight: var(--nva-w-semi);
  text-transform: uppercase;
  letter-spacing: var(--nva-ls-button);
}

/* --- Promotion banner ------------------------------------------------------
   A hairline rule rather than a filled card: the customer is already
   shopping, so this informs without competing with the products. Uses the
   existing type scale and line colour, with champagne reserved for the code.
   --------------------------------------------------------------------------- */
.nva-shop-promo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0 0.55em;
  margin: 0 0 var(--nva-s-6);
  padding: var(--nva-s-3) var(--nva-s-4);
  border-top: 1px solid var(--nva-line);
  border-bottom: 1px solid var(--nva-line);
  font-family: var(--nva-font-body);
  font-size: var(--nva-t-small);
  line-height: 1.5;
  color: var(--nva-ink-70);
  text-align: center;
}

.nva-shop-promo__code {
  white-space: nowrap;
  font-weight: var(--nva-w-semi);
  letter-spacing: var(--nva-ls-label);
  color: var(--nva-gold);
}

.nva-shop-promo__sep { opacity: 0.4; }

.nva-shop-promo__cta {
  color: var(--nva-ink);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  white-space: nowrap;
}

.nva-shop-promo__cta:hover,
.nva-shop-promo__cta:focus-visible { opacity: 0.7; }

@media (max-width: 767px) {
  /* Separators read as clutter once the line wraps. */
  .nva-shop-promo__sep { display: none; }
  .nva-shop-promo { gap: 0.15em 0.6em; padding: var(--nva-s-3); }
}