/* ==========================================================================
   KR Pricelist — Front-end styles
   BEM naming: .pricelist-group, .pricelist-item, .pricelist-price
   ========================================================================== */

:root {
	--pricelist-accent-color:       #2563eb;
	--pricelist-price-color:        #111827;
	--pricelist-strikethrough-color: #9ca3af;
	--pricelist-description-color:  #6b7280;
	--pricelist-border-color:       #e5e7eb;
	--pricelist-font-size:          1rem;
}

/* --------------------------------------------------------------------------
   Group wrapper
   -------------------------------------------------------------------------- */

.pricelist-group {
	margin-bottom: 2rem;
}

.pricelist-group__title {
	font-size: 1.25rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
	color: var(--pricelist-accent-color);
}

.pricelist-group__description {
	font-size: 0.9375rem;
	color: var(--pricelist-description-color);
	margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   Items list
   -------------------------------------------------------------------------- */

.pricelist-group__items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pricelist-item {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	gap: 0.75rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--pricelist-border-color);
	font-size: var(--pricelist-font-size);
}

.pricelist-item:last-child {
	border-bottom: none;
}

.pricelist-item__title {
	flex: 0 0 auto;
	font-weight: 500;
}

.pricelist-item__description {
	flex: 1;
	font-size: 0.875rem;
	color: var(--pricelist-description-color);
}

.pricelist-item__prices {
	flex: 0 0 auto;
	margin-left: auto;
	text-align: right;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Prices — group shortcode
   -------------------------------------------------------------------------- */

.pricelist-item__price {
	color: var(--pricelist-price-color);
	font-weight: 600;
}

.pricelist-item__price.discounted {
	color: var(--pricelist-accent-color);
}

.pricelist-item__price.original {
	text-decoration: line-through;
	color: var(--pricelist-strikethrough-color);
	font-weight: 400;
	font-size: 0.875em;
	margin-left: 0.25rem;
}

/* --------------------------------------------------------------------------
   Prices — item shortcode
   -------------------------------------------------------------------------- */

.pricelist-price {
	color: var(--pricelist-price-color);
	font-weight: 600;
}

.pricelist-price--discounted .pricelist-price__current {
	color: var(--pricelist-accent-color);
}

.pricelist-price__original {
	text-decoration: line-through;
	color: var(--pricelist-strikethrough-color);
	font-weight: 400;
	font-size: 0.875em;
	margin-left: 0.25rem;
}

.pricelist-title {
	font-weight: 500;
}

/* --------------------------------------------------------------------------
   Mobile stack below 480px
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {
	.pricelist-item {
		flex-wrap: wrap;
		gap: 0.25rem;
	}

	.pricelist-item__title {
		flex-basis: 100%;
	}

	.pricelist-item__description {
		flex-basis: 100%;
	}

	.pricelist-item__prices {
		margin-left: auto;
	}
}