/* ==========================================================================
   Sale prices (ARKAN-251)

   Wherever a discounted price shows, the sale price is red and bold and the
   before price is grey, regular weight and struck through.

   - Product cards (the ticket's card picture): both prices on one line, the
     sale price at the card's usual price size, the before price a little
     smaller (12px next to 14px) in the cards' usual price grey (#727272),
     10px after it. A narrow card wraps the before price to the next line
     rather than cutting it.
   - Product page, quick view, TikTok product sheet, cart drawer and cart page
     (the ticket's product price picture): the before price light grey
     (#a2a2a2) on its own line under the sale price, at the size it already
     had; the sale price 1.5 times that (never smaller than it already was).

   Places, and the classes they use:
   - Cards: collection, gender, search results and photo search pages
     (.product-card-price), homepage sections incl. Explore (.price-container),
     related products (.related-product-price), Complete The Look
     (.ctl-card-price), search drop-down (.search-result-price.on-sale):
       .price.has-discount / .current-price + .compare-price
   - Product page: #product-price.sale + #product-compare-price
   - Quick view (variant modal): .variant-modal-price.has-discount +
     .variant-modal-compare-price
   - TikTok product sheet: .tiktok-sheet-price .price.has-discount +
     .compare-price
   - Cart drawer and cart page: .price.has-discount + .compare-price

   The colors, weights and sizes win with !important: many older page rules
   (and some inline styles) set them with higher specificity.
   ========================================================================== */

:root {
    --qs-sale-price-color: #c41e3a;
    --qs-before-price-color: #a2a2a2;
    --qs-card-before-price-color: #727272;
}

/* Sale price: red, bold */
.price.has-discount,
#product-info .price.sale,
.variant-modal-price.has-discount,
.search-result-price.on-sale .current-price {
    color: var(--qs-sale-price-color) !important;
    font-weight: 700 !important;
}

/* Before price: light grey, regular weight, struck through, on the line under the sale price */
.compare-price,
.variant-modal-compare-price {
    color: var(--qs-before-price-color) !important;
    font-weight: 400 !important;
    text-decoration: line-through;
    display: block;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-inline-start: 0 !important;
}

/* --------------------------------------------------------------------------
   Product cards: sale price and before price on one line
   -------------------------------------------------------------------------- */

.product-card-price:has(> .compare-price),
.price-container:has(> .compare-price),
.related-product-price:has(> .compare-price),
.ctl-card-price:has(> .compare-price),
.search-result-price.on-sale:has(> .compare-price) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 10px;
    row-gap: 0;
}

/* The before price: the cards' price grey, 12px next to a 14px price
   (6/7 of the card's price size) */
.product-card-price > .compare-price,
.price-container > .compare-price,
.related-product-price > .compare-price,
.ctl-card-price > .compare-price,
.search-result-price.on-sale > .compare-price {
    color: var(--qs-card-before-price-color) !important;
    font-size: 0.857em !important;
    letter-spacing: 0 !important;
    display: inline-block;
    white-space: nowrap;
}

/* Phones: a card's price row is about 145px wide on a 390px screen, so the
   row is set a little tighter to keep any 4-digit pair on one line (a wider
   pair puts the before price on the next line, never cut) */
@media (max-width: 480px) {
    .product-card-price:has(> .compare-price),
    .price-container:has(> .compare-price),
    .related-product-price:has(> .compare-price),
    .ctl-card-price:has(> .compare-price),
    .search-result-price.on-sale:has(> .compare-price) {
        column-gap: 6px;
    }

    .product-card-price > .price.has-discount,
    .price-container > .price.has-discount,
    .related-product-price > .price.has-discount,
    .ctl-card-price > .price.has-discount,
    .search-result-price.on-sale > .current-price {
        letter-spacing: 0 !important;
    }
}

/* Homepage sections: the price is 14px, its box is not (15px in Arabic) */
.price-container > .compare-price {
    font-size: 12px !important;
}

/* Explore by Category sets its price from --em-price, not its box */
.page-homepage .explore-men-section .price-container > .compare-price {
    font-size: calc(var(--em-price) * 0.857) !important;
}

/* The sale price keeps the card's own price size; never split inside */
.product-card-price > .price.has-discount,
.price-container > .price.has-discount,
.related-product-price > .price.has-discount,
.ctl-card-price > .price.has-discount,
.search-result-price.on-sale > .current-price {
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Product page, quick view, TikTok sheet, cart: the sale price 1.5 times the
   before price under it. The before price keeps its size.
   -------------------------------------------------------------------------- */

/* Both prices take their box's size here (cart drawer; cart page), so 1.5em
   of the box = 1.5 x the before price */
.drawer-item-price .price.has-discount,
.cart-item-price .price.has-discount,
.cart-item-price-mobile .price.has-discount {
    font-size: 1.5em !important;
}

/* The cart page's price box sets a one-line height (line-height: 100%),
   which the bigger sale price would overflow into the before price */
.cart-item-price .price.has-discount,
.cart-item-price-mobile .price.has-discount,
.cart-item-price .compare-price,
.cart-item-price-mobile .compare-price {
    line-height: 1.25 !important;
}

/* TikTok product sheet: before price 14px */
.tiktok-sheet-price .price.has-discount {
    font-size: 21px !important;
}

/* Quick view: before price 16px */
.variant-modal-price.has-discount {
    font-size: 24px !important;
}

/* Product page: before price 18px; the sale price is already 32px on
   desktop, 18px on phones */
@media (max-width: 768px) {
    #product-info .price.sale {
        font-size: 27px !important;
    }
}