/* YourCardStory — configurator, checkout and proof
   Colours, spacing and type come from Core Framework variables so this
   inherits the site's design system. Fallbacks are only there in case a
   variable is missing. Width is left entirely to the Bricks container. */

:root,
.ycs {
	--ycs-ink: var(--primary, #1a1a1a);
	--ycs-on-ink: var(--primary-btn-text, #ffffff);
	--ycs-shell: var(--secondary, #f5f1ec);
	--ycs-shell-hover: var(--secondary-hover, #ebe4db);
	--ycs-paper: var(--white, #ffffff);
	--ycs-line: var(--border, #d8d2ca);
	--ycs-field-border: var(--primary, #1a1a1a);
	--ycs-box-border: var(--base-d-1, #d8d2ca);
	--ycs-body: var(--text-body, #5c5c5c);
	--ycs-head: var(--text-header, #1a1a1a);
	--ycs-num-size: 34px;
}

.ycs-admin-warning {
	padding: var(--space-s, 16px);
	border-left: 3px solid #b32d2e;
	background: #fcf0f1;
}

/* ---------- Steps ----------
   Two-column grid keeps the number inside the container instead of
   hanging outside it on a negative offset. */

.ycs-step {
	display: grid;
	grid-template-columns: var(--ycs-num-size) 1fr;
	column-gap: var(--space-s, 20px);
	padding-bottom: var(--space-3xl, 56px);
}

.ycs-step > *:not(.ycs-num) {
	grid-column: 2;
	min-width: 0;
}

.ycs-num {
	grid-column: 1;
	grid-row: 1;
	display: grid;
	place-items: center;
	width: var(--ycs-num-size);
	height: var(--ycs-num-size);
	background: var(--ycs-ink);
	color: var(--ycs-on-ink);
	font-family: var(--header-typeface, inherit);
	font-size: var(--text-s, 15px);
	line-height: 1;
}

.ycs-title {
	margin: 0 0 var(--space-3xs, 6px);
	color: var(--ycs-head);
	font-family: var(--header-typeface, inherit);
	font-size: var(--text-2xl, 26px);
	font-weight: 400;
	line-height: 1.2;
	align-self: center;
}

.ycs-sub {
	margin: 0 0 var(--space-l, 28px);
	color: var(--ycs-body);
	font-size: var(--text-s, 14px);
}

/* ---------- Option grids ---------- */

.ycs-grid {
	display: grid;
	gap: var(--space-xs, 16px);
}

/* auto-fit, so adding or removing a book type reflows instead of breaking
   a fixed four-column rule */
.ycs-grid--4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.ycs-grid--3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.ycs-opt {
	padding: var(--space-m, 22px) var(--space-2xs, 12px);
	border: 0;
	background: var(--ycs-shell);
	color: var(--ycs-head);
	font-family: var(--header-typeface, inherit);
	font-size: var(--text-m, 17px);
	line-height: 1.3;
	cursor: pointer;
	transition: var(--transition, background 0.15s ease);
}

.ycs-opt:hover { background: var(--ycs-shell-hover); }

.ycs-opt.is-active {
	background: var(--ycs-ink);
	color: var(--ycs-on-ink);
}

.ycs-opt:focus-visible,
.ycs-stepper:focus-visible,
.ycs-btn:focus-visible {
	outline: 2px solid var(--ycs-ink);
	outline-offset: 3px;
}

/* ---------- Counter and price ---------- */

.ycs-counter-row {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-m, 24px);
	align-items: center;
}

.ycs-counter {
	display: flex;
	gap: var(--space-3xs, 10px);
}

.ycs-stepper {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--ycs-ink);
	background: var(--ycs-paper);
	color: var(--ycs-ink);
	font-size: 20px;
	line-height: 1;
	text-align: center;
	cursor: pointer;
}

.ycs-stepper--solid {
	background: var(--ycs-ink);
	color: var(--ycs-on-ink);
}

.ycs-stepper[disabled] { opacity: 0.4; cursor: default; }

#ycs-cards {
	width: 100px;
	height: 48px;
	padding: 0;
	border: 0;
	background: var(--ycs-shell);
	color: var(--ycs-head);
	text-align: center;
	font-size: var(--text-s, 16px);
}

.ycs-pricebox {
	padding: var(--space-l, 28px) var(--space-xl, 32px);
	background: var(--ycs-shell);
}

.ycs-price {
	color: var(--ycs-head);
	font-family: var(--header-typeface, inherit);
	font-size: var(--text-3xl, 30px);
	line-height: 1.1;
}

.ycs-price-label {
	margin-top: var(--space-3xs, 6px);
	font-size: var(--text-s, 14px);
}

.ycs-price-note {
	margin-top: var(--space-2xs, 10px);
	color: var(--ycs-body);
	font-size: var(--text-xs, 13px);
}

.ycs-syncing {
	padding-bottom: var(--space-m, 24px);
	color: var(--ycs-body);
	font-size: var(--text-xs, 13px);
}

/* ---------- Conditional note ---------- */

.ycs-note[hidden] { display: none; }

.ycs-note {
	margin: var(--space-m, 24px) 0 0;
	padding: var(--space-s, 18px) var(--space-m, 22px);
	border-left: 2px solid var(--ycs-ink);
	background: var(--ycs-shell);
	font-size: var(--text-s, 14px);
	line-height: 1.5;
}

/* ---------- Uploads ---------- */

.ycs-uploads[hidden] { display: none; }

.ycs-uploads {
	margin-top: var(--space-m, 24px);
	display: grid;
	gap: var(--space-s, 16px);
}

.ycs-upload-drop {
	display: grid;
	justify-items: center;
	gap: var(--space-3xs, 10px);
	padding: var(--space-xl, 40px) var(--space-s, 20px);
	border: 2px dashed var(--ycs-box-border);
	text-align: center;
	transition: var(--transition, border-color 0.15s ease);
}

.ycs-upload-drop.is-over {
	border-color: var(--primary, #1a1a1a);
	background: var(--ycs-shell);
}

.ycs-upload-lead {
	margin: 0;
	font-size: var(--text-s, 15px);
}

.ycs-upload-hint {
	margin: 0;
	color: var(--ycs-body);
	font-size: var(--text-xs, 13px);
}

/* The label is the visible control; the input stays reachable by keyboard. */
#ycs-upload-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

#ycs-upload-input:focus-visible + .ycs-upload-hint { outline: none; }

.ycs-upload-drop label.ycs-btn { cursor: pointer; }

/* The list scrolls inside a fixed height rather than growing with every
   file, so a 200-photo upload does not push the checkout off the screen.
   Newest files land at the bottom and the list follows them there. */
.ycs-upload-list {
	max-height: 15.5rem;
	margin: 0;
	padding: 0 var(--space-3xs, 8px) 0 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	list-style: none;
	border-top: 1px solid var(--ycs-box-border);
	border-bottom: 1px solid var(--ycs-box-border);
}

.ycs-upload-list:empty { display: none; }

.ycs-upload-file {
	display: grid;
	grid-template-columns: 40px 1fr auto auto;
	gap: var(--space-2xs, 12px);
	align-items: center;
	padding: var(--space-4xs, 7px) 0;
	border-bottom: 1px solid var(--ycs-box-border);
	font-size: var(--text-xs, 13px);
	line-height: 1.3;
}

.ycs-upload-file:last-child { border-bottom: 0; }

.ycs-upload-thumb {
	display: block;
	width: 40px;
	height: 40px;
	object-fit: cover;
	background: var(--ycs-shell);
}

.ycs-upload-badge {
	display: grid;
	place-items: center;
	border: 1px solid var(--ycs-box-border);
	color: var(--ycs-body);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.04em;
}

.ycs-upload-file-name {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.ycs-upload-file-name { word-break: break-all; }
.ycs-upload-file-size { color: var(--ycs-body); font-size: var(--text-xs, 13px); }

.ycs-upload-remove {
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid var(--ycs-box-border);
	border-radius: 0;
	background: transparent;
	color: var(--primary, #1a1a1a);
	font-family: inherit;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: var(--transition, background 0.15s ease);
	-webkit-appearance: none;
	appearance: none;
}

/* The glyph sits a hair high in most fonts; nudge it to optical centre. */
.ycs-upload-remove > span { display: block; transform: translateY(-1px); }

.ycs-upload-remove:hover,
.ycs-upload-remove:focus-visible {
	background: var(--primary, #1a1a1a);
	border-color: var(--primary, #1a1a1a);
	color: var(--primary-btn-text, #fff);
}

.ycs-upload-remove:focus-visible { outline: 2px solid var(--primary, #1a1a1a); outline-offset: 2px; }
.ycs-upload-remove[disabled] { opacity: 0.5; cursor: default; }

.ycs-upload-count,
.ycs-upload-message {
	margin: 0;
	color: var(--ycs-body);
	font-size: var(--text-xs, 13px);
}

.ycs-upload-message:empty { display: none; }
.ycs-upload-message.is-error { color: #b32d2e; }

.ycs-uploads.is-busy .ycs-upload-drop { opacity: 0.6; }

/* ---------- Text fields ---------- */

.ycs-fields {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-s, 20px);
}

.ycs-field {
	display: grid;
	gap: var(--space-4xs, 8px);
	font-size: var(--text-s, 14px);
}

.ycs-field input {
	height: 50px;
	padding: 0 var(--space-2xs, 14px);
	border: 1px solid var(--ycs-field-border);
	background: var(--ycs-paper);
	font: inherit;
}

/* What the customer types reads as ink; the hint they have not yet replaced
   stays muted. Without this both inherit the body colour and look the same.
   Covers the plugin's own fields and WooCommerce's checkout fields alike. */
.ycs input[type="text"],
.ycs input[type="email"],
.ycs input[type="tel"],
.ycs input[type="number"],
.ycs input[type="search"],
.ycs input[type="url"],
.ycs textarea,
.ycs select,
.ycs .select2-container .select2-selection__rendered,
.ycs-modal input,
.ycs-modal textarea {
	color: var(--ycs-head);
}

.ycs input::placeholder,
.ycs textarea::placeholder,
.ycs-modal input::placeholder,
.ycs-modal textarea::placeholder {
	color: var(--text-placeholder, var(--ycs-body));
	opacity: 1;
}

/* ---------- Native checkout, restacked to one column ----------
   Scoped to .ycs-checkout, not .woocommerce-checkout: this page is not
   WooCommerce's configured checkout page, so that body class is never added. */

.ycs.ycs-checkout .woocommerce-billing-fields > h3,
.ycs.ycs-checkout .woocommerce-shipping-fields > h3,
.ycs.ycs-checkout .woocommerce-additional-fields > h3 {
	display: none;
}

.ycs.ycs-checkout #customer_details,
.ycs.ycs-checkout #customer_details .col-1,
.ycs.ycs-checkout #customer_details .col-2 {
	width: 100%;
	float: none;
}

.ycs.ycs-checkout .woocommerce-billing-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-s, 20px);
}

.ycs.ycs-checkout .form-row,
.ycs.ycs-checkout .form-row-first,
.ycs.ycs-checkout .form-row-last,
.ycs.ycs-checkout .form-row-wide {
	display: grid;
	gap: var(--space-4xs, 8px);
	margin: 0;
	padding: 0;
	width: 100%;
	float: none;
}

.ycs.ycs-checkout .form-row label {
	font-size: var(--text-s, 14px);
}

.ycs.ycs-checkout .required { text-decoration: none; }

.ycs.ycs-checkout .input-text,
.ycs.ycs-checkout select,
.ycs.ycs-checkout .select2-container .select2-selection {
	height: 50px;
	padding: 0 var(--space-2xs, 14px);
	border: 1px solid var(--ycs-field-border);
	border-radius: 0;
	background: var(--ycs-paper);
	font: inherit;
}

.ycs.ycs-checkout .select2-container .select2-selection__rendered {
	line-height: 48px;
	padding: 0;
}

.ycs.ycs-checkout .select2-container .select2-selection__arrow { height: 48px; }

/* ---------- Shipping method (step 6) ---------- */

.ycs-step--shipping { padding-bottom: var(--space-2xl, 40px); }

.ycs-shipping-methods {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--ycs-box-border);
}

.ycs-shipping-methods li {
	display: flex;
	gap: var(--space-3xs, 10px);
	align-items: baseline;
	padding: var(--space-s, 20px);
	border-bottom: 1px solid var(--ycs-box-border);
	list-style: none;
}

.ycs-shipping-methods li:last-child { border-bottom: 0; }

.ycs-shipping-methods label {
	margin: 0;
	font-size: var(--text-s, 15px);
	cursor: pointer;
}

.ycs-shipping-empty {
	margin: 0;
	padding: var(--space-s, 20px);
	border: 1px solid var(--ycs-box-border);
	font-size: var(--text-s, 14px);
}

/* ---------- Payment ---------- */

/* #order_review and #payment wrap the full-bleed summary. Any border or
   background a theme puts on them shows above and below the band while the
   band paints over the middle, which reads as the payment box sitting behind
   the summary. Strip the chrome; the children carry their own. */

.ycs.ycs-checkout #order_review,
.ycs.ycs-checkout .woocommerce-checkout-payment {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}



.ycs.ycs-checkout .wc_payment_methods {
	margin: 0 0 var(--space-2xl, 48px);
	padding: 0;
	list-style: none;
	border: 1px solid var(--ycs-box-border);
}

.ycs.ycs-checkout .wc_payment_methods li {
	padding: var(--space-s, 20px);
	border-bottom: 1px solid var(--ycs-box-border);
	list-style: none;
}

.ycs.ycs-checkout .wc_payment_methods li:last-child { border-bottom: 0; }

.ycs.ycs-checkout .payment_box {
	margin: var(--space-2xs, 12px) 0 0;
	padding: var(--space-s, 16px);
	background: var(--ycs-shell);
	font-size: var(--text-s, 14px);
}

.ycs.ycs-checkout .payment_box::before { display: none; }

/* ---------- Order summary ---------- */

/* Full-bleed band. The summary breaks out of the Bricks container to the
   viewport edge, with an inner wrapper back at the site's max width.
   If a horizontal scrollbar appears, an ancestor needs overflow-x: clip. */

.ycs.ycs-checkout .ycs-summary,
.ycs-summary {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-block: var(--space-3xl, 64px);
	padding-inline: var(--space-m, 24px);
	background: var(--ycs-shell);
}

.ycs-summary-inner {
	width: 100%;
	max-width: var(--max-screen-width, 1280px);
	margin-inline: auto;
}

.ycs-summary-title {
	margin: 0 0 var(--space-xl, 36px);
	font-family: var(--header-typeface, inherit);
	font-size: var(--text-2xl, 26px);
	font-weight: 400;
}

.ycs-review-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-2xl, 48px);
	align-items: start;
	color: var(--primary, #1a1a1a);
}

/* Left: the book */

.ycs-review-item {
	display: grid;
	grid-template-columns: 130px 1fr;
	gap: var(--space-m, 24px);
	align-items: start;
}

.ycs-review-item + .ycs-review-item { margin-top: var(--space-l, 28px); }

.ycs-review-thumb img { display: block; width: 100%; height: auto; }

.ycs-review-name {
	margin: 0 0 var(--space-3xs, 10px);
	font-family: var(--header-typeface, inherit);
	font-size: var(--text-l, 19px);
	font-weight: 400;
}

.ycs-review-cards {
	margin: 0 0 var(--space-3xs, 10px);
	font-size: var(--text-s, 14px);
}

.ycs-review-meta {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--text-s, 14px);
}

.ycs-review-meta li + li { margin-top: var(--space-4xs, 6px); }

.ycs-review-meta span {
	font-family: var(--header-typeface, inherit);
	font-weight: 500;
}

/* Right: the costs */

.ycs-review-costs,
.ycs-review-total {
	width: 100%;
	border: 0;
	border-collapse: collapse;
}

.ycs-review-costs th,
.ycs-review-costs td,
.ycs-review-total th,
.ycs-review-total td {
	padding: var(--space-4xs, 7px) 0;
	border: 0;
	text-align: left;
	vertical-align: baseline;
	font-size: var(--text-s, 14px);
	font-weight: 400;
}

.ycs-review-costs td,
.ycs-review-total td {
	text-align: right;
	white-space: nowrap;
}

.ycs-review-line th,
.ycs-review-line td {
	font-family: var(--header-typeface, inherit);
	font-size: var(--text-m, 16px);
	font-weight: 500;
}

.ycs-review-note td {
	padding-top: 0;
	color: var(--ycs-body);
	text-align: left;
	font-size: var(--text-s, 14px);
}

.ycs-review-costs .woocommerce-shipping-totals ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ycs-review-total {
	margin-top: var(--space-xl, 32px);
	padding-top: var(--space-xl, 32px);
	border-top: 1px solid var(--ycs-line);
	color: var(--primary, #1a1a1a);
}

.ycs-review-total th,
.ycs-review-total td {
	font-family: var(--header-typeface, inherit);
	font-size: var(--text-xl, 22px);
	font-weight: 500;
}

/* ---------- Terms and place order ---------- */

.ycs.ycs-checkout .place-order {
	display: grid;
	gap: var(--space-s, 20px);
	justify-items: start;
	margin-top: 0;
}

.ycs.ycs-checkout .woocommerce-terms-and-conditions-wrapper { width: 100%; }

.ycs.ycs-checkout .validate-required.woocommerce-validated label,
.ycs.ycs-checkout .woocommerce-form__label-for-checkbox {
	display: flex;
	gap: var(--space-3xs, 10px);
	align-items: flex-start;
	font-size: var(--text-s, 14px);
}


.ycs.ycs-checkout .woocommerce-NoticeGroup,
.ycs.ycs-checkout .woocommerce-error,
.ycs.ycs-checkout .woocommerce-info {
	margin-bottom: var(--space-s, 20px);
	padding: var(--space-s, 16px);
	border-left: 3px solid var(--ycs-ink);
	background: var(--ycs-shell);
	list-style: none;
}

/* ---------- Thank you ---------- */

.ycs-thankyou-title {
	margin: 0 0 var(--space-2xs, 12px);
	font-family: var(--header-typeface, inherit);
	font-size: var(--text-3xl, 32px);
	font-weight: 400;
	line-height: 1.2;
}

.ycs-thankyou-lead {
	margin: 0 0 var(--space-xl, 32px);
	max-width: 46ch;
	font-size: var(--text-m, 17px);
	line-height: 1.5;
}

.ycs-thankyou-lead--failed { color: #b32d2e; }

.ycs-thankyou-pending {
	display: grid;
	gap: var(--space-2xs, 12px);
	margin: 0 0 var(--space-xl, 32px);
	padding: var(--space-m, 24px);
	border-left: 3px solid #996800;
	background: #fcf9e8;
	font-size: var(--text-s, 15px);
}

.ycs-thankyou-pending p { margin: 0; }

.ycs-thankyou-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs, 12px);
}

.ycs-order-overview {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1px;
	margin: 0 0 var(--space-2xl, 40px);
	padding: 0;
	list-style: none;
	background: var(--ycs-box-border);
	border: 1px solid var(--ycs-box-border);
}

.ycs-order-overview li {
	display: grid;
	gap: var(--space-4xs, 6px);
	padding: var(--space-s, 20px);
	background: var(--ycs-paper);
	list-style: none;
}

.ycs-overview-label {
	color: var(--ycs-body);
	font-size: var(--text-xs, 13px);
}

.ycs-overview-value {
	color: var(--ycs-head);
	font-family: var(--header-typeface, inherit);
	font-size: var(--text-m, 17px);
}

/* Order details table, rendered by WooCommerce inside our wrapper */

.ycs-thankyou .woocommerce-order-details__title,
.ycs-thankyou .woocommerce-column__title {
	margin: var(--space-2xl, 40px) 0 var(--space-s, 20px);
	font-family: var(--header-typeface, inherit);
	font-size: var(--text-2xl, 26px);
	font-weight: 400;
}

.ycs-thankyou .woocommerce-table--order-details {
	width: 100%;
	border: 1px solid var(--ycs-box-border);
	border-collapse: collapse;
	font-size: var(--text-s, 15px);
}

.ycs-thankyou .woocommerce-table--order-details th,
.ycs-thankyou .woocommerce-table--order-details td {
	padding: var(--space-2xs, 14px) var(--space-s, 18px);
	border-bottom: 1px solid var(--ycs-box-border);
	text-align: left;
	vertical-align: top;
	font-weight: 400;
}

.ycs-thankyou .woocommerce-table--order-details thead th {
	background: var(--ycs-shell);
	font-family: var(--header-typeface, inherit);
}

.ycs-thankyou .woocommerce-table--order-details td:last-child,
.ycs-thankyou .woocommerce-table--order-details th:last-child {
	text-align: right;
	white-space: nowrap;
}

.ycs-thankyou .woocommerce-table--order-details tfoot th {
	font-family: var(--header-typeface, inherit);
}

.ycs-thankyou .woocommerce-table--order-details tfoot tr:last-child th,
.ycs-thankyou .woocommerce-table--order-details tfoot tr:last-child td {
	border-bottom: 0;
	font-size: var(--text-m, 17px);
}

.ycs-thankyou .wc-item-meta {
	margin: var(--space-4xs, 8px) 0 0;
	padding: 0;
	list-style: none;
	color: var(--ycs-body);
	font-size: var(--text-xs, 13px);
}

.ycs-thankyou .wc-item-meta li { margin: 0 0 2px; list-style: none; }
.ycs-thankyou .wc-item-meta p { display: inline; margin: 0; }
.ycs-thankyou .wc-item-meta strong { font-weight: 500; }

.ycs-thankyou .woocommerce-customer-details { margin-top: var(--space-2xl, 40px); }

.ycs-thankyou address {
	padding: var(--space-s, 20px);
	border: 1px solid var(--ycs-box-border);
	font-style: normal;
	font-size: var(--text-s, 15px);
	line-height: 1.6;
}


.ycs-next-steps {
	margin-top: var(--space-2xl, 40px);
	padding: var(--space-xl, 36px);
	background: var(--ycs-shell);
}

.ycs-next-steps h2 {
	margin: 0 0 var(--space-s, 20px);
	font-family: var(--header-typeface, inherit);
	font-size: var(--text-xl, 22px);
	font-weight: 400;
}

.ycs-postal {
	margin: var(--space-s, 20px) 0 0;
	padding: var(--space-s, 20px);
	background: var(--ycs-paper);
	font-style: normal;
	font-size: var(--text-s, 15px);
	line-height: 1.6;
}

.ycs-next-steps ol {
	margin: 0;
	padding-left: var(--space-m, 22px);
	display: grid;
	gap: var(--space-3xs, 10px);
	font-size: var(--text-s, 15px);
}

/* ---------- Order actions on the thank-you page ----------
   WooCommerce renders Pay and Cancel with its own .button classes. Map them
   onto the site's primary and ghost buttons. */

.ycs-thankyou .woocommerce-button,
.ycs-thankyou .button,
body.ycs-pay #place_order,
body.ycs-pay .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-3xs, 10px) var(--space-s, 20px);
	border: 2px solid var(--primary, #1a1a1a);
	border-radius: 0;
	background: var(--primary, #1a1a1a);
	color: var(--primary-btn-text, #ffffff);
	font-family: inherit;
	font-size: var(--text-s, 15px);
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: var(--transition, background 0.15s ease);
}

.ycs-thankyou .woocommerce-button:hover,
.ycs-thankyou .button:hover,
body.ycs-pay #place_order:hover,
body.ycs-pay .button:hover {
	background: var(--primary-d-4, #000000);
	border-color: var(--primary-d-4, #000000);
	color: var(--primary-btn-text, #ffffff);
}

/* Secondary actions stay ghost. */

.ycs-thankyou .button.cancel,
.ycs-thankyou .woocommerce-button.cancel,
.ycs-thankyou .button.invoice,
.ycs-thankyou .button.view {
	background: transparent;
	color: var(--primary, #1a1a1a);
}

.ycs-thankyou .button.cancel:hover,
.ycs-thankyou .woocommerce-button.cancel:hover,
.ycs-thankyou .button.invoice:hover,
.ycs-thankyou .button.view:hover {
	background: var(--secondary-hover, #ebe4db);
	border-color: var(--primary, #1a1a1a);
	color: var(--primary, #1a1a1a);
}

.ycs-thankyou .woocommerce-table--order-details tfoot td .button,
.ycs-thankyou td .button + .button {
	margin-left: var(--space-3xs, 10px);
}

/* ---------- Pay for order ---------- */

body.ycs-pay .shop_table {
	width: 100%;
	margin-bottom: var(--space-2xl, 40px);
	border: 1px solid var(--ycs-box-border);
	border-collapse: collapse;
	font-size: var(--text-s, 15px);
}

body.ycs-pay .shop_table th,
body.ycs-pay .shop_table td {
	padding: var(--space-2xs, 14px) var(--space-s, 18px);
	border-bottom: 1px solid var(--ycs-box-border);
	text-align: left;
	vertical-align: top;
	font-weight: 400;
}

body.ycs-pay .shop_table thead th {
	background: var(--ycs-shell);
	font-family: var(--header-typeface, inherit);
}

body.ycs-pay .shop_table td:last-child,
body.ycs-pay .shop_table th:last-child {
	text-align: right;
	white-space: nowrap;
}

body.ycs-pay .shop_table tfoot th {
	font-family: var(--header-typeface, inherit);
}

body.ycs-pay .shop_table tfoot tr:last-child th,
body.ycs-pay .shop_table tfoot tr:last-child td {
	border-bottom: 0;
	font-size: var(--text-m, 17px);
}

body.ycs-pay .wc-item-meta {
	margin: var(--space-4xs, 8px) 0 0;
	padding: 0;
	list-style: none;
	color: var(--ycs-body);
	font-size: var(--text-xs, 13px);
}

body.ycs-pay .wc-item-meta li { margin: 0 0 2px; list-style: none; }
body.ycs-pay .wc-item-meta p { display: inline; margin: 0; }
body.ycs-pay .wc-item-meta strong { font-weight: 500; }

/* The theme pads #payment via .woocommerce-checkout #payment, which still
   matches on the order-pay endpoint. The children carry their own spacing. */

body.ycs-pay #payment,
body.ycs-received #payment,
.ycs-thankyou #payment {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

body.ycs-pay .wc_payment_methods {
	margin: 0 0 var(--space-m, 24px);
	padding: 0;
	list-style: none;
	border: 1px solid var(--ycs-box-border);
}

body.ycs-pay .wc_payment_methods li {
	padding: var(--space-s, 20px);
	border-bottom: 1px solid var(--ycs-box-border);
	list-style: none;
}

body.ycs-pay .wc_payment_methods li:last-child { border-bottom: 0; }

body.ycs-pay .payment_box {
	margin: var(--space-2xs, 12px) 0 0;
	padding: var(--space-s, 16px);
	background: var(--ycs-shell);
	font-size: var(--text-s, 14px);
}

body.ycs-pay .payment_box::before { display: none; }

/* ---------- Direct upload progress ---------- */

.ycs-upload-file.is-pending { opacity: 0.85; }

.ycs-upload-bar {
	grid-column: 1 / -1;
	display: block;
	height: 2px;
	margin-top: -2px;
	background: var(--ycs-box-border);
	overflow: hidden;
}

.ycs-upload-bar-fill {
	display: block;
	width: 0;
	height: 100%;
	background: var(--ycs-ink);
	transition: width 0.15s linear;
}

.ycs-upload-file.is-failed {
	cursor: pointer;
	border-color: var(--error, #cd2340);
}

.ycs-upload-file.is-failed .ycs-upload-file-size { color: var(--error, #cd2340); }

/* ---------- Proof flipbook ---------- */

.ycs-flipbook.is-hidden,
.ycs-proof-gallery.is-hidden { display: none; }

/* Toolbar sits above whichever view is showing */

.ycs-flipbook__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-s, 16px);
	margin-bottom: var(--space-m, 24px);
}

.ycs-flipbook .screen-reader-text,
.ycs-lightbox .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.ycs-flipbook__view {
	display: inline-flex;
	border: 1px solid var(--ycs-box-border);
}

.ycs-flipbook__mode {
	padding: var(--space-3xs, 8px) var(--space-s, 18px);
	border: 0;
	background: transparent;
	color: var(--ycs-body);
	font: inherit;
	font-size: var(--text-s, 14px);
	font-weight: 500;
	cursor: pointer;
	transition: var(--transition, background 0.15s ease);
}

.ycs-flipbook__mode + .ycs-flipbook__mode { border-left: 1px solid var(--ycs-box-border); }

.ycs-flipbook__mode:hover { color: var(--ycs-ink); }

.ycs-flipbook__mode.is-active {
	background: var(--ycs-ink);
	color: var(--ycs-on-ink);
}

/* Arrows flank the book, vertically centred on it. Previous is a ghost,
   next is filled: forward is the usual direction of travel. */

/*
 * The arrows sit a fixed gap outside the *visible* book, not the stage
 * edges. --ycs-visible-w is one leaf when the book is closed and two when
 * open (set by JS), so they hug a lone cover and open out for a spread,
 * animating on the same clock as the page turn.
 */
.ycs-flipbook__stage {
	--ycs-arrow-size: 40px;
	--ycs-arrow-gap: var(--space-s, 16px);
	--ycs-visible-w: calc(100% - 2 * (var(--ycs-arrow-size) + var(--ycs-arrow-gap)));
}

.ycs-flipbook__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: inline-grid;
	place-items: center;
	width: var(--ycs-arrow-size);
	height: var(--ycs-arrow-size);
	padding: 0;
	border: 1px solid var(--ycs-ink);
	background: transparent;
	color: var(--ycs-ink);
	cursor: pointer;
	transform: translateY(-50%);
	transition:
		left var(--ycs-flip-time, 700ms) cubic-bezier(0.4, 0, 0.2, 1),
		right var(--ycs-flip-time, 700ms) cubic-bezier(0.4, 0, 0.2, 1),
		background-color 0.2s ease,
		color 0.2s ease,
		border-color 0.2s ease,
		opacity 0.2s ease;
}

.ycs-flipbook__arrow--prev {
	left: calc(50% - var(--ycs-visible-w) / 2 - var(--ycs-arrow-gap) - var(--ycs-arrow-size));
}

.ycs-flipbook__arrow--next {
	right: calc(50% - var(--ycs-visible-w) / 2 - var(--ycs-arrow-gap) - var(--ycs-arrow-size));
	background: var(--ycs-ink);
	color: var(--ycs-on-ink);
}

.ycs-flipbook__arrow--prev:not([disabled]):hover { background: var(--ycs-shell); }
.ycs-flipbook__arrow--next:not([disabled]):hover { background: var(--primary-d-4, #000); }

/* Disabled is unmistakable: hollow, faint, no pointer. The filled "next"
   arrow drops its fill so there is no doubt it has nowhere to go. */
.ycs-flipbook__arrow[disabled] {
	background: transparent;
	color: var(--ycs-ink);
	border-color: var(--ycs-box-border);
	opacity: 0.4;
	cursor: default;
	pointer-events: none;
}

.ycs-flipbook__mode:focus-visible,
.ycs-flipbook__arrow:focus-visible,
.ycs-flipbook__book:focus-visible {
	outline: 2px solid var(--ycs-ink);
	outline-offset: 3px;
}

/* Stage: the page background shows through; the book sits on it with a
   soft shadow, arrows in the gutters either side. */

.ycs-flipbook__stage {
	position: relative;
	display: flex;
	justify-content: center;
	padding: var(--space-m, 24px) calc(var(--ycs-arrow-size) + var(--ycs-arrow-gap) + var(--space-2xs, 12px));
}

.ycs-flipbook__book {
	position: relative;
	max-width: 100%;
	min-height: 280px;
	transition: transform var(--ycs-flip-time, 700ms) cubic-bezier(0.4, 0, 0.2, 1);
}

/* Closed book: a lone cover or back cover is centred on the spine line by
   shifting the two-leaf layout half a leaf. See centreSingleLeaf() in JS. */
.ycs-flipbook__book.is-at-cover { transform: translateX(-25%); }
.ycs-flipbook__book.is-at-back  { transform: translateX(25%); }

/* Until StPageFlip has taken the pages, they must not render as a stack of
   full-width images. It moves them into .stf__block; anything still a direct
   child of the book has not been claimed yet. */
.ycs-flipbook__book > .ycs-flipbook__page { display: none; }

.ycs-flipbook__page {
	position: relative;
	background: var(--ycs-paper);
	overflow: hidden;
}

.ycs-flipbook__page img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	user-select: none;
	-webkit-user-drag: none;
}

/* Halves of a spread: the image is twice the leaf's width and positioned
   so each leaf shows its own half. Side by side they reassemble the file. */

.ycs-flipbook__page--left img,
.ycs-flipbook__page--right img {
	position: absolute;
	top: 0;
	width: 200%;
	max-width: none;
}

.ycs-flipbook__page--left img  { left: 0; }
.ycs-flipbook__page--right img { right: 0; }

.ycs-flipbook__page {
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Hard covers get a little extra presence */
.ycs-flipbook__page[data-density="hard"] {
	background: var(--ycs-paper);
	box-shadow: inset 0 0 0 1px var(--ycs-box-border);
}

.ycs-flipbook__hint {
	margin: var(--space-2xs, 12px) 0 0;
	color: var(--ycs-body);
	font-size: var(--text-xs, 13px);
	text-align: center;
}

/* StPageFlip's own wrapper */
.ycs-flipbook .stf__wrapper { margin: 0 auto; }
.ycs-flipbook .stf__block { cursor: grab; }
.ycs-flipbook .stf__block:active { cursor: grabbing; }

@media (max-width: 767px) {
	.ycs-flipbook__toolbar { justify-content: center; }
	.ycs-flipbook__stage {
		--ycs-arrow-size: 36px;
		--ycs-arrow-gap: var(--space-3xs, 8px);
		padding: var(--space-s, 16px) calc(var(--ycs-arrow-size) + var(--ycs-arrow-gap));
	}
	.ycs-flipbook__hint { display: none; }
}

/* Narrow phones: no room in the gutters, so the arrows sit in a row beneath
   the book instead of flanking it, and the book takes the full width. */
@media (max-width: 479px) {
	.ycs-flipbook__stage {
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--space-s, 16px) var(--space-m, 24px);
		padding: var(--space-s, 16px) 0;
	}

	.ycs-flipbook__book {
		order: 1;
		flex: 0 0 100%;
	}

	.ycs-flipbook__arrow {
		position: static;
		order: 2;
		width: 44px;
		height: 44px;
		transform: none;
		transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
	}

	.ycs-flipbook__arrow--prev,
	.ycs-flipbook__arrow--next {
		left: auto;
		right: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ycs-flipbook__mode,
	.ycs-flipbook__arrow,
	.ycs-flipbook__book,
	.ycs-lightbox__frame img,
	.ycs-lightbox__thumb { transition: none; }

	.ycs-lightbox[open],
	.ycs-lightbox[open]::backdrop,
	.ycs-lightbox.is-closing,
	.ycs-lightbox.is-closing::backdrop { animation: none; }
}

/* ---------- Lightbox ---------- */

.ycs-lightbox {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ycs-on-ink);
}

.ycs-lightbox::backdrop { background: rgba(20, 18, 16, 0.92); }

.ycs-lightbox[open] {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-rows: 1fr auto;
	align-items: center;
	gap: var(--space-s, 16px);
	padding: var(--space-l, 32px);
	animation: ycs-lb-in 280ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.ycs-lightbox[open]::backdrop {
	animation: ycs-lb-backdrop-in 280ms ease both;
}

.ycs-lightbox.is-closing {
	animation: ycs-lb-out 200ms cubic-bezier(0.4, 0, 1, 1) both;
}

.ycs-lightbox.is-closing::backdrop {
	animation: ycs-lb-backdrop-out 200ms ease both;
}

@keyframes ycs-lb-in {
	from { opacity: 0; transform: translateY(12px) scale(0.97); }
	to   { opacity: 1; transform: none; }
}

@keyframes ycs-lb-out {
	from { opacity: 1; transform: none; }
	to   { opacity: 0; transform: translateY(8px) scale(0.98); }
}

@keyframes ycs-lb-backdrop-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes ycs-lb-backdrop-out {
	from { opacity: 1; }
	to   { opacity: 0; }
}

.ycs-lightbox__frame {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 0;
	height: 100%;
}

/*
 * Two stacked image layers, both absolutely positioned at all times so the
 * frame never reflows. Only opacity and transform change during a swap,
 * which the compositor handles without touching layout.
 */
.ycs-lightbox__frame {
	position: relative;
	align-self: stretch;
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
}

.ycs-lightbox__frame img {
	position: absolute;
	inset: 0;
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	margin: auto;
	object-fit: contain;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
	opacity: 1;
	transform: translateX(0);
	will-change: opacity, transform;
	transition:
		opacity 0.36s cubic-bezier(0.25, 0.1, 0.25, 1),
		transform 0.36s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.ycs-lightbox__frame img.is-under {
	opacity: 0;
	pointer-events: none;
}

/* Incoming layer waits offset toward where it is coming from. */
.ycs-lightbox__frame.dir-next img.is-under { transform: translateX(24px); }
.ycs-lightbox__frame.dir-prev img.is-under { transform: translateX(-24px); }

/* Outgoing layer leaves the opposite way. */
.ycs-lightbox__frame.dir-next img.is-leaving { opacity: 0; transform: translateX(-24px); }
.ycs-lightbox__frame.dir-prev img.is-leaving { opacity: 0; transform: translateX(24px); }

/* Thumbnail strip along the bottom */

.ycs-lightbox__thumbs {
	grid-column: 1 / -1;
	grid-row: 2;
	display: flex;
	justify-content: center;
	gap: var(--space-3xs, 8px);
	max-width: 100%;
	margin: 0;
	padding: var(--space-4xs, 6px) var(--space-3xs, 8px);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	list-style: none;
}

.ycs-lightbox__thumbs::-webkit-scrollbar { display: none; }

.ycs-lightbox__thumb {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	padding: 0;
	border: 2px solid transparent;
	background: rgba(255, 255, 255, 0.06);
	cursor: pointer;
	opacity: 0.55;
	transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.ycs-lightbox__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	box-shadow: none;
	transition: none;
}

.ycs-lightbox__thumb:hover { opacity: 0.85; }

.ycs-lightbox__thumb[aria-current="true"] {
	opacity: 1;
	border-color: var(--ycs-on-ink);
}

.ycs-lightbox__thumb:focus-visible {
	outline: 2px solid var(--ycs-on-ink);
	outline-offset: 2px;
	opacity: 1;
}

/* Wide spreads read better as a wide thumbnail. */
.ycs-lightbox__thumb--wide { width: 112px; }

.ycs-lightbox__arrow,
.ycs-lightbox__close {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.3);
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: var(--transition, background 0.15s ease);
}

.ycs-lightbox__arrow:hover,
.ycs-lightbox__close:hover { background: rgba(255, 255, 255, 0.1); }

.ycs-lightbox__arrow[disabled] { opacity: 0.25; cursor: default; }

.ycs-lightbox__arrow--prev { grid-column: 1; grid-row: 1; }
.ycs-lightbox__arrow--next { grid-column: 3; grid-row: 1; }

.ycs-lightbox__close {
	position: absolute;
	top: var(--space-s, 16px);
	right: var(--space-s, 16px);
	font-size: 28px;
	line-height: 1;
}

.ycs-lightbox__arrow:focus-visible,
.ycs-lightbox__close:focus-visible {
	outline: 2px solid var(--ycs-on-ink);
	outline-offset: 3px;
}

@media (max-width: 767px) {
	.ycs-lightbox[open] {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr auto auto;
		padding: var(--space-s, 16px);
	}
	.ycs-lightbox__frame { grid-column: 1 / -1; grid-row: 1; }
	.ycs-lightbox__arrow--prev { grid-column: 1; grid-row: 2; justify-self: start; }
	.ycs-lightbox__arrow--next { grid-column: 2; grid-row: 2; justify-self: end; }
	.ycs-lightbox__thumbs { grid-row: 3; justify-content: flex-start; }
	.ycs-lightbox__thumb { width: 52px; height: 52px; }
	.ycs-lightbox__thumb--wide { width: 92px; }
}

/* ---------- Proof page ---------- */

.ycs-proof-gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-m, 24px);
	margin-bottom: var(--space-2xl, 48px);
}

.ycs-proof-page { margin: 0; }
.ycs-proof-page img { display: block; width: 100%; height: auto; }

.ycs-proof-page figcaption {
	margin-top: var(--space-4xs, 8px);
	color: var(--ycs-body);
	font-size: var(--text-xs, 13px);
}

.ycs-proof-summary,
.ycs-proof-state {
	margin-bottom: var(--space-m, 24px);
	padding: var(--space-xl, 40px);
	background: var(--ycs-shell);
}

.ycs-proof-summary h3,
.ycs-proof-state h3 {
	margin: 0 0 var(--space-s, 20px);
	font-family: var(--header-typeface, inherit);
	font-size: var(--text-xl, 22px);
	font-weight: 400;
}

.ycs-proof-summary dl {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: var(--space-4xs, 8px) var(--space-m, 24px);
	margin: 0;
}

.ycs-proof-summary dt { color: var(--ycs-body); font-size: var(--text-s, 14px); }
.ycs-proof-summary dd { margin: 0; font-size: var(--text-s, 14px); }

.ycs-proof-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs, 12px);
}

/* ---------- Buttons ----------
   One system, matching the site's primary-button global class. */

.ycs-btn,
.ycs.ycs-checkout #place_order {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-3xs, 10px) var(--space-s, 20px);
	border: 2px solid var(--primary, #1a1a1a);
	border-radius: 0;
	background: var(--primary, #1a1a1a);
	color: var(--primary-btn-text, #ffffff);
	font-family: inherit;
	font-size: var(--text-s, 15px);
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: var(--transition, background 0.15s ease);
}

.ycs-btn:hover,
.ycs.ycs-checkout #place_order:hover {
	background: var(--primary-d-4, #000000);
	border-color: var(--primary-d-4, #000000);
}

/* Secondary: the site's ghost-button class. Border stays var(--primary) on
   hover — only the background shifts. */

.ycs-btn--ghost {
	width: auto;
	background: transparent;
	color: var(--primary, #1a1a1a);
}

.ycs-btn--ghost:hover {
	background: var(--secondary-hover, #ebe4db);
	border-color: var(--primary, #1a1a1a);
	color: var(--primary, #1a1a1a);
}

.ycs-btn[disabled],
.ycs.ycs-checkout #place_order[disabled] {
	opacity: 0.55;
	cursor: default;
}

/* ---------- Modals ---------- */

.ycs-modal {
	width: min(540px, calc(100vw - 2rem));
	max-width: none;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--ycs-paper);
	color: var(--ycs-head);
}

.ycs-modal::backdrop { background: rgba(0, 0, 0, 0.45); }

.ycs-modal-inner {
	display: grid;
	gap: var(--space-s, 16px);
	padding: var(--space-m, 24px);
}

.ycs-modal h3 {
	margin: 0;
	font-family: var(--header-typeface, inherit);
	font-size: var(--text-xl, 22px);
	font-weight: 400;
}

.ycs-modal p {
	margin: 0;
	font-size: var(--text-s, 14px);
}

.ycs-modal textarea {
	width: 100%;
	padding: var(--space-2xs, 14px);
	border: 1px solid var(--ycs-field-border);
	background: var(--ycs-paper);
	font: inherit;
	resize: vertical;
}

.ycs-modal-upload {
	display: grid;
	justify-items: start;
	gap: var(--space-3xs, 8px);
	padding-top: var(--space-3xs, 8px);
	border-top: 1px solid var(--ycs-box-border);
}

.ycs-modal-upload label.ycs-btn { cursor: pointer; }

#ycs-proof-file {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.ycs-modal-hint {
	margin: 0;
	color: var(--ycs-body);
	font-size: var(--text-xs, 13px);
}

.ycs-modal-files {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
	font-size: var(--text-xs, 13px);
}

.ycs-modal-files li {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--space-2xs, 12px);
	align-items: center;
	padding: var(--space-4xs, 6px) 0;
	border-bottom: 1px solid var(--ycs-box-border);
	color: var(--ycs-body);
	word-break: break-all;
}

.ycs-modal-file-remove {
	width: 26px;
	height: 26px;
	padding: 0;
	border: 1px solid var(--ycs-box-border);
	background: transparent;
	color: var(--primary, #1a1a1a);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}

.ycs-modal-file-remove:hover { background: var(--ycs-shell); }
.ycs-modal-file-remove[disabled] { opacity: 0.5; cursor: default; }

.ycs-modal-files li:last-child { border-bottom: 0; }
.ycs-modal-files li.is-done { color: var(--ycs-head); }

.ycs-modal-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2xs, 12px);
	margin-top: var(--space-3xs, 8px);
}

.ycs-modal-error { color: #b32d2e; }
.ycs-modal-error:empty { display: none; }

/* Only reachable if <dialog> is unsupported. */
.ycs-modal.is-fallback {
	margin-top: var(--space-m, 24px);
	border: 1px solid var(--ycs-box-border);
}

.ycs-proof-feedback {
	margin: var(--space-xs, 16px) 0 0;
	padding-left: var(--space-xs, 16px);
	border-left: 2px solid var(--ycs-line);
	color: var(--ycs-body);
}

.ycs-proof-message { margin-top: var(--space-xs, 16px); font-size: var(--text-s, 14px); }
.ycs-proof-message:empty { display: none; }
.ycs-proof-message.is-error { color: #b32d2e; }

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
	.ycs-grid--4,
	.ycs-grid--3,
	.ycs-fields,
	.ycs-proof-gallery,
	.ycs.ycs-checkout .woocommerce-billing-fields__field-wrapper {
		grid-template-columns: 1fr;
	}

	.ycs-counter-row,
	.ycs-review-grid { grid-template-columns: 1fr; }

	/* Summary, stacked. Dividers separate the book, the line items, the
	   running totals and the final total, as in the mobile design. */

	.ycs-review-item {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-s, 20px);
	}

	.ycs-review-items {
		margin-bottom: var(--space-l, 28px);
		padding-bottom: var(--space-l, 28px);
		border-bottom: 1px solid var(--ycs-line);
	}

	.ycs-review-grid { gap: 0; }

	.ycs-review-line.fee th,
	.ycs-review-line.fee td {
		padding-bottom: var(--space-m, 24px);
	}

	.ycs-review-subtotal th,
	.ycs-review-subtotal td {
		padding-top: var(--space-m, 24px);
		border-top: 1px solid var(--ycs-line);
	}

	.ycs.ycs-checkout .place-order { justify-items: stretch; }

	.ycs.ycs-checkout #place_order,
	.ycs-modal-actions .ycs-btn {
		width: 100%;
	}

	.ycs-modal-actions { flex-direction: column; }

	/* Approve and Request stack, each spanning the full container width. */
	.ycs-proof-actions,
	.ycs-proof-buttons { width: 100%; }

	.ycs-proof-buttons { flex-direction: column; }

	.ycs-proof-buttons .ycs-btn {
		width: 100%;
		flex: 0 0 auto;
	}

	.ycs.ycs-checkout .ycs-summary,
	.ycs-summary { padding-block: var(--space-2xl, 40px); }

	.ycs-step { grid-template-columns: 1fr; }
	.ycs-step > *:not(.ycs-num) { grid-column: 1; }
	.ycs-num { margin-bottom: var(--space-2xs, 12px); }

	.ycs-proof-summary,
	.ycs-proof-state {
		padding: var(--space-l, 28px) var(--space-s, 20px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ycs-opt,
	.ycs-btn { transition: none; }
}