/* =========================================================
   INSANE LABAN - OFFER PRICING
   =========================================================
   |
   | Styles the markup renderOfferPrice() produces in
   | offers.php, so a reduced price reads the same on the
   | homepage, the dessert page, the drinks page, the listing
   | and the cart.
   |
   | Loaded by every customer page that shows a price. It is
   | small and self-contained on purpose - one file to upload,
   | and nothing in it can affect a page that has no offers on
   | it, because the .is-reduced rules only apply when there is
   | something to reduce.
   |
   |
   | WHY THE OLD PRICE COMES FIRST
   |
   | Struck-through first, current price second, reading left to
   | right in the order the customer thinks: "it was that, it is
   | now this". Putting the saving first also means the eye lands
   | on the smaller number last, which is the one that matters.
   |
========================================================= */

.offer-price{
    display:inline-flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:8px;
}


/* ---------------------------------------------------------
   THE CURRENT PRICE
   ---------------------------------------------------------
   |
   | Inherits size and colour from whatever is around it, so a
   | price inside a big product header stays big and a price on
   | a small card stays small. Only the reduced state changes
   | the colour, and only to say "this is the live number".
   |
--------------------------------------------------------- */

.offer-now{
    font-weight:inherit;
    color:inherit;
}

.offer-price.is-reduced .offer-now{
    color:#e8bd68;
}


/* ---------------------------------------------------------
   THE OLD PRICE
   ---------------------------------------------------------
   |
   | A real <s> element rather than a border or a gradient, so
   | it is struck through for a screen reader too, not just
   | visually.
   |
   | Held at 0.82em rather than a fixed size so it scales with
   | whatever context it is dropped into.
   |
--------------------------------------------------------- */

.offer-was{
    font-size:.82em;
    font-weight:500;
    color:rgba(255,255,255,.5);
    text-decoration-line:line-through;
    text-decoration-thickness:1.5px;
    text-decoration-color:rgba(255,255,255,.45);
}


/* ---------------------------------------------------------
   THE BADGE
--------------------------------------------------------- */

.offer-badge{
    display:inline-block;
    padding:3px 9px;
    border-radius:30px;
    background:#6b3df5;
    color:#fff;
    font-size:10px;
    font-weight:800;
    letter-spacing:.6px;
    line-height:1.5;
    text-transform:uppercase;
    white-space:nowrap;
    transform:translateY(-1px);
}


/* ---------------------------------------------------------
   LARGE
   ---------------------------------------------------------
   |
   | For the dessert and drink pages, where the price is a
   | headline rather than a label.
   |
--------------------------------------------------------- */

.offer-price.is-lg{
    gap:11px;
}

.offer-price.is-lg .offer-was{
    font-size:.6em;
}

.offer-price.is-lg .offer-badge{
    font-size:11px;
    padding:4px 11px;
    transform:translateY(-3px);
}


/* ---------------------------------------------------------
   ON A LIGHT BACKGROUND
   ---------------------------------------------------------
   |
   | The customer pages are dark, but the cart's line items sit
   | on a pale panel. Adding .on-light keeps the struck price
   | readable there instead of near-invisible.
   |
--------------------------------------------------------- */

.offer-price.on-light .offer-was{
    color:rgba(20,16,12,.45);
    text-decoration-color:rgba(20,16,12,.4);
}

.offer-price.on-light.is-reduced .offer-now{
    color:#1c7a4a;
}


/* ---------------------------------------------------------
   A CARD THAT IS ON OFFER
   ---------------------------------------------------------
   |
   | A corner flash for grid cards, where the price may be
   | below the fold of a small tile. Applied by the page, not
   | by renderOfferPrice().
   |
--------------------------------------------------------- */

.offer-flash{
    position:absolute;
    top:14px;
    left:14px;
    z-index:3;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 13px;
    border-radius:30px;
    background:#6b3df5;
    color:#fff;
    font-size:11px;
    font-weight:800;
    letter-spacing:.5px;
    text-transform:uppercase;
    box-shadow:0 4px 14px rgba(0,0,0,.28);
}


@media (max-width:700px){

    .offer-badge{
        font-size:9px;
        padding:3px 7px;
    }

    .offer-price.is-lg .offer-was{
        font-size:.66em;
    }
}


@media (prefers-reduced-motion:reduce){
    .offer-price *{transition:none !important}
}