/*
 * BesaPharm 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, #6b7280);
  margin-bottom: 1.5rem;
  padding: 0;
}
.woocommerce-breadcrumb a {
  color: var(--bp-muted, #6b7280);
  text-decoration: none;
}
.woocommerce-breadcrumb a:hover {
  color: var(--bp-brand-hover, #3d3d3d);
}

/* ── 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, #111827);
}
.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, #e5e7eb);
  border-radius: 9999px;
  padding: 0.5rem 2rem 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--bp-text, #111827);
  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-brand, #111111);
}

.bp-filter-btn {
  background: var(--bp-brand, #111111);
  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(--bp-brand-hover, #3d3d3d);
}

/* 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, #e5e7eb);
  border-radius: 9999px;
  padding: 0.5rem 2.5rem 0.5rem 1rem;
  font-size: 0.8125rem;
  color: var(--bp-text, #111827);
  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-brand, #111111);
}

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

/* ── Product Grid — 4 columns ── */
ul.products,
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.5rem !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
ul.products::before,
ul.products::after {
  display: none !important;
}

/* ── Product Card (no hover effect) ── */
ul.products li.product,
.woocommerce ul.products li.product {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  border: 1px solid var(--bp-border, #e5e7eb);
  border-radius: 12px;
  background: var(--bp-bg, #fff);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Product image */
ul.products li.product a img,
.woocommerce ul.products li.product a img {
  width: 100% !important;
  height: 240px !important;
  object-fit: contain !important;
  background: transparent !important;
  padding: 1rem;
  margin: 0 !important;
  border-bottom: 0 !important;
}

/* 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: #333333 !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: #1d1d1d !important;
}
ul.products li.product .price del {
  color: var(--bp-muted, #6b7280) !important;
  font-weight: 400 !important;
  font-size: 0.8125rem !important;
}
ul.products li.product .price ins {
  text-decoration: none !important;
  color: var(--oxa-sale-price) !important;  /* was #dc2626 */
  font-weight: var(--oxa-fw-medium) !important;
}

/* Shipping line under the price (inc/bp-shipping-note.php): "+€2 posta" as
 * plain text on a discounted product, a "Posta falas" pill on a full-price one.
 * Here rather than per component because the homepage cards, the archive and
 * the product page all print it, and this file loads on every page.
 *
 * fit-content, not inline-block: the cards are column flexboxes that stretch
 * their children, and a pill stretched to the card width is a bar. A sized box
 * is not stretched — it sits at the start edge, where the price starts. */
.bp-shipnote {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
}
/* The site's normal price colour — darker than the struck-through old price. */
.bp-shipnote--paid {
  font-weight: 500;
  color: #43454b;
}
.bp-shipnote--free {
  padding: 2px 8px;
  border-radius: 9999px;
  background: #000000;
  color: #ffffff;
  font-weight: 600;
}
/* Loop cards: the price above has no bottom margin, so the line needs its own. */
ul.products li.product .bp-shipnote { margin-top: 4px; }

/* 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-brand, #111111) !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(--bp-brand-hover, #3d3d3d) !important;
}

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

/* On sale badge — WooCommerce's own flash. Kept styled for any loop that still
 * prints it; the theme's own stickers below are what the shop card uses. */
ul.products li.product .onsale {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: var(--oxa-sale-price);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.25rem 0.625rem;
  border-radius: var(--oxa-radius);  /* 0 — was 6px */
  z-index: 2;
  line-height: 1;
  margin: 0;
}
ul.products li.product {
  position: relative;
}

/* ── Card stickers ──
 * "Risi" (featured) reads top-left, "Zbritje" (sale) top-right. Emitted by
 * oxa_shop_loop_stickers() in inc/shop-loop.php.
 *
 * The wrapper spans the card and the two children are pinned to opposite
 * corners, so either can appear alone without the other's absence shifting it.
 * pointer-events: none keeps the whole card clickable through the stickers.
 */
.bp-stickers {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.bp-sticker {
  position: absolute;
  top: 0.75rem;
  padding: 0.3rem 0.6rem;
  border-radius: var(--oxa-radius);
  font-size: 0.6875rem;
  font-weight: var(--oxa-fw-bold);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #ffffff;
  white-space: nowrap;
}

/* Sale sits right, at 90% so the artwork still reads through it. */
.bp-sticker--sale {
  right: 0.75rem;
  background: rgba(239, 68, 68, 0.9);
}

.bp-sticker--new {
  left: 0.75rem;
  background: #0ea5e9;
}

@media (max-width: 480px) {
  .bp-sticker {
    top: 0.5rem;
    padding: 0.25rem 0.45rem;
    font-size: 0.625rem;
  }
  .bp-sticker--sale { right: 0.5rem; }
  .bp-sticker--new  { left: 0.5rem; }
}

/* ── 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: #1d1d1d !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: #f3f4f6 !important;
  color: #1d1d1d !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: #1d1d1d !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: #6b7280 !important;
  min-width: auto;
}

/* ── No products found ── */
.woocommerce-info {
  padding: 2rem;
  text-align: center;
  color: var(--bp-muted, #6b7280);
  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;
  }
  ul.products li.product a img,
  .woocommerce ul.products li.product a img {
    height: 180px !important;
  }
  .bp-shop-toolbar {
    flex-direction: column;
    gap: 1rem;
  }
  .bp-shop-toolbar__col--right {
    align-items: flex-start;
  }
}
@media (max-width: 480px) {
  ul.products,
  .woocommerce ul.products {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================
 * BRAND BANNER
 *
 * Printed by inc/bp-brand-banner.php above the filter rail when a single
 * brand is filtered. Full-bleed inside the same 1280px column the grid uses,
 * and no fixed height — the artwork is wide (the reference's is 8750×2500) and
 * letting it keep its own ratio is what stops it cropping heads off on a phone.
 * ========================================================== */
.bp-brand-banner {
  max-width: 1280px;
  margin: 0 auto 1.5rem;
  padding-inline: 1.5rem;
}
.bp-brand-banner__img {
  display: block;
  width: 100%;
  height: auto;
  /* Square. The artwork is a full-bleed campaign image with type running to its
   * edges, and a rounded corner clipped it. Nothing else on the shop is
   * rounded either — the cards, the inputs and the buttons are all square. */
}

@media (max-width: 900px) {
  .bp-brand-banner { padding-inline: 1rem; }
}