/*
 * Nesa Underwear Shop / Product Archive page.
 */

/* ── Page layout ── */
.woocommerce .bp-site-header + .oxa-page,
.woocommerce-page .bp-site-header + .oxa-page,
body.post-type-archive-product .oxa-page,
body.tax-product_cat .oxa-page {
  max-width: 1320px;
  margin-inline: auto;
  padding: 1.5rem;
}

/* ── Breadcrumb ── */
.woocommerce-breadcrumb {
  font-size: 0.8125rem;
  color: var(--bp-muted, var(--nesa-ink-soft));
  margin-bottom: 1.5rem;
  padding: 0;
}
.woocommerce-breadcrumb a {
  color: var(--bp-muted, var(--nesa-ink-soft));
  text-decoration: none;
}
.woocommerce-breadcrumb a:hover {
  color: var(--bp-green, var(--nesa-ink));
}

/* ── Filter toolbar — two rows ── */
.bp-shop-toolbar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem;
  gap: 2rem;
  flex-wrap: wrap;
}

/* Each column: label on top, controls below */
.bp-shop-toolbar__col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.bp-shop-toolbar__col--right {
  align-items: flex-start;
}
.bp-shop-toolbar__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bp-text, var(--nesa-ink));
}
.bp-shop-toolbar__controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Filter select pills */
.bp-filter-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--bp-bg, #fff);
  border: 1px solid var(--bp-border, var(--nesa-line));
  border-radius: 9999px;
  padding: 0.5rem 2rem 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--bp-text, var(--nesa-ink));
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  min-width: 120px;
}
.bp-filter-select:focus {
  outline: none;
  border-color: var(--bp-green, var(--nesa-ink));
}

.bp-filter-btn {
  background: var(--bp-announce-bg, var(--nesa-ink));
  color: #fff;
  border: 0;
  border-radius: 9999px;
  padding: 0.5rem 1.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}
.bp-filter-btn:hover {
  background: var(--nesa-ink);
}

/* WooCommerce default ordering — same pill shape as filters */
.woocommerce-ordering {
  margin: 0 !important;
}
.woocommerce-ordering select.orderby {
  appearance: none;
  -webkit-appearance: none;
  background: var(--bp-bg, #fff);
  border: 1px solid var(--bp-border, var(--nesa-line));
  border-radius: 9999px;
  padding: 0.5rem 2.5rem 0.5rem 1rem;
  font-size: 0.8125rem;
  color: var(--bp-text, var(--nesa-ink));
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}
.woocommerce-ordering select.orderby:focus {
  outline: none;
  border-color: var(--bp-green, var(--nesa-ink));
}

/* Hide default WC result count */
.woocommerce-result-count {
  display: none !important;
}

/* ── Product Grid — 4 columns ── */
ul.products,
.woocommerce ul.products {
  display: grid !important;
  /* 5 on a laptop, 6 on a big monitor (client brief) — was 4. */
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  /* Same gap the homepage rail uses, so a card in the shop grid and a card in
   * the rail sit on the same rhythm. minmax(0, 1fr) rather than 1fr: an fr
   * track floors at min-content, and a long product name would otherwise push
   * its column wider than the other three. */
  gap: var(--nesa-gutter) !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
ul.products::before,
ul.products::after {
  display: none !important;
}

/* ── Product Card ──
 * The loop item is now a bare cell: woocommerce/content-product.php renders
 * .nesa-card inside it, and the card supplies its own media box, badge,
 * wishlist button and body.
 *
 * The border, 12px radius, white fill and `overflow: hidden` that used to be
 * here drew the previous build's boxed card AROUND the new one — a rounded
 * frame with a second, borderless card sitting inside it. Removed rather than
 * overridden; only the resets that keep WooCommerce's own float/margin off the
 * item are kept.
 */
ul.products li.product,
.woocommerce ul.products li.product {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  display: flex;
  flex-direction: column;
}

/* Product image: no rules here.
 *
 * This pinned the loop image to `height: 240px !important; object-fit: contain;
 * padding: 1rem` — the previous build's contained-thumbnail card. The shop grid
 * renders .nesa-card now (woocommerce/content-product.php), whose image is a
 * 2:3 portrait crop sized by aspect-ratio in nesa-card.css. Because these were
 * !important they won, so the same card looked one way on the homepage rail and
 * another in the shop grid.
 *
 * Deleted rather than overridden: nesa-card.css would have needed !important of
 * its own to get past this, and the card is meant to be defined in exactly one
 * place.
 */

/* Product info area */
ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--nesa-ink) !important;
  line-height: 1.4 !important;
  padding: 0.75rem 1rem 0.25rem !important;
  margin: 0 !important;
  min-height: 2.8em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Price */
ul.products li.product .price,
.woocommerce ul.products li.product .price {
  padding: 0 1rem 0.5rem !important;
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--nesa-ink) !important;
}
ul.products li.product .price del {
  color: var(--bp-muted, var(--nesa-ink-soft)) !important;
  font-weight: 400 !important;
  font-size: 0.8125rem !important;
}
ul.products li.product .price ins {
  text-decoration: none !important;
  color: #dc2626 !important;
}

/* Add to cart button — pill, centered, taller */
ul.products li.product .button,
ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product .button {
  display: inline-block !important;
  margin: auto 1rem 1rem !important;
  padding: 0.875rem 1.75rem !important;
  background: var(--bp-announce-bg, var(--nesa-ink)) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 9999px !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
  text-decoration: none !important;
  width: auto !important;
  align-self: center !important;
}
ul.products li.product .button:hover,
.woocommerce ul.products li.product .button:hover {
  background: var(--nesa-ink) !important;
}

/* Star rating */
ul.products li.product .star-rating {
  margin: 0 1rem 0.25rem !important;
  font-size: 0.75rem !important;
}

/* On sale badge */
ul.products li.product .onsale {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: #dc2626;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.25rem 0.625rem;
  border-radius: 6px;
  z-index: 2;
  line-height: 1;
  margin: 0;
}
ul.products li.product {
  position: relative;
}

/* ── Pagination ──
 * High-specificity + !important to override WooCommerce core pagination CSS
 * (which adds the boxed border and a gray "current" page).
 */
.woocommerce nav.woocommerce-pagination,
.woocommerce-pagination {
  margin-top: 2.5rem;
  text-align: center;
}
.woocommerce nav.woocommerce-pagination ul,
.woocommerce-pagination ul {
  display: inline-flex !important;
  align-items: center;
  gap: 0.375rem;
  list-style: none;
  padding: 0;
  margin: 0;
  border: 0 !important;
}
.woocommerce nav.woocommerce-pagination ul li,
.woocommerce-pagination ul li {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-right: 0 !important;
  overflow: visible !important;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 0.5rem !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--nesa-ink) !important;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
/* Hover on a clickable page number (e.g. the "3" in the design) */
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce-pagination ul li a:hover {
  background: var(--nesa-cream) !important;
  color: var(--nesa-ink) !important;
}
/* Current page — solid black */
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a.current,
.woocommerce-pagination ul li span.current {
  background: var(--nesa-ink) !important;
  color: #ffffff !important;
}
/* Ellipsis — muted, non-interactive */
.woocommerce nav.woocommerce-pagination ul li span.dots,
.woocommerce-pagination ul li span.dots {
  background: transparent !important;
  color: var(--nesa-ink-soft) !important;
  min-width: auto;
}

/* ── No products found ── */
.woocommerce-info {
  padding: 2rem;
  text-align: center;
  color: var(--bp-muted, var(--nesa-ink-soft));
  font-size: 1rem;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  ul.products,
  .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 768px) {
  ul.products,
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }
  /* The 180px image height that was here is gone with the desktop rule above —
   * the card keeps its 2:3 ratio at every width. */
  .bp-shop-toolbar {
    flex-direction: column;
    gap: 1rem;
  }
  .bp-shop-toolbar__col--right {
    align-items: flex-start;
  }
}
/*
 * No single-column collapse on phones: the ≤768px two-up grid above holds all
 * the way down, Lindex-style — one photo per row read as a huge image, not a
 * shop. The gap tightens so two ~170px tiles still breathe on a 360px screen.
 */
@media (max-width: 480px) {
  ul.products,
  .woocommerce ul.products {
    gap: 0.75rem 0.625rem !important;
  }
}

/* Big monitors: six per row. */
@media (min-width: 1700px) {
  ul.products,
  .woocommerce ul.products {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}