/*
 * CBY Store — the public shop.
 *
 * Lives inside the cby-academy theme's page template, so it styles only its own
 * `.cbyos-store` subtree and inherits the site's typography. Palette matches the
 * CBY identity used by the portal and the branded emails:
 *   ink #21323d · primary #29679b · sky #88cbed · lavender #d5bff2
 *
 * Mobile first: single column with a 16px gutter, widening at 720px. Parents buy
 * tickets on a phone the minute the box office opens, so the phone layout is the
 * real layout.
 */

.cbyos-store {
	--cbyos-ink: #21323d;
	--cbyos-primary: #29679b;
	--cbyos-sky: #88cbed;
	--cbyos-lavender: #d5bff2;
	--cbyos-muted: #5a6b78;
	--cbyos-line: #dde8f0;
	--cbyos-soft: #f4f8fb;
	--cbyos-danger: #a3342a;
	--cbyos-radius: 14px;

	box-sizing: border-box;
	max-width: 1080px;
	margin: 0 auto;
	padding: 8px 16px 56px;
	color: var(--cbyos-ink);
}

.cbyos-store *,
.cbyos-store *::before,
.cbyos-store *::after {
	box-sizing: inherit;
}

/* ── Bar: breadcrumb + cart ─────────────────────────────────────────────── */

.cbyos-store__bar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	padding: 12px 0;
	border-bottom: 1px solid var(--cbyos-line);
	margin-bottom: 24px;
}

.cbyos-store__crumbs {
	font-size: 14px;
	color: var(--cbyos-muted);
}

.cbyos-store__crumbs a {
	color: var(--cbyos-primary);
	text-decoration: none;
}

.cbyos-store__crumbs a:hover,
.cbyos-store__crumbs a:focus {
	text-decoration: underline;
}

.cbyos-store__crumb-sep {
	margin: 0 6px;
	opacity: 0.5;
}

.cbyos-store__cart-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border: 1px solid var(--cbyos-line);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	color: var(--cbyos-ink);
	text-decoration: none;
	background: #fff;
}

.cbyos-store__cart-link:hover,
.cbyos-store__cart-link:focus {
	border-color: var(--cbyos-sky);
}

.cbyos-store__badge {
	display: inline-grid;
	place-items: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--cbyos-primary);
	color: #fff;
	font-size: 12px;
	line-height: 1;
}

/* ── Headings ───────────────────────────────────────────────────────────── */

.cbyos-store__head {
	margin-bottom: 28px;
}

.cbyos-store__title {
	margin: 0 0 8px;
	font-size: clamp(26px, 5vw, 38px);
	line-height: 1.15;
}

.cbyos-store__subtitle {
	margin: 24px 0 12px;
	font-size: 18px;
}

.cbyos-store__lead {
	margin: 0;
	color: var(--cbyos-muted);
	font-size: 16px;
	line-height: 1.55;
}

.cbyos-store__venue {
	margin: 6px 0 0;
	font-weight: 600;
}

.cbyos-store__desc {
	margin: 16px 0;
	line-height: 1.6;
}

.cbyos-store__fineprint {
	margin: 14px 0 0;
	font-size: 13px;
	color: var(--cbyos-muted);
	line-height: 1.5;
}

.cbyos-store__note {
	margin: 14px 0 0;
	padding: 12px 14px;
	border-radius: 10px;
	background: var(--cbyos-soft);
	font-size: 14px;
	line-height: 1.5;
}

/* ── The two doors ──────────────────────────────────────────────────────── */

.cbyos-store__doors {
	display: grid;
	gap: 16px;
}

@media (min-width: 720px) {
	.cbyos-store__doors {
		grid-template-columns: 1fr 1fr;
	}
}

.cbyos-store__door {
	display: grid;
	gap: 6px;
	padding: 36px 24px;
	border-radius: var(--cbyos-radius);
	background: linear-gradient(135deg, var(--cbyos-sky) 0%, var(--cbyos-lavender) 100%);
	color: var(--cbyos-ink);
	text-align: center;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cbyos-store__door:hover,
.cbyos-store__door:focus {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(33, 50, 61, 0.14);
}

.cbyos-store__door-icon {
	font-size: 40px;
	line-height: 1;
}

.cbyos-store__door-name {
	font-size: 22px;
	font-weight: 700;
}

.cbyos-store__door-note {
	font-size: 14px;
	opacity: 0.8;
}

/* ── Product grid ───────────────────────────────────────────────────────── */

.cbyos-store__grid {
	display: grid;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 560px) {
	.cbyos-store__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	.cbyos-store__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.cbyos-store__card > a {
	display: grid;
	height: 100%;
	border: 1px solid var(--cbyos-line);
	border-radius: var(--cbyos-radius);
	overflow: hidden;
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cbyos-store__card > a:hover,
.cbyos-store__card > a:focus {
	border-color: var(--cbyos-sky);
	box-shadow: 0 8px 20px rgba(33, 50, 61, 0.08);
}

/* Listing thumbnails are PORTRAIT, because everything the academy sells is shot
   portrait — show posters and garment photos alike. A card frame has to be a
   fixed shape or the grid goes ragged, so this one crops; the product page below
   does not. Artwork at 3:4 therefore fits a card exactly, with nothing lost. */
.cbyos-store__card-img {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 3 / 4;
	background: var(--cbyos-soft);
	overflow: hidden;
}

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

.cbyos-store__card-ph {
	font-size: 48px;
	opacity: 0.45;
}

.cbyos-store__flag {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(33, 50, 61, 0.86);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.cbyos-store__card.is-soldout .cbyos-store__card-img img {
	filter: grayscale(1);
	opacity: 0.7;
}

.cbyos-store__card-body {
	display: grid;
	gap: 6px;
	align-content: start;
	padding: 16px 18px 20px;
}

.cbyos-store__card-name {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}

.cbyos-store__card-blurb {
	font-size: 14px;
	color: var(--cbyos-muted);
	line-height: 1.45;
}

.cbyos-store__card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	align-items: baseline;
	margin-top: 4px;
}

.cbyos-store__price {
	font-weight: 700;
	color: var(--cbyos-primary);
}

.cbyos-store__price--big {
	font-size: 26px;
	margin: 4px 0 10px;
}

.cbyos-store__card-sub {
	font-size: 13px;
	color: var(--cbyos-muted);
}

/* ── One product ────────────────────────────────────────────────────────── */

.cbyos-store__product {
	display: grid;
	gap: 28px;
}

@media (min-width: 860px) {
	.cbyos-store__product {
		/* A portrait image is tall, so it takes a slimmer column than a landscape
		   one would and the booking form gets the rest. */
		grid-template-columns: 4fr 7fr;
		gap: 40px;
		align-items: start;
	}
}

/* The product page shows the artwork WHOLE — never cropped.
   The frame takes its shape from the image itself (an inline aspect-ratio, set
   from the real pixel dimensions), so a portrait poster stands portrait and a
   square photo stands square. The 3:4 here is only the fallback for when we have
   no dimensions to go on. max-height stops a freakishly tall upload swallowing
   the screen; in that one case `contain` letterboxes it rather than distorting
   or cropping it. */
.cbyos-store__product-media {
	display: grid;
	place-items: center;
	/* Centre it in its column. On a tablet the height cap below shrinks the frame
	   narrower than the column, and without this it sits stranded to one side.
	   Do NOT add width:100% here — that forces the frame to fill the column, the
	   height cap then breaks its ratio, and the image overflows and is cropped,
	   which is the whole thing we are avoiding. Letting the width be derived from
	   the ratio and the cap is what keeps the artwork whole. */
	justify-self: center;
	aspect-ratio: 3 / 4;
	max-height: 72vh;
	border-radius: var(--cbyos-radius);
	background: var(--cbyos-soft);
	overflow: hidden;
}

.cbyos-store__product-media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* ── Forms ──────────────────────────────────────────────────────────────── */

.cbyos-store__form {
	margin-top: 24px;
}

.cbyos-store__field {
	display: grid;
	gap: 6px;
	margin: 0 0 18px;
}

.cbyos-store__field > label,
.cbyos-store__coupon > label {
	font-size: 14px;
	font-weight: 600;
}

.cbyos-store__req {
	color: var(--cbyos-danger);
}

.cbyos-store__help {
	font-size: 13px;
	color: var(--cbyos-muted);
}

.cbyos-store input[type="text"],
.cbyos-store input[type="email"],
.cbyos-store input[type="tel"],
.cbyos-store input[type="number"],
.cbyos-store select {
	width: 100%;
	max-width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--cbyos-line);
	border-radius: 10px;
	background: #fff;
	color: var(--cbyos-ink);
	/* 16px keeps iOS from zooming the page when a field is focused. */
	font-size: 16px;
	font-family: inherit;
}

.cbyos-store input:focus,
.cbyos-store select:focus {
	outline: 2px solid var(--cbyos-sky);
	outline-offset: 1px;
	border-color: var(--cbyos-sky);
}

.cbyos-store__row {
	display: grid;
	gap: 18px;
}

@media (min-width: 520px) {
	.cbyos-store__row {
		grid-template-columns: 1fr 140px;
	}
}

.cbyos-store__field--qty input {
	max-width: 140px;
}

.cbyos-store fieldset.cbyos-store__field {
	border: 0;
	padding: 0;
	margin: 0 0 22px;
}

.cbyos-store fieldset.cbyos-store__field > legend {
	padding: 0;
	margin-bottom: 10px;
	font-size: 14px;
	font-weight: 600;
}

/* Performance picker */

.cbyos-store__dates {
	display: grid;
	gap: 10px;
}

.cbyos-store__date {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 12px;
	align-items: center;
	padding: 14px 16px;
	border: 1px solid var(--cbyos-line);
	border-radius: 12px;
	background: #fff;
	cursor: pointer;
}

.cbyos-store__date:has(input:checked) {
	border-color: var(--cbyos-primary);
	box-shadow: inset 0 0 0 1px var(--cbyos-primary);
}

.cbyos-store__date.is-soldout {
	background: var(--cbyos-soft);
	color: var(--cbyos-muted);
	cursor: not-allowed;
}

/* Not this buyer's performance — the child they named isn't in it, or they
   haven't said who they're coming to see yet. Greyed but still readable: they
   need to see WHEN the other performances are, they just can't buy them. */
.cbyos-store__date.is-locked {
	background: var(--cbyos-soft);
	color: var(--cbyos-muted);
	cursor: not-allowed;
	opacity: 0.72;
}

.cbyos-store__date.is-locked .cbyos-store__date-when {
	font-weight: 500;
}

/* Who is on stage that night, under the date. */
.cbyos-store__date-cast {
	grid-column: 2 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/* No pills in it = no row for it. Tested on what it CONTAINS, not on :empty —
   the template leaves whitespace inside the span, which :empty does not match. */
.cbyos-store__date-cast:not(:has(.cbyos-store__pill)) {
	display: none;
}

.cbyos-store__pill {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--cbyos-primary);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.6;
}

.cbyos-store__pill--open {
	background: var(--cbyos-soft);
	color: var(--cbyos-muted);
	box-shadow: inset 0 0 0 1px var(--cbyos-line);
}

/* "…is not in this performance" — a statement of fact, not a warning. */
.cbyos-store__pill--off {
	background: transparent;
	color: var(--cbyos-muted);
	font-weight: 500;
	box-shadow: inset 0 0 0 1px var(--cbyos-line);
}

/* "Tell us who you're coming to see first." */
.cbyos-store__dates-hint {
	margin: 0 0 10px;
	padding: 10px 12px;
	border-radius: 10px;
	background: var(--cbyos-soft);
	font-size: 14px;
}

.cbyos-store__dates-hint[hidden] {
	display: none;
}

/* The "I'm not coming to see a specific student" tick-box. */
.cbyos-store__anyone {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin-top: 4px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
}

.cbyos-store__anyone input {
	margin: 2px 0 0;
}

.cbyos-store__date-when {
	font-weight: 600;
}

.cbyos-store__date-left {
	font-size: 13px;
	color: var(--cbyos-muted);
	text-align: right;
}

/* "Who are you coming to see?" autocomplete */

.cbyos-store__field--student {
	position: relative;
}

.cbyos-store__lookup {
	/* What the suggestion list is positioned against: the input alone, not the
	   whole field, which also carries the "not coming to see anyone" tick-box. */
	position: relative;
}

.cbyos-store__suggest {
	position: absolute;
	z-index: 20;
	/* Immediately under the input it belongs to. */
	top: 100%;
	left: 0;
	right: 0;
	margin: 0;
	padding: 4px;
	list-style: none;
	border: 1px solid var(--cbyos-line);
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 12px 28px rgba(33, 50, 61, 0.16);
	max-height: 260px;
	overflow-y: auto;
}

.cbyos-store__suggest li {
	margin: 0;
	padding: 10px 12px;
	border-radius: 8px;
	cursor: pointer;
	font-size: 15px;
}

.cbyos-store__suggest li:hover,
.cbyos-store__suggest li[aria-selected="true"] {
	background: var(--cbyos-soft);
}

.cbyos-store__suggest li.is-empty {
	color: var(--cbyos-muted);
	cursor: default;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */

.cbyos-store__actions {
	margin: 24px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.cbyos-store__btn {
	display: inline-block;
	padding: 13px 26px;
	border: 1px solid var(--cbyos-primary);
	border-radius: 999px;
	background: var(--cbyos-primary);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	font-family: inherit;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.cbyos-store__btn:hover,
.cbyos-store__btn:focus {
	background: #1f5280;
	border-color: #1f5280;
	color: #fff;
}

/* A dead button: a preview's "Add to cart", there so the page keeps its shape. */
.cbyos-store__btn[disabled] {
	background: var(--cbyos-line);
	border-color: var(--cbyos-line);
	color: var(--cbyos-muted);
	cursor: not-allowed;
	box-shadow: none;
}

.cbyos-store__btn[disabled]:hover,
.cbyos-store__btn[disabled]:focus {
	background: var(--cbyos-line);
	border-color: var(--cbyos-line);
	color: var(--cbyos-muted);
	transform: none;
}

.cbyos-store__btn--ghost {
	background: #fff;
	color: var(--cbyos-primary);
}

.cbyos-store__btn--ghost:hover,
.cbyos-store__btn--ghost:focus {
	background: var(--cbyos-soft);
	color: var(--cbyos-primary);
	border-color: var(--cbyos-primary);
}

.cbyos-store__btn--pay {
	width: 100%;
	font-size: 17px;
	padding: 15px 26px;
}

@media (min-width: 520px) {
	.cbyos-store__btn--pay {
		width: auto;
	}
}

/* ── Messages ───────────────────────────────────────────────────────────── */

.cbyos-store__alert {
	margin: 0 0 18px;
	padding: 14px 16px;
	border-radius: 12px;
	border-left: 4px solid var(--cbyos-sky);
	background: var(--cbyos-soft);
	font-size: 15px;
	line-height: 1.5;
}

.cbyos-store__alert p {
	margin: 0 0 10px;
}

.cbyos-store__alert p:last-child {
	margin-bottom: 0;
}

.cbyos-store__alert--error {
	border-left-color: var(--cbyos-danger);
	background: #fdf1f0;
}

.cbyos-store__limit {
	margin: 0 0 18px;
	padding: 12px 16px;
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(136, 203, 237, 0.26) 0%, rgba(213, 191, 242, 0.26) 100%);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
}

.cbyos-store__limit p {
	margin: 0;
}

/* One row per performing child, each with their own allowance — the point being
   that a family with two children in the show has two of them. */
.cbyos-store__allowances {
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 4px;
}

.cbyos-store__allowances li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 6px 10px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.6);
}

.cbyos-store__allowance-left {
	white-space: nowrap;
	color: var(--cbyos-primary);
}

.cbyos-store__allowance-left.is-spent {
	color: var(--cbyos-muted);
	font-weight: 400;
}

/* ── The preview gate ───────────────────────────────────────────────────────
   A product that is on a soft launch: its page asks for a password, and once
   past it the page says, across the top, that there is nothing to buy yet. */

.cbyos-store__preview {
	margin: 0 0 20px;
	padding: 12px 16px;
	border-radius: 12px;
	border-left: 4px solid #b58100;
	background: #fff8e6;
	color: #5c4300;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
}

/* The real form, switched off — `inert` already takes it out of the page's
   interaction and accessibility tree; this is what makes it LOOK switched off. */
.cbyos-store__form.is-preview {
	opacity: 0.62;
	filter: saturate(0.6);
}

.cbyos-store__gate {
	max-width: 420px;
	margin: 32px auto 56px;
	padding: 28px 24px;
	border: 1px solid var(--cbyos-line);
	border-radius: var(--cbyos-radius);
	background: var(--cbyos-soft);
	text-align: center;
}

.cbyos-store__gate .cbyos-store__lead {
	margin-bottom: 20px;
}

.cbyos-store__gate-form {
	text-align: left;
}

.cbyos-store__gate .cbyos-store__actions {
	justify-content: center;
}

.cbyos-store__gate .cbyos-store__btn {
	width: 100%;
}

.cbyos-store__gate .cbyos-store__fineprint {
	margin-top: 18px;
	text-align: center;
}

.cbyos-store__empty {
	padding: 48px 24px;
	border: 1px dashed var(--cbyos-line);
	border-radius: var(--cbyos-radius);
	text-align: center;
	color: var(--cbyos-muted);
}

.cbyos-store__empty .cbyos-store__title {
	color: var(--cbyos-ink);
}

/* ── Cart ───────────────────────────────────────────────────────────────── */

.cbyos-store__lines {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--cbyos-line);
}

.cbyos-store__line {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"what remove"
		"qty money";
	gap: 10px 14px;
	align-items: center;
	padding: 16px 0;
	border-bottom: 1px solid var(--cbyos-line);
}

@media (min-width: 640px) {
	.cbyos-store__line {
		grid-template-columns: 1fr 110px 130px auto;
		grid-template-areas: "what qty money remove";
	}
}

.cbyos-store__line.has-error {
	background: #fdf1f0;
}

.cbyos-store__line-what {
	grid-area: what;
	display: grid;
	gap: 3px;
}

.cbyos-store__line-qty {
	grid-area: qty;
}

.cbyos-store__line-money {
	grid-area: money;
	display: grid;
	gap: 2px;
	text-align: right;
}

.cbyos-store__remove {
	grid-area: remove;
	justify-self: end;
	width: 34px;
	height: 34px;
	border: 1px solid var(--cbyos-line);
	border-radius: 999px;
	background: #fff;
	color: var(--cbyos-muted);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.cbyos-store__remove:hover,
.cbyos-store__remove:focus {
	border-color: var(--cbyos-danger);
	color: var(--cbyos-danger);
}

.cbyos-store__line-name {
	font-weight: 700;
}

.cbyos-store__line-detail {
	font-size: 14px;
	color: var(--cbyos-muted);
	line-height: 1.4;
}

.cbyos-store__line-error {
	font-size: 14px;
	font-weight: 600;
	color: var(--cbyos-danger);
	line-height: 1.4;
}

.cbyos-store__line-unit {
	font-size: 13px;
	color: var(--cbyos-muted);
}

.cbyos-store__line-sub {
	font-weight: 700;
}

.cbyos-store__cart-actions {
	margin: 0 0 32px;
}

.cbyos-store__lines--receipt .cbyos-store__line {
	grid-template-columns: 1fr auto;
	grid-template-areas: "what money";
}

/* ── Checkout panel ─────────────────────────────────────────────────────── */

.cbyos-store__checkout {
	display: grid;
	gap: 28px;
	padding: 24px;
	border: 1px solid var(--cbyos-line);
	border-radius: var(--cbyos-radius);
	background: var(--cbyos-soft);
}

@media (min-width: 860px) {
	.cbyos-store__checkout {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}

	.cbyos-store__pay {
		grid-column: 1 / -1;
		padding-top: 20px;
		border-top: 1px solid var(--cbyos-line);
	}
}

/* The discount code, folded away.
   An empty box labelled "Discount code" makes every buyer wonder what code they
   were supposed to have been sent. So it is a quiet line of text until someone
   who genuinely holds a code opens it. See the note in views/cart.php. */
.cbyos-store__coupon-wrap > summary {
	cursor: pointer;
	display: inline-block;
	font-size: 14px;
	color: var(--cbyos-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
	list-style-position: outside;
}

.cbyos-store__coupon-wrap > summary:hover,
.cbyos-store__coupon-wrap > summary:focus-visible {
	color: var(--cbyos-primary);
}

.cbyos-store__coupon-wrap[open] > summary {
	margin-bottom: 10px;
	color: var(--cbyos-ink);
	font-weight: 600;
}

.cbyos-store__coupon {
	display: grid;
	gap: 6px;
	align-content: start;
}

.cbyos-store__coupon-row {
	display: flex;
	gap: 8px;
}

.cbyos-store__coupon-row input {
	flex: 1 1 auto;
	text-transform: uppercase;
}

.cbyos-store__coupon-row button {
	flex: 0 0 auto;
	padding: 11px 18px;
	font-size: 15px;
}

.cbyos-store__coupon-ok {
	font-size: 14px;
	font-weight: 600;
	color: #1d6b4f;
}

.cbyos-store__totals {
	margin: 0;
	display: grid;
	gap: 8px;
}

.cbyos-store__totals > div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
}

.cbyos-store__totals dt,
.cbyos-store__totals dd {
	margin: 0;
}

.cbyos-store__totals dt {
	color: var(--cbyos-muted);
}

.cbyos-store__totals .is-discount dd {
	color: #1d6b4f;
	font-weight: 600;
}

.cbyos-store__totals .is-total {
	padding-top: 8px;
	border-top: 1px solid var(--cbyos-line);
	font-size: 19px;
}

.cbyos-store__totals .is-total dt,
.cbyos-store__totals .is-total dd {
	font-weight: 700;
	color: var(--cbyos-ink);
}

/* ── Receipt ────────────────────────────────────────────────────────────── */

.cbyos-store__receipt {
	max-width: 680px;
}

.cbyos-store__receipt .cbyos-store__totals {
	margin-top: 8px;
}