/*
 * Features brought back from the parent theme (child theme 1.11.0, lane B): the home page welcome module, the Popular Stores
 * strip and the Homepage Widget area; the store page header, introduction and rating; the stores directory; the partner coupon
 * and product extras. One sheet, loaded after the bundle on the pages that print one of them (inc/parity-helpers.php), so the
 * bundles of every other page stay exactly as they were.
 * RTL first: logical properties only. Mobile first. Colours and sizes are tokens (tokens.css).
 */

/* ---------- Home: welcome banner and slides ---------- */

.cmdc-welcome {
	position: relative;
	margin-block: var(--cmdc-space-4);
}

.cmdc-welcome--banner {
	display: flex;
	align-items: center;
	min-block-size: 9rem;
	overflow: hidden;
	border-radius: var(--cmdc-radius-lg);
	background: var(--cmdc-brand-deep);
	color: var(--cmdc-primary-ink);
}

.cmdc-welcome__bg {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* A dark veil keeps white text readable on any picture the owner chose. */
.cmdc-welcome--banner.has-image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--cmdc-brand-night);
	opacity: 0.66;
}

.cmdc-welcome__body {
	position: relative;
	padding: var(--cmdc-space-6) var(--cmdc-space-4);
}

.cmdc-welcome__title {
	margin: 0;
	font-family: var(--cmdc-font-display);
	font-size: var(--cmdc-fs-h2);
	font-weight: var(--cmdc-fw-heading);
	line-height: var(--cmdc-lh-heading);
}

.cmdc-welcome__tagline {
	margin: var(--cmdc-space-2) 0 0;
	font-size: var(--cmdc-fs-body);
	line-height: var(--cmdc-lh-body);
	max-inline-size: 48ch;
}

.cmdc-welcome__track {
	display: flex;
	gap: var(--cmdc-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	border-radius: var(--cmdc-radius-lg);
}

.cmdc-welcome__track::-webkit-scrollbar {
	display: none;
}

.cmdc-welcome__slide {
	flex: 0 0 100%;
	aspect-ratio: 16 / 8;
	overflow: hidden;
	scroll-snap-align: center;
	border-radius: var(--cmdc-radius-lg);
	background: var(--cmdc-brand-tint);
}

.cmdc-welcome__slide a,
.cmdc-welcome__slide img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

.cmdc-welcome__img {
	object-fit: cover;
}

.cmdc-welcome__nav {
	position: absolute;
	inset-block-start: 50%;
	translate: 0 -50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: var(--cmdc-tap);
	min-block-size: var(--cmdc-tap);
	padding: 0;
	border: 1px solid var(--cmdc-border);
	border-radius: var(--cmdc-radius-pill);
	background: var(--cmdc-surface);
	color: var(--cmdc-link);
	box-shadow: var(--cmdc-shadow-soft);
	cursor: pointer;
}

.cmdc-welcome__nav[hidden] {
	display: none;
}

.cmdc-welcome__nav--prev {
	inset-inline-start: var(--cmdc-space-2);
}

.cmdc-welcome__nav--next {
	inset-inline-end: var(--cmdc-space-2);
}

@media (min-width: 768px) {
	.cmdc-welcome--banner {
		min-block-size: 11rem;
	}

	.cmdc-welcome__body {
		padding-inline: var(--cmdc-space-8);
	}

	.cmdc-welcome__slide {
		aspect-ratio: 16 / 5;
	}
}

/* ---------- Home: Popular Stores strip ---------- */

.cmdc-hstores__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--cmdc-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cmdc-hstore {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--cmdc-space-2);
	block-size: 100%;
	padding: var(--cmdc-space-3);
	border: 1px solid var(--cmdc-border);
	border-radius: var(--cmdc-radius-lg);
	background: var(--cmdc-surface);
	color: var(--cmdc-text);
	text-align: center;
	text-decoration: none;
}

.cmdc-hstore__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	aspect-ratio: 3 / 2;
}

.cmdc-hstore__logo img {
	max-inline-size: 100%;
	max-block-size: 100%;
	object-fit: contain;
}

.cmdc-hstore__mono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 3.5rem;
	block-size: 3.5rem;
	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-h2);
	font-weight: var(--cmdc-fw-heading);
}

.cmdc-hstore__name {
	font-family: var(--cmdc-font-display);
	font-size: var(--cmdc-fs-small);
	font-weight: var(--cmdc-fw-strong);
	line-height: var(--cmdc-lh-ui);
	overflow-wrap: anywhere;
}

@media (hover: hover) {
	.cmdc-hstore:hover {
		border-color: var(--cmdc-primary);
		box-shadow: var(--cmdc-shadow-soft);
	}
}

@media (min-width: 640px) {
	.cmdc-hstores__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.cmdc-hstores__list {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

/* ---------- Home: Homepage Widget area ---------- */

.cmdc-home__widgets {
	display: grid;
	gap: var(--cmdc-space-6);
	margin-block: var(--cmdc-space-8);
}

.cmdc-home__widget-title {
	margin: 0 0 var(--cmdc-space-3);
	font-family: var(--cmdc-font-display);
	font-size: var(--cmdc-fs-h2);
	font-weight: var(--cmdc-fw-heading);
	line-height: var(--cmdc-lh-heading);
}

.cmdc-home__widgets :is(img, svg, video, iframe) {
	max-inline-size: 100%;
	block-size: auto;
}

/* ---------- Store page: banner and logo card ---------- */

.cmdc-shero {
	margin-block: 0 var(--cmdc-space-4);
}

.cmdc-shero__banner {
	overflow: hidden;
	aspect-ratio: 16 / 5;
	border-radius: var(--cmdc-radius-lg);
	background: var(--cmdc-brand-tint);
}

.cmdc-shero__banner img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* The logo card sits on the banner's lower edge when there is a banner, else it stands alone. */
.cmdc-shero__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 7.5rem;
	aspect-ratio: 2 / 1;
	padding: var(--cmdc-space-2);
	border: 1px solid var(--cmdc-border);
	border-radius: var(--cmdc-radius);
	background: var(--cmdc-surface);
	box-shadow: var(--cmdc-shadow-soft);
}

.cmdc-shero.has-banner .cmdc-shero__logo {
	position: relative;
	margin-block-start: -2.25rem;
	margin-inline-start: var(--cmdc-space-4);
}

.cmdc-shero__logo img {
	max-inline-size: 100%;
	max-block-size: 100%;
	inline-size: auto;
	block-size: auto;
	object-fit: contain;
}

@media (min-width: 768px) {
	.cmdc-shero__banner {
		aspect-ratio: 16 / 4;
	}

	.cmdc-shero__logo {
		inline-size: 9rem;
	}

	.cmdc-shero.has-banner .cmdc-shero__logo {
		margin-block-start: -2.75rem;
		margin-inline-start: var(--cmdc-space-8);
	}
}

/* ---------- Store page: the rating ---------- */

.cmdc-rate {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cmdc-space-1) var(--cmdc-space-4);
	margin-block: var(--cmdc-space-3);
}

.cmdc-rate p {
	margin: 0;
}

.cmdc-rate__line {
	font-family: var(--cmdc-font-display);
	font-size: var(--cmdc-fs-small);
	font-weight: var(--cmdc-fw-strong);
	line-height: var(--cmdc-lh-ui);
}

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

.cmdc-rate__stars {
	display: flex;
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.cmdc-rate__stars[hidden] {
	display: none;
}

/* The radio inputs stay in the page (keyboard, screen reader); the label draws the star. */
.cmdc-rate__input {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	opacity: 0;
	pointer-events: none;
}

.cmdc-rate__star {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: var(--cmdc-tap);
	min-block-size: var(--cmdc-tap);
	color: var(--cmdc-border-strong);
	font-size: var(--cmdc-fs-h2);
	line-height: 1;
	cursor: pointer;
}

.cmdc-rate__star::before {
	content: "\2605";
	content: "\2605" / "";
}

.cmdc-rate__star.is-on {
	color: var(--cmdc-saving);
}

.cmdc-rate__input:focus-visible + .cmdc-rate__star {
	outline: var(--cmdc-focus-width) solid var(--cmdc-focus);
	outline-offset: calc(var(--cmdc-focus-offset) * -1);
	border-radius: var(--cmdc-radius-sm);
}

/* ---------- Store, category and brand pages: the long text ---------- */

.cmdc-term-article {
	max-inline-size: var(--cmdc-measure);
	margin-block: var(--cmdc-space-6);
	color: var(--cmdc-text);
	font-size: var(--cmdc-fs-body);
	line-height: var(--cmdc-lh-body);
	overflow-wrap: anywhere;
}

.cmdc-term-article > :first-child {
	margin-block-start: 0;
}

.cmdc-term-article > :last-child {
	margin-block-end: 0;
}

.cmdc-term-article :is(h2, h3, h4) {
	font-family: var(--cmdc-font-display);
	line-height: var(--cmdc-lh-heading);
}

.cmdc-term-article :is(img, video, iframe, table) {
	max-inline-size: 100%;
	block-size: auto;
}

.cmdc-term-article--bottom {
	margin-block-start: var(--cmdc-space-8);
	padding-block-start: var(--cmdc-space-6);
	border-block-start: 1px solid var(--cmdc-border);
}

/* ---------- Amazon store page: the visit button (only when the owner switched it on) ---------- */

.cmdc-store-visit {
	margin-block: var(--cmdc-space-3);
}

/* The status line under the stars: empty until the script answers. */
.cmdc-rate__status {
	color: var(--cmdc-muted);
	font-size: var(--cmdc-fs-small);
	line-height: var(--cmdc-lh-ui);
}

.cmdc-rate__status:empty,
.cmdc-vote__status:empty {
	display: none;
}

/* ---------- Partner coupon: the date line, the comment count ---------- */

.cmdc-pdate,
.cmdc-pcomments {
	margin: var(--cmdc-space-1) 0 0;
	color: var(--cmdc-muted);
	font-size: var(--cmdc-fs-small);
	line-height: var(--cmdc-lh-ui);
}

.cmdc-pcomments a {
	color: var(--cmdc-link);
}

/* ---------- Partner coupon: "did the code work?" ---------- */

.cmdc-vote {
	margin-block: var(--cmdc-space-2);
}

.cmdc-vote p {
	margin: 0;
}

.cmdc-vote__q,
.cmdc-vote__thanks {
	font-size: var(--cmdc-fs-small);
	font-weight: var(--cmdc-fw-label);
	line-height: var(--cmdc-lh-ui);
}

.cmdc-vote__ask[hidden] {
	display: none;
}

.cmdc-vote__rate,
.cmdc-vote__status {
	color: var(--cmdc-muted);
	font-size: var(--cmdc-fs-small);
	line-height: var(--cmdc-lh-ui);
}

.cmdc-vote__btns {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cmdc-space-2);
	margin-block: var(--cmdc-space-2);
}

.cmdc-vote__btn {
	min-block-size: var(--cmdc-tap);
	padding-inline: var(--cmdc-space-4);
	border: 1px solid var(--cmdc-border-strong);
	border-radius: var(--cmdc-radius-pill);
	background: var(--cmdc-surface);
	color: var(--cmdc-text);
	font-family: var(--cmdc-font-display);
	font-size: var(--cmdc-fs-small);
	font-weight: var(--cmdc-fw-strong);
	cursor: pointer;
}

.cmdc-vote__btn[hidden] {
	display: none;
}

.cmdc-vote__btn:disabled {
	opacity: 0.6;
	cursor: default;
}

@media (hover: hover) {
	.cmdc-vote__btn:hover:not(:disabled) {
		border-color: var(--cmdc-primary);
		background: var(--cmdc-brand-tint);
	}
}

.cmdc-vote__btn:focus-visible {
	outline: var(--cmdc-focus-width) solid var(--cmdc-focus);
	outline-offset: var(--cmdc-focus-offset);
}

/* ---------- Partner pages: term lists, previous / next, similar products ---------- */

.cmdc-pterms {
	margin-block: var(--cmdc-space-6);
}

.cmdc-pterms__list {
	display: grid;
	gap: var(--cmdc-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--cmdc-fs-small);
	line-height: var(--cmdc-lh-ui);
}

.cmdc-pterms__label {
	color: var(--cmdc-muted);
	font-weight: var(--cmdc-fw-label);
}

.cmdc-pterms a {
	color: var(--cmdc-link);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cmdc-pnav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--cmdc-space-3);
	margin-block: var(--cmdc-space-6);
}

.cmdc-pnav > * {
	flex: 1 1 14rem;
	min-inline-size: 0;
}

.cmdc-pnav a {
	display: flex;
	flex-direction: column;
	gap: var(--cmdc-space-1);
	min-block-size: var(--cmdc-tap);
	padding: var(--cmdc-space-3) var(--cmdc-space-4);
	border: 1px solid var(--cmdc-border);
	border-radius: var(--cmdc-radius);
	background: var(--cmdc-surface);
	color: var(--cmdc-text);
	text-decoration: none;
}

.cmdc-pnav__next {
	text-align: end;
}

.cmdc-pnav__next .cmdc-pnav__dir {
	justify-content: flex-end;
}

.cmdc-pnav__dir {
	display: flex;
	align-items: center;
	gap: var(--cmdc-space-1);
	color: var(--cmdc-muted);
	font-size: var(--cmdc-fs-meta);
	line-height: var(--cmdc-lh-ui);
}

.cmdc-pnav__title {
	font-family: var(--cmdc-font-display);
	font-size: var(--cmdc-fs-body);
	font-weight: var(--cmdc-fw-strong);
	line-height: var(--cmdc-lh-ui);
	overflow-wrap: anywhere;
}

@media (hover: hover) {
	.cmdc-pnav a:hover {
		border-color: var(--cmdc-primary);
		box-shadow: var(--cmdc-shadow-soft);
	}
}

.cmdc-psimilar {
	margin-block: var(--cmdc-space-8);
}

.cmdc-psimilar__title {
	margin: 0 0 var(--cmdc-space-3);
	font-family: var(--cmdc-font-display);
	font-size: var(--cmdc-fs-h2);
	font-weight: var(--cmdc-fw-heading);
	line-height: var(--cmdc-lh-heading);
}

.cmdc-psimilar__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--cmdc-space-4);
}

@media (min-width: 640px) {
	.cmdc-psimilar__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 992px) {
	.cmdc-psimilar__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Comments on a partner page (off unless the owner switches them on): the form fits a phone. */
.cmdc-single--partner .comment-form :is(input[type="text"], input[type="email"], input[type="url"], textarea),
.cmdc-single--coupon .comment-form :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
	inline-size: 100%;
	max-inline-size: 100%;
	box-sizing: border-box;
}

.cmdc-single--partner .comments-title,
.cmdc-single--coupon .comments-title,
.cmdc-single--partner .comment-reply-title,
.cmdc-single--coupon .comment-reply-title {
	font-family: var(--cmdc-font-display);
	font-size: var(--cmdc-fs-h2);
	line-height: var(--cmdc-lh-heading);
}

/* ---------- Brand and location pages: the disclosure inside the parent's row ---------- */

.cmdc-pf-disclosure {
	flex: 0 0 100%;
	inline-size: 100%;
	max-inline-size: 100%;
}

/* ---------- Login step: the way out of the plugin's dialog ---------- */

.cmdc-gate-skip {
	margin: var(--cmdc-space-3) 0 0;
	text-align: center;
}

.cmdc-gate-skip a {
	color: var(--cmdc-link);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Printable coupon ---------- */

.cmdc-psheet {
	display: none;
}

.cmdc-psheet__head {
	display: flex;
	align-items: center;
	gap: var(--cmdc-space-4);
	margin-block-end: var(--cmdc-space-4);
}

.cmdc-psheet__logo {
	max-inline-size: 8rem;
	block-size: auto;
	object-fit: contain;
}

.cmdc-psheet__store,
.cmdc-psheet__title {
	margin: 0;
	font-family: var(--cmdc-font-display);
	font-weight: var(--cmdc-fw-heading);
	line-height: var(--cmdc-lh-heading);
}

.cmdc-psheet__store {
	font-size: var(--cmdc-fs-h2);
}

.cmdc-psheet__title {
	font-size: var(--cmdc-fs-h1);
}

.cmdc-psheet__codelabel {
	margin: var(--cmdc-space-6) 0 var(--cmdc-space-1);
	font-size: var(--cmdc-fs-body);
}

.cmdc-psheet__code {
	display: inline-block;
	margin: 0 0 var(--cmdc-space-6);
	padding: var(--cmdc-space-3) var(--cmdc-space-6);
	border: 2px dashed var(--cmdc-text);
	font-family: var(--cmdc-font-mono);
	font-size: var(--cmdc-fs-h1);
	font-weight: var(--cmdc-fw-strong);
	letter-spacing: 0.08em;
	overflow-wrap: anywhere;
}

.cmdc-psheet__text {
	margin-block-end: var(--cmdc-space-4);
	font-size: var(--cmdc-fs-body);
	line-height: var(--cmdc-lh-body);
}

.cmdc-psheet__source {
	margin: var(--cmdc-space-6) 0 0;
	color: var(--cmdc-muted);
	font-size: var(--cmdc-fs-small);
}

/* On paper only the sheet stays: the site's chrome, the page's own card and the rest go. */
@media print {
	body.cmdc-has-printsheet > :not(#page),
	body.cmdc-has-printsheet #page > :not(#content),
	body.cmdc-has-printsheet #content > :not(main),
	body.cmdc-has-printsheet main > article > :not(.cmdc-psheet) {
		display: none !important;
	}

	body.cmdc-has-printsheet .cmdc-psheet {
		display: block;
		padding: var(--cmdc-space-6);
		border: 1px solid var(--cmdc-text);
		color: var(--cmdc-text);
	}
}

/* ---------- Stores directory ---------- */

.cmdc-sdir__tools {
	display: grid;
	grid-template-columns: minmax(0, 1fr); /* a chip rail scrolls inside the column instead of widening it */
	gap: var(--cmdc-space-3);
	margin-block: var(--cmdc-space-4) var(--cmdc-space-6);
}

.cmdc-sdir__search {
	display: flex;
	gap: var(--cmdc-space-2);
	max-inline-size: 34rem;
}

.cmdc-sdir__input {
	flex: 1 1 auto;
	min-inline-size: 0;
	min-block-size: var(--cmdc-tap);
	padding-inline: var(--cmdc-space-4);
	border: 1px solid var(--cmdc-border-strong);
	border-radius: var(--cmdc-radius-sm);
	background: var(--cmdc-surface);
	color: var(--cmdc-text);
	font-family: inherit;
}

.cmdc-sdir__input:focus-visible {
	outline: var(--cmdc-focus-width) solid var(--cmdc-focus);
	outline-offset: var(--cmdc-focus-offset);
}

.cmdc-sdir__go {
	flex: 0 0 auto;
	min-block-size: var(--cmdc-tap);
}

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

/* Cards: the strip's card, in a wider grid. */
.cmdc-sdir__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cmdc-sstore {
	text-align: center;
}

.cmdc-sstore__offers {
	color: var(--cmdc-muted);
	font-size: var(--cmdc-fs-meta);
	line-height: var(--cmdc-lh-ui);
}

.cmdc-sstore__cash {
	padding: var(--cmdc-space-1) var(--cmdc-space-2);
	border-radius: var(--cmdc-radius-pill);
	background: var(--cmdc-brand-tint);
	color: var(--cmdc-text);
	font-size: var(--cmdc-fs-meta);
	font-weight: var(--cmdc-fw-label);
	line-height: var(--cmdc-lh-ui);
	overflow-wrap: anywhere;
}

.cmdc-sdir__none {
	display: grid;
	justify-items: start;
	gap: var(--cmdc-space-3);
	padding: var(--cmdc-space-6);
	border: 1px dashed var(--cmdc-border-strong);
	border-radius: var(--cmdc-radius);
	color: var(--cmdc-muted);
}

.cmdc-sdir__none p {
	margin: 0;
}

@media (min-width: 640px) {
	.cmdc-sdir__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.cmdc-sdir__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}