/* ══════════════════════════════════════════════════════════════════
   RönYen — the price treatment, shared.

   The was / now / "Save N% ฿X" block and its "On Special!" badge, lifted
   out of catalog.css so the catalogue cards and the infrared landing page
   are styled by the SAME rules rather than two copies that drift. The
   markup comes from Sisu_Price_Block; this is its stylesheet.

   Rules are byte-identical to the ones catalog.css carried. The only
   addition is a fallback on each token: catalogue pages define the
   --color-*/--sisu-* names in catalog.css, the theme defines its own
   shorter names in brand.css, and the fallback lets one rule serve both
   without either file redefining the other's tokens.
   ══════════════════════════════════════════════════════════════════ */

/* catalog.css sets Prompt on every sisu-prefixed element; the block must
   carry it too when it renders outside a catalogue page. */
[class^="sisu-price-"],
[class*=" sisu-price-"],
.sisu-badge-sale { font-family: 'Prompt', sans-serif; }

.sisu-price-from {
    font-size: 12px;
    color: var(--color-muted, var(--muted)) !important;
}

.sisu-price-amount {
    font-size: 18px !important;
    font-weight: 500;
    color: var(--color-heading, var(--heading)) !important;
}

.sisu-price-original {
    font-size: 15px !important;
    font-weight: 400;
    color: var(--color-muted, var(--muted)) !important;
    text-decoration: line-through !important;
    text-decoration-thickness: 1px !important;
}

.sisu-price-save {
    display: block;
    width: 100%;
    font-size: 13px !important;
    font-weight: 600;
    color: #2E7D32 !important;
    margin-top: 2px;
}

/* Discount percentage emphasis on catalogue cards (matches product page) */
.sisu-price-save-pct {
    font-weight: 700;
}

/* "incl. 7% VAT" label rendered below the price on product cards
   and (potentially) other display points. Full-width so it always
   sits on its own line under the main price. */
.sisu-price-vat-note {
    display: block;
    width: 100%;
    font-size: 11px !important;
    font-weight: 400;
    color: var(--color-muted, var(--muted)) !important;
    margin-top: 2px;
    letter-spacing: 0.2px;
}

@media (min-width: 768px) {
    .sisu-price-amount {
        font-size: 18px !important;
    }
}

.sisu-price-contact {
    font-size: 14px;
    font-weight: 500;
    color: var(--sisu-primary, var(--cta));
}

/* The badge geometry, shared by every .sisu-badge-* variant. It lives here
   rather than in catalog.css because the infrared landing page renders the
   sale badge too, and catalog.css declares this file as a dependency — so the
   catalogue's other badges still get it, from one definition. */
.sisu-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
    z-index: 1;
}

.sisu-badge-sale {
    background: var(--color-special, var(--special));
    color: var(--sisu-white, #FFFFFF);
    left: auto;
    right: 12px;
}