/* ===========================================================
   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; }
   =========================================================== */

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

	margin-left: auto;
	margin-right: auto;
	max-width: var(--cs-page);
}

/* A shelf already holds a grid, so the grid inside it must not narrow
   itself a second time. */
.cdcommerce-shelf .cdcommerce-shop {
	max-width: none;
}

/**
 * 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;
}

.cdcommerce-button {
	background: var(--cs-accent);
	border: 2px solid var(--cs-accent);
	color: #ffffff;
	cursor: pointer;
	display: inline-block;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	padding: 0.8em 1.6em;
	text-decoration: none;
	transition: background 120ms ease, border-color 120ms ease;
}

.cdcommerce-button:hover,
.cdcommerce-button:focus {
	background: #0C0C0C;
	border-color: #0C0C0C;
	color: #ffffff;
}

.cdcommerce-button:focus-visible {
	outline: 2px solid #0C0C0C;
	outline-offset: 3px;
}

.cdcommerce-button--quiet {
	background: transparent;
	border-color: currentColor;
	color: inherit;
}

.cdcommerce-button--quiet:hover,
.cdcommerce-button--quiet:focus {
	background: transparent;
	border-color: var(--cs-accent);
	color: inherit;
}

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

.cdcommerce-cart-table th,
.cdcommerce-cart-table td {
	border-bottom: 1px solid rgba(128, 128, 128, 0.25);
	padding: 0.9em 0.6em;
	text-align: left;
}

.cdcommerce-cart-table thead th {
	font-size: 0.75em;
	font-weight: 600;
	letter-spacing: 0.08em;
	opacity: 0.7;
	text-transform: uppercase;
}

.cdcommerce-cart-table td:last-child,
.cdcommerce-cart-table th:last-child {
	text-align: right;
}

.cdcommerce-cart-table tfoot th,
.cdcommerce-cart-table tfoot td {
	border-bottom: 0;
	border-top: 3px solid var(--cs-accent);
	font-size: 1.1em;
	padding-top: 1em;
}

.cdcommerce-cart-table input[type="number"] {
	max-width: 5.5em;
	padding: 0.4em;
}

.cdcommerce-remove {
	line-height: 1;
	opacity: 0.5;
	text-decoration: none;
}

.cdcommerce-remove:hover,
.cdcommerce-remove:focus {
	opacity: 1;
}

.cdcommerce-cart-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
	margin-top: 1.5em;
}

.cdcommerce-cart-empty {
	opacity: 0.7;
}

/* The checkout form.
 *
 * A form asking for money has to look like it was built on purpose.
 * Roomy fields, a visible focus ring, and payment methods you choose by
 * hitting a whole card rather than a four pixel dot.
 */

.cdcommerce-checkout-form {
	margin-top: 2.5em;
	max-width: 34em;
}

.cdcommerce-checkout-form p {
	margin-bottom: 1.5em;
}

.cdcommerce-checkout-form label {
	display: block;
	font-size: 0.9375em;
	font-weight: 600;
	letter-spacing: -0.005em;
	margin-bottom: 0.5em;
}

.cdcommerce-checkout-form input[type="text"],
.cdcommerce-checkout-form input[type="email"],
.cdcommerce-checkout-form select {
	background: transparent;
	border: 1px solid rgba(128, 128, 128, 0.4);
	color: inherit;
	font: inherit;
	padding: 0.75em 0.9em;
	transition: border-color 120ms ease, box-shadow 120ms ease;
	width: 100%;
}

.cdcommerce-checkout-form input[type="text"]:hover,
.cdcommerce-checkout-form input[type="email"]:hover,
.cdcommerce-checkout-form select:hover {
	border-color: rgba(128, 128, 128, 0.7);
}

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

.cdcommerce-checkout-form select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 13px) calc(50% + 2px);
	background-repeat: no-repeat;
	background-size: 5px 5px, 5px 5px;
	padding-right: 2.5em;
}

/* Payment methods, as cards. */

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

.cdcommerce-methods legend {
	font-size: 0.9375em;
	font-weight: 600;
	margin-bottom: 0.75em;
	padding: 0;
}

.cdcommerce-method-option {
	align-items: flex-start;
	border: 1px solid rgba(128, 128, 128, 0.4);
	cursor: pointer;
	display: flex;
	font-weight: 400;
	gap: 0.85em;
	margin-bottom: 0.6em;
	padding: 1em 1.1em;
	transition: border-color 120ms ease, box-shadow 120ms ease;
}

.cdcommerce-method-option:hover {
	border-color: rgba(128, 128, 128, 0.75);
}

.cdcommerce-method-option:has( input:checked ) {
	border-color: var(--cs-accent);
	box-shadow: inset 0 0 0 1px var(--cs-accent);
}

.cdcommerce-method-option:has( input:focus-visible ) {
	box-shadow: 0 0 0 3px rgba(56, 88, 233, 0.18);
}

.cdcommerce-method-option input {
	accent-color: var(--cs-accent);
	flex: 0 0 auto;
	margin: 0.2em 0 0;
	width: auto;
}

.cdcommerce-method-option__body {
	display: block;
}

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

.cdcommerce-method-option__note {
	display: block;
	font-size: 0.875em;
	margin-top: 0.2em;
	opacity: 0.7;
}

.cdcommerce-error {
	border-left: 3px solid #b32d2e;
	color: #b32d2e;
	padding: 0.6em 1em;
}

.cdcommerce-receipt h2 {
	border-bottom: 4px solid var(--cs-accent);
	display: inline-block;
	margin-bottom: 0.75em;
	padding-bottom: 0.25em;
}

.cdcommerce-instructions {
	border-left: 3px solid var(--cs-accent);
	margin: 1.5em 0;
	padding: 0.25em 1.25em;
}

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

@media screen and (max-width: 600px) {
	.cdcommerce-cart-table thead {
		display: none;
	}

	.cdcommerce-cart-table tr {
		border-bottom: 1px solid rgba(128, 128, 128, 0.25);
		display: block;
		padding: 0.75em 0;
	}

	.cdcommerce-cart-table td {
		border: 0;
		display: flex;
		justify-content: space-between;
		padding: 0.35em 0;
	}
}

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

.cdcommerce-downloads li {
	margin-bottom: 0.75em;
}

.cdcommerce-notice {
	border-left: 3px solid #3858E9;
	padding: 0.6em 1em;
}

.cdcommerce-account h2 {
	margin-top: 1.5em;
}

.cdcommerce-key {
	font-size: 1.05em;
	letter-spacing: 0.04em;
	padding: 0.25em 0.5em;
	word-break: break-all;
}

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

.cdcommerce-coupon label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.5em;
}

.cdcommerce-coupon__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

.cdcommerce-coupon__row input[type="text"] {
	max-width: 14em;
	padding: 0.6em;
}

.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-product {
		align-items: start;
		gap: 3.5rem;
		grid-template-columns: minmax(0, 1fr) 20rem;
	}

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

.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;
}

.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;
}