/* ===========================================================
   Coredevia Commerce, shop styles.

   One place decides how wide the shop is. A theme laid out full
   width leaves a shop running to both edges of a large screen,
   where a price on the right and a title on the left end up a foot
   apart and nobody reads them as one thing.

   To change it, put this in your theme's own stylesheet:

       .cdcommerce-product,
       .cdcommerce-shelf,
       .cdcommerce-cart,
       .cdcommerce-checkout,
       .cdcommerce-account { --cs-page: 1100px; }
   =========================================================== */

/* A product page is narrower than a shop page, on purpose. A grid of
   four products needs width; a column of words does not, and a line of
   text past about eighty characters is measurably harder to read. The
   shops that sell digital goods well settle at around nine hundred
   pixels for a product, and they are right. */

.cdcommerce-single {
	--cs-page: 1020px;
}

.cdcommerce-single,
.cdcommerce-shelf,
.cdcommerce-shop,
.cdcommerce-cartpage,
.cdcommerce-checkout,
.cdcommerce-receipt,
.cdcommerce-account {
	--cs-page: 1290px;

	/*
	 * The theme's content column decides the width, and the shop fills
	 * it edge to edge. Anything narrower than the heading above it, or
	 * centred inside a column whose heading is not, reads as a step out
	 * of line, and no amount of tidying wrappers fixes that.
	 *
	 * A theme with an unusually wide column can rein this in:
	 *
	 *     .cdcommerce-single { max-width: 1100px; }
	 */
	margin-left: 0;
	margin-right: 0;
	max-width: 1290px;
	width: 100%;
}

/* Anything already inside the wrapper takes its width from it, so a
   page is never narrowed twice at two different numbers. That is what
   made the gallery, the description, and the reviews all start on
   different lines. */
.cdcommerce-single .cdcommerce-shelf,
.cdcommerce-single .cdcommerce-shop,
.cdcommerce-shelf .cdcommerce-shop {
	max-width: none;
}

.cdcommerce-single .cdcommerce-shelf {
	border-top: 1px solid var(--cs-line, rgba(12, 12, 12, 0.1));
	margin-left: 0;
	margin-right: 0;
	padding-top: 2rem;
}

/**
 * Coredevia Commerce shop styles.
 *
 * A theme owns the page. These styles borrow the theme's typeface and
 * colours wherever they can, and only insist on the things a shop
 * cannot get wrong: money that lines up, a clear primary action, and
 * states a keyboard user can see.
 */

.cdcommerce-cart,
.cdcommerce-checkout,
.cdcommerce-receipt,
.cdcommerce-buy {
	--cs-accent: #3858E9;
	--cs-line: currentColor;
	--cs-muted: #6b6b6b;
}

.cdcommerce-price {
	font-size: 1.6em;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 1em 0 0.5em;
}

/* Buttons.

   Written with two selectors so it holds against a theme, because a
   theme styling every button on the site is why Leave review came out
   as white text on white.

   Blue, going black when pointed at. The same pair in the admin
   screens, so a shop owner meets one button everywhere rather than a
   different one on each side of the login.

   The corner is a variable. Square by default, and a theme with
   rounded buttons can match them in one line:

       .cdcommerce-button { --cs-radius: 4px; }
*/

.cdcommerce-button,
a.cdcommerce-button,
button.cdcommerce-button,
input[type="submit"].cdcommerce-button {
	--cs-radius: 0;

	background: var(--cs-accent, #3858E9);
	border: 0;
	border-radius: var(--cs-radius);
	box-shadow: none;
	color: #ffffff;
	cursor: pointer;
	display: inline-block;
	font: inherit;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.2;
	padding: 0.8em 1.6em;
	text-decoration: none;
	text-transform: none;
	transition: background 130ms ease;
}

.cdcommerce-button:hover,
.cdcommerce-button:focus,
a.cdcommerce-button:hover,
button.cdcommerce-button:hover,
input[type="submit"].cdcommerce-button:hover {
	background: var(--cs-black, #0C0C0C);
	color: #ffffff;
}

.cdcommerce-button:focus-visible {
	outline: 2px solid var(--cs-accent, #3858E9);
	outline-offset: 3px;
}

.cdcommerce-button[disabled],
.cdcommerce-button[aria-disabled="true"] {
	cursor: not-allowed;
	opacity: 0.55;
}

/* The quiet one, for a second action that must not compete with the
   first. An outline rather than a second colour, because two coloured
   buttons side by side make a shopper choose between them rather than
   press the one that matters. */

.cdcommerce-button--quiet,
a.cdcommerce-button--quiet,
button.cdcommerce-button--quiet {
	background: transparent;
	box-shadow: inset 0 0 0 2px var(--cs-black, #0C0C0C);
	color: var(--cs-black, #0C0C0C);
}

.cdcommerce-button--quiet:hover,
a.cdcommerce-button--quiet:hover,
button.cdcommerce-button--quiet:hover {
	background: var(--cs-black, #0C0C0C);
	color: #ffffff;
}

.cdcommerce-meta {
	border-top: 1px solid rgba(128, 128, 128, 0.25);
	margin: 2em 0 0;
	padding-top: 1em;
}

.cdcommerce-meta div {
	border-bottom: 1px solid rgba(128, 128, 128, 0.15);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1.5em;
	justify-content: space-between;
	padding: 0.6em 0;
}

.cdcommerce-meta div:last-child {
	border-bottom: 0;
}

.cdcommerce-meta dt {
	font-weight: 600;
	margin: 0;
	opacity: 0.75;
}

.cdcommerce-meta dd {
	margin: 0;
	text-align: right;
}

/* ===========================================================
   The shop front.

   Read from the shops that sell digital goods well: the picture
   does the selling, so it gets the room and nothing competes with
   it. What is borrowed is the arrangement, not the softness. Every
   corner here is square, which is the whole of the Coredevia look:
   a hard edge, a disciplined grid, and exactly one colour that
   means press me.
   =========================================================== */

.cdcommerce-shelf,
.cdcommerce-shop,
.cdcommerce-cart-icon {
	--cs-ink: #1E1E1E;
	--cs-black: #0C0C0C;
	--cs-accent: #3858E9;
	--cs-muted: #6b6b6b;
	--cs-line: rgba(12, 12, 12, 0.1);
}

/* A shelf: a heading, a line under it, and a row of products. Several
   on one page build a shop front without a page builder. */

.cdcommerce-shelf {
	margin: 3rem 0;
}

.cdcommerce-shelf__head {
	border-bottom: 2px solid var(--cs-black);
	margin-bottom: 1.75rem;
	padding-bottom: 0.75rem;
}

.cdcommerce-shelf__title {
	font-size: 1.375rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin: 0;
}

.cdcommerce-shelf__note {
	color: var(--cs-muted);
	font-size: 0.9375rem;
	margin: 0.4rem 0 0;
	max-width: 60ch;
}

.cdcommerce-shop {
	display: grid;
	gap: 2.25rem 1.5rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 2rem 0;
}

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

@media (min-width: 1000px) {
	.cdcommerce-shop--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 460px) {
	.cdcommerce-shop { grid-template-columns: minmax(0, 1fr); }
}

.cdcommerce-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* The picture. One shape for every product, so a grid of things
   photographed differently still reads as a grid. No radius, and a
   hairline instead of a shadow: a square edge on a pale background
   is sharper than any amount of blur. */

.cdcommerce-card__image {
	aspect-ratio: 4 / 3;
	background: #f2f2f2;
	border: 1px solid var(--cs-line);
	display: block;
	overflow: hidden;
	position: relative;
	text-decoration: none;
	transition: border-color 160ms ease;
}

.cdcommerce-card__image::after {
	background: var(--cs-accent);
	bottom: 0;
	content: "";
	height: 3px;
	left: 0;
	position: absolute;
	right: 0;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 200ms ease;
}

.cdcommerce-card__image:hover::after,
.cdcommerce-card__image:focus-visible::after {
	transform: scaleX(1);
}

.cdcommerce-card__image:hover {
	border-color: rgba(12, 12, 12, 0.3);
}

.cdcommerce-card__image img {
	display: block;
	height: 100%;
	object-fit: cover;
	transition: transform 320ms ease;
	width: 100%;
}

.cdcommerce-card__image:hover img {
	transform: scale(1.04);
}

.cdcommerce-card__image:focus-visible {
	outline: 2px solid var(--cs-accent);
	outline-offset: 2px;
}

/* No picture yet? The mark rather than a broken frame. A shop where
   some cards look unfinished looks unfinished all over. */

.cdcommerce-card__mark {
	background: var(--cs-black);
	display: block;
	height: 100%;
	position: relative;
	width: 100%;
}

.cdcommerce-card__mark::after {
	background: var(--cs-accent);
	bottom: 24%;
	content: "";
	height: 6px;
	left: 24%;
	position: absolute;
	width: 32%;
}

.cdcommerce-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding-top: 0.85rem;
}

/* Title and price on one line, the price never wrapping under it. A
   shopper reads both together or neither. */

.cdcommerce-card__line {
	align-items: baseline;
	display: flex;
	gap: 0.75rem;
	justify-content: space-between;
}

.cdcommerce-card__title {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.35;
	margin: 0;
	min-width: 0;
}

.cdcommerce-card__title a {
	color: var(--cs-ink);
	text-decoration: none;
}

.cdcommerce-card__title a:hover {
	color: var(--cs-accent);
}

/* The price as a square badge. Borrowed arrangement, our own edge. */

.cdcommerce-card__price {
	background: var(--cs-black);
	color: #ffffff;
	flex: 0 0 auto;
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.4;
	padding: 0.25em 0.6em;
	white-space: nowrap;
}

.cdcommerce-card:hover .cdcommerce-card__price {
	background: var(--cs-accent);
}

.cdcommerce-card__kind {
	color: var(--cs-muted);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	margin-top: 0.5rem;
	text-decoration: none;
	text-transform: uppercase;
}

.cdcommerce-card__kind:hover {
	color: var(--cs-accent);
}

/* Pushed to the bottom, so every card in a row ends level however
   long its title ran. */

.cdcommerce-card__foot {
	margin-top: auto;
	padding-top: 0.85rem;
}

.cdcommerce-card .cdcommerce-button {
	font-size: 0.8125rem;
	padding: 0.6em 1.1em;
	width: 100%;
}

.cdcommerce-shop-empty {
	border: 1px solid var(--cs-line);
	color: var(--cs-muted);
	margin: 2.5rem 0;
	padding: 3.5rem 1.5rem;
	text-align: center;
}

/* ===========================================================
   The cart icon, for a navigation menu.
   =========================================================== */

.cdcommerce-cart-icon {
	align-items: center;
	color: inherit;
	display: inline-flex;
	gap: 0.45rem;
	line-height: 1;
	position: relative;
	text-decoration: none;
	vertical-align: middle;
}

.cdcommerce-cart-icon__glyph {
	display: block;
	height: 1.5em;
	width: 1.5em;
}

.cdcommerce-cart-icon.is-full .cdcommerce-cart-icon__glyph {
	color: var(--cs-accent);
}

.cdcommerce-cart-icon__label {
	font-size: 0.9375em;
}

/* Square, like everything else. A round badge on a square shop is
   the one detail that would give away that it was borrowed. */

.cdcommerce-cart-icon__count {
	background: var(--cs-accent);
	color: #ffffff;
	font-size: 0.6875em;
	font-weight: 700;
	line-height: 1;
	min-width: 1.4em;
	padding: 0.32em 0.4em;
	text-align: center;
}

.cdcommerce-cart-icon:focus-visible {
	outline: 2px solid var(--cs-accent);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.cdcommerce-card__image img,
	.cdcommerce-card__image::after {
		transition: none;
	}

	.cdcommerce-card__image:hover img {
		transform: none;
	}
}

/* ===========================================================
   The product page.

   Two columns: what a buyer is deciding about on one side, the way
   to say yes on the other, and the second one stays in view. Read
   from the shops that sell digital goods well, where nobody is ever
   asked to scroll back up to find the button after reading.
   =========================================================== */

.cdcommerce-product {
	--cs-ink: #1E1E1E;
	--cs-black: #0C0C0C;
	--cs-accent: #3858E9;
	--cs-muted: #6b6b6b;
	--cs-line: rgba(12, 12, 12, 0.1);

	display: grid;
	gap: 2.5rem;
	grid-template-columns: minmax(0, 1fr);
	margin-bottom: 3rem;
}

@media (min-width: 900px) {
	.cdcommerce-single--right .cdcommerce-product {
		align-items: start;
		gap: 2.5rem;
		grid-template-columns: minmax(0, 1fr) 18.5rem;
	}

	.cdcommerce-single--left .cdcommerce-product {
		align-items: start;
		gap: 2.5rem;
		grid-template-columns: 18.5rem minmax(0, 1fr);
	}

	.cdcommerce-single--left .cdcommerce-product__buy {
		order: -1;
	}

	/* Follows the reader down a long description, and stops before it
	   would run past the bottom of the page. */
	.cdcommerce-single--right .cdcommerce-product__buy,
	.cdcommerce-single--left .cdcommerce-product__buy {
		position: sticky;
		top: 2rem;
	}
}

/* Full width: no side panel at all, for a theme whose content column
   has no room for one. The panel sits under the gallery instead, where
   it is still the first thing after the picture. */

.cdcommerce-single--full .cdcommerce-product {
	display: block;
}

.cdcommerce-single--full .cdcommerce-product__buy {
	margin: 2rem 0;
	max-width: 24rem;
}

.cdcommerce-product__story {
	min-width: 0;
}

.cdcommerce-product__about > :first-child {
	margin-top: 0;
}

/* The panel. A hard border and no shadow: the edge does the lifting. */

.cdcommerce-buypanel {
	border: 1px solid var(--cs-line);
	border-top: 3px solid var(--cs-black);
	padding: 1.5rem;
}

.cdcommerce-buypanel__price {
	font-size: 1.875rem;
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
	margin: 0 0 1.25rem;
}

.cdcommerce-buypanel__action .cdcommerce-button {
	display: block;
	font-size: 1rem;
	padding: 0.95em 1.4em;
	text-align: center;
	width: 100%;
}

.cdcommerce-buypanel__promise {
	color: var(--cs-muted);
	font-size: 0.8125rem;
	margin: 0.75rem 0 0;
	text-align: center;
}

/* The facts. A quiet table, because a buyer scans this rather than
   reads it, and a scan wants alignment more than it wants colour. */

.cdcommerce-buypanel .cdcommerce-meta {
	border-top: 1px solid var(--cs-line);
	margin: 1.5rem 0 0;
	padding-top: 0.5rem;
	width: 100%;
}

.cdcommerce-buypanel .cdcommerce-meta th,
.cdcommerce-buypanel .cdcommerce-meta td {
	border-bottom: 1px solid var(--cs-line);
	font-size: 0.875rem;
	padding: 0.7rem 0;
}

.cdcommerce-buypanel .cdcommerce-meta th {
	color: var(--cs-muted);
	font-weight: 500;
	text-align: left;
}

.cdcommerce-buypanel .cdcommerce-meta td {
	text-align: right;
}

.cdcommerce-buypanel .cdcommerce-meta tr:last-child th,
.cdcommerce-buypanel .cdcommerce-meta tr:last-child td {
	border-bottom: 0;
}

/* On a phone the panel comes first, because a price is the first
   thing a shopper looks for and the last thing they should hunt for. */

@media (max-width: 899px) {
	.cdcommerce-product {
		display: flex;
		flex-direction: column;
	}

	.cdcommerce-product__buy {
		order: -1;
	}
}

/* ===========================================================
   The product gallery.

   Themes do not show a featured image on a custom post type, so a
   shop relying on them showed nothing at all. This is why a product
   page looked like three lines of text on an empty screen.
   =========================================================== */

.cdcommerce-gallery {
	margin-bottom: 2rem;
}

/* Thumbnails stand in a column beside the picture rather than lying in
   a row above it. Above it they push the picture down and the first
   thing on the page becomes a row of postage stamps. */

@media (min-width: 560px) {
	.cdcommerce-gallery.has-strip {
		display: grid;
		gap: 0.6rem;
		grid-template-columns: 4.5rem minmax(0, 1fr);
	}

	.cdcommerce-gallery.has-strip .cdcommerce-gallery__strip {
		align-content: start;
		display: grid;
		gap: 0.6rem;
		grid-template-columns: minmax(0, 1fr);
		margin: 0;
		max-height: 100%;
		overflow-y: auto;
	}

	.cdcommerce-gallery.has-strip .cdcommerce-gallery__thumb {
		height: auto;
		width: 100%;
	}
}

.cdcommerce-gallery__stage {
	/*
	 * A fixed shape, and the picture fitted inside it rather than
	 * filling it. A portrait book cover left to its own proportions
	 * runs the height of a screen and pushes everything else off the
	 * page, and a shop cannot ask its seller to crop things first.
	 */
	align-items: center;
	aspect-ratio: 4 / 3;
	background: #f2f2f2;
	border: 1px solid var(--cs-line, rgba(12, 12, 12, 0.1));
	display: flex;
	justify-content: center;
	margin: 0;
	overflow: hidden;
	position: relative;
}

.cdcommerce-gallery__big {
	display: block;
	height: 100%;
	object-fit: contain;
	width: 100%;
}

@media (max-width: 600px) {
	.cdcommerce-gallery__stage {
		aspect-ratio: 1 / 1;
	}
}

.cdcommerce-gallery__strip {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 0.6rem;
}

.cdcommerce-gallery__thumb {
	background: #f2f2f2;
	border: 1px solid var(--cs-line, rgba(12, 12, 12, 0.1));
	cursor: pointer;
	display: block;
	flex: 0 0 auto;
	height: 72px;
	overflow: hidden;
	padding: 0;
	transition: border-color 140ms ease;
	width: 72px;
}

.cdcommerce-gallery__thumb img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* The chosen one is marked by a solid blue edge, which reads whether
   or not somebody can tell the colours apart, because it is the only
   thumbnail with a thick border. */

.cdcommerce-gallery__thumb.is-current {
	border-color: var(--cs-accent, #3858E9);
	border-width: 3px;
}

.cdcommerce-gallery__thumb:hover {
	border-color: rgba(12, 12, 12, 0.4);
}

.cdcommerce-gallery__thumb:focus-visible {
	outline: 2px solid var(--cs-accent, #3858E9);
	outline-offset: 2px;
}

/* ===========================================================
   Reviews.

   A rating is the one thing on the page a stranger trusts more
   than anything the shop wrote about itself. So it sits beside the
   price and on every card, not at the foot of a page nobody reaches.
   =========================================================== */

.cdcommerce-product__heading {
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0 0 1rem;
}

.cdcommerce-stars {
	align-items: center;
	display: inline-flex;
	gap: 0.15rem;
	line-height: 1;
}

.cdcommerce-stars__one {
	color: rgba(12, 12, 12, 0.2);
	font-size: 0.95em;
}

.cdcommerce-stars__one.is-lit {
	color: #f0a500;
}

.cdcommerce-stars__said,
.cdcommerce-stars__count {
	color: var(--cs-muted, #6b6b6b);
	font-size: 0.8125rem;
	margin-left: 0.4rem;
}

.cdcommerce-card .cdcommerce-stars {
	margin-top: 0.5rem;
}

.cdcommerce-buypanel__rating {
	margin: -0.75rem 0 1.25rem;
}

/* A ruled section, the way the shops that do this well separate About
   from Reviews: a line across the column, the heading on it, and no box
   around anything. A box inside a box is one border too many. */

.cdcommerce-reviews {
	border-top: 1px solid var(--cs-black, #0C0C0C);
	margin-top: 3rem;
	padding-top: 1.25rem;
}

.cdcommerce-reviews__head {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	margin-bottom: 1.5rem;
}

.cdcommerce-reviews__head .cdcommerce-product__heading {
	margin: 0;
}

.cdcommerce-reviews__none {
	color: var(--cs-muted, #6b6b6b);
}

.cdcommerce-reviews__list {
	list-style: none;
	margin: 0 0 2.5rem;
	padding: 0;
}

.cdcommerce-review {
	border-bottom: 1px solid var(--cs-line, rgba(12, 12, 12, 0.1));
	padding: 1.25rem 0;
}

.cdcommerce-review:first-child {
	border-top: 1px solid var(--cs-line, rgba(12, 12, 12, 0.1));
}

.cdcommerce-review__top {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-bottom: 0.4rem;
}

.cdcommerce-review__who {
	font-weight: 700;
}

.cdcommerce-review__verified {
	background: var(--cs-black, #0C0C0C);
	color: #ffffff;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	padding: 0.2em 0.5em;
	text-transform: uppercase;
}

.cdcommerce-review__when {
	color: var(--cs-muted, #6b6b6b);
	font-size: 0.8125rem;
	margin-left: auto;
}

.cdcommerce-review__words > :last-child {
	margin-bottom: 0;
}

/* The form. Shown to anybody, refused to anybody who did not buy,
   because telling somebody afterwards is kinder than hiding it and
   letting them wonder whether the shop has reviews at all. */

.cdcommerce-reviews__form {
	background: rgba(12, 12, 12, 0.02);
	border: 1px solid var(--cs-line, rgba(12, 12, 12, 0.1));
	border-top: 3px solid var(--cs-black, #0C0C0C);
	padding: 1.75rem;
}

.cdcommerce-reviews__ask {
	font-size: 1.0625rem;
	font-weight: 700;
	margin: 0 0 1.25rem;
}

.cdcommerce-reviews__form label {
	display: block;
	font-size: 0.9375em;
	font-weight: 600;
	margin-bottom: 0.4em;
}

.cdcommerce-reviews__form input[type="text"],
.cdcommerce-reviews__form input[type="email"],
.cdcommerce-reviews__form textarea {
	background: #ffffff;
	border: 1px solid rgba(128, 128, 128, 0.4);
	color: inherit;
	font: inherit;
	padding: 0.7em 0.85em;
	width: 100%;
}

.cdcommerce-reviews__form input:focus,
.cdcommerce-reviews__form textarea:focus {
	border-color: var(--cs-accent, #3858E9);
	box-shadow: 0 0 0 3px rgba(56, 88, 233, 0.18);
	outline: none;
}

.cdcommerce-reviews__thanks {
	background: rgba(56, 88, 233, 0.06);
	border-left: 3px solid var(--cs-accent, #3858E9);
	padding: 1rem 1.25rem;
}

/* The stars you press. Written five first in the markup so that
   pointing at one lights the ones before it with a plain sibling
   rule and no script at all, which means it still works for
   somebody who has scripting switched off. */

.cdcommerce-rate {
	border: 0;
	display: flex;

	/*
	 * The stars are written five first so that pointing at one can
	 * light the ones before it with a plain sibling rule and no
	 * script. Reversing the row here puts them back in the order a
	 * person reads, at the left where the label is, rather than
	 * stranded against the right edge of the form.
	 */
	flex-direction: row-reverse;
	flex-wrap: wrap-reverse;
	gap: 0.1rem;
	justify-content: flex-end;
	margin: 0 0 1.25rem;
	padding: 0;
}

.cdcommerce-rate legend {
	font-size: 0.9375em;
	font-weight: 600;
	margin-bottom: 0.4em;
	padding: 0;
	width: 100%;
}

.cdcommerce-rate input {
	height: 1px;
	opacity: 0;
	position: absolute;
	width: 1px;
}

.cdcommerce-rate label {
	color: rgba(12, 12, 12, 0.2);
	cursor: pointer;
	font-size: 1.75rem;
	line-height: 1;
	margin: 0;
	transition: color 100ms ease;
}

.cdcommerce-rate label:hover,
.cdcommerce-rate label:hover ~ label,
.cdcommerce-rate input:checked ~ label {
	color: #f0a500;
}

.cdcommerce-rate input:focus-visible + label {
	outline: 2px solid var(--cs-accent, #3858E9);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.cdcommerce-rate label { transition: none; }
}

/* ===========================================================
   Sale prices, and the badge that says how much is off.

   The old price is struck out beside the new one, never above or
   below it. Side by side a shopper reads the saving in one glance;
   stacked, they read two numbers and work it out.
   =========================================================== */

.cdcommerce-buypanel__price {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.cdcommerce-buypanel__now {
	font-size: 1.875rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.cdcommerce-buypanel__was,
.cdcommerce-card__was {
	color: var(--cs-muted, #6b6b6b);
	font-variant-numeric: tabular-nums;
	font-weight: 500;
	text-decoration-thickness: 1px;
}

.cdcommerce-buypanel__was {
	font-size: 1.0625rem;
}

/* The badge. Blue and square, the same pair as everything else that
   wants an eye. Never red: a shop is announcing good news, and red is
   the colour every other part of an interface uses for a problem. */

.cdcommerce-off {
	background: var(--cs-accent, #3858E9);
	color: #ffffff;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.4;
	padding: 0.25em 0.5em;
	white-space: nowrap;
}

/* On a card the badge sits on the picture, top left, where nothing
   else is and where an eye lands first on a grid. */

.cdcommerce-card__off {
	background: var(--cs-accent, #3858E9);
	color: #ffffff;
	font-size: 0.6875rem;
	font-weight: 700;
	left: 0;
	line-height: 1.4;
	padding: 0.3em 0.6em;
	position: absolute;
	top: 0;
	z-index: 2;
}

.cdcommerce-card__prices {
	align-items: baseline;
	display: inline-flex;
	flex: 0 0 auto;
	gap: 0.4rem;
	white-space: nowrap;
}

.cdcommerce-card__was {
	font-size: 0.75rem;
}

/* The sample. A quiet link, not a second button: it is an invitation,
   not the thing the page is asking for. */

.cdcommerce-buypanel__preview {
	border-top: 1px solid var(--cs-line, rgba(12, 12, 12, 0.1));
	margin: 0.9rem 0 0;
	padding-top: 0.9rem;
	text-align: center;
}

.cdcommerce-buypanel__preview a {
	font-size: 0.875rem;
	font-weight: 600;
}

.cdcommerce-buypanel__previewsize {
	color: var(--cs-muted, #6b6b6b);
	display: block;
	font-size: 0.75rem;
	margin-top: 0.2rem;
}

/* ===========================================================
   Cart, checkout, account.

   These three carry the money, and until now they were plain
   tables. A shop can be forgiven a dull product page; it cannot be
   forgiven a checkout that looks unfinished, because that is the
   page where a stranger decides whether to type a card number.

   Held narrower than a shop page, because every one of them is a
   short list and a form, and neither wants width.
   =========================================================== */

.cdcommerce-cartpage,
.cdcommerce-checkout,
.cdcommerce-receipt,
.cdcommerce-account {
	--cs-page: 1020px;
	--cs-ink: #1E1E1E;
	--cs-black: #0C0C0C;
	--cs-accent: #3858E9;
	--cs-muted: #6b6b6b;
	--cs-line: rgba(12, 12, 12, 0.1);
}

/* The discount code. A row, not a form pretending to be a section,
   because it is one box and one button. */

.cdcommerce-coupon {
	border-top: 1px solid var(--cs-line);
	margin: 1.5rem 0 0;
	padding-top: 1.25rem;
}

.cdcommerce-coupon__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.cdcommerce-coupon input[type="text"] {
	border: 1px solid rgba(128, 128, 128, 0.4);
	flex: 1 1 12rem;
	font: inherit;
	max-width: 18rem;
	padding: 0.7em 0.85em;
}

.cdcommerce-coupon input[type="text"]:focus {
	border-color: var(--cs-accent);
	box-shadow: 0 0 0 3px rgba(56, 88, 233, 0.18);
	outline: none;
}

/* Notices. One rule down the left rather than a coloured box: a
   coloured box on a checkout looks like an error even when it is
   telling somebody something good. */

.cdcommerce-notice,
.cdcommerce-error {
	border-left: 3px solid var(--cs-accent);
	margin: 1.5rem 0;
	padding: 0.9rem 1.1rem;
}

.cdcommerce-notice {
	background: rgba(56, 88, 233, 0.05);
}

.cdcommerce-error {
	background: rgba(179, 45, 46, 0.05);
	border-left-color: #b32d2e;
}

.cdcommerce-hint {
	color: var(--cs-muted);
	font-size: 0.875rem;
}

/* The receipt. The one page a buyer may come back to weeks later, so
   the downloads are the loudest thing on it. */

.cdcommerce-receipt .cdcommerce-downloads {
	border: 1px solid var(--cs-line);
	border-top: 3px solid var(--cs-accent);
	margin: 2rem 0;
	padding: 1.5rem;
}

.cdcommerce-downloads ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cdcommerce-downloads li {
	border-bottom: 1px solid var(--cs-line);
	padding: 0.7rem 0;
}

.cdcommerce-downloads li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.cdcommerce-downloads a {
	font-weight: 600;
}

.cdcommerce-key {
	background: rgba(12, 12, 12, 0.05);
	display: inline-block;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.875rem;
	padding: 0.3em 0.55em;
	user-select: all;
	word-break: break-all;
}

.cdcommerce-instructions {
	background: rgba(12, 12, 12, 0.02);
	border: 1px solid var(--cs-line);
	border-top: 3px solid var(--cs-black);
	margin: 1.5rem 0;
	padding: 1.5rem;
}

/* The account page. A list of orders somebody is scanning for one
   date, so the dates and the totals line up and nothing else asks
   for attention. */

.cdcommerce-account table {
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
	margin: 1.5rem 0 2.5rem;
	width: 100%;
}

.cdcommerce-account th,
.cdcommerce-account td {
	border-bottom: 1px solid var(--cs-line);
	padding: 0.8rem 0.6rem;
	text-align: left;
}

.cdcommerce-account thead th {
	border-bottom: 2px solid var(--cs-black);
	color: var(--cs-muted);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.cdcommerce-account th:first-child,
.cdcommerce-account td:first-child {
	padding-left: 0;
}

.cdcommerce-account th:last-child,
.cdcommerce-account td:last-child {
	padding-right: 0;
	text-align: right;
}

@media (max-width: 560px) {
	.cdcommerce-cart-table thead,
	.cdcommerce-account thead {
		display: none;
	}

	.cdcommerce-cart-table tbody td,
	.cdcommerce-account tbody td {
		display: block;
		padding-left: 0;
		padding-right: 0;
		text-align: left;
	}

	.cdcommerce-cart-table tbody tr,
	.cdcommerce-account tbody tr {
		border-bottom: 2px solid var(--cs-line);
		display: block;
		padding: 0.6rem 0;
	}

	.cdcommerce-cart-table tbody td {
		border-bottom: 0;
		padding-bottom: 0.25rem;
		padding-top: 0.25rem;
	}
}

/* ===========================================================
   Search and filter on the shop page.

   A plain form with no script in it. A shop that needs scripting
   to be browsed cannot be browsed by anybody whose scripting
   failed to load, and on a slow connection that is a real person.
   =========================================================== */

.cdcommerce-browse {
	align-items: center;
	border-bottom: 1px solid var(--cs-line, rgba(12, 12, 12, 0.1));
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
}

.cdcommerce-browse__field {
	flex: 1 1 12rem;
	min-width: 0;
}

.cdcommerce-browse input[type="search"],
.cdcommerce-browse select {
	background: transparent;
	border: 1px solid rgba(128, 128, 128, 0.4);
	color: inherit;
	font: inherit;
	padding: 0.65em 0.85em;
	width: 100%;
}

.cdcommerce-browse input[type="search"]:focus,
.cdcommerce-browse select:focus {
	border-color: var(--cs-accent, #3858E9);
	box-shadow: 0 0 0 3px rgba(56, 88, 233, 0.18);
	outline: none;
}

.cdcommerce-browse .cdcommerce-button {
	flex: 0 0 auto;
	padding: 0.68em 1.4em;
}

.cdcommerce-browse__clear {
	color: var(--cs-muted, #6b6b6b);
	flex: 0 0 auto;
	font-size: 0.875rem;
}

@media (max-width: 560px) {
	.cdcommerce-browse__field {
		flex: 1 1 100%;
	}

	.cdcommerce-browse .cdcommerce-button {
		width: 100%;
	}
}

/* The product column. Wide enough to be read, narrow enough that a
   long title does not push the total off the row. */

.cdcommerce-what {
	max-width: 22rem;
}

/* ===========================================================
   The cart, rebuilt.

   Two columns: what somebody chose on the left, what it comes to
   on the right. Everything stacked in one column, which is what
   this was, means the total and the checkout button end up below
   the fold on a phone and below a discount box on a desktop.
   =========================================================== */

.cdcommerce-cartpage {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 800px) {
	.cdcommerce-cartpage {
		align-items: start;
		grid-template-columns: minmax(0, 1fr) 19rem;
	}
}

.cdcommerce-lines {
	border-top: 2px solid var(--cs-black, #0C0C0C);
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

/* Four columns: the picture, what it is, how many, and what that
   comes to. The quantity sitting under the unit price read as though
   it belonged to the price rather than to the line. */

.cdcommerce-line {
	align-items: center;
	border-bottom: 1px solid var(--cs-line, rgba(12, 12, 12, 0.1));
	display: grid;
	gap: 1rem;
	grid-template-columns: 4.5rem minmax(0, 1fr) auto auto;
	padding: 1.1rem 0;
}

/* On a phone: the picture beside the name, then the quantity, then
   the total and Remove on one line with the total to the left of it.
   Four columns squeezed into a phone is what cut the price in half. */

@media (max-width: 640px) {
	.cdcommerce-line {
		align-items: start;
		grid-template-columns: 4rem minmax(0, 1fr);
		row-gap: 0.75rem;
	}

	.cdcommerce-line__step,
	.cdcommerce-line__end {
		grid-column: 2;
	}

	.cdcommerce-line__end {
		align-items: baseline;
		display: flex;
		gap: 1rem;
		text-align: left;
	}

	.cdcommerce-line .cdcommerce-remove {
		margin-top: 0;
	}
}

.cdcommerce-line__image {
	border: 1px solid var(--cs-line, rgba(12, 12, 12, 0.1));
	display: block;
	flex: 0 0 auto;
	height: 4.5rem;
	overflow: hidden;
	width: 4.5rem;
}

.cdcommerce-line__image img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.cdcommerce-line__mark {
	background: var(--cs-black, #0C0C0C);
	display: block;
	height: 100%;
	position: relative;
	width: 100%;
}

.cdcommerce-line__mark::after {
	background: var(--cs-accent, #3858E9);
	bottom: 24%;
	content: "";
	height: 4px;
	left: 24%;
	position: absolute;
	width: 32%;
}

.cdcommerce-line__body {
	flex: 1 1 auto;
	min-width: 0;
}

.cdcommerce-line__name {
	color: var(--cs-ink, #1E1E1E);
	display: block;
	font-weight: 700;
	line-height: 1.35;
	text-decoration: none;
}

.cdcommerce-line__name:hover {
	color: var(--cs-accent, #3858E9);
}

.cdcommerce-line__unit {
	color: var(--cs-muted, #6b6b6b);
	display: block;
	font-size: 0.875rem;
	margin-top: 0.2rem;
}

.cdcommerce-line__end {
	flex: 0 0 auto;
	text-align: right;
}

.cdcommerce-line__total {
	display: block;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	white-space: nowrap;
}

.cdcommerce-line .cdcommerce-remove {
	display: inline-block;
	font-size: 0.8125rem;
	margin-top: 0.35rem;
}

/* The stepper. Minus, the number, plus, in one squared unit. The
   browser's own arrows on a number field are four pixels tall and
   impossible to hit on a phone, which is where most people are. */

.cdcommerce-step {
	display: inline-flex;
	gap: 0.35rem;
}

.cdcommerce-step input[type="number"] {
	background: transparent;
	border: 1px solid rgba(128, 128, 128, 0.4);
	color: inherit;
	flex: 0 0 auto;
	font: inherit;
	font-variant-numeric: tabular-nums;
	min-width: 3.5rem;
	padding: 0.4em 0.4em;
	text-align: center;
	width: 3.5rem;
}

/* Once the buttons are there the field sits between them, so its own
   arrows are hidden and its side borders are shared. */

/* The field must not shrink. A theme that sets inputs to fill their
   container leaves this one, inside a flex row, squeezed down to the
   width of its own text cursor, which is what happened. */

/* Spaced rather than welded together, so the number reads as the
   thing being changed and the two buttons as what changes it. Welded,
   the field between them looked like a gap in a border. */

.cdcommerce-step.has-buttons input[type="number"] {
	appearance: textfield;
	flex: 0 0 auto;
	min-width: 3.5rem;
	width: 3.5rem;
}

.cdcommerce-step.has-buttons input[type="number"]::-webkit-outer-spin-button,
.cdcommerce-step.has-buttons input[type="number"]::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.cdcommerce-step__button {
	background: transparent;
	flex: 0 0 auto;
	min-width: 2.25rem;
	border: 1px solid rgba(128, 128, 128, 0.4);
	color: inherit;
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	line-height: 1;
	padding: 0.4em 0.7em;
	transition: background 120ms ease, color 120ms ease;
}

.cdcommerce-step__button:hover {
	background: var(--cs-black, #0C0C0C);
	border-color: var(--cs-black, #0C0C0C);
	color: #ffffff;
}

.cdcommerce-step__button:focus-visible {
	outline: 2px solid var(--cs-accent, #3858E9);
	outline-offset: 2px;
	z-index: 1;
}

/* The summary. The same panel as the one on a product page, because
   it is the same job: this is what it costs and this is the way to
   say yes. */

.cdcommerce-summary {
	border: 1px solid var(--cs-line, rgba(12, 12, 12, 0.1));
	border-top: 3px solid var(--cs-black, #0C0C0C);
	padding: 1.25rem;
}

@media (min-width: 800px) {
	.cdcommerce-summary {
		position: sticky;
		top: 2rem;
	}
}

.cdcommerce-summary__title {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin: 0 0 1rem;
	text-transform: uppercase;
}

.cdcommerce-summary__lines {
	margin: 0;
}

.cdcommerce-summary__lines div {
	display: flex;
	gap: 0.75rem;
	justify-content: space-between;
	padding: 0.45rem 0;
}

.cdcommerce-summary__lines dt {
	color: var(--cs-muted, #6b6b6b);
	font-size: 0.875rem;
}

.cdcommerce-summary__lines dd {
	font-variant-numeric: tabular-nums;
	margin: 0;
	text-align: right;
}

.cdcommerce-summary__off dd,
.cdcommerce-summary__off {
	color: var(--cs-accent, #3858E9);
}

.cdcommerce-summary__total {
	border-top: 2px solid var(--cs-black, #0C0C0C);
	margin-top: 0.5rem;
	padding-top: 0.85rem !important;
}

.cdcommerce-summary__total dt {
	color: var(--cs-ink, #1E1E1E) !important;
	font-size: 1rem !important;
	font-weight: 700;
}

.cdcommerce-summary__total dd {
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: -0.02em;
}

/* The discount code, inside the summary now, where the total it
   changes is. */

.cdcommerce-summary .cdcommerce-coupon {
	margin-top: 1.25rem;
	padding-top: 1.1rem;
}

/* The box on its own line and the button under it. Side by side in a
   panel this narrow the box collapsed to a thumbnail of itself while
   the button kept its full width, which is exactly what happened. */

.cdcommerce-summary .cdcommerce-coupon__row {
	display: block;
}

.cdcommerce-summary .cdcommerce-coupon input[type="text"] {
	max-width: none;
	padding: 0.6em 0.75em;
	width: 100%;
}

/* Apply is a small button, not a full width one. Full width and
   stacked, it read as a second main action competing with the one
   that actually matters. */

.cdcommerce-summary .cdcommerce-coupon .cdcommerce-button {
	display: inline-block;
	margin-top: 0.6rem;
	padding: 0.55em 1.1em;
	width: auto;
}

.cdcommerce-summary .cdcommerce-button {
	display: block;
	text-align: center;
	width: 100%;
}

.cdcommerce-summary .cdcommerce-cart-actions,
.cdcommerce-summary p {
	margin-bottom: 0;
}

/* The one action the panel exists for, set apart from everything
   above it so nothing reads as a rival to it. */

.cdcommerce-summary .cdcommerce-go {
	border-top: 1px solid var(--cs-line, rgba(12, 12, 12, 0.1));
	margin-top: 1.25rem;
	padding-top: 1.25rem;
}

.cdcommerce-cart-actions {
	margin: 0;
}

/* ===========================================================
   Signing in and registering, inside the shop.

   Two columns side by side, because the choice between having an
   account and making one is the whole decision on this page, and
   somebody who cannot see both options assumes only one exists.
   =========================================================== */

.cdcommerce-gate {
	margin: 2rem 0;
}

.cdcommerce-gate__why {
	color: var(--cs-muted, #6b6b6b);
	margin-bottom: 1.75rem;
	max-width: 52ch;
}

.cdcommerce-gate__pair {
	display: grid;
	gap: 2rem;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 720px) {
	.cdcommerce-gate__pair {
		gap: 2.5rem;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.cdcommerce-gate__side {
	border: 1px solid var(--cs-line, rgba(12, 12, 12, 0.1));
	border-top: 3px solid var(--cs-black, #0C0C0C);
	padding: 1.5rem;
}

/* The new account side gets the accent, because that is the one a
   first time buyer needs and the one they will look for last. */

.cdcommerce-gate__side:last-child {
	border-top-color: var(--cs-accent, #3858E9);
}

.cdcommerce-gate__title {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 1.25rem;
}

.cdcommerce-gate label {
	display: block;
	font-size: 0.9375em;
	font-weight: 600;
	margin-bottom: 0.4em;
}

.cdcommerce-gate input[type="email"],
.cdcommerce-gate input[type="password"],
.cdcommerce-gate input[type="text"],
.cdcommerce-gate input[type="tel"] {
	background: transparent;
	border: 1px solid rgba(128, 128, 128, 0.4);
	color: inherit;
	font: inherit;
	padding: 0.7em 0.85em;
	width: 100%;
}

.cdcommerce-gate input:focus {
	border-color: var(--cs-accent, #3858E9);
	box-shadow: 0 0 0 3px rgba(56, 88, 233, 0.18);
	outline: none;
}

.cdcommerce-gate .cdcommerce-hint {
	display: block;
	font-size: 0.8125rem;
	margin-top: 0.35rem;
}

.cdcommerce-gate__stay {
	font-weight: 400 !important;
}

.cdcommerce-gate .cdcommerce-button {
	width: 100%;
}

.cdcommerce-gate form p {
	margin-bottom: 1.1rem;
}

.cdcommerce-gate form p:last-child {
	margin-bottom: 0;
}

/* The phone field: a country code chosen from a list, then the rest of
   the number. Asking somebody to remember to write 62 in front of their
   own number is asking them to know something about telephony in order
   to buy an ebook, and the ones who forget are the ones a shop then
   cannot reach. */

.cdcommerce-phone {
	display: flex;
	gap: 0.4rem;
}

.cdcommerce-phone__dial {
	background: transparent;
	border: 1px solid rgba(128, 128, 128, 0.4);
	color: inherit;
	flex: 0 0 auto;
	font: inherit;
	padding: 0.7em 0.5em;
	width: 7rem;
}

.cdcommerce-phone__number {
	flex: 1 1 auto;
	min-width: 0;
}

/* One panel, not two. Two side by side asks a buyer to work out which
   of them applies before they can do anything. */

.cdcommerce-gate__panel {
	border: 1px solid var(--cs-line, rgba(12, 12, 12, 0.1));
	border-top: 3px solid var(--cs-accent, #3858E9);
	max-width: 30rem;
	padding: 1.75rem;
}

.cdcommerce-gate__swap {
	border-top: 1px solid var(--cs-line, rgba(12, 12, 12, 0.1));
	font-size: 0.875rem;
	margin: 1.25rem 0 0 !important;
	padding-top: 1rem;
}

/* ===========================================================
   The checkout, in two columns.

   The form on one side and the order on the other, the way a
   checkout worth trusting is laid out everywhere. A full width
   table above a narrow form left half the page empty, and empty
   space beside a payment form reads as something missing rather
   than as room to breathe.
   =========================================================== */

.cdcommerce-checkout__grid {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 860px) {
	.cdcommerce-checkout__grid {
		align-items: start;
		grid-template-columns: minmax(0, 1fr) 21rem;
	}

	.cdcommerce-checkout__summary {
		position: sticky;
		top: 2rem;
	}
}

.cdcommerce-checkout__main {
	min-width: 0;
}

/* The form fills its column now, so the old fixed measure goes. */

.cdcommerce-checkout__main .cdcommerce-checkout-form,
.cdcommerce-checkout__main .cdcommerce-gate__panel {
	max-width: none;
}

.cdcommerce-checkout__main .cdcommerce-gate {
	margin-top: 0;
}

/* The order, listed rather than tabulated. A table of two columns and
   one row is a table for the sake of being one. */

.cdcommerce-summary__items {
	border-bottom: 1px solid var(--cs-line, rgba(12, 12, 12, 0.1));
	list-style: none;
	margin: 0 0 0.75rem;
	padding: 0 0 0.5rem;
}

.cdcommerce-summary__items li {
	display: flex;
	gap: 0.75rem;
	justify-content: space-between;
	padding: 0.4rem 0;
}

.cdcommerce-summary__what {
	font-weight: 600;
	line-height: 1.35;
	min-width: 0;
}

.cdcommerce-summary__many {
	color: var(--cs-muted, #6b6b6b);
	font-weight: 400;
}

.cdcommerce-summary__cost {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Said where somebody is deciding whether to type a card number,
   because that is the only moment it reassures anybody. */

.cdcommerce-summary__safe {
	border-top: 1px solid var(--cs-line, rgba(12, 12, 12, 0.1));
	color: var(--cs-muted, #6b6b6b);
	font-size: 0.8125rem;
	line-height: 1.5;
	margin: 1.1rem 0 0;
	padding-top: 1rem;
}

/* The password field, with a button to reveal it. Hiding a password
   with no way to check it is why people type a shorter one than they
   meant to, then cannot sign in with it later. */

.cdcommerce-secret {
	display: block;
	position: relative;
}

.cdcommerce-secret input {
	width: 100%;
}

.cdcommerce-secret.has-eye input {
	padding-right: 3rem;
}

.cdcommerce-secret__eye {
	align-items: center;
	background: none;
	border: 0;
	bottom: 0;
	color: var(--cs-muted, #6b6b6b);
	cursor: pointer;
	display: flex;
	justify-content: center;
	padding: 0 0.85rem;
	position: absolute;
	right: 0;
	top: 0;
}

.cdcommerce-secret__eye svg {
	height: 1.25rem;
	width: 1.25rem;
}

.cdcommerce-secret__eye:hover {
	color: var(--cs-black, #0C0C0C);
}

.cdcommerce-secret__eye:focus-visible {
	outline: 2px solid var(--cs-accent, #3858E9);
	outline-offset: -2px;
}

/* The bar across the eye means hidden, and it goes when the password is
   showing. Two states told by shape, not only by colour. */

.cdcommerce-secret.is-showing .cdcommerce-secret__bar {
	display: none;
}

.cdcommerce-secret.is-showing .cdcommerce-secret__eye {
	color: var(--cs-accent, #3858E9);
}

/* The country list is long, so it gets room for a name. */

.cdcommerce-phone__dial {
	max-width: 13rem;
	width: 13rem;
}

@media (max-width: 520px) {
	.cdcommerce-phone {
		flex-wrap: wrap;
	}

	.cdcommerce-phone__dial {
		max-width: none;
		width: 100%;
	}
}

/* What a method accepts, said in words on small tiles.

   Never a payment company's own logo: those are trademarks, and a hand
   drawn approximation of somebody else's mark is both worse to look at
   and not ours to use. A shop owner who wants the real artwork
   downloads it from the provider and hooks it in, which is the only way
   to use it correctly. */

.cdcommerce-method-option__top {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: space-between;
}

.cdcommerce-marks {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.25rem;
}

.cdcommerce-mark {
	border: 1px solid var(--cs-line, rgba(12, 12, 12, 0.15));
	color: var(--cs-muted, #6b6b6b);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.6;
	padding: 0.1em 0.4em;
	text-transform: uppercase;
	white-space: nowrap;
}

.cdcommerce-method-option:has( input:checked ) .cdcommerce-mark {
	border-color: var(--cs-accent, #3858E9);
	color: var(--cs-accent, #3858E9);
}

/* Room between the last payment method and the button that spends the
   money. Pressed against the box above it, the button reads as part of
   the choosing rather than as the end of it. */

.cdcommerce-checkout-form .cdcommerce-methods {
	margin-bottom: 2rem;
}

.cdcommerce-checkout-form .cdcommerce-methods + p {
	margin-top: 0;
}

.cdcommerce-checkout-form button[type="submit"] {
	font-size: 1rem;
	padding: 0.9em 2em;
}

/* The payment marks, in their owners' own artwork.

   A height is set and the width follows from each picture's own shape,
   because the condition on which these may be shown at all is that they
   are not modified, and stretching one to fit a box is modifying it.

   The grey plate behind them is ours, not theirs. It gives marks of
   very different colours somewhere consistent to sit without touching
   the marks themselves. */

.cdcommerce-logo {
	background: #ffffff;
	border: 1px solid var(--cs-line, rgba(12, 12, 12, 0.12));
	box-sizing: content-box;
	display: block;
	height: 1.15rem;
	max-width: 3.5rem;
	object-fit: contain;
	padding: 0.2rem 0.3rem;
	width: auto;
}

.cdcommerce-marks {
	align-items: center;
}

@media (max-width: 520px) {
	.cdcommerce-logo {
		height: 1rem;
		max-width: 3rem;
	}
}

/* ===========================================================
   The account page.

   Side navigation and one panel, not nine separate pages. What the
   largest commerce plugins give is a list of orders; what a buyer
   expects, having used any marketplace, is somewhere that is theirs.
   =========================================================== */

.cdcommerce-account__grid {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 820px) {
	.cdcommerce-account__grid {
		align-items: start;
		grid-template-columns: 15rem minmax(0, 1fr);
	}
}

.cdcommerce-account__nav {
	border: 1px solid var(--cs-line, rgba(12, 12, 12, 0.1));
	border-top: 3px solid var(--cs-black, #0C0C0C);
}

.cdcommerce-account__who {
	align-items: center;
	border-bottom: 1px solid var(--cs-line, rgba(12, 12, 12, 0.1));
	display: flex;
	gap: 0.75rem;
	padding: 1.1rem;
}

.cdcommerce-account__who strong {
	display: block;
	line-height: 1.3;
}

.cdcommerce-account__mail {
	color: var(--cs-muted, #6b6b6b);
	display: block;
	font-size: 0.75rem;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cdcommerce-portrait {
	background: #f2f2f2;
	border: 1px solid var(--cs-line, rgba(12, 12, 12, 0.1));
	display: block;
	height: 6rem;
	object-fit: cover;
	width: 6rem;
}

.cdcommerce-portrait--small {
	flex: 0 0 auto;
	height: 2.75rem;
	width: 2.75rem;
}

.cdcommerce-account__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cdcommerce-account__nav a {
	border-left: 3px solid transparent;
	color: var(--cs-ink, #1E1E1E);
	display: block;
	font-weight: 600;
	padding: 0.7rem 1.1rem;
	text-decoration: none;
}

.cdcommerce-account__nav a:hover {
	background: rgba(12, 12, 12, 0.03);
}

/* The section being looked at is marked by a bar as well as by weight,
   so it still reads where colours cannot be told apart. */

.cdcommerce-account__nav a[aria-current="page"] {
	background: rgba(56, 88, 233, 0.06);
	border-left-color: var(--cs-accent, #3858E9);
	color: var(--cs-accent, #3858E9);
}

.cdcommerce-account__out a {
	border-top: 1px solid var(--cs-line, rgba(12, 12, 12, 0.1));
	color: var(--cs-muted, #6b6b6b) !important;
	font-weight: 400;
}

.cdcommerce-account__panel {
	min-width: 0;
}

.cdcommerce-account__title {
	border-bottom: 2px solid var(--cs-black, #0C0C0C);
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0 0 1.5rem;
	padding-bottom: 0.6rem;
}

.cdcommerce-account__note {
	color: var(--cs-muted, #6b6b6b);
	font-size: 0.9375rem;
	max-width: 58ch;
}

/* The forms in the account. One measure for every field, so a column of
   them lines up rather than stepping in and out with the length of what
   each one holds. */

.cdcommerce-form {
	max-width: 34rem;
}

.cdcommerce-form p {
	margin-bottom: 1.25rem;
}

.cdcommerce-form label {
	display: block;
	font-size: 0.9375em;
	font-weight: 600;
	margin-bottom: 0.4em;
}

.cdcommerce-form input[type="text"],
.cdcommerce-form input[type="email"],
.cdcommerce-form input[type="tel"],
.cdcommerce-form input[type="date"],
.cdcommerce-form select {
	background: transparent;
	border: 1px solid rgba(128, 128, 128, 0.4);
	color: inherit;
	font: inherit;
	padding: 0.7em 0.85em;
	width: 100%;
}

.cdcommerce-form input:focus,
.cdcommerce-form select:focus {
	border-color: var(--cs-accent, #3858E9);
	box-shadow: 0 0 0 3px rgba(56, 88, 233, 0.18);
	outline: none;
}

.cdcommerce-form input[disabled] {
	background: rgba(12, 12, 12, 0.04);
	color: var(--cs-muted, #6b6b6b);
}

.cdcommerce-form__pair {
	display: grid;
	gap: 0 1rem;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 520px) {
	.cdcommerce-form__pair {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.cdcommerce-form__plain {
	font-weight: 400 !important;
	margin-top: 0.6rem;
}

/* The picture beside its own field, because a buyer wants to see what
   they have before deciding whether to change it. */

.cdcommerce-form__portrait {
	align-items: flex-start;
	border-bottom: 1px solid var(--cs-line, rgba(12, 12, 12, 0.1));
	display: flex;
	gap: 1.25rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1.5rem;
}

.cdcommerce-form__portrait > div {
	flex: 1 1 auto;
	min-width: 0;
}

.cdcommerce-form__portrait input[type="file"] {
	font: inherit;
	max-width: 100%;
}

.cdcommerce-form .cdcommerce-hint {
	display: block;
	font-size: 0.8125rem;
	margin-top: 0.35rem;
}

/* The completeness bar. A real progress element, so a screen reader
   announces the figure rather than describing a coloured rectangle. */

.cdcommerce-meter {
	border: 1px solid var(--cs-line, rgba(12, 12, 12, 0.1));
	border-left: 3px solid var(--cs-accent, #3858E9);
	margin-bottom: 1.75rem;
	padding: 1.1rem 1.25rem;
}

.cdcommerce-meter__head {
	align-items: baseline;
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	margin-bottom: 0.6rem;
}

.cdcommerce-meter__figure {
	font-variant-numeric: tabular-nums;
	font-weight: 800;
}

.cdcommerce-meter__bar {
	appearance: none;
	background: rgba(12, 12, 12, 0.08);
	border: 0;
	display: block;
	height: 0.5rem;
	width: 100%;
}

.cdcommerce-meter__bar::-webkit-progress-bar {
	background: rgba(12, 12, 12, 0.08);
}

.cdcommerce-meter__bar::-webkit-progress-value {
	background: var(--cs-accent, #3858E9);
}

.cdcommerce-meter__bar::-moz-progress-bar {
	background: var(--cs-accent, #3858E9);
}

.cdcommerce-meter__what {
	color: var(--cs-muted, #6b6b6b);
	font-size: 0.875rem;
	margin: 0.6rem 0 0;
}

/* Whether the address has been reached. Said with words, not only with
   a colour, so it reads on a printed page and to a screen reader. */

.cdcommerce-confirmed {
	color: var(--cs-muted, #6b6b6b);
	font-size: 0.875rem;
	margin-bottom: 1.5rem;
}

.cdcommerce-unconfirmed {
	background: rgba(240, 165, 0, 0.06);
	border: 1px solid rgba(240, 165, 0, 0.35);
	border-left: 3px solid #f0a500;
	margin-bottom: 1.75rem;
	padding: 1.1rem 1.25rem;
}

.cdcommerce-unconfirmed p {
	margin: 0 0 0.6rem;
}

.cdcommerce-account__guest {
	border-top: 1px solid var(--cs-line, rgba(12, 12, 12, 0.1));
	margin-top: 2.5rem;
	padding-top: 2rem;
}

/* ===========================================================
   Priced options, and breathing room at the top of every page.
   =========================================================== */

/* A theme drops its content straight under the header on some pages and
   not on others. Fifty pixels of our own means the shop starts in the
   same place whichever page somebody landed on. */

.cdcommerce-single,
.cdcommerce-shelf,
.cdcommerce-cartpage,
.cdcommerce-checkout,
.cdcommerce-receipt,
.cdcommerce-account {
	padding-top: 50px;
}

/* Radios rather than a dropdown, because a buyer comparing two licences
   needs both prices in front of them at once, not one at a time. */

.cdcommerce-options {
	border: 0;
	margin: 0 0 1.25rem;
	padding: 0;
}

.cdcommerce-option {
	align-items: flex-start;
	border: 1px solid var(--cs-line, rgba(12, 12, 12, 0.12));
	cursor: pointer;
	display: flex;
	gap: 0.6rem;
	margin-bottom: 0.5rem;
	padding: 0.75rem 0.85rem;
	transition: border-color 120ms ease, background 120ms ease;
}

.cdcommerce-option:last-child {
	margin-bottom: 0;
}

.cdcommerce-option:hover {
	border-color: rgba(12, 12, 12, 0.35);
}

/* The chosen one is marked by a thick edge and a tint, so it reads
   without depending on the small dot being visible. */

.cdcommerce-option:has( input:checked ) {
	background: rgba(56, 88, 233, 0.05);
	border-color: var(--cs-accent, #3858E9);
	box-shadow: inset 0 0 0 1px var(--cs-accent, #3858E9);
}

.cdcommerce-option input {
	flex: 0 0 auto;
	margin: 0.25rem 0 0;
}

.cdcommerce-option__body {
	flex: 1 1 auto;
	min-width: 0;
}

.cdcommerce-option__name {
	display: block;
	font-weight: 700;
	line-height: 1.3;
}

.cdcommerce-option__note {
	color: var(--cs-muted, #6b6b6b);
	display: block;
	font-size: 0.8125rem;
	margin-top: 0.15rem;
}

.cdcommerce-option__cost {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	text-align: right;
	white-space: nowrap;
}

.cdcommerce-option__cost s {
	color: var(--cs-muted, #6b6b6b);
	display: block;
	font-size: 0.75rem;
	font-weight: 500;
}

/* The option a buyer chose, said on its cart line. */

.cdcommerce-line__option {
	color: var(--cs-muted, #6b6b6b);
	display: block;
	font-size: 0.8125rem;
	margin-top: 0.15rem;
}

/* A line under the sample link, when something is asked for first. */

.cdcommerce-buypanel__previewnote {
	color: var(--cs-muted, #6b6b6b);
	font-size: 0.8125rem;
	margin: -0.35rem 0 0.75rem;
}

/* The payment chooser.

   These class names existed and carried no rules at all, so the radio,
   the name, the logos and the note all ran together on one line and the
   whole block read as a jumble. Nothing was broken; nothing had ever been
   styled.

   Each choice is a card the whole of which is clickable, because a bare
   radio is a small target and this is the last decision before somebody
   parts with money. */

.cdcommerce-methods {
	border: 0;
	margin: 0 0 2rem;
	padding: 0;
}

.cdcommerce-methods > legend {
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	margin-bottom: 0.75rem;
	padding: 0;
}

.cdcommerce-method-option {
	align-items: flex-start;
	background: #ffffff;
	border: 1px solid var(--cs-line, rgba(12, 12, 12, 0.12));
	border-radius: var(--cs-radius, 6px);
	cursor: pointer;
	display: flex;
	gap: 0.75rem;
	margin-bottom: 0.6rem;
	padding: 0.9rem 1rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cdcommerce-method-option:last-child {
	margin-bottom: 0;
}

.cdcommerce-method-option:hover {
	border-color: var(--cs-accent, #3858e9);
}

.cdcommerce-method-option input[type="radio"] {
	flex: 0 0 auto;
	margin: 0.15rem 0 0;
}

/* The chosen one is marked by the border and a tinted edge rather than by
   a filled background, so the payment marks keep sitting on white and are
   never shown against a colour their owners did not agree to. */
.cdcommerce-method-option:has(input[type="radio"]:checked) {
	border-color: var(--cs-accent, #3858e9);
	box-shadow: inset 3px 0 0 0 var(--cs-accent, #3858e9);
}

.cdcommerce-method-option:has(input[type="radio"]:focus-visible) {
	outline: 2px solid var(--cs-accent, #3858e9);
	outline-offset: 2px;
}

.cdcommerce-method-option__body {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
}

.cdcommerce-method-option__top {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	justify-content: space-between;
}

.cdcommerce-method-option__name {
	font-weight: 600;
}

/* The marks sit together at the end of the row and wrap as a group, so a
   method carrying six of them does not push its own name off the line. */
.cdcommerce-method-option__top .cdcommerce-marks {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin-left: auto;
}

.cdcommerce-method-option__note {
	color: var(--cs-muted, #6b6b6b);
	display: block;
	font-size: 0.875rem;
	line-height: 1.45;
	margin-top: 0.3rem;
}

/* Where to send the money.

   The account sits in a table rather than a paragraph because a buyer is
   about to copy it into a banking app, and three labelled rows are read
   at a glance where a sentence has to be picked apart. */

.cdcommerce-instructions {
	background: #ffffff;
	border: 1px solid var(--cs-line, rgba(12, 12, 12, 0.12));
	border-left: 3px solid var(--cs-accent, #3858e9);
	border-radius: var(--cs-radius, 6px);
	margin: 1.5rem 0;
	padding: 1.25rem 1.5rem;
}

.cdcommerce-instructions__head {
	font-size: 1rem;
	margin: 0 0 0.75rem;
}

.cdcommerce-instructions > p:last-child {
	margin-bottom: 0;
}

.cdcommerce-bank {
	border-collapse: collapse;
	margin: 0 0 1rem;
	width: 100%;
}

.cdcommerce-bank th,
.cdcommerce-bank td {
	border: 0;
	border-bottom: 1px solid var(--cs-line, rgba(12, 12, 12, 0.08));
	padding: 0.5rem 0;
	text-align: left;
	vertical-align: middle;
}

.cdcommerce-bank tr:last-child th,
.cdcommerce-bank tr:last-child td {
	border-bottom: 0;
}

.cdcommerce-bank th {
	color: var(--cs-muted, #6b6b6b);
	font-weight: 400;
	white-space: nowrap;
	width: 11rem;
}

/* An account number is a string of digits that has to be copied without a
   single mistake, so it is set in a fixed width face where every figure
   takes the same space and a repeated digit cannot be miscounted. */
.cdcommerce-bank__number {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 1.15rem;
	letter-spacing: 0.04em;
}

/* Changing how an unpaid order is paid.

   Set apart from the payment instructions above it, because it is an
   offer rather than an instruction, and a buyer who is already on their
   way to the bank should be able to skip past it. */

.cdcommerce-change-method {
	border-top: 1px solid var(--cs-line, rgba(12, 12, 12, 0.12));
	margin-top: 2rem;
	padding-top: 1.5rem;
}

.cdcommerce-change-method .cdcommerce-methods {
	margin-bottom: 1rem;
}

/* One order that still owes money, in the account.

   Each is a card rather than a table row, because the buyer is being
   asked to act on this one thing rather than to compare it with others. */

.cdcommerce-owing {
	background: #ffffff;
	border: 1px solid var(--cs-line, rgba(12, 12, 12, 0.12));
	border-left: 3px solid var(--cs-accent, #3858e9);
	border-radius: var(--cs-radius, 6px);
	margin-bottom: 1.25rem;
	padding: 1.25rem 1.5rem;
}

.cdcommerce-owing__head {
	font-size: 1.0625rem;
	margin: 0 0 0.75rem;
}

.cdcommerce-owing .cdcommerce-bank {
	margin-bottom: 1rem;
}

/* Sending in a transfer receipt.

   Set apart from the account details above it, because it is what the
   buyer does after the bank rather than part of the instruction. */

.cdcommerce-proof {
	background: #ffffff;
	border: 1px solid var(--cs-line, rgba(12, 12, 12, 0.12));
	border-radius: var(--cs-radius, 6px);
	margin: 1.5rem 0;
	padding: 1.25rem 1.5rem;
}

.cdcommerce-proof__head {
	font-size: 1rem;
	margin: 0 0 0.5rem;
}

.cdcommerce-proof label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35rem;
}

.cdcommerce-proof input[type="file"] {
	max-width: 100%;
}

/* Where the page goes next, given a buyer who has just paid or is about
   to. A receipt that ends after the total leaves them nowhere to go. */

.cdcommerce-next {
	margin-top: 2rem;
}

/* The moment a receipt arrives.

   Marked with the accent edge the shop uses for anything settled, so a
   buyer who has just parted with money can see at a glance that it landed
   without reading a word. */

.cdcommerce-proof--received {
	border-left: 3px solid var(--cs-accent, #3858e9);
}

.cdcommerce-proof--received .cdcommerce-proof__head {
	margin-bottom: 0.75rem;
}