.roundel-rdl {
		border-radius: 20px;       
		padding-left: 14px;       
		padding-right: 14px;       
		padding-top: 4px;       
		padding-bottom: 4px;       
		background: #576d82;       
		color:white;       
		font-size: 12px; 
		display:inline-block;
		margin: 0 5px 5px 0;
	}    

	.product-page-rdl {
	   text-align:left;
	   float:left;
	   display:inline-block;
	   padding-left:5px;
	   width:48%;
	}

	.content-roundels {
		align-content: flex-end;
    align-items: flex-end;
	}
	
.product-page-rdl .roundel-rdl{       
		padding-left: 20px;       
		padding-right: 20px;       
		padding-top: 4px;       
		padding-bottom: 4px;       
		font-size: 14px; 
		margin-bottom:3px;   
	}      
	
	.white-on-red-rdl {       
		background: #c90017;    
	}      
	
	.white-on-purple-rdl {       
		background: #6d28d9;  
	}      
	
	.white-on-black-rdl {       
		background: black;    
	}      
	
	.white-on-dark-green-rdl {
		background: #00652e;    
	}      
	
	.roundel-rdl.white-on-dark-blue-rdl {       
		background: #004b95;    
	}  
 




/* ==========================================
   SSAV PRODUCT PAGE - RESPONSIVE PRICE LAYOUT
   ========================================== */

/* Container queries based on product panel width */
.product-page .product-info.col-md-6 {
    container-type: inline-size;
}

/* Saving and roundels above the price by default */
.product-page .product-price:has(.roundel-rdl) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Saving and roundels share a row */
.product-page .product-page-wrapper-rdl {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    min-width: 0;
    float: none;
    margin: 0 0 8px;
}

/* Fixed-size saving box */
.product-page .product-page-wrapper-rdl .saleSaving {
    flex: 0 0 100px;
    width: 100px;
    min-width: 100px;
    height: 75px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    float: none;
    margin: 0 !important;
}

/* Roundels use the remaining horizontal space */
.product-page .product-page-wrapper-rdl .product-page-rdl {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
    gap: 5px;
    min-width: 0;
    width: auto;
    float: none;
    padding: 0;
    margin: 0;
}

/* Individual roundels */
.product-page .product-page-rdl .roundel-rdl {
    flex: 0 0 auto;
    max-width: 100%;
    margin: 0;
    white-space: nowrap;
}

/* Price beneath roundels by default */
.product-page .product-price:has(.roundel-rdl)
.saleNowPrice,
.product-page .product-price:has(.roundel-rdl)
.saleWasPrice {
    align-self: flex-end;
    float: none;
    clear: both;
    text-align: right;
}

/* ==========================================
   WIDE PRODUCT INFORMATION PANELS
   ========================================== */

@container (min-width: 620px) {

    .product-page .product-price:has(.roundel-rdl) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) max-content;
        column-gap: 10px;
        align-items: start;
    }

    .product-page .product-page-wrapper-rdl {
        grid-column: 1;
        grid-row: 1;
        margin: 0;
    }

    .product-page .product-price .saleNowPrice {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        align-self: start;
    }

    .product-page .product-price .saleWasPrice {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
    }

    .product-page .product-price .promo-text,
    .product-page .product-price > .buttonrow {
        grid-column: 1 / -1;
    }
}

/* Allow long roundels to wrap on small panels */
@container (max-width: 440px) {

    .product-page .product-page-rdl .roundel-rdl {
        white-space: normal;
    }
}

/* ==========================================
   DESKTOP - PRICE AT TOP RIGHT
   ========================================== */

@media (min-width: 1200px) {

    .product-page .product-price:has(.roundel-rdl) {
        position: relative;
        display: block;
        padding-top: 10px;
    }

    /* Reserve space for price */
    .product-page .product-page-wrapper-rdl {
        width: calc(100% - 145px);
        max-width: calc(100% - 145px);
        margin-bottom: 10px;
    }

    /* Current price */
    .product-page .product-price:has(.roundel-rdl)
    .saleNowPrice {
        position: absolute;
        top: 0;
        right: 10px;
        float: none;
        margin: 0;
        text-align: right;
    }

    /* Previous price */
    .product-page .product-price:has(.roundel-rdl)
    .saleWasPrice {
        position: absolute;
        top: 42px;
        right: 10px;
        float: none;
        text-align: right;
    }

    /* Promotions below */
    .product-page .product-price:has(.roundel-rdl)
    .promo-text {
        clear: both;
        padding-top: 8px;
    }
}

@media (min-width: 1200px) {

    .product-page .product-price:has(.roundel-rdl) {
        padding-top: 10px;
    }

    .product-page .product-price:has(.roundel-rdl)
    .saleNowPrice {
        top: 10px;
    }

    .product-page .product-price:has(.roundel-rdl)
    .saleWasPrice {
        top: 52px;
    }
}