/*
 * Partner stores (child theme 1.10.0): the store page head, the coupon and product cards, the offer list of a product.
 * 1.13.0: the status component, the picture-less coupon card, the ended rows, the cashback pill, the one-line code row, the store's mark.
 * Loads after the bundle, on partner pages, pages of a store we no longer offer, the coupons tab of the search and the stores directory
 * (inc/partner.php, filter cmdc_partner_sheet_needed), so no other page's CSS changes.
 * RTL first: logical properties only. Mobile first: one column; two columns from 640px.
 * Colours are tokens (tokens.css); every pair was taken from the ratios noted there.
 */

/* ---------- Small pieces ---------- */

/* A quiet pill: brand text on the tint (6.34). The strip puts it over the media corner like the badge. */
.cmdc-ptype {
	display: inline-flex;
	align-items: center;
	padding-block: calc(var(--cmdc-space-1) - 1px);
	padding-inline: var(--cmdc-space-3);
	border: 1px solid var(--cmdc-brand-soft);
	border-radius: var(--cmdc-radius-pill);
	background: var(--cmdc-brand-tint);
	color: var(--cmdc-link);
	font-family: var(--cmdc-font-display);
	font-size: var(--cmdc-fs-small);
	font-weight: var(--cmdc-fw-strong);
	line-height: var(--cmdc-lh-ui);
}

/* The cheapest store: white on success green (6.55). */
.cmdc-ptype--best {
	border-color: transparent;
	background: var(--cmdc-success);
	color: var(--cmdc-primary-ink);
}

.cmdc-pvalid {
	margin: 0;
	color: var(--cmdc-muted);
	font-size: var(--cmdc-fs-small);
	line-height: var(--cmdc-lh-ui);
}

.cmdc-pmore {
	margin-block: var(--cmdc-space-4);
	font-size: var(--cmdc-fs-body);
}

.cmdc-pmore a {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--cmdc-tap);
}

.cmdc-partner-empty {
	margin-block: var(--cmdc-space-6);
	color: var(--cmdc-muted);
	font-size: var(--cmdc-fs-body);
}

/* Cashback: the plugin's message in a brand-tint pill (success on it 5.79), its details page a 44 px link (brand 6.66). */
.cmdc-pcash {
	display: grid;
	justify-items: start;
	margin: 0;
}

.cmdc-pcash__msg {
	display: inline-flex;
	align-items: center;
	gap: var(--cmdc-space-2);
	margin: 0;
	padding: var(--cmdc-space-2) var(--cmdc-space-4);
	border-radius: var(--cmdc-radius-lg);
	background: var(--cmdc-brand-tint);
	color: var(--cmdc-success);
	font-size: var(--cmdc-fs-small);
	font-weight: var(--cmdc-fw-label);
}

.cmdc-pcash__more {
	display: inline-flex;
	align-items: center;
	gap: var(--cmdc-space-2);
	min-block-size: var(--cmdc-tap);
	color: var(--cmdc-link);
	font-size: var(--cmdc-fs-small);
	font-weight: var(--cmdc-fw-strong);
	text-decoration: underline;
}

/* ---------- Code box ---------- */

/* One line: the code in its dashed box (text 15.32, dashes 3.41) and a 44 px copy icon. */
.cmdc-pcode {
	display: flex;
	flex-direction: row-reverse; /* the drawing puts the button at the start edge; the code stays first in the source */
	gap: var(--cmdc-space-2);
}

.cmdc-pcode__value {
	display: grid;
	flex: 1 1 0;
	place-items: center;
	min-inline-size: 0;
	min-block-size: var(--cmdc-tap);
	padding: 0 var(--cmdc-space-3);
	border: 2px dashed var(--cmdc-border-strong);
	border-radius: var(--cmdc-radius);
	background: var(--cmdc-bg);
	color: var(--cmdc-text);
	font: var(--cmdc-fw-strong) var(--cmdc-fs-h3) ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	letter-spacing: 0.04em;
	overflow-wrap: anywhere;
}

/* The words stay for screen readers and the script; the icon is drawn here. Brand on white 7.16, white on success 6.55 (the copied state, which a hover keeps). */
.cmdc-pcode__copy {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	inline-size: var(--cmdc-tap);
	block-size: var(--cmdc-tap);
	padding: 0;
	border: 2px solid var(--cmdc-primary);
	border-radius: var(--cmdc-radius);
	background: var(--cmdc-surface);
	color: var(--cmdc-link);
	font-size: 0;
	cursor: pointer;
}

.cmdc-pcode__copy::before {
	content: "";
	inline-size: 20px;
	block-size: 20px;
	background: currentcolor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 5.5h8v8h-8zM3.5 10.5h-2v-9h9v2' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.cmdc-pcode__copy.is-copied {
	border-color: var(--cmdc-success);
	background: var(--cmdc-success);
	color: var(--cmdc-primary-ink);
}

/* Forced colours drop the background the mask paints, which would leave an empty square: the icon takes the button's text colour.
   They also drop the success fill, so the copied state swaps the icon for a check mark: the same 20px box, so nothing moves. */
@media (forced-colors: active) {
	.cmdc-pcode__copy::before {
		forced-color-adjust: none;
		background: ButtonText;
	}

	.cmdc-pcode__copy.is-copied::before {
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.5 3.5 6.5-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	}
}

@media (hover: hover) {
	.cmdc-pcode__copy:not(.is-copied):hover {
		background: var(--cmdc-brand-tint);
	}
}

/* ---------- An offer whose end day passed on a cached page (assets/js/partner.js, 1.12.3) ---------- */

/* The code box, the discount badge and the code of the print sheet become invisible and keep their boxes, so nothing below them moves
   (a lapse changes the height by 0 px). visibility:hidden also takes them out of the accessibility tree, the tab order and hit
   testing, and it holds in print. The title is not hidden: a live plugin coupon's title ends with its code and keeps it on a cached
   page until the expiry sweep and the page cache purge reach it (the header of assets/js/partner.js). */
[data-cmdc-offer-lapsed] .cmdc-pcode,
[data-cmdc-offer-lapsed] .cmdc-badge,
[data-cmdc-offer-lapsed] .cmdc-psheet__codelabel,
[data-cmdc-offer-lapsed] .cmdc-psheet__code {
	visibility: hidden !important;
}

/* The outbound button keeps its box and stops being a link: the script took its address away. Muted pair: 7.98 on its fill. */
a.cmdc-btn[data-cmdc-ended] {
	border-color: var(--cmdc-expired-border);
	background: var(--cmdc-expired-bg);
	color: var(--cmdc-expired-ink);
	cursor: default;
	pointer-events: none;
}

/* ---------- Cards ---------- */

.cmdc-card--partner .cmdc-price--partner {
	margin: 0;
}

.cmdc-card--partner .cmdc-price__none,
.cmdc-poffer .cmdc-price__none {
	color: var(--cmdc-muted);
	font-size: var(--cmdc-fs-small);
}

.cmdc-card--partner .cmdc-stamp--partner {
	min-block-size: 0;
}

/* The live coupon card, no picture: head row, date line, code row, button. */
.cmdc-pcard {
	gap: var(--cmdc-space-3);
	padding: var(--cmdc-space-4);
}

.cmdc-pcard--single {
	max-inline-size: 40rem;
}

.cmdc-pcard__head {
	display: flex;
	align-items: center;
	gap: var(--cmdc-space-3);
}

.cmdc-pcard__title {
	flex: 1 1 0;
	min-inline-size: 0;
	margin: 0;
}

.cmdc-pcard__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--cmdc-space-3);
}

.cmdc-pcard__meta > * {
	margin: 0;
}

.cmdc-pcard__meta > .cmdc-vote {
	flex-basis: 100%;
}

/* The status component: text 14.28 on the ended fill, the date 4.94. */
.cmdc-pstatus {
	display: flex;
	align-items: flex-start;
	gap: var(--cmdc-space-3);
	margin-block: var(--cmdc-space-4);
	padding: var(--cmdc-space-4);
	border: 1px solid var(--cmdc-expired-border);
	border-radius: var(--cmdc-radius-lg);
	background: var(--cmdc-expired-bg);
}

.cmdc-pstatus__body {
	display: grid;
	flex: 1 1 0;
	gap: var(--cmdc-space-2);
	min-inline-size: 0;
}

.cmdc-pstatus__body > *,
.cmdc-pstatus__title,
.cmdc-pall,
.cmdc-pstore__below {
	margin: 0;
}

.cmdc-pstatus__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--cmdc-space-2);
}

.cmdc-pstatus__title {
	font-size: var(--cmdc-fs-h3);
}

.cmdc-pstatus__date {
	color: var(--cmdc-muted);
	font-size: var(--cmdc-fs-small);
}

/* ---------- Store page head ---------- */

.cmdc-pstore {
	display: grid;
	gap: var(--cmdc-space-3);
	justify-items: start;
	margin-block: var(--cmdc-space-3) var(--cmdc-space-4);
}

.cmdc-pstore > * {
	margin: 0;
}

.cmdc-pstore > .cmdc-pstatus {
	justify-self: stretch;
}

.cmdc-pstore .cmdc-disclosure {
	font-size: var(--cmdc-fs-meta);
}

/* A white card with the store's mark before its name. */
.cmdc-listing__head--store {
	border: 1px solid var(--cmdc-border);
	background: var(--cmdc-surface);
	box-shadow: var(--cmdc-shadow-soft);
}

.cmdc-listing__head--store::after {
	display: none;
}

/* Store buttons: full width on a phone; the one under the cards is 44 px. */
.cmdc-pstore__go,
.cmdc-pall .cmdc-btn {
	inline-size: 100%;
}

.cmdc-pstore__go--below {
	min-block-size: var(--cmdc-tap);
}

/* Ended rows (muted 5.30 on the page, 4.94 on the row): the title link covers the row. */
.cmdc-pgroup__note {
	margin: 0;
	padding-inline-start: calc(32px + var(--cmdc-space-3));
	color: var(--cmdc-muted);
	font-size: var(--cmdc-fs-small);
}

.cmdc-pend {
	--cmdc-card-ph: 48px; /* content box: the row is 74-75px with padding and border */

	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--cmdc-space-3);
	padding: var(--cmdc-space-3) var(--cmdc-space-4);
}

/* At most 24 cards, drawn at once: the button after them does not move when 390px placeholders shrink. */
.cmdc-listing--store .cmdc-card--partner {
	content-visibility: visible;
}

.cmdc-pend .cmdc-card__title a {
	min-block-size: 0;
}

.cmdc-pend .cmdc-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.cmdc-pend__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cmdc-space-1) var(--cmdc-space-2);
	color: var(--cmdc-muted);
	font-size: var(--cmdc-fs-meta);
}

.cmdc-pend__meta .cmdc-status {
	padding-block: 0;
}

.cmdc-pend__go {
	color: var(--cmdc-muted);
	pointer-events: none; /* a tap on the chevron goes to the stretched link */
}

.cmdc-pend .cmdc-save {
	position: relative;
	z-index: 1;
}

/* ---------- The stores of a product ---------- */

.cmdc-pbuy--partner {
	gap: var(--cmdc-space-3);
}

.cmdc-pbuy__cat {
	color: var(--cmdc-muted);
	font-size: var(--cmdc-fs-meta);
}

.cmdc-pbuy__count {
	color: var(--cmdc-text);
	font-family: var(--cmdc-font-display);
	font-size: var(--cmdc-fs-h3);
	font-weight: var(--cmdc-fw-strong);
}

.cmdc-poffers__title {
	margin-block: var(--cmdc-space-2);
	font-size: var(--cmdc-fs-h3);
}

.cmdc-poffers__list {
	display: grid;
	gap: var(--cmdc-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cmdc-poffer {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--cmdc-space-3);
	padding: var(--cmdc-space-4);
	border: 1px solid var(--cmdc-border);
	border-radius: var(--cmdc-radius-lg);
	background: var(--cmdc-surface);
	box-shadow: var(--cmdc-shadow-soft);
}

.cmdc-poffer.is-best {
	border-color: var(--cmdc-success);
}

.cmdc-poffer > * {
	min-inline-size: 0;
}

.cmdc-poffer__who {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cmdc-space-2);
}

.cmdc-poffer__who .cmdc-pcash {
	flex-basis: 100%;
}

.cmdc-poffer__store {
	color: var(--cmdc-text);
	font-family: var(--cmdc-font-display);
	font-size: var(--cmdc-fs-h3);
	font-weight: var(--cmdc-fw-strong);
	text-decoration: none;
}

a.cmdc-poffer__store:hover {
	text-decoration: underline;
}

.cmdc-poffer__price > * {
	margin: 0;
}

.cmdc-poffer .cmdc-price__now {
	font-size: var(--cmdc-fs-price-card);
}

.cmdc-poffer .cmdc-stamp {
	min-block-size: 0;
	color: var(--cmdc-muted);
	font-size: var(--cmdc-fs-meta);
}

.cmdc-poffer__btn {
	inline-size: 100%;
}

.cmdc-poffers__note {
	margin-block: var(--cmdc-space-3) 0;
	color: var(--cmdc-muted);
	font-size: var(--cmdc-fs-meta);
	line-height: var(--cmdc-lh-ui);
}

@media (min-width: 640px) {
	.cmdc-pstore__go,
	.cmdc-pall .cmdc-btn {
		inline-size: auto;
		min-inline-size: 16rem;
	}

	.cmdc-poffer {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
	}

	.cmdc-poffer__go {
		grid-column: 2;
		grid-row: 1 / span 2;
		min-inline-size: 11rem;
	}
}

/* ---------- The store's mark (the monogram) ---------- */

/* The store's monogram (inc/partner-ui.php): its letter on its tone, ink on tint 6.01 to 7.15; a logo wins and sits in a white box. Last in the sheet, so it wins a tie with the rules above, as it did in parity.css. */
.cmdc-pmono {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	background: var(--cmdc-tone-bg);
	color: var(--cmdc-tone-ink);
	font-family: var(--cmdc-font-display);
	font-weight: var(--cmdc-fw-heading);
}

.cmdc-pmono--sm {
	inline-size: 40px;
	block-size: 40px;
	border-radius: var(--cmdc-radius-pill);
	font-size: var(--cmdc-fs-h3);
}

.cmdc-pmono--lg {
	inline-size: 56px;
	block-size: 56px;
	border-radius: var(--cmdc-radius-sheet);
	font-size: var(--cmdc-fs-h1);
}

.cmdc-pmono--logo {
	inline-size: 56px;
	border: 1px solid var(--cmdc-border);
	border-radius: var(--cmdc-radius-sm);
	background: var(--cmdc-surface);
}

.cmdc-pmono--logo img {
	inline-size: 100%;
	block-size: 100%;
	padding: 4px;
	object-fit: contain !important; /* the parent prints img { object-fit } from the Customizer */
}