/* ===== Catalog / shop archive (mockup 3A) ===== */

/* --- centered intro (shop page: .bsx-shop-intro from html_shop_page mod) --- */
.custom-page-title .bsx-shop-intro {
  text-align: center;
  padding: 52px 0 4px;
}
.bsx-shop-intro .bsx-eyebrow {
  font-size: 11px;
  letter-spacing: 0.24em;
  margin-bottom: 16px;
}
.bsx-shop-intro h1 {
  font-size: 48px;
  line-height: 1.05;
  margin: 0 0 14px;
}
.bsx-shop-intro .bsx-shop-desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--bsx-text-soft);
  max-width: 420px;
  margin: 0 auto;
}

/* --- toolbar row (shop page): pills left | count + sort right --- */
.woocommerce-shop .shop-page-title .page-title-inner {
  border-bottom: 1px solid #f0ece6;
  padding-bottom: 22px;
  align-items: center;
}
.woocommerce-shop .shop-page-title { margin-bottom: 14px; }

/* category archives: centered stacked intro instead */
.tax-product_cat .shop-page-title .page-title-inner,
.tax-product_tag .shop-page-title .page-title-inner {
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.tax-product_cat .page-title-inner h1,
.tax-product_tag .page-title-inner h1 { font-size: 48px; margin-bottom: 8px; }
.tax-product_cat .taxonomy-description,
.tax-product_tag .taxonomy-description {
  color: var(--bsx-text-soft);
  font-size: 15px;
  max-width: 520px;
  margin: 0 auto;
}

/* pill filters */
.bsx-filter-pills a {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--bsx-text);
  padding: 9px 16px;
  border: 1px solid var(--bsx-border-input);
  border-radius: 22px;
  margin: 0 6px 10px 0;
}
.bsx-filter-pills a:hover,
.bsx-filter-pills a.current { border-color: var(--bsx-ink); color: var(--bsx-ink); }

/* result count + ordering as quiet text + pill select */
.shop-page-title .woocommerce-result-count {
  font-size: 13px;
  color: #a8a396;
  margin: 0 12px 0 0;
  display: inline-block;
}
.shop-page-title .woocommerce-ordering { margin: 0; }
.shop-page-title .woocommerce-ordering select {
  font-size: 13px;
  color: var(--bsx-text);
  border: 1px solid var(--bsx-border-input);
  border-radius: 22px;
  padding: 8px 32px 8px 14px;
  height: auto;
  background-color: #fff;
  box-shadow: none;
}

/* --- product grid: mockup gaps 36px vertical / 32px horizontal --- */
.shop-container .products.row-small {
  margin-left: -16px;
  margin-right: -16px;
}
.shop-container .products.row-small > .col {
  padding: 0 16px 36px;
}

/* --- product cards (shared with homepage grid) --- */
.product-small .box-image { border-radius: var(--bsx-radius-card); overflow: hidden; }
.product-small .box-text { padding-left: 0; text-align: left; padding-top: 16px; }
.product-small .box-text .category {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bsx-mauve);
  margin-bottom: 6px;
  opacity: 1;
}
.product-small .product-title { font-size: 15px; font-weight: 500; margin-bottom: 8px; }
.product-small .product-title a { color: var(--bsx-ink); }
.product-small .price { color: var(--bsx-ink); font-size: 15px; }
/* sale prices always stack: struck-through regular above, sale below — on every
   card, not just the ones where swatch dots squeeze the price into wrapping */
.product-small .price del { display: block; color: var(--bsx-muted-price); font-size: 13px; }
.product-small .price ins { display: block; margin-left: 0; }

/* --- loop colour swatches: small dots on the price row (mockup 3A) --- */
/* functions.php (bsx_relocate_loop_swatches) moves the swatches into .price-wrapper,
   so price + dots share one nowrap, overflow-hidden row: the price is pinned left and
   never clips, the dots hug the right and get clipped away when a wide/discounted price
   fills the row — never stacking vertically or wrapping to a new line.
   Scoped to .product-small so every product card matches — shop, category, homepage
   featured grid, single-product related products, cross-sells, etc. */
.product-small .price-wrapper {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
}
.product-small .price-wrapper .price {
  flex: 0 1 auto;         /* holds its width so the dots yield space first; on a very narrow
                             card the price may shrink and wrap (del/ins stack) rather than
                             overflow into the neighbouring card */
  min-width: 0;
  margin: 0;
}
/* Flatsome JS prepends a hidden dummy .js-ux-swatches to colourless cards to equalise
   grid heights; inline with the price it just shoves the price right, so drop it. */
.product-small .price-wrapper .js-ux-swatches { display: none; }
.product-small .price-wrapper .ux-swatches-in-loop:not(.js-ux-swatches) {
  flex: 0 1 auto;         /* dots take only the space the price leaves; shrink into it, never grow the row */
  min-width: 0;
  overflow: hidden;       /* not enough room → clip the dots away (hidden), don't wrap or overlap */
  /* 4px padding gives the hover/selected ring room so overflow:hidden doesn't
     shave its top/bottom; the matching negative margins cancel that padding in
     layout, so the dots stay right-aligned and the card row never grows. */
  padding: 4px;
  margin: -4px -4px -4px auto;
  display: flex;
  flex-wrap: nowrap;      /* keep dots on one line — never stack them vertically */
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
  max-height: none;
}
/* shrink the interactive swatches to plain 13px dots */
.product-small .ux-swatches-in-loop .ux-swatch {
  flex: 0 0 auto;         /* keep each dot 13px — the container clips whole dots, dots never shrink to slivers */
  width: 13px;
  height: 13px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  overflow: visible;
}
.product-small .ux-swatches-in-loop .ux-swatch__color {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: none;
}
.product-small .ux-swatches-in-loop .ux-swatch__text { display: none; }
/* selected dot: one clean ring on the colour only, with a white gap so it
   doesn't stack on the dot's own border (avoids the heavy doubled edge). */
.product-small .ux-swatches-in-loop .ux-swatch.selected {
  box-shadow: none;
}
.product-small .ux-swatches-in-loop .ux-swatch.selected .ux-swatch__color {
  border-color: transparent;
  box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px var(--bsx-ink);
}
/* hover on an unselected dot: Flatsome's default is a grey #999 ring hugging
   the dot (looks heavy/boxy on small light swatches). Replace with the same
   clean gapped ring in mauve so hover reads as a soft, on-brand preview. */
.product-small .ux-swatches-in-loop .ux-swatch:hover:not(.selected):not(.disabled) {
  box-shadow: none;
}
.product-small .ux-swatches-in-loop .ux-swatch:hover:not(.selected):not(.disabled) .ux-swatch__color {
  box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px var(--bsx-mauve);
}

/* badges → mauve pills, mockup offsets */
.badge-container { margin: 14px 0 0 14px; }
.badge-container .badge-inner {
  background-color: var(--bsx-mauve) !important;
  color: #fff;
  border-radius: 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.badge.badge-circle { height: auto; width: auto; }
.badge.badge-circle .badge-inner { border-radius: 14px; padding: 5px 10px; height: auto; width: auto; }

/* Hide the "added to cart" success notice. Its text is nulled in functions.php,
   which leaves a bare floating green checkmark (.icon-checkmark). :has() scopes
   this to the add-to-cart confirmation only, so real Woo notices still show. */
.woocommerce-message:has(.added-to-cart) { display: none; }

@media (max-width: 849px) {
  .bsx-shop-intro h1 { font-size: 32px; }
  .tax-product_cat .page-title-inner h1 { font-size: 32px; }
  .shop-container .products.row-small { margin-left: -8px; margin-right: -8px; }
  .shop-container .products.row-small > .col { padding: 0 8px 24px; }
}