/*
 * bs-product-archive.css — BlackSpace product archive pages
 *
 * Scope: shop, product categories, product tags, product search results.
 * Enqueued via 085-bs-product-archive.php on bs_is_product_archive_context().
 *
 * Card anatomy (top → bottom):
 *   1. Image (square, 10px radius, wishlist overlay top-right)
 *   2. Badges row .bs-card-badges (empty slot, hidden until populated)
 *   3. Title .wd-entities-title (13px, 2-line clamp)
 *   4. Seller .bs-card-seller ("by ShopName" — bronze uppercase)
 *   5. Rating .bs-card-rating (empty slot, hidden until CusRev populates)
 *   6. Price .price (13px bold bronze, "From" prefix on variable/grouped)
 *   7. Add-to-cart footer .wd-product-footer
 *
 * Colors: #b0743e bronze | #c8925e bronze-300 | #f7eee5 bronze-050
 *   #1a1a1a neutral-900 | #2e2e2e neutral-700 | #474747 graphite
 *   #e6e6e6 silver-mist | #f5f0eb warm-off-white | #fafafa neutral-025
 *
 * Every declaration uses !important — Elementor post CSS + WoodMart
 * stylesheet specificity require it. Do not remove.
 */

/* ── Grid container — override WoodMart's .grid-columns-5 default ── */

.woocommerce .products.wd-products,
.wd-products.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 32px 10px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Kill WoodMart's per-column fractional width so our grid wins.
   min-width: 0 is critical — without it grid tracks expand to fit
   intrinsic content (long prices, wide images) and blow past viewport. */
.wd-products.products > .wd-product.wd-col,
.wd-products.products > .product.wd-col {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Card wrapper and its flex children also need min-width: 0 so the
   image thumb and price row can't push the card wider than its track. */
.wd-products.products .wd-product-wrapper,
.wd-products.products .wd-product-thumb,
.wd-products.products .product-element-bottom {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* ── Card wrapper ─────────────────────────────────────────── */

.wd-products.products .wd-product-wrapper {
  display: flex !important;
  flex-direction: column !important;
  background: #ffffff !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  height: 100% !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease !important;
  padding: 0 !important;
}
.wd-products.products .wd-product-wrapper:hover {
  border-color: #e6e6e6 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.09) !important;
  transform: translateY(-2px) !important;
}

/* ── Image area — square, clipped, never bleeds ───────────── */

.wd-products.products .wd-product-thumb {
  position: relative !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  width: 100% !important;
  background: #f5f0eb !important;
  border-radius: 10px 10px 0 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.wd-products.products .wd-product-thumb a.wd-product-img-link,
.wd-products.products .wd-product-thumb a.product-image-link {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}
.wd-products.products .wd-product-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 0 !important;
  transition: transform 0.4s ease !important;
}
.wd-products.products .wd-product-wrapper:hover .wd-product-thumb img {
  transform: scale(1.04) !important;
}

/* ── Wishlist button — Etsy-style floating heart ──────────── */

.wd-products.products .wd-buttons.wd-pos-r-t {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 2 !important;
  opacity: 1 !important;
  transform: none !important;
}
.wd-products.products .wd-wishlist-btn {
  background: rgba(255,255,255,0.92) !important;
  border-radius: 50% !important;
  width: 34px !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
  transition: background 0.15s ease !important;
}
.wd-products.products .wd-wishlist-btn:hover {
  background: #ffffff !important;
}
.wd-products.products .wd-wishlist-btn a {
  color: #1a1a1a !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  text-decoration: none !important;
}
.wd-products.products .wd-wishlist-btn .wd-action-icon::before {
  color: #b0743e !important;
  font-size: 14px !important;
}
.wd-products.products .wd-wishlist-btn .wd-action-text {
  display: none !important;
}

/* Hide any other hover action buttons (quick view, compare) */
.wd-products.products .wd-buttons .wd-action-btn:not(.wd-wishlist-btn) {
  display: none !important;
}

/* ── Card body — flex column, fills remaining height ──────── */

.wd-products.products .product-element-bottom {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 12px 14px 14px !important;
  gap: 4px !important;
  text-align: left !important;
}

/* ── 2. Badges slot — hidden until populated ──────────────── */

.bs-card-badges {
  display: none !important;
}
.bs-card-badges:not(:empty) {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  margin-bottom: 6px !important;
  order: -2 !important;
}
.bs-card-badge {
  display: inline-block !important;
  font-size: 0.5625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #b0743e !important;
  background: #f7eee5 !important;
  border-radius: 50px !important;
  padding: 3px 10px !important;
  line-height: 1.2 !important;
}

/* ── 3. Title — 2-line clamp ──────────────────────────────── */

.wd-products.products .wd-product-header {
  margin: 0 !important;
  padding: 0 !important;
  order: -1 !important;
}
.wd-products.products .wd-entities-title {
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: #1a1a1a !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  min-height: calc(1.35em * 2) !important;
}
.wd-products.products .wd-entities-title a {
  color: #1a1a1a !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}
.wd-products.products .wd-entities-title a:hover {
  color: #b0743e !important;
}

/* ── WoodMart .wd-star-rating element — hide on cards ─────────
   We render rating information ourselves using the Etsy pattern
   (★ 4.8 (127)) into .bs-card-rating on the same row as the
   seller line. WoodMart's native star strip is hidden visually
   but kept in the DOM for schema/accessibility purposes.
   ──────────────────────────────────────────────────────────── */

.wd-products.products .wd-star-rating {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

/* ── Seller + rating row — Etsy-style combined row ────────────
   .bs-card-seller and .bs-card-rating sit on the same visual
   line: seller name left, rating right. This keeps every card
   identical height regardless of whether it has reviews.

   Implementation: wrap both in an implicit flex row via the
   element-bottom's flex column — the seller row becomes a
   nested flex container using a CSS wrapper trick. Since both
   are siblings inside .product-element-bottom with a flex column
   layout, we make each of them take a specific position via order
   and let margin-left: auto push rating to the right by floating
   it into a shared flex row via CSS.

   Actual approach: use .bs-card-rating as an absolutely-positioned
   right-aligned overlay anchored to the seller row's top. Simpler
   and doesn't fight the flex-column parent.
   ──────────────────────────────────────────────────────────── */

.wd-products.products .bs-card-seller {
  position: relative !important;
}
/* Only reserve right-side space when a rating has actually been injected.
   Unrated cards use the full width for the seller name, truncating only
   if the name is genuinely wider than the card. */
.wd-products.products .bs-card-seller:has(.bs-card-rating-inline) {
  padding-right: 68px !important;
}

/* ── 4. Seller line — "by ShopName" ───────────────────────── */

.bs-card-seller {
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #474747 !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.bs-card-seller-by {
  color: #474747 !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 0.6875rem !important;
}
.bs-card-seller-link {
  color: #b0743e !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
}
a.bs-card-seller-link {
  cursor: pointer !important;
}
.bs-card-seller-link:hover {
  color: #8c5d31 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* ── 5. Rating — Etsy-style numeric, right-anchored ───────────
   Renders as: ★ 4.8 (127)  where ★ is bronze, 4.8 is neutral-900
   bold, and (127) is graphite. Absolutely positioned at the
   right edge of the seller row (which reserves space via
   padding-right above). The slot is populated by
   bs-card-rating-inject.js, which reads from WoodMart's rating
   markup — so this stays empty (and hidden) on unrated products.
   ──────────────────────────────────────────────────────────── */

.bs-card-rating {
  display: none !important;
}
.bs-card-rating:not(:empty) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  font-size: 0.6875rem !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Anchor the rating slot to the seller row. Since .bs-card-seller
   has position: relative, the rating (a sibling) needs to be
   absolutely-positioned relative to the body. We place it via
   same-y coordinates as the seller div using top: 0 within a
   small wrapper trick — actually simpler: move the rating INTO
   the seller line's flow area using margin-top. */

.wd-products.products .product-element-bottom {
  position: relative !important;
}

.bs-card-rating:not(:empty) {
  /* Vertically align to the seller line by matching its top offset.
     seller sits at the computed top of its flex slot; we anchor
     the rating absolutely to .product-element-bottom and use the
     seller's natural position as our alignment target. */
  top: auto !important;
  bottom: 0 !important;                  /* aligned to price row level */
}

/* Override: Use a more reliable approach — render rating inside
   the seller line via JS injection (see bs-card-rating-inject.js),
   appended as a span within .bs-card-seller itself. Below are the
   styles for the injected span. */

.bs-card-seller .bs-card-rating-inline {
  position: absolute !important;
  top: 50% !important;
  right: 0 !important;
  transform: translateY(-50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap !important;
}

.bs-card-rating-inline-star {
  color: #b0743e !important;
  font-size: 0.8125rem !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  /* Star glyph sized ~13px, slightly larger than the numbers for visual weight */
}

.bs-card-rating-inline-value {
  color: #1a1a1a !important;
  font-weight: 700 !important;
}

.bs-card-rating-inline-count {
  color: #474747 !important;
  font-weight: 400 !important;
  margin-left: 1px !important;
}

/* ── 6. Price — bronze, "From" prefix on ranges ───────────── */

.wd-products.products .wrap-price {
  margin: 6px 0 0 !important;
  padding: 0 !important;
  order: 5 !important;
}
/* WoodMart's grid layout often renders .price directly as a flex child
   of .product-element-bottom (no .wrap-price wrapper). Push it (and
   everything visually after it) to the bottom of the card body so that
   price + footer align across cards regardless of mid-card content
   (WoodMart's .wd-star-rating, our future badges, etc.).

   The earlier .price rule above sets `margin: 0 !important` (shorthand).
   To beat that we use shorthand-at-higher-specificity here, not the
   `margin-top: auto` longhand (which loses to the earlier shorthand
   even with higher selector specificity — a cascade quirk specific
   to shorthand-vs-longhand declarations at the same priority). */
.wd-products.products .product-element-bottom > .price {
  margin: auto 0 0 0 !important;
  order: 5 !important;
}
.wd-products.products .price {
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 2px !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.wd-products.products .price .woocommerce-Price-amount,
.wd-products.products .price bdi,
.wd-products.products .price .woocommerce-Price-currencySymbol {
  color: #1a1a1a !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}
/* Sale price (the live price when a product is on sale) stays bronze to
   signal the discount — reads as an accent against the struck-through
   original price rather than competing with the seller name color. */
.wd-products.products .price ins,
.wd-products.products .price ins .woocommerce-Price-amount,
.wd-products.products .price ins bdi {
  color: #b0743e !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}
/* Show first price amount, hide subsequent range sibling + separator */
.wd-products.products .price .woocommerce-Price-amount:first-of-type {
  display: inline !important;
}
.wd-products.products .price .woocommerce-Price-amount ~ .woocommerce-Price-amount {
  display: none !important;
}
.wd-products.products .price > span[aria-hidden="true"]:not(.woocommerce-Price-amount) {
  display: none !important;
}
.wd-products.products .price .screen-reader-text {
  display: none !important;
}
/* "From" prefix — rendered only when the price widget contains a range
   (detected by presence of >1 amount elements via :has() — modern browsers). */
.wd-products.products .price:has(.woocommerce-Price-amount ~ .woocommerce-Price-amount)::before {
  content: 'From ' !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  white-space: pre !important;
}
/* Sale-price original (strikethrough) styling */
.wd-products.products .price del {
  color: #999999 !important;
  font-weight: 400 !important;
  text-decoration: line-through !important;
  margin-right: 6px !important;
}
.wd-products.products .price del .woocommerce-Price-amount,
.wd-products.products .price del bdi {
  color: #999999 !important;
  font-weight: 400 !important;
}

/* ── 7. Footer / add-to-cart ──────────────────────────────── */

.wd-products.products .wd-product-footer {
  margin: 10px 0 0 !important;
  padding: 0 !important;
  order: 6 !important;
}
.wd-products.products .wd-product-footer .button,
.wd-products.products .wd-product-footer a.button {
  width: 100% !important;
  display: block !important;
  text-align: center !important;
  background: transparent !important;
  color: #1a1a1a !important;
  border: 1px solid #e6e6e6 !important;
  border-radius: 50px !important;
  padding: 8px 16px !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  line-height: 1.4 !important;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
}
.wd-products.products .wd-product-footer .button:hover,
.wd-products.products .wd-product-footer a.button:hover {
  background: #1a1a1a !important;
  color: #ffffff !important;
  border-color: #1a1a1a !important;
}

/* ── Search/archive page header polish ────────────────────── */

.woocommerce-products-header {
  margin-bottom: 28px !important;
}
.woocommerce-products-header__title {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  letter-spacing: -0.01em !important;
}
.woocommerce-result-count {
  font-size: 0.75rem !important;
  color: #474747 !important;
  font-weight: 400 !important;
}
.woocommerce-ordering select {
  font-size: 0.75rem !important;
  border: 1px solid #e6e6e6 !important;
  border-radius: 50px !important;
  padding: 8px 32px 8px 16px !important;
  color: #1a1a1a !important;
  background-color: #ffffff !important;
}

/* ══════════════════════════════════════════════════════════
   SHOP — HIDE SERVER-RENDERED WIDGET BEFORE FIRST PAINT
   ──────────────────────────────────────────────────────────
   On /shop/, the Elementor wd_archive_products widget renders
   its own secondary WP_Query server-side. The Algolia intercept
   in bs-algolia-category-archive.php only fires on the main
   query (is_main_query() guard), so the widget's output is NOT
   Algolia-sourced — it surfaces products from the widget's
   default Elementor query settings, which has no relation to
   the Algolia index.

   On first paint the user briefly saw those unrelated products,
   then bs-algolia-category-facets.js fetched Algolia hits and
   replaced them — a visible flash because the two data sources
   are entirely unrelated.

   Hiding the widget before first paint eliminates the flash.
   The widget stays in the DOM so bs-algolia-category-facets.js
   can continue to use .wd-shop-product as a positioning anchor
   for the toolbar (.e-con ancestor via closest()) and the
   #bs-shop-hits container (insertBefore widget.nextSibling).
   DOM navigation works on display:none elements.

   Scoped with :not(.search-results) to match the pattern used
   below — WooCommerce sets body.woocommerce-shop on product
   search results too, and those should never hide this widget
   class (search is handled by bs-product-search-template.php
   and has no wd_archive_products widget in its DOM anyway,
   but the scope guards against any future rendering path).
   ══════════════════════════════════════════════════════════ */

body.woocommerce-shop:not(.search-results) .elementor-widget-wd_archive_products {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════
   SHOP PAGE HEADER — slim branded strip
   ──────────────────────────────────────────────────────────
   Applies to /shop/ only. Scoped via .woocommerce-shop:not(.search-results)
   to exclude the product search results page (which also carries
   the woocommerce-shop body class but uses the Algolia template
   and has no .wd-page-title element in its DOM).
   ══════════════════════════════════════════════════════════ */

/* Remove wd-content-layout top gap so strip is flush with site nav */
.woocommerce-shop:not(.search-results) .wd-content-layout {
  padding-top: 0 !important;
}

/* Deep brown surface + ambient bronze radial glow */
.woocommerce-shop:not(.search-results) .wd-page-title {
  background-color: #1e1919 !important;
  background-image: radial-gradient(
    ellipse 55% 90% at 28% 50%,
    rgba(176,116,62,0.18) 0%,
    transparent 68%
  ) !important;
  padding-top: 22px !important;
  padding-bottom: 22px !important;
  height: auto !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Amber gradient bottom rule */
.woocommerce-shop:not(.search-results) .wd-page-title::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(176,116,62,0.55),
    transparent
  ) !important;
  pointer-events: none !important;
}

/* Container: column — descriptor on top, chips below.
   Row layout breaks when chips wrap to a second line because the
   descriptor text competes for horizontal space. Column layout
   lets chips wrap freely without affecting the descriptor. */
.woocommerce-shop:not(.search-results) .wd-page-title .container {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 18px 40px !important;
  max-width: 1200px !important;
  box-sizing: border-box !important;
  background: transparent !important;
}

/* Left side: eyebrow label + descriptor stacked column */
.woocommerce-shop:not(.search-results) .wd-title-wrapp {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
}

/* Hide WoodMart UI chrome */
.woocommerce-shop:not(.search-results) .wd-back-btn,
.woocommerce-shop:not(.search-results) .wd-btn-show-cat {
  display: none !important;
}

/* H1 "Shop" becomes the small bronze eyebrow label */
.woocommerce-shop:not(.search-results) .wd-page-title .entry-title {
  font-family: Verdana, Geneva, sans-serif !important;
  font-size: 0.5625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #c8925e !important;
  line-height: 1 !important;
  margin: 0 !important;
}

/* "Browse Black owned businesses" descriptor — injected after the H1 */
.woocommerce-shop:not(.search-results) .wd-title-wrapp::after {
  content: 'Browse Black owned businesses' !important;
  display: block !important;
  font-family: Verdana, Geneva, sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.2 !important;
}

/* Category nav chips — right side of strip */
.woocommerce-shop:not(.search-results) .wd-nav-product-cat {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

.woocommerce-shop:not(.search-results) .wd-nav-product-cat li {
  list-style: none !important;
  padding: 0 !important;
}

.woocommerce-shop:not(.search-results) .wd-nav-product-cat a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 0 !important;
  font-family: Verdana, Geneva, sans-serif !important;
  font-size: 0.5625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.75) !important;
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 50px !important;
  padding: 6px 18px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: background 0.15s, border-color 0.15s !important;
}

.woocommerce-shop:not(.search-results) .wd-nav-product-cat a:hover {
  background: rgba(176,116,62,0.18) !important;
  border-color: rgba(176,116,62,0.40) !important;
  color: #c8925e !important;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .woocommerce .products.wd-products,
  .wd-products.products {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* ── 1024px: WoodMart accordion override for chips ────────────
   WoodMart's woo-categories-loop-nav-mobile-accordion.min.css fires
   at max-width: 1024px and does two things that break our chips:
     1. display: none on .wd-nav-product-cat (hidden until toggle clicked)
     2. li { flex: 1 1 100% } which stacks each chip full-width vertically
   Fix: keep nav visible, override the li flex rule, switch to
   horizontal scroll (nowrap) so chips never stack on narrow screens.

   Also: Elementor's generated CSS sets --margin-top: -40px on section
   904db2b at ≤1024px to compensate for wd-content-layout's original
   padding-top: 40px. Our CSS zeroes that padding, so the -40px now
   overshoots and hides the top of the strip (eyebrow) behind the nav.
   Counteract it by resetting margin-top to 0 at this breakpoint. */

@media (max-width: 1024px) {
  /* Reset the Elementor section's negative top margin */
  .woocommerce-shop:not(.search-results) [data-id="904db2b"] {
    margin-top: 0 !important;
    --margin-top: 0px !important;
  }

  .woocommerce-shop:not(.search-results) .wd-nav-product-cat,
  .tax-product_cat .wd-nav-product-cat {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    max-height: none !important;
    padding-bottom: 2px !important; /* buffer so pill borders aren't clipped */
  }
  .woocommerce-shop:not(.search-results) .wd-nav-product-cat::-webkit-scrollbar,
  .tax-product_cat .wd-nav-product-cat::-webkit-scrollbar {
    display: none !important;
  }
  /* Override WoodMart's li { flex: 1 1 100% } */
  .woocommerce-shop:not(.search-results) .wd-nav-product-cat li,
  .tax-product_cat .wd-nav-product-cat li {
    flex: 0 0 auto !important;
    width: auto !important;
  }
}

@media (max-width: 768px) {
  .woocommerce .products.wd-products,
  .wd-products.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px 10px !important;
  }
  .wd-products.products .product-element-bottom {
    padding: 10px 12px 12px !important;
  }
  .wd-products.products .wd-entities-title {
    font-size: 0.75rem !important;
  }
  .wd-products.products .price,
  .wd-products.products .price .woocommerce-Price-amount,
  .wd-products.products .price bdi {
    font-size: 0.75rem !important;
  }
  .wd-products.products .price:has(.woocommerce-Price-amount ~ .woocommerce-Price-amount)::before {
    font-size: 0.75rem !important;
  }
  /* Shop strip — tighten padding */
  .woocommerce-shop:not(.search-results) .wd-page-title .container {
    padding: 16px 32px !important;
  }
}

@media (max-width: 640px) {
  /* Shop strip — reduce padding at 640px */
  .woocommerce-shop:not(.search-results) .wd-page-title {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }
  .woocommerce-shop:not(.search-results) .wd-page-title .container {
    padding: 18px 20px !important;
    gap: 10px !important;
  }
}

@media (max-width: 480px) {
  .woocommerce .products.wd-products,
  .wd-products.products {
    gap: 20px 8px !important;
  }
  .wd-products.products .wd-wishlist-btn {
    width: 30px !important;
    height: 30px !important;
  }
  .wd-products.products .wd-product-footer .button,
  .wd-products.products .wd-product-footer a.button {
    font-size: 0.625rem !important;
    padding: 7px 12px !important;
  }
  /* Shop strip — tighter */
  .woocommerce-shop:not(.search-results) .wd-page-title .container {
    padding: 14px 18px !important;
  }
  .woocommerce-shop:not(.search-results) .wd-nav-product-cat {
    gap: 6px !important;
  }
}