/*
 * Parts of the product card ("karta D", includes/theme/inc/product-card-parts.php),
 * shared by the homepage card (.pcard, product-card.css) and the wa-instant-search
 * cards (#cat-results, instant-search.css):
 *
 * .card-ribbons > .card-ribbon(--ship)   over the image, flush with the card's left edge
 *                                        (the card sets --card-pad-x to its side padding)
 * .card-colors > .card-colors__dots > i.card-colors__dot(.is-on) + .card-colors__count   above the name
 * ul.card-usp > li(.is-brand|.is-stock|.is-wait|.is-out) > svg + span
 * .card-price(--plain|--out) > .card-price__row(.card-price__label + del.card-price__was)
 *   + b.card-price__now + .card-price__code
 *
 * Discount colours = the fake coupon's admin colours (--coupon-*, fake-coupon.php),
 * with the admin defaults as fallbacks, so a sale looks like the coupon.
 */

.card-ribbons,
.card-price {
	--card-accent: var(--coupon-accent, #d80001);
}

.card-ribbons {
	display: flex;
	position: absolute;
	top: 0;
	left: calc(var(--card-pad-x, 0px) * -1);
	z-index: 2;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--nd-sp-4);
	pointer-events: none;
}

.card-ribbon {
	padding: var(--nd-sp-3) var(--nd-sp-10) var(--nd-sp-3) var(--nd-sp-12);
	border-radius: 0 var(--nd-radius-xs) var(--nd-radius-xs) 0;
	background: var(--card-accent);
	font-family: var(--nd-font);
	font-size: var(--nd-fs-12);
	font-weight: var(--nd-fw-bold);
	line-height: var(--nd-lh-tight);
	color: var(--nd-c-on-brand);
	text-align: left;
	white-space: nowrap;
}

.card-ribbon--ship {
	background: var(--nd-c-brand);
}

/* Colour dots: always one row high, empty with a single colour (names of a row stay aligned). */
.card-colors {
	display: flex;
	align-items: center;
	gap: var(--nd-sp-5);
	width: 100%;
	height: 18px;
	font-family: var(--nd-font);
	font-size: var(--nd-fs-12);
	line-height: 1;
	color: var(--nd-c-muted);
	text-align: left;
}

.card-colors__dots {
	display: flex;
	gap: inherit;
}

.card-colors__dot {
	flex: none;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 15%);
}

.card-colors__dot.is-on {
	box-shadow: 0 0 0 2px var(--nd-c-surface), 0 0 0 3px var(--nd-c-brand);
}

.card-colors__count {
	margin-left: var(--nd-sp-2);
	white-space: nowrap;
}

/* Benefit list: one line per item, ellipsis instead of wrapping. */
.card-usp {
	display: grid;
	gap: var(--nd-sp-2);
	width: 100%;
	margin: 0;
	padding: 0;
	font-family: var(--nd-font);
	font-size: var(--nd-fs-13);
	line-height: var(--nd-lh-snug);
	color: var(--nd-c-ink);
	text-align: left;
	list-style: none;
}

.card-usp li {
	display: flex;
	align-items: center;
	gap: var(--nd-sp-6);
	min-width: 0;
	margin: 0;
	padding: 0;
}

.card-usp li > span {
	overflow: hidden;
	min-width: 0;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.card-usp svg {
	flex: none;
	color: var(--nd-c-ok);
}

.card-usp b {
	font-weight: var(--nd-fw-semibold);
	color: var(--nd-c-head);
}

.card-usp .is-brand svg {
	color: var(--nd-c-brand);
}

.card-usp .is-stock,
.card-usp .is-stock svg {
	font-weight: var(--nd-fw-semibold);
	color: var(--nd-c-stock);
}

.card-usp .is-wait,
.card-usp .is-wait svg {
	font-weight: var(--nd-fw-semibold);
	color: var(--nd-c-sale);
}

.card-usp .is-out,
.card-usp .is-out svg {
	font-weight: var(--nd-fw-semibold);
	color: var(--nd-c-out);
}

/* Price box: pink with the coupon, grey otherwise (a sale only strikes the old price). */
.card-price {
	display: block;
	width: 100%;
	padding: var(--nd-sp-8) var(--nd-sp-10) var(--nd-sp-9);
	border-radius: var(--nd-radius-m);
	background: var(--coupon-bg, #fff2f2);
	font-family: var(--nd-font);
	line-height: var(--nd-lh-snug);
	text-align: left;
	white-space: normal;
}

/* wc_price() markup: woocommerce-legacy.css sets every amount to 16px / 700 / black. */
.card-price .woocommerce-Price-amount,
.card-price bdi {
	font: inherit;
	color: inherit;
}

.card-price__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0 var(--nd-sp-6);
}

.card-price__label {
	font-size: var(--nd-fs-12);
	font-weight: var(--nd-fw-semibold);
	color: var(--card-accent);
	white-space: nowrap;
}

.card-price__was {
	font-size: var(--nd-fs-13);
	font-weight: var(--nd-fw-regular);
	color: var(--nd-c-muted);
}

.card-price__now {
	display: block;
	font-size: var(--nd-fs-22);
	font-weight: var(--nd-fw-bold);
	line-height: 1.15;
	color: var(--card-accent);
	white-space: nowrap;
}

.card-price__code {
	display: block;
	margin-top: var(--nd-sp-3);
	padding-top: var(--nd-sp-5);
	border-top: 1px dashed color-mix(in srgb, var(--card-accent) 35%, transparent);
	font-size: var(--nd-fs-12);
	color: var(--coupon-color, #444);
}

.card-price__code span {
	white-space: nowrap;
}

.card-price__code code {
	padding: 0;
	background: none;
	font-family: inherit;
	font-size: inherit;
	font-weight: var(--nd-fw-bold);
	color: var(--card-accent);
}

.card-price__code b {
	font-weight: var(--nd-fw-bold);
	color: var(--card-accent);
}

.card-price--plain {
	background: var(--nd-c-surface-muted);
}

.card-price--plain .card-price__label {
	color: var(--nd-c-muted);
}

.card-price--plain .card-price__now {
	color: var(--nd-c-head);
}

.card-price--out .card-price__now {
	color: var(--nd-c-muted);
}

@media (max-width: 720px) {
	.card-ribbon {
		padding: var(--nd-sp-2) var(--nd-sp-7) var(--nd-sp-2) var(--nd-sp-9);
		font-size: var(--nd-fs-11);
	}

	.card-colors {
		gap: var(--nd-sp-4);
		font-size: var(--nd-fs-11);
	}

	.card-colors__dot {
		width: 12px;
		height: 12px;
	}

	.card-usp {
		font-size: var(--nd-fs-12);
	}

	.card-usp li {
		gap: var(--nd-sp-4);
	}

	.card-price {
		padding: var(--nd-sp-6) var(--nd-sp-7);
	}

	.card-price__now {
		font-size: var(--nd-fs-19);
	}

	.card-price__code {
		font-size: var(--nd-fs-11);
	}
}