/* Task 270 - badge styling, lifted verbatim out of WPCode snippets 12773 and 14319.
   A real file, not an inline <style>: LiteSpeed rewrites inline blocks when it
   combines CSS and has dropped rules from this site before. */

/* ---- 12773: the variation price row and its percent-off badge ---- */
.woocommerce-variation-price {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgb(25, 135, 84);
}

.woocommerce-variation-price .price ins {
  text-decoration: none;
  font-weight: 700;
  font-size: 24px;
  color: inherit;
}

.woocommerce-variation-price .price del {
  color: #777777;
  font-size: 18px;
  font-weight: 400;
}

.woocommerce-variation-price .price .custom-discount-badge {
  font-size: 20px;
  font-weight: 500;
  margin-left: 5px;
  color: inherit;
}

/* ---- 14319: stack badges when a product carries more than one ----

   Product Badges for WooCommerce renders every badge as a sibling
   .pbfw_square_data whose inner div is absolutely positioned, and every badge on
   this site is configured to the same corner - so two badges draw on top of each
   other and only the upper one can be read.

   The general sibling combinator means these rules only match a badge that is
   PRECEDED by another one, so a product with a single badge is untouched.
   translateY rather than `top`: the resting position is 10px, not 0, so a hard
   `top` left a 6px overlap. Step = 40px badge height + 6px gap. */

.pbfw_square_data ~ .pbfw_square_data > div { transform: translateY(46px); }
.pbfw_square_data ~ .pbfw_square_data ~ .pbfw_square_data > div { transform: translateY(92px); }
.pbfw_square_data ~ .pbfw_square_data ~ .pbfw_square_data ~ .pbfw_square_data > div { transform: translateY(138px); }