/*
 * RobloxPets Product Display
 * Scoped polish layer for Breakdance WooCommerce product cards.
 *
 * Migrates the product-card portions of the legacy WPCode CSS snippets:
 * - product-background-badges.css.txt (loop card image, sale, out-of-stock)
 * - out-of-stock-button.css.txt (loop card disabled stock button label)
 * - slider-responsiveness.css.txt (mobile slider density)
 *
 * Intentionally does not target plain `.woocommerce ul.products li.product`
 * because checkout/cart/account/cross-sell surfaces should stay untouched.
 */

.breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) {
  --rp-prod-bg: url("https://robloxpets.com/wp-content/uploads/2026/01/ProductBackgroundImage.webp");
  --rp-card-gap: clamp(9px, 0.9vw, 13px);
  --rp-prod-radius: clamp(13px, 1vw, 16px);
  --rp-prod-pad: clamp(10px, 1vw, 16px);
  --rp-title-size: clamp(14px, 0.82vw, 18px);
  --rp-title-line-height: 1.15;
  --rp-price-size: clamp(18px, 1.18vw, 28px);
  --rp-button-height: clamp(42px, 3vw, 54px);
  --rp-button-pad-x: clamp(12px, 1.25vw, 22px);
  --rp-button-font-size: clamp(13px, 0.84vw, 16px);

  --rp-oos-overlay: rgba(10, 12, 16, 0.44);
  --rp-oos-badge-bg: rgba(7, 14, 28, 0.62);
  --rp-oos-badge-border: rgba(148, 163, 184, 0.18);
  --rp-oos-badge-text: rgba(255, 255, 255, 0.82);
  --rp-oos-badge-blur: 10px;
  --rp-oos-badge-top: clamp(7px, 0.8vw, 10px);
  --rp-oos-badge-right: clamp(7px, 0.8vw, 10px);
  --rp-oos-badge-font-size: clamp(10px, 0.72vw, 12px);

  --rp-sale-bg: rgba(239, 68, 68, 0.38);
  --rp-sale-border: rgba(255, 130, 130, 0.55);
  --rp-sale-text: rgba(255, 255, 255, 0.92);
  --rp-sale-dot: rgba(255, 80, 80, 0.95);
  --rp-sale-blur: 10px;
  --rp-sale-top: clamp(7px, 0.8vw, 10px);
  --rp-sale-left: clamp(7px, 0.8vw, 10px);
  --rp-sale-font-size: clamp(10px, 0.72vw, 12px);
}

.breakdance-woocommerce.bde-wooshoppage {
  container-type: inline-size;
}

.breakdance-woocommerce.bde-wooproductslist.rp-slider-list,
.breakdance-woocommerce.bde-wooproductslist.rp-slider-list .breakdance-swiper-wrapper,
.breakdance-woocommerce.bde-wooproductslist.rp-slider-list .woocommerce.swiper,
.breakdance-woocommerce.bde-wooproductslist.rp-slider-list .swiper,
.breakdance-woocommerce.bde-wooproductslist.rp-slider-list .swiper-wrapper,
#brainrot-wrap .breakdance-woocommerce.bde-wooproductslist.rp-slider-list,
#brainrot-wrap .breakdance-woocommerce.bde-wooproductslist.rp-slider-list .breakdance-swiper-wrapper,
#brainrot-wrap .breakdance-woocommerce.bde-wooproductslist.rp-slider-list .woocommerce.swiper {
  width: 100%;
  max-width: 100%;
  overflow: visible !important;
}

.breakdance-woocommerce.bde-wooproductslist.rp-slider-list {
  --rp-slider-bleed: clamp(18px, 1.25vw, 24px);
  --rp-slider-gutter: clamp(8px, 0.8vw, 12px);
  --rp-slider-y-bleed: clamp(40px, 2.8vw, 54px);
  box-sizing: border-box;
  margin-inline: calc(var(--rp-slider-bleed) * -1);
  margin-block: calc(var(--rp-slider-y-bleed) * -0.4) calc(var(--rp-slider-y-bleed) * -0.34);
  padding: var(--rp-slider-y-bleed) var(--rp-slider-gutter) calc(var(--rp-slider-y-bleed) + 12px);
}

.breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) ul.products > li.product {
  display: flex;
  flex-direction: column;
  min-width: 0;
  box-sizing: border-box;
  overflow: visible !important;
  isolation: isolate;
}

.breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) ul.products > li.product a.woocommerce-LoopProduct-link {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  gap: var(--rp-card-gap);
  text-decoration: none;
}

.breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) ul.products > li.product a.woocommerce-LoopProduct-link::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--rp-prod-radius);
  background: var(--rp-prod-bg) center / cover no-repeat;
  transition: box-shadow 0.18s ease;
}

.breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) ul.products > li.product a.woocommerce-LoopProduct-link img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  box-sizing: border-box;
  padding: var(--rp-prod-pad);
  object-fit: contain;
  border-radius: var(--rp-prod-radius);
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.2));
  transform: scale(0.9) translateY(0) rotate(0deg);
  transform-origin: 50% 60%;
  transition: opacity 0.18s ease, filter 0.18s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) ul.products > li.product:hover a.woocommerce-LoopProduct-link img {
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.24));
  transform: scale(1.04);
}

.breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) ul.products > li.product:hover a.woocommerce-LoopProduct-link::before {
  box-shadow:
    0 0 0 1px rgba(59, 130, 246, 0.35),
    0 0 28px rgba(59, 130, 246, 0.25);
}

.breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) ul.products > li.product .woocommerce-loop-product__title {
  display: -webkit-box;
  min-height: calc(var(--rp-title-size) * var(--rp-title-line-height) * 2);
  margin: 0 !important;
  overflow: hidden;
  color: inherit;
  font-size: var(--rp-title-size) !important;
  font-weight: 800;
  line-height: var(--rp-title-line-height) !important;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) ul.products > li.product .price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  justify-content: flex-start;
  align-self: stretch;
  width: 100%;
  min-height: clamp(34px, 2.4vw, 44px);
  margin: 0 !important;
  font-size: var(--rp-price-size) !important;
  font-weight: 900;
  line-height: 1.08 !important;
  letter-spacing: 0;
  text-align: left !important;
}

.breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) ul.products > li.product .price > *,
.breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) ul.products > li.product .price bdi,
.breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) ul.products > li.product .price .amount,
.breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) ul.products > li.product .price .woocommerce-Price-amount {
  align-self: flex-start !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}

.breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) ul.products > li.product .price ins {
  order: 1;
  display: block;
  align-self: flex-start;
  text-decoration: none !important;
}

.breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) ul.products > li.product .price del {
  order: 2;
  display: block;
  align-self: flex-start;
  margin: 0 !important;
  font-size: 0.72em !important;
  line-height: 1 !important;
  opacity: 0.9;
}

.breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) ul.products > li.product .price del,
.breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) ul.products > li.product .price del *,
.breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) ul.products > li.product .price del bdi,
.breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) ul.products > li.product .price del .amount,
.breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) ul.products > li.product .price del .woocommerce-Price-amount,
.breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) ul.products > li.product .price del .woocommerce-Price-currencySymbol {
  color: rgba(170, 188, 215, 0.72) !important;
  font-weight: 700 !important;
  text-decoration: line-through !important;
}

.breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) ul.products > li.product a.button,
.breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) ul.products > li.product a.add_to_cart_button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  height: var(--rp-button-height);
  min-height: var(--rp-button-height);
  margin-top: var(--rp-card-gap) !important;
  padding: 0 var(--rp-button-pad-x) !important;
  overflow: hidden;
  border: 1px solid rgba(96, 165, 250, 0.35) !important;
  border-radius: clamp(14px, 1.3vw, 20px) !important;
  font-size: var(--rp-button-font-size) !important;
  font-weight: 800;
  line-height: 1 !important;
  letter-spacing: 0;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) ul.products > li.product .bde-woo-product-footer {
  width: 100%;
  min-width: 0;
}

.breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) ul.products > li.product .bde-woo-product-footer a.add_to_cart_button.added {
  display: none !important;
}

.breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) ul.products > li.product .bde-woo-product-footer a.added_to_cart.wc-forward {
  display: inline-flex !important;
  flex: 1 1 100%;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  height: var(--rp-button-height);
  min-height: var(--rp-button-height);
  margin-top: var(--rp-card-gap) !important;
  padding: 0 var(--rp-button-pad-x) !important;
  overflow: hidden;
  border-radius: clamp(14px, 1.3vw, 20px) !important;
  background: linear-gradient(180deg, rgba(11, 24, 45, 0.98), rgba(7, 17, 34, 0.98)) !important;
  color: rgba(255, 255, 255, 0.96) !important;
  font-size: var(--rp-button-font-size) !important;
  font-weight: 850;
  line-height: 1 !important;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) ul.products > li.product .bde-woo-product-footer a.add_to_cart_button.rp-atc-confirmed,
.breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) ul.products > li.product .bde-woo-product-footer a.add_to_cart_button.rp-atc-confirmed.added {
  position: relative;
  display: inline-flex !important;
  gap: 8px;
  border-color: rgba(52, 211, 153, 0.58) !important;
  background:
    radial-gradient(120px 70px at 24% 0%, rgba(187, 247, 208, 0.28), transparent 68%),
    linear-gradient(180deg, #2ee89a, #16c983 55%, #0fa76b) !important;
  color: #fff !important;
  text-shadow: 0 1px 0 rgba(2, 24, 16, 0.28);
  box-shadow:
    0 10px 24px rgba(16, 185, 129, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
  transform: translateY(-1px) scale(1.015);
  animation: rp-atc-success-pop 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) ul.products > li.product .bde-woo-product-footer a.add_to_cart_button.rp-atc-confirmed::before {
  content: "";
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) ul.products > li.product .bde-woo-product-footer a.add_to_cart_button.rp-atc-confirmed::after {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(105deg, transparent 0 32%, rgba(255, 255, 255, 0.34) 45%, transparent 58%);
  transform: translateX(-110%);
  animation: rp-atc-success-shine 0.78s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
  pointer-events: none;
}

.breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) ul.products > li.product .bde-woo-product-footer a.add_to_cart_button .rp-atc-label {
  position: relative;
  z-index: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) ul.products > li.product .bde-woo-product-footer a.add_to_cart_button.rp-atc-restoring .rp-atc-label {
  opacity: 0;
  transform: translateY(4px);
}

@keyframes rp-atc-success-pop {
  0% { transform: translateY(0) scale(0.985); }
  58% { transform: translateY(-1px) scale(1.025); }
  100% { transform: translateY(-1px) scale(1.015); }
}

@keyframes rp-atc-success-shine {
  0% { transform: translateX(-110%); opacity: 0; }
  24% { opacity: 1; }
  100% { transform: translateX(110%); opacity: 0; }
}

.breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) ul.products > li.product.outofstock {
  position: relative;
  z-index: 0;
}

.breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) ul.products > li.product.outofstock a.woocommerce-LoopProduct-link::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--rp-prod-radius);
  background: var(--rp-oos-overlay);
  pointer-events: none;
}

.breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) ul.products > li.product.outofstock a.woocommerce-LoopProduct-link img,
.breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) ul.products > li.product.outofstock:hover a.woocommerce-LoopProduct-link img {
  opacity: 0.86;
  filter:
    grayscale(0.25)
    brightness(0.92)
    drop-shadow(0 6px 12px rgba(0, 0, 0, 0.16));
  transform: scale(0.9) translateY(0) rotate(0deg);
}

.breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) ul.products > li.product.outofstock::after {
  content: "Out of Stock";
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 9;
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 36px);
  padding: 4px 9px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  background: rgba(7, 14, 28, 0.7);
  color: rgba(255, 255, 255, 0.82);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.28);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) ul.products > li.product .stock.out-of-stock {
  display: none !important;
}

.breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) ul.products > li.product.outofstock span.onsale {
  display: none !important;
}

.breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) ul.products > li.product span.onsale {
  position: absolute !important;
  top: calc(18px - var(--rp-prod-pad)) !important;
  right: auto !important;
  bottom: auto !important;
  left: calc(18px - var(--rp-prod-pad)) !important;
  z-index: 5 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: calc(100% - 36px) !important;
  height: auto !important;
  min-height: 0 !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 4px 9px 4px 15px !important;
  border: 1px solid rgba(248, 113, 113, 0.32) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 7px 50%, rgba(255, 99, 99, 0.95) 2.8px, transparent 3.4px),
    linear-gradient(180deg, rgba(127, 29, 29, 0.82), rgba(76, 18, 18, 0.88)) !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.28) !important;
  color: rgba(254, 226, 226, 0.95) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  white-space: nowrap !important;
  pointer-events: none;
  transform: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) ul.products > li.product span.onsale::before {
  display: none !important;
  content: none !important;
}

.breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) ul.products > li.product.outofstock a.button.product_type_simple {
  position: relative;
  z-index: 1;
  cursor: not-allowed;
  opacity: 0.85;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.25), rgba(37, 99, 235, 0.25)) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  box-shadow: none !important;
  font-size: 0 !important;
}

.breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) ul.products > li.product.outofstock a.button.product_type_simple::after {
  content: "Out of Stock";
  position: relative;
  z-index: 1;
  display: inline-block;
  color: #cbd5f5;
  font-size: var(--rp-button-font-size);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.breakdance-woocommerce.bde-wooproductslist.rp-slider-list .woocommerce.swiper ul.products > li.product,
.breakdance-woocommerce.bde-wooproductslist.rp-slider-list ul.products.swiper-wrapper > li.product {
  min-width: 0;
}

@container (max-width: 600px) {
  .breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) ul.products {
    --rp-card-gap: 7px;
    --rp-prod-pad: 9px;
    --rp-title-size: 13px;
    --rp-title-line-height: 1.15;
    --rp-price-size: clamp(16px, 4.6vw, 19px);
    --rp-button-height: 40px;
    --rp-button-pad-x: 10px;
    --rp-button-font-size: 12.5px;
  }

  .breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) ul.products > li.product .price {
    gap: 2px;
    min-height: 34px;
    line-height: 1 !important;
    text-align: left !important;
  }
}

@container (min-width: 601px) and (max-width: 1024px) {
  .breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) ul.products {
    --rp-title-size: clamp(14px, 1.55vw, 17px);
    --rp-price-size: clamp(18px, 2vw, 24px);
    --rp-button-height: clamp(44px, 4.3vw, 50px);
    --rp-button-font-size: clamp(13px, 1.35vw, 15px);
  }
}

@container (min-width: 1025px) and (max-width: 1440px) {
  .breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) ul.products {
    --rp-card-gap: clamp(9px, 0.8vw, 13px);
    --rp-prod-pad: clamp(11px, 0.85vw, 15px);
    --rp-title-size: clamp(14px, 0.78vw, 17px);
    --rp-price-size: clamp(18px, 1.05vw, 25px);
    --rp-button-height: clamp(44px, 2.7vw, 52px);
    --rp-button-pad-x: clamp(12px, 1vw, 18px);
    --rp-button-font-size: clamp(13px, 0.78vw, 15px);
  }
}

@media (min-width: 1100px) and (max-width: 1240px) {
  .breakdance .breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) {
    --bde-woo-products-list-products-per-row: 5;
  }

  .breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) ul.products {
    --rp-card-gap: 9px;
    --rp-prod-pad: clamp(9px, 0.75vw, 12px);
    --rp-title-size: clamp(14px, 1.05vw, 16px);
    --rp-price-size: clamp(18px, 1.45vw, 23px);
    --rp-button-height: 44px;
    --rp-button-pad-x: 10px;
    --rp-button-font-size: clamp(12px, 1.02vw, 14px);
  }
}

@media (min-width: 1241px) and (max-width: 1440px) {
  .breakdance .breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) {
    --bde-woo-products-list-products-per-row: 6;
  }
}

@container (min-width: 1441px) {
  .breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) ul.products {
    --rp-title-size: clamp(15px, 0.82vw, 18px);
    --rp-price-size: clamp(20px, 1.12vw, 28px);
    --rp-button-height: clamp(48px, 2.8vw, 56px);
  }
}

@media (max-width: 520px) {
  .breakdance-woocommerce.bde-wooproductslist.rp-slider-list {
    --rp-slide-max: 214px;
    --rp-prod-pad: 10px;
  }

  .breakdance-woocommerce.bde-wooproductslist.rp-slider-list .woocommerce.swiper ul.products > li.product,
  .breakdance-woocommerce.bde-wooproductslist.rp-slider-list ul.products.swiper-wrapper > li.product {
    max-width: var(--rp-slide-max) !important;
  }

  .breakdance-woocommerce.bde-wooproductslist.rp-slider-list ul.products > li.product a.woocommerce-LoopProduct-link::before,
  .breakdance-woocommerce.bde-wooproductslist.rp-slider-list ul.products > li.product.outofstock a.woocommerce-LoopProduct-link::after {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }

  .breakdance-woocommerce.bde-wooproductslist.rp-slider-list ul.products > li.product a.woocommerce-LoopProduct-link img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    transform: none !important;
  }
}

@media (max-width: 430px) {
  .breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist) {
    --rp-card-gap: 6px;
    --rp-prod-pad: 8px;
    --rp-title-size: 13px;
    --rp-price-size: 16px;
    --rp-button-height: 40px;
    --rp-button-pad-x: 8px;
    --rp-button-font-size: 12px;
    --rp-oos-badge-font-size: 10px;
    --rp-sale-font-size: 10px;
  }

}


/* ---------------------------------
   Single product gallery
   Restores the single-product half of the legacy product-background-badges snippet.
---------------------------------- */

.single-product div.product {
  position: relative;
}

.single-product div.product .woocommerce-product-gallery,
.single-product div.product .woocommerce-product-gallery__wrapper {
  position: relative;
  isolation: isolate;
}

.single-product div.product .woocommerce-product-gallery__image {
  position: relative;
  overflow: hidden;
  border-radius: var(--rp-prod-radius, 16px);
}

.single-product div.product .woocommerce-product-gallery__image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: var(--rp-prod-bg, url("https://robloxpets.com/wp-content/uploads/2026/01/ProductBackgroundImage.webp")) center / cover no-repeat;
}

.single-product div.product .woocommerce-product-gallery__image img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  max-width: min(100%, 760px);
  height: auto;
  margin: 0 auto;
  box-sizing: border-box;
  padding: clamp(14px, 2vw, 26px);
  object-fit: contain;
  transform: scale(0.95);
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.22));
  transition: opacity 0.18s ease;
}

.single-product div.product.outofstock .woocommerce-product-gallery__image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  background: var(--rp-oos-overlay, rgba(10, 12, 16, 0.62));
  pointer-events: none;
}

.single-product div.product.outofstock .woocommerce-product-gallery__image img {
  opacity: 0.82;
  filter:
    grayscale(0.35)
    brightness(0.88)
    drop-shadow(0 10px 24px rgba(0, 0, 0, 0.16));
}

.single-product div.product.outofstock .woocommerce-product-gallery__wrapper::after {
  content: "Out of Stock";
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 36px);
  padding: 4px 9px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  background: rgba(7, 14, 28, 0.7);
  color: rgba(255, 255, 255, 0.82);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.28);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.single-product .rp-sale-single-badge,
.single-product div.product span.onsale {
  position: absolute;
  top: 18px !important;
  left: 18px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 7;
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: auto !important;
  min-width: 0 !important;
  max-width: calc(100% - 36px);
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 4px 9px 4px 15px !important;
  border: 1px solid rgba(248, 113, 113, 0.32) !important;
  border-radius: 999px;
  background:
    radial-gradient(circle at 7px 50%, rgba(255, 99, 99, 0.95) 2.8px, transparent 3.4px),
    linear-gradient(180deg, rgba(127, 29, 29, 0.82), rgba(76, 18, 18, 0.88)) !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.28) !important;
  color: rgba(254, 226, 226, 0.95) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  pointer-events: none;
  white-space: nowrap !important;
  transform: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.single-product .rp-sale-single-badge::before,
.single-product div.product span.onsale::before {
  display: none !important;
  content: none !important;
}

.single-product div.product.instock:not(.sale) .woocommerce-product-gallery__wrapper::after {
  content: "In Stock";
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 36px);
  padding: 4px 9px 4px 15px;
  border: 1px solid rgba(74, 222, 128, 0.32);
  border-radius: 999px;
  background:
    radial-gradient(circle at 7px 50%, rgba(74, 222, 128, 0.95) 2.8px, transparent 3.4px),
    linear-gradient(180deg, rgba(20, 83, 45, 0.82), rgba(8, 51, 27, 0.88));
  color: rgba(220, 252, 231, 0.95);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.28);
}

.single-product div.product.outofstock .rp-sale-single-badge,
.single-product div.product.outofstock span.onsale {
  display: none !important;
}

/* ---------------------------------
   Mobile: hide product-slider navigation arrows.
   On touch widths the swipe affordance is implicit (slides peek in
   from both sides via the loop rebuild in product-display.js) so
   the arrows are pure noise. Desktop arrow styling + positioning
   lives in the legacy WPCode snippets that are intentionally not
   migrated; those snippets are media-gated to >=1025px so they
   don't fight these rules.

   Selector cast wide to cover every Breakdance + Swiper arrow class
   variant we've seen in the wild without depending on a specific
   builder version.
---------------------------------- */
@media (max-width: 1024px) {
  .breakdance-woocommerce.bde-wooproductslist.rp-slider-list :is(
    .breakdance-swiper-arrow,
    .breakdance-swiper-arrow-prev,
    .breakdance-swiper-arrow-next,
    .breakdance-swiper-button,
    .breakdance-swiper-button-prev,
    .breakdance-swiper-button-next,
    .breakdance-swiper-nav,
    .breakdance-swiper-nav-prev,
    .breakdance-swiper-nav-next,
    .swiper-button-prev,
    .swiper-button-next,
    .swiper-navigation
  ),
  .breakdance-woocommerce.bde-wooproductslist.rp-slider-list ~ :is(
    .breakdance-swiper-arrow,
    .breakdance-swiper-arrow-prev,
    .breakdance-swiper-arrow-next
  ) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* ---------------------------------
   Mobile slider scroll performance

   The product strip on touch widths runs at slidesPerView: 'auto'
   with a 20+ slide DOM (after the duplication runway in
   product-display.js). Each slide carries a drop-shadow filter on
   its image plus a backdrop-filter blur on the sale / out-of-stock
   badges. Both are expensive composite ops that the browser
   re-runs on every frame the swiper wrapper translates, which reads
   to the user as "low fps" stutter on cheaper Android / older iOS.

   Mobile-only tradeoff: drop the visual treatments that need
   composited filters every frame, keep the structural styling.
   Card background, padding, border-radius, badge colour and
   shape all unchanged. What changes:

     - product image loses its lifted drop-shadow (flatter
       presentation on touch only)
     - sale + OOS badges trade the blurred backdrop for a slightly
       more opaque solid fill (still red / still dark, same
       affordance, no per-frame blur compute)

   Desktop, shop-page grid, and single-product page are out of
   scope - this block only fires on touch widths AND only inside
   the .rp-slider-list scope.

   The swiper-wrapper also gets `will-change: transform` +
   translateZ(0) so the browser promotes it to its own compositor
   layer up-front instead of doing so reactively on the first
   touchmove (which itself is a source of first-swipe jank).
---------------------------------- */
@media (max-width: 1024px) {
  .breakdance-woocommerce.bde-wooproductslist.rp-slider-list .swiper-wrapper {
    will-change: transform;
    transform: translateZ(0);
  }

  .breakdance-woocommerce.bde-wooproductslist.rp-slider-list ul.products > li.product a.woocommerce-LoopProduct-link img,
  .breakdance-woocommerce.bde-wooproductslist.rp-slider-list ul.products > li.product.outofstock a.woocommerce-LoopProduct-link img,
  .breakdance-woocommerce.bde-wooproductslist.rp-slider-list ul.products > li.product.outofstock:hover a.woocommerce-LoopProduct-link img {
    filter: none !important;
  }

  .breakdance-woocommerce.bde-wooproductslist.rp-slider-list ul.products > li.product a.woocommerce-LoopProduct-link::before,
  .breakdance-woocommerce.bde-wooproductslist.rp-slider-list ul.products > li.product a.woocommerce-LoopProduct-link img {
    transition: none !important;
  }

  .breakdance-woocommerce.bde-wooproductslist.rp-slider-list ul.products > li.product span.onsale {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(239, 68, 68, 0.55) !important;
  }

  .breakdance-woocommerce.bde-wooproductslist.rp-slider-list ul.products > li.product.outofstock::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: rgba(7, 14, 28, 0.78);
  }
}

/* ====================================================================
   Category archive polish (RobloxPets game-page continuity)

   Scope: /product-category/.../ (body.tax-product_cat) and the shop
   archive (body.post-type-archive-product). The existing rules above
   already restyle product image / title / price / OOS / sale uniformly
   across .bde-wooshoppage; this block adds the missing chrome so
   archive cards feel 1:1 with the new game-category-page cards:

     1. Page-level shop background texture (orb dots + diagonal shelf
        lines + soft loot-cluster glows — mirrors the texture on
        .rbp-gcp so the visual language carries over from /pet-simulator-99/).
     2. Card chrome on each <li.product>: dark navy panel, hairline
        border, padding, rounded corners, hover lift + blue glow ring.
     3. "In Stock" pill via ::after on every non-outofstock card
        (mirrors the same pill on the game-page cards).
     4. Add-to-cart button: explicit blue gradient + inline cart glyph,
        matching the game-page button.
     5. Top-of-page chrome: breadcrumb / "Showing all X results" /
        Filter & Sort button styled to match the RobloxPets dark navy
        + soft blue accent language.

   Everything is body-class-scoped so this never leaks into checkout,
   cart, account, single-product, cross-sell, or any other surface.
   No WC queries, mapping, AJAX, fragments, or stock logic is touched —
   pure CSS over-painting on top of WooCommerce's archive markup.
   ==================================================================== */

body.tax-product_cat,
body.post-type-archive-product {
  /* Reuse the game-page texture vocabulary so the two surfaces feel
     like a single continuous shop. Layers, back-to-front:
       1. Two soft loot-cluster radial glows (fixed for parallax).
       2. Sparse "item orb" dot lattice on a double offset grid.
       3. Faint 135deg diagonal shop-shelf lines.
       4. Deep navy gradient base. */
  background:
    radial-gradient(900px 700px at 18% 22%, rgba(59, 130, 246, 0.10), transparent 60%),
    radial-gradient(820px 620px at 82% 78%, rgba(96, 165, 250, 0.09), transparent 60%),
    radial-gradient(circle at 18px 18px, rgba(147, 197, 253, 0.20) 1.6px, transparent 2.4px),
    radial-gradient(circle at 78px 78px, rgba(96, 165, 250, 0.12) 1.2px, transparent 2px),
    repeating-linear-gradient(135deg, rgba(96, 165, 250, 0.045) 0 1px, transparent 1px 96px),
    linear-gradient(180deg, #050913 0%, #060c1c 40%, #050913 100%) !important;
  background-size:
    auto, auto,
    120px 120px,
    120px 120px,
    auto,
    auto !important;
  background-position:
    0 0, 0 0,
    0 0,
    60px 60px,
    0 0,
    0 0 !important;
  background-attachment: fixed, fixed, scroll, scroll, scroll, scroll !important;
  color: rgba(230, 237, 247, 0.96);
}

/* Soften the orb density on phones, matching the game page. */
@media (max-width: 640px) {
  body.tax-product_cat,
  body.post-type-archive-product {
    background-image:
      radial-gradient(900px 700px at 18% 22%, rgba(59, 130, 246, 0.10), transparent 60%),
      radial-gradient(820px 620px at 82% 78%, rgba(96, 165, 250, 0.09), transparent 60%),
      radial-gradient(circle at 16px 16px, rgba(147, 197, 253, 0.14) 1.3px, transparent 2px),
      radial-gradient(circle at 70px 70px, rgba(96, 165, 250, 0.10) 1px, transparent 1.8px),
      repeating-linear-gradient(135deg, rgba(96, 165, 250, 0.03) 0 1px, transparent 1px 80px),
      linear-gradient(180deg, #050913 0%, #060c1c 40%, #050913 100%) !important;
  }
}

/* ---------- Card chrome (panel / border / padding / hover) ---------- */

/* Pull the shared --rp-* token family DOWN to the exact game-page card
   numbers so archive cards inherit the same rhythm as the cards on
   /pet-simulator-99/.

   Source of truth (plugin/.../game-category-page/assets/css/game-category-page.css):
     --rbp-gcp-card-pad   : clamp(10px, 0.9vw, 14px)
     --rbp-gcp-card-gap   : clamp(9px,  0.7vw, 12px)
     title  font-size     : clamp(13px, 0.85vw, 15px) / line-height 1.2
     price  font-size     : clamp(18px, 1.10vw, 22px)
     button height        : clamp(40px, 2.80vw, 46px)
     button border-radius : 12px
     card   border-radius : calc(12px + 4px) = 16px
     image  transform     : scale(0.9)

   The container-query and @media blocks higher up in this file set the
   same vars to LARGER values for shop/list contexts (price up to 28px,
   button up to 54px) which is what made the archive cards feel taller
   and more dominant than the game-page cards. The body-scoped rule
   below has higher specificity than the @container/@media blocks so
   it wins on the archive routes without needing !important. */
body:is(.tax-product_cat, .post-type-archive-product) .bde-wooshoppage ul.products {
  --rp-prod-radius: 16px;
  --rp-card-gap: clamp(9px, 0.7vw, 12px);
  --rp-prod-pad: clamp(10px, 0.9vw, 14px);
  --rp-title-size: clamp(13px, 0.85vw, 15px);
  --rp-title-line-height: 1.2;
  --rp-price-size: clamp(18px, 1.1vw, 22px);
  --rp-button-height: clamp(40px, 2.8vw, 46px);
  --rp-button-pad-x: clamp(10px, 0.95vw, 14px);
  --rp-button-font-size: clamp(12px, 0.82vw, 14px);
}

/* Game-page button uses a 12px corner radius (not the larger
   clamp(14px,1.3vw,20px) the shared rule applies elsewhere). Lock the
   archive button to the same radius so it doesn't visually drift from
   the game-page Add To Basket button. */
body:is(.tax-product_cat, .post-type-archive-product) .bde-wooshoppage ul.products > li.product a.button,
body:is(.tax-product_cat, .post-type-archive-product) .bde-wooshoppage ul.products > li.product a.add_to_cart_button,
body:is(.tax-product_cat, .post-type-archive-product) .bde-wooshoppage ul.products > li.product .bde-woo-product-footer a.added_to_cart.wc-forward {
  border-radius: 12px !important;
  letter-spacing: 0.01em !important;
}

/* Game-page slider pushes its footer to the bottom of the card via
   `margin-top: auto` on .bde-woo-product-footer so every Add to Basket
   button aligns across the row even when titles wrap unevenly.
   Replicate on the archive grid.

   `padding-top` adds a minimum breathing zone above the button — on
   the game page this is naturally provided by the flex column gap of
   the parent LI; the archive LI doesn't carry that gap so without a
   padding-top the price ends up touching the button on tall cards
   where margin-top:auto collapses to zero. The padding-top value
   matches --rp-card-gap so the breathing room scales with the rest
   of the card rhythm. */
body:is(.tax-product_cat, .post-type-archive-product) .bde-wooshoppage ul.products > li.product .bde-woo-product-footer {
  margin-top: auto !important;
  padding-top: var(--rp-card-gap) !important;
}

body:is(.tax-product_cat, .post-type-archive-product) .bde-wooshoppage ul.products > li.product a.button,
body:is(.tax-product_cat, .post-type-archive-product) .bde-wooshoppage ul.products > li.product a.add_to_cart_button {
  margin-top: 0 !important;
}

/* The shared price rule above caps at 28px on archive context. Override
   the archive-only ceiling to 22px (game-page value) — already covered
   by the var, but the explicit rule defeats any @media block that
   targets the same selector without a body scope. */
body:is(.tax-product_cat, .post-type-archive-product) .bde-wooshoppage ul.products > li.product .price {
  font-size: var(--rp-price-size) !important;
  line-height: 1.05 !important;
}

body:is(.tax-product_cat, .post-type-archive-product) .bde-wooshoppage ul.products {
  /* The product grid itself: tidy gutter and a touch of vertical
     breathing room so hover-lift doesn't visually overlap the row
     below. */
  gap: clamp(10px, 1.1vw, 18px) !important;
  row-gap: clamp(14px, 1.4vw, 24px) !important;
  padding: clamp(4px, 0.4vw, 8px) 0 clamp(14px, 1.4vw, 22px) !important;
}

body:is(.tax-product_cat, .post-type-archive-product) .bde-wooshoppage ul.products > li.product {
  position: relative;
  padding: clamp(10px, 0.9vw, 14px) !important;
  border: 1px solid rgba(148, 163, 184, 0.12) !important;
  border-radius: calc(clamp(13px, 1vw, 16px) + 4px) !important;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(59, 130, 246, 0.10), transparent 60%),
    linear-gradient(180deg, rgba(15, 30, 56, 0.78), rgba(8, 17, 34, 0.78)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 10px 22px rgba(2, 6, 18, 0.42) !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease !important;
}

body:is(.tax-product_cat, .post-type-archive-product) .bde-wooshoppage ul.products > li.product:hover {
  transform: translateY(-4px);
  border-color: rgba(96, 165, 250, 0.42) !important;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(59, 130, 246, 0.18), transparent 60%),
    linear-gradient(180deg, rgba(20, 38, 70, 0.92), rgba(11, 23, 44, 0.92)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 16px 36px rgba(37, 99, 235, 0.28),
    0 0 0 1px rgba(96, 165, 250, 0.24) !important;
}

/* ---------- "In Stock" pill (mirrors the game-page cards) ---------- */
/* Top-right of the image area on every non-outofstock card. The OOS
   pill is already handled by the rules above, so the two states share
   visual rhythm. Hidden when an onsale ribbon is present so the two
   pills don't fight for the top corners. */
body:is(.tax-product_cat, .post-type-archive-product) .bde-wooshoppage ul.products > li.product:not(.outofstock)::after {
  content: "In Stock";
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 9;
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 36px);
  padding: 4px 9px 4px 15px;
  border: 1px solid rgba(74, 222, 128, 0.32);
  border-radius: 999px;
  background:
    radial-gradient(circle at 7px 50%, rgba(74, 222, 128, 0.95) 2.8px, transparent 3.4px),
    linear-gradient(180deg, rgba(20, 83, 45, 0.82), rgba(8, 51, 27, 0.88));
  color: rgba(220, 252, 231, 0.95);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.28);
}

body:is(.tax-product_cat, .post-type-archive-product) .bde-wooshoppage ul.products > li.product:not(.outofstock):has(span.onsale)::after {
  display: none;
}

/* ---------- Add-to-cart button: explicit blue gradient + cart glyph -- */
/* The shared product-display rules above set width/height/radius/font;
   this layer paints the actual blue gradient + inline cart icon so the
   archive button matches the game-page card button visually. */
body:is(.tax-product_cat, .post-type-archive-product) .bde-wooshoppage ul.products > li.product a.button.add_to_cart_button,
body:is(.tax-product_cat, .post-type-archive-product) .bde-wooshoppage ul.products > li.product a.button.product_type_simple {
  gap: 8px;
  border: 1px solid rgba(96, 165, 250, 0.45) !important;
  background: linear-gradient(180deg, #3b82f6, #2563eb) !important;
  color: #fff !important;
  box-shadow:
    0 6px 14px rgba(37, 99, 235, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease !important;
}

body:is(.tax-product_cat, .post-type-archive-product) .bde-wooshoppage ul.products > li.product a.button.add_to_cart_button::before,
body:is(.tax-product_cat, .post-type-archive-product) .bde-wooshoppage ul.products > li.product a.button.product_type_simple::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2 12h12l2-8H6'/%3E%3Ccircle cx='9' cy='20' r='1.6'/%3E%3Ccircle cx='17' cy='20' r='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

body:is(.tax-product_cat, .post-type-archive-product) .bde-wooshoppage ul.products > li.product a.button.add_to_cart_button:hover,
body:is(.tax-product_cat, .post-type-archive-product) .bde-wooshoppage ul.products > li.product a.button.product_type_simple:not(.disabled):hover {
  background: linear-gradient(180deg, #5096fa, #3173ed) !important;
  box-shadow:
    0 10px 22px rgba(37, 99, 235, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}

/* OOS variant: 1:1 with the game-page slider's OOS button spec
   (game-category-page.css:1668). The game OOS button keeps the same
   blue 1px hairline as the active button — only the surface fill, the
   text colour, and the shadow change. Pseudo-element label ("Out of
   Stock") is already painted by the shared rule higher in this file
   using --rp-button-font-size, which we've already pulled down to
   game-page numbers in the variable-override block above. */
body:is(.tax-product_cat, .post-type-archive-product) .bde-wooshoppage ul.products > li.product.outofstock a.button.product_type_simple::before {
  display: none !important;
}

body:is(.tax-product_cat, .post-type-archive-product) .bde-wooshoppage ul.products > li.product.outofstock a.button.product_type_simple {
  /* Keep the same button geometry, but mute the hairline so the
     disabled state reads clearly without changing card height. */
  background: linear-gradient(180deg, rgba(15, 30, 56, 0.85), rgba(8, 17, 34, 0.85)) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  color: rgba(203, 213, 245, 0.85) !important;
  box-shadow: none !important;
  opacity: 1 !important; /* clears the 0.85 shop-page opacity dim */
}

/* ---------- "View Basket" state (post-AJAX add) -----------------------
   When WC adds a product via AJAX it hides the original Add To Basket
   (via .added class -> display:none from the shared rule above) and
   surfaces an <a class="added_to_cart wc-forward"> sibling inside the
   footer. The shared rule already gives that link the right
   height/width/dark-navy fill, but on archive routes it also adds
   `margin-top: var(--rp-card-gap)`, which — combined with the footer's
   own padding-top var(--rp-card-gap) — causes the whole card to grow
   by one card-gap when the user clicks Add. That's the "subtle jump"
   we're squashing here.

   Treatment also mirrors the OOS button (dark navy fill + blue
   hairline + soft text) so the post-add state reads as part of the
   same design family — not a darker WC-default surface. */
body:is(.tax-product_cat, .post-type-archive-product) .bde-wooshoppage ul.products > li.product .bde-woo-product-footer a.added_to_cart.wc-forward {
  margin-top: 0 !important;
  border: 1px solid rgba(96, 165, 250, 0.45) !important;
  background: linear-gradient(180deg, rgba(15, 30, 56, 0.92), rgba(8, 17, 34, 0.92)) !important;
  color: rgba(220, 232, 255, 0.96) !important;
  font-size: var(--rp-button-font-size) !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease !important;
}

body:is(.tax-product_cat, .post-type-archive-product) .bde-wooshoppage ul.products > li.product .bde-woo-product-footer a.added_to_cart.wc-forward:hover {
  background: linear-gradient(180deg, rgba(20, 38, 70, 0.96), rgba(11, 23, 44, 0.96)) !important;
  border-color: rgba(96, 165, 250, 0.62) !important;
  color: #fff !important;
}

/* Defensive: if WC ever leaves BOTH the original Add To Basket AND
   the View Basket link visible inside the footer in some flow, hide
   the View Basket so the footer doesn't stack two buttons and grow
   the card. Cart fragments / mini-cart still show the post-add
   affordance, so the user doesn't lose the path to the basket. */
body:is(.tax-product_cat, .post-type-archive-product) .bde-wooshoppage ul.products > li.product .bde-woo-product-footer a.add_to_cart_button:not(.added) + a.added_to_cart.wc-forward {
  display: none !important;
}

/* Product archives should behave like the homepage/game-page sliders:
   keep the add button repeatable after an AJAX add, and let the cart
   badge + green success state provide feedback instead of swapping the
   card to WooCommerce's "View Basket" link. */
body:is(.tax-product_cat, .post-type-archive-product) .bde-wooshoppage ul.products > li.product .bde-woo-product-footer a.add_to_cart_button.added {
  display: inline-flex !important;
}

body:is(.tax-product_cat, .post-type-archive-product) .bde-wooshoppage ul.products > li.product .bde-woo-product-footer a.added_to_cart.wc-forward {
  display: none !important;
}

body:is(.tax-product_cat, .post-type-archive-product) .bde-wooshoppage ul.products > li.product .bde-woo-product-footer a.add_to_cart_button.rp-atc-confirmed {
  border-color: rgba(52, 211, 153, 0.62) !important;
  background:
    radial-gradient(120px 70px at 24% 0%, rgba(187, 247, 208, 0.3), transparent 68%),
    linear-gradient(180deg, #2ee89a, #16c983 55%, #0fa76b) !important;
  color: #fff !important;
}

/* ---------- Title / price tone-up for the archive grid ----------------- */
/* The image, title, and price are already styled by the shared rules;
   we just nudge the title colour to pure white so it doesn't read dim
   against the new card chrome. */
body:is(.tax-product_cat, .post-type-archive-product) .bde-wooshoppage ul.products > li.product .woocommerce-loop-product__title,
body:is(.tax-product_cat, .post-type-archive-product) .bde-wooshoppage ul.products > li.product h2.woocommerce-loop-product__title,
body:is(.tax-product_cat, .post-type-archive-product) .bde-wooshoppage ul.products > li.product h3.woocommerce-loop-product__title {
  color: #fff !important;
  text-shadow: none !important;
}

body:is(.tax-product_cat, .post-type-archive-product) .bde-wooshoppage ul.products > li.product .price,
body:is(.tax-product_cat, .post-type-archive-product) .bde-wooshoppage ul.products > li.product .price * {
  color: #fff !important;
  text-shadow: none !important;
  background: none !important;
}

/* ---------- Top-of-page chrome (breadcrumb / count / filter button) ---- */
/* Soft polish on the archive header so "Home » Pet Simulator 99 » Gems"
   and "Showing all 16 results" read as part of the new dark-navy
   surface, and the Filter & Sort pill picks up the same blue accent
   ring used elsewhere on the page. */
body:is(.tax-product_cat, .post-type-archive-product) .woocommerce-breadcrumb,
body:is(.tax-product_cat, .post-type-archive-product) .woocommerce-result-count {
  color: rgba(170, 188, 215, 0.78) !important;
  font-size: clamp(12px, 0.84vw, 14px) !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}

body:is(.tax-product_cat, .post-type-archive-product) .woocommerce-breadcrumb a {
  color: #cfe1ff !important;
  text-decoration: none !important;
}

body:is(.tax-product_cat, .post-type-archive-product) .woocommerce-breadcrumb a:hover {
  color: #fff !important;
  text-decoration: underline !important;
}

/* The Filter & Sort trigger ships under a few class names depending on
   plugin/theme; cast wide to catch them all. The result is a compact
   blue-tinted pill matching the game-page View All pill family. */
body:is(.tax-product_cat, .post-type-archive-product) :is(
  .rp-filter-toggle,
  .robloxpets-filter-toggle,
  .bde-woo-filter-button,
  button.filter-toggle,
  a.filter-toggle
) {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 10px 16px !important;
  border: 1px solid rgba(96, 165, 250, 0.32) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(13, 27, 52, 0.92), rgba(7, 14, 28, 0.92)) !important;
  color: #cfe1ff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em;
  text-decoration: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 6px 14px rgba(2, 6, 18, 0.4) !important;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
}

body:is(.tax-product_cat, .post-type-archive-product) :is(
  .rp-filter-toggle,
  .robloxpets-filter-toggle,
  .bde-woo-filter-button,
  button.filter-toggle,
  a.filter-toggle
):hover {
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.32), rgba(37, 99, 235, 0.22)) !important;
  border-color: rgba(96, 165, 250, 0.55) !important;
  color: #fff !important;
}

@media (max-width: 600px) {
  body:is(.tax-product_cat, .post-type-archive-product) .bde-wooshoppage ul.products {
    --rp-card-gap: 7px;
    --rp-prod-pad: 9px;
    --rp-title-size: 13px;
    --rp-title-line-height: 1.15;
    --rp-price-size: clamp(16px, 4.6vw, 19px);
    --rp-button-height: 40px;
    --rp-button-pad-x: 10px;
    --rp-button-font-size: 12.5px;
  }

  body:is(.tax-product_cat, .post-type-archive-product) .bde-wooshoppage ul.products > li.product {
    padding: 9px !important;
  }

  body:is(.tax-product_cat, .post-type-archive-product) .bde-wooshoppage ul.products > li.product .price {
    gap: 2px;
    min-height: 34px;
    line-height: 1 !important;
    text-align: left !important;
  }

  body:is(.tax-product_cat, .post-type-archive-product) .bde-wooshoppage ul.products > li.product .bde-woo-product-footer {
    padding-top: 7px !important;
  }
}