/*
 * Mayra Price Tag
 * - Hides ONLY the discount corner flag (`<li class="product-flag discount">-X%</li>`).
 *   "On sale!", "New", "Pack" etc remain visible.
 * - Renders the inline discount span next to the price as plain coloured
 *   text (#FF6F61). The JS rewrite normalises the label to "(X% OFF)".
 *
 * Specificity strategy: `html body` + matching theme parent selectors so we
 * defeat at_fashionstyle's existing rules.
 */

/* 1. HIDE only the discount li inside the product-flags list. */
html body .product-flags li.discount,
html body .product-flags li.product-flag.discount,
html body ul.product-flags li.discount,
html body ul.product-flags li.product-flag.discount,
html body .thumbnail-container .product-flags li.discount,
html body .thumbnail-container .product-flags li.product-flag.discount,
html body .product-miniature .product-flags li.discount,
html body .product-miniature .product-flags li.product-flag.discount { display: none !important; }

/* 2. INLINE DISCOUNT next to price — plain coloured text, no pill. */
html body .product-prices .discount,
html body .product-prices .discount-percentage,
html body .product-prices .discount-amount,
html body .thumbnail-container .product-price-and-shipping .discount-percentage,
html body .thumbnail-container .product-price-and-shipping .discount-amount,
html body .thumbnail-container .product-price-and-shipping .discount-product,
html body .product-miniature .product-price-and-shipping .discount-percentage,
html body .product-miniature .product-price-and-shipping .discount-amount,
html body .product-miniature .product-price-and-shipping .discount-product,
html body .product-price-and-shipping .discount-percentage,
html body .product-price-and-shipping .discount-amount,
html body .product-price-and-shipping .discount-product,
html body .cart-line-product-price .discount,
html body .cart-line-product-price .discount-percentage,
html body .cart-line-product-price .discount-amount,
html body .product-line-grid .discount,
html body .product-line-grid .discount-percentage,
html body .product-line-grid .discount-amount,
html body .shopping-cart-product-price .discount,
html body .shopping-cart-product-price .discount-percentage,
html body .product-price .discount,
html body .product-price .discount-percentage,
html body .product-price .discount-amount,
html body .has-discount .discount,
html body .has-discount .discount-percentage,
html body .has-discount .discount-amount,
html body .product-miniature .discount,
html body .product-miniature .discount-percentage,
html body .product-miniature .discount-amount,
html body .crossseling-product .discount-percentage,
html body .crossseling-product .discount-amount,
html body .featured-products .discount-percentage,
html body .featured-products .discount-amount,
html body .pack-product-price .discount,
html body .pack-product-price .discount-percentage {
  display: inline-block !important;
  visibility: visible !important;
  position: static !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  color: #FF6F61 !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  border: 0 !important;
  border-radius: 0 !important;
  letter-spacing: normal !important;
  vertical-align: middle !important;
  text-transform: none !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  text-decoration: none !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
}

/* 3. Slightly smaller in mini-cart / dropdown contexts */
html body .cart-preview .discount,
html body .cart-preview .discount-percentage,
html body .shopping-cart-product-price .discount,
html body .shopping-cart-product-price .discount-percentage,
html body .blockcart .discount,
html body .blockcart .discount-percentage {
  font-size: 0.8rem !important;
}

/* 4. LISTING MINIATURE — markup order is regular-price, discount, price.
 *    Force flex + reorder so discount text lands AFTER the actual price. */
html body .product-price-and-shipping {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px !important;
}
html body .product-price-and-shipping .regular-price { order: 1; }
html body .product-price-and-shipping .price          { order: 2; }
html body .product-price-and-shipping .discount-percentage,
html body .product-price-and-shipping .discount-amount,
html body .product-price-and-shipping .discount-product { order: 3; }

/* 5. Product detail .current-price — discount already after price; align */
html body .product-prices .current-price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}