/*
 * DCD VAT price hierarchy
 *
 * Primary price  = inc VAT
 * Secondary line = ex VAT
 */


/* ============================================================
   PDP
   ============================================================ */

.catalog-product-view .dcd-pdp-price .price-container.price-final_price {
    display: block;
}

/*
 * Main Hyvä PDP price is already the VAT-inclusive amount.
 */
.catalog-product-view
.dcd-pdp-price
.price-container.price-final_price
.price-wrapper {
    display: inline-block;
}

/*
 * Add the missing inc VAT explanation directly beneath the
 * dominant product price.
 */
.catalog-product-view
.dcd-pdp-price
.price-container.price-final_price
.price-wrapper::after {
    content: "inc VAT";
    display: block;
    margin-top: 2px;
    font-size: 0.75rem;
    line-height: 1.25;
    font-weight: 400;
    opacity: 0.68;
}

/*
 * Ex-VAT price remains useful for trade buyers, but should not
 * compete visually with the consumer-facing VAT-inclusive price.
 */
.catalog-product-view
.dcd-pdp-price
.final-price-excl-tax {
    margin-top: 5px;
    font-size: 0.875rem;
    line-height: 1.35;
    font-weight: 400;
    opacity: 0.72;
}

.catalog-product-view
.dcd-pdp-price
.final-price-excl-tax .price {
    font-size: inherit;
    font-weight: 600;
}

/*
 * Translation currently produces "ex VAT". Keep it compact.
 */
.catalog-product-view
.dcd-pdp-price
.final-price-excl-tax > span > span:first-child {
    font-weight: 400;
}


/* ============================================================
   PLP / catalogue lists / tiles / matrices
   ============================================================ */

/*
 * The list-price renderer already provides separate wrappers.
 * Make the VAT-inclusive amount the dominant line.
 */
.catalog-category-view .price-including-tax {
    display: block;
    line-height: 1.25;
}

.catalog-category-view .price-including-tax .price {
    font-weight: 700;
}

/*
 * Hyvä supplies the translated label in data-label.
 * Surface it underneath without adding template-specific markup.
 */
.catalog-category-view .price-including-tax::after {
    content: attr(data-label);
    display: block;
    margin-top: 1px;
    font-size: 0.68rem;
    line-height: 1.2;
    font-weight: 400;
    opacity: 0.64;
}

/*
 * Keep ex VAT available, but clearly secondary.
 */
.catalog-category-view .price-excluding-tax {
    display: block;
    margin-top: 3px;
    font-size: 0.78rem;
    line-height: 1.25;
    font-weight: 400;
    opacity: 0.70;
}

.catalog-category-view .price-excluding-tax .price {
    font-size: inherit;
    font-weight: 600;
}


/* ============================================================
   Compact matrix / technical list treatment
   ============================================================ */

.catalog-category-view .dcd-family-matrix-price .price-including-tax::after,
.catalog-category-view .dcd-family-matrix-price .price-excluding-tax,
.catalog-category-view .dcd-technical-list .price-including-tax::after,
.catalog-category-view .dcd-technical-list .price-excluding-tax {
    font-size: 0.72rem;
}


/* Avoid excessive row/card growth. */

.catalog-category-view .price-box {
    line-height: 1.25;
}


/* ============================================================
   PDP VAT hierarchy refinement
   ============================================================ */

/*
 * The PDP price markup differs from catalogue cards.
 * Insert the VAT-inclusive label immediately before the
 * existing ex-VAT line.
 */
.catalog-product-view
.dcd-pdp-price
.final-price-excl-tax::before {
    content: "inc VAT";
    display: block;
    margin-bottom: 4px;
    font-size: 0.75rem;
    line-height: 1.2;
    font-weight: 500;
    opacity: 0.68;
}

/*
 * Keep ex VAT clearly secondary to the main selling price,
 * but prominent enough for trade buyers to scan easily.
 */
.catalog-product-view
.dcd-pdp-price
.final-price-excl-tax {
    margin-top: 3px;
    font-size: 0.875rem;
    line-height: 1.35;
    font-weight: 500;
    opacity: 0.92;
}

.catalog-product-view
.dcd-pdp-price
.final-price-excl-tax .price {
    font-size: inherit;
    font-weight: 700;
    opacity: 1;
}