/**
 * Voucher, confirmation, product detail sections, 404.
 * Logical properties throughout.
 */

/* ---- Confirmation ------------------------------------------------------- */

/* Pending payment uses WooCommerce's receipt endpoint, not the checkout form.
   Keep its gateway handoff on the same calm, constrained rail as confirmation. */
.jd-order-pay__handoff,
.jd-order-pay__details {
	background-color: var(--jd-surface);
	border: var(--jd-border);
	border-radius: var(--jd-radius-card);
}

.jd-order-pay__handoff {
	margin-block-end: var(--jd-space-9);
	padding: var(--jd-space-12);
	text-align: center;
}

.jd-order-pay__handoff:empty { display: none; }

.jd-order-pay__handoff > :first-child { margin-block-start: 0; }

.jd-order-pay__handoff > :last-child { margin-block-end: 0; }

.jd-order-pay__details {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--jd-space-8);
	list-style: none;
	margin: 0;
	padding: var(--jd-space-9);
}

.jd-order-pay__details > li {
	border-inline-start: var(--jd-border);
	color: var(--jd-text-secondary);
	font-size: var(--jd-fs-2xs);
	line-height: var(--jd-lh-body);
	margin: 0;
	padding-inline-start: var(--jd-space-8);
}

.jd-order-pay__details > li:first-child {
	border-inline-start: 0;
	padding-inline-start: 0;
}

.jd-order-pay__details strong {
	display: block;
	color: var(--jd-navy);
	font-size: var(--jd-fs-base);
	font-weight: 600;
	margin-block-start: var(--jd-space-2);
}

.woocommerce-order-pay .woocommerce-notices-wrapper {
	max-inline-size: 920px;
	margin-block: var(--jd-space-9) 0;
	margin-inline: auto;
	padding-inline: var(--jd-gutter);
}

.woocommerce-order-pay .woocommerce-notices-wrapper > div.woocommerce-message,
.woocommerce-order-pay .woocommerce-notices-wrapper > div.woocommerce-info,
.woocommerce-order-pay .woocommerce-notices-wrapper > ul.woocommerce-error {
	border-radius: var(--jd-radius-card);
	margin: 0;
	padding: var(--jd-space-7) var(--jd-space-9);
}

/* `form-pay.php` is a separate WooCommerce form, so it cannot inherit checkout's
   relocated payment card. Keep its core markup and give the pending-order payment
   step the same calm reading rail. */
.woocommerce-order-pay form#order_review {
	max-inline-size: 920px;
	margin: var(--jd-space-9) auto 72px;
	padding-inline: var(--jd-gutter);
}

.woocommerce-order-pay form#order_review > .shop_table,
.woocommerce-order-pay form#order_review > #payment {
	background-color: var(--jd-surface);
	border: var(--jd-border);
	border-radius: var(--jd-radius-card);
	box-shadow: var(--jd-shadow-card);
	padding: var(--jd-space-9);
}

.woocommerce-order-pay form#order_review > .shop_table {
	inline-size: 100%;
	margin: 0 0 var(--jd-space-8);
	border-collapse: separate;
	border-spacing: 0;
	text-align: start;
}

.woocommerce-order-pay form#order_review > .shop_table th,
.woocommerce-order-pay form#order_review > .shop_table td {
	padding: var(--jd-space-4) 0;
	border-block-start: var(--jd-border);
	vertical-align: baseline;
}

.woocommerce-order-pay form#order_review > #payment {
	background-color: var(--jd-surface);
}

.woocommerce-order-pay form#order_review .wc_payment_methods {
	margin: 0;
	padding: 0;
	border-block-end: 0;
}

.woocommerce-order-pay form#order_review #place_order {
	float: none;
	inline-size: 100%;
	min-block-size: 52px;
	margin: var(--jd-space-7) 0 0;
	background-color: var(--jd-navy);
	border-color: transparent;
	border-radius: var(--jd-radius-tag);
	color: var(--jd-on-navy);
}

@media (max-width: 768px) {
	.jd-order-pay__details { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.jd-order-pay__details > li:nth-child(odd) {
		border-inline-start: 0;
		padding-inline-start: 0;
	}
}

.jd-thankyou {
	max-inline-size: 920px;
	padding-block: 38px 72px;
}

.jd-thankyou__head {
	text-align: center;
	margin-block-end: var(--jd-space-4);
}

.jd-conf__mark {
	inline-size: 60px;
	block-size: 60px;
	border-radius: 50%;
	background-color: var(--jd-emerald);
	color: var(--jd-on-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-block: 0 var(--jd-space-8);
	margin-inline: auto;
}

.jd-thankyou__title {
	font-size: var(--jd-fs-display);
	margin-block: 0 var(--jd-space-6);
}

.jd-thankyou__meta {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: var(--jd-space-7);
	font-size: 12px;
	color: var(--jd-text-secondary);
	padding-block: 0;
	border-block: 0;
	margin-block: 0 var(--jd-space-4);
}

.jd-conf__ordernum > span {
	font-weight: 600;
	color: var(--jd-navy);
	direction: ltr;
	unicode-bidi: isolate;
}

.jd-conf__dot { color: var(--jd-hairline); }

.jd-conf__sent {
	font-size: 12.5px;
	color: var(--jd-text-secondary);
	margin-block: 0;
}

.jd-conf__sent .jd-mono {
	font-size: 11.5px;
	color: var(--jd-navy);
}

.jd-thankyou .jd-section__title {
	font-size: 23px;
	line-height: normal;
	margin: 0;
	flex-shrink: 0;
}

.jd-conf__sechead {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--jd-space-9);
	margin-block: 36px var(--jd-space-9);
}

.jd-vouchers .jd-conf__sechead { margin-block-start: 34px; }

.jd-conf__rule {
	flex: 1 1 auto;
	block-size: 1px;
	background-color: var(--jd-hairline);
}

.jd-conf__count {
	font-size: 12px;
	color: var(--jd-text-secondary);
}

/* The same voucher component also appears inside the single-order account view. */
.jd-vouchers,
.jd-shipments {
	display: flex;
	flex-direction: column;
	gap: var(--jd-space-7);
}

.jd-vouchers { margin-block: 0; }

.jd-voucher {
	background-color: var(--jd-surface);
	padding: 5px;
	border: var(--jd-border);
	border-radius: var(--jd-radius-card);
	box-shadow: var(--jd-shadow-card);
	margin-block-start: 0;
}

.jd-voucher__frame {
	border: var(--jd-border);
	border-radius: var(--jd-radius-tag);
	padding-block: var(--jd-space-8) var(--jd-space-7);
	padding-inline: var(--jd-space-10);
}

.jd-voucher__head,
.jd-invoice__head {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--jd-space-6);
}

.jd-voucher__kicker {
	font-size: 10px;
	letter-spacing: var(--jd-track-wide);
	color: var(--jd-text-secondary);
	margin-block: 0;
}

.jd-voucher__no {
	font-size: 10.5px;
	color: var(--jd-text-muted);
}

.jd-voucher__rule,
.jd-invoice__rule {
	block-size: 1px;
	background-color: var(--jd-brass);
	opacity: .55;
}

.jd-voucher__rule { margin-block: var(--jd-space-5) var(--jd-space-6); }

.jd-voucher__book {
	font-family: var(--jd-font-latin);
	font-size: 17px;
	line-height: 1.4;
	font-weight: 400;
	color: var(--jd-ink);
	margin-block: 0;
}

.jd-voucher__meta {
	font-size: 10px;
	letter-spacing: var(--jd-track-biblio);
	color: var(--jd-text-secondary);
	margin-block: 3px var(--jd-space-7);
}

.jd-voucher__instant { color: var(--jd-emerald); }

.jd-voucher__coderow {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--jd-space-5);
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	justify-content: flex-start;
}

.jd-voucher__code {
	flex: 1 1 auto;
	min-inline-size: 200px;
	max-inline-size: 100%;
	padding-block: var(--jd-space-5);
	padding-inline: var(--jd-space-7);
	background-color: var(--jd-paper);
	border: 1px dashed var(--jd-hairline);
	border-radius: var(--jd-radius-tag);
	text-align: center;
	font-size: 15px;
	letter-spacing: .28em;
	color: var(--jd-ink);
	user-select: all;
}

.jd-voucher__code[hidden] { display: none; }

.jd-voucher__btn {
	font-size: 12.5px;
	font-weight: 600;
	block-size: 38px;
	min-block-size: 38px;
	padding-inline: var(--jd-space-8);
}

.jd-voucher__provider {
	border-block-start: var(--jd-border);
	color: var(--jd-text-secondary);
	font-size: var(--jd-fs-xs);
	line-height: var(--jd-lh-body);
	margin-block: var(--jd-space-7) 0;
	padding-block-start: var(--jd-space-7);
	text-align: start;
}

.jd-voucher__provider > :first-child { margin-block-start: 0; }

.jd-voucher__provider > :last-child { margin-block-end: 0; }

.jd-voucher__url {
	font-size: 11px;
	color: var(--jd-text-secondary);
	margin-block: var(--jd-space-6) 0;
}

.jd-voucher__url a { color: inherit; }

.jd-voucher__steps > summary {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--jd-space-6);
	padding-block-start: 11px;
	border-block-start: var(--jd-border);
	margin-block-start: var(--jd-space-7);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--jd-navy);
	list-style: none;
	cursor: pointer;
}

.jd-voucher__steps > summary::-webkit-details-marker { display: none; }

.jd-voucher__plus {
	font-family: var(--jd-font-mono);
	font-size: 13px;
	font-weight: 400;
	color: var(--jd-text-muted);
}

.jd-voucher__stepsbody {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--jd-space-10);
	list-style: none;
	padding: 0;
	margin-block: var(--jd-space-6) 0;
}

.jd-voucher__stepsbody > li > span {
	font-family: var(--jd-font-display);
	font-size: 28px;
	line-height: 1.2;
	color: var(--jd-navy);
}

.jd-voucher__stepsbody p {
	font-size: 11.5px;
	line-height: 1.8;
	color: var(--jd-text-secondary);
	margin-block: 3px 0;
}

.jd-voucher__note {
	font-style: normal;
	font-size: 10.5px;
	line-height: 1.8;
	color: var(--jd-text-muted);
	padding-block-start: 9px;
	border-block-start: var(--jd-border);
	margin-block: var(--jd-space-6) 0;
}

.jd-voucher.is-revealed .jd-voucher__code {
	color: var(--jd-emerald);
	border-color: rgb(27 94 67 / .5);
}

.jd-voucher__btn--copy.is-copied { background-color: var(--jd-emerald); }

/* ---- Confirmation: shipment panel ------------------------------------- */

.jd-shipment {
	background-color: var(--jd-surface);
	border: var(--jd-border);
	border-radius: var(--jd-radius-card);
	padding-block: var(--jd-space-8);
	padding-inline: var(--jd-space-10);
	box-shadow: var(--jd-shadow-card);
	margin-block: 0;
}

.jd-shipment__item {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--jd-space-7);
	margin-block-end: var(--jd-space-7);
}

.jd-shipment__thumb {
	inline-size: 48px;
	block-size: 62px;
	flex-shrink: 0;
	padding: var(--jd-space-2);
	background-color: var(--jd-paper);
	border: var(--jd-border);
	border-radius: var(--jd-radius-tag);
	display: flex;
	align-items: center;
	justify-content: center;
}

.jd-shipment__thumb img {
	inline-size: 38px;
	block-size: 52px;
	object-fit: cover;
}

.jd-shipment__thumbfill,
.jd-conf__crossthumbfill {
	inline-size: 100%;
	block-size: 100%;
	background-color: var(--jd-navy);
	border-radius: 2px;
}

.jd-shipment__text {
	flex: 1;
	min-inline-size: 200px;
}

.jd-shipment__title {
	font-family: var(--jd-font-latin);
	font-size: 15.5px;
	line-height: 1.4;
	font-weight: 400;
	color: var(--jd-ink);
	margin-block: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.jd-shipment__biblio {
	font-size: 10px;
	letter-spacing: var(--jd-track-biblio);
	color: var(--jd-text-secondary);
	margin-block: 3px 0;
}

.jd-shipment__chip {
	font-size: 11px;
	font-weight: 500;
	color: var(--jd-text-secondary);
	padding-block: 3px;
	padding-inline: var(--jd-space-5);
	border: var(--jd-border);
	border-radius: var(--jd-radius-tag);
	white-space: nowrap;
}

.jd-shipment__track {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--jd-space-4);
	list-style: none;
	padding: 0;
	margin: 0;
}

.jd-shipment__step {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--jd-space-3);
	font-size: 11.5px;
}

.jd-shipment__dot {
	inline-size: 20px;
	block-size: 20px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.jd-shipment__step--done {
	color: var(--jd-emerald);
	font-weight: 500;
}

.jd-shipment__step--done .jd-shipment__dot {
	background-color: var(--jd-emerald);
	color: var(--jd-on-navy);
	font-size: 10px;
}

.jd-shipment__step--current {
	color: var(--jd-navy);
	font-weight: 600;
}

.jd-shipment__step--current .jd-shipment__dot { background-color: var(--jd-navy); }

.jd-shipment__step--todo {
	color: var(--jd-text-muted);
	font-weight: 400;
}

.jd-shipment__step--todo .jd-shipment__dot {
	background: none;
	border: var(--jd-border);
}

.jd-shipment__conn {
	flex: 1 1 auto;
	max-inline-size: 60px;
	block-size: 1px;
	background-color: var(--jd-hairline);
}

.jd-shipment__conn.is-done { background-color: var(--jd-emerald); }

.jd-shipment__foot {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--jd-space-7);
	padding-block-start: var(--jd-space-6);
	border-block-start: var(--jd-border);
	margin-block-start: var(--jd-space-7);
}

.jd-shipment__awb {
	font-size: 12px;
	color: var(--jd-text-secondary);
	margin-block: 0;
}

.jd-shipment__awb .jd-mono {
	font-size: 12px;
	color: var(--jd-ink);
}

.jd-shipment__eta {
	font-size: 11.5px;
	color: var(--jd-text-muted);
	margin-block: 0;
}

.jd-shipment__foot .jd-btn {
	font-size: 12px;
	font-weight: 600;
	block-size: 36px;
	min-block-size: 36px;
	padding-inline: var(--jd-space-8);
	margin-inline-start: auto;
}

/* ---- Confirmation: simplified tax invoice ----------------------------- */

.jd-invoice {
	background-color: var(--jd-surface);
	padding: 5px;
	border: var(--jd-border);
	border-radius: var(--jd-radius-card);
	box-shadow: var(--jd-shadow-card);
	margin-block: 0;
}

.jd-invoice__frame {
	padding-block: var(--jd-space-8);
	padding-inline: var(--jd-space-10);
	border: var(--jd-border);
	border-radius: var(--jd-radius-tag);
}

.jd-invoice__issuer {
	font-size: 10px;
	letter-spacing: var(--jd-track-wide);
	color: var(--jd-text-secondary);
	margin-block: 0;
}

.jd-invoice__zatca {
	font-size: 10px;
	color: var(--jd-emerald);
	margin-block: 0;
}

.jd-invoice__rule { margin-block: var(--jd-space-5) var(--jd-space-7); }

.jd-invoice__meta {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--jd-space-2) var(--jd-space-9);
	border-block: 0;
	padding-block: 0;
	margin-block: 0 var(--jd-space-7);
	font-size: 11.5px;
	color: var(--jd-text-secondary);
}

.jd-invoice__meta > div { letter-spacing: normal; }
.jd-invoice__meta span { color: var(--jd-ink); }

.jd-invoice__tablewrap {
	border: var(--jd-border);
	border-radius: var(--jd-radius-btn);
	overflow-x: auto;
	overflow-y: hidden;
}

.jd-invoice__table {
	inline-size: 100%;
	min-inline-size: 0;
	border-collapse: collapse;
	table-layout: auto;
}

.jd-invoice__col-index { inline-size: 1%; }
.jd-invoice__col-item { inline-size: 100%; }
.jd-invoice__col-qty,
.jd-invoice__col-unit,
.jd-invoice__col-taxable,
.jd-invoice__col-rate,
.jd-invoice__col-tax,
.jd-invoice__col-amount { inline-size: 1%; }

.jd-invoice__table th,
.jd-invoice__table td {
	padding-inline: var(--jd-space-5);
	text-align: start;
	vertical-align: top;
}

.jd-invoice__table th:first-child,
.jd-invoice__table td:first-child,
.jd-invoice__table th:last-child,
.jd-invoice__table td:last-child {
	padding-inline: 13px;
}

.jd-invoice__table thead tr { background-color: var(--jd-paper); }

.jd-invoice__table th {
	padding-block: var(--jd-space-4);
	border-block-end: 1px solid var(--jd-text-secondary);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: var(--jd-track-biblio);
	color: var(--jd-text-secondary);
	white-space: nowrap;
}

.jd-invoice__table td {
	padding-block: 9px;
	border-block-start: 1px solid var(--jd-paper-deep);
	font-size: 11.5px;
	color: var(--jd-text-secondary);
}

.jd-invoice__table tbody tr:first-child td { border-block-start: 0; }

.jd-invoice__table td.jd-invoice__item {
	font-family: var(--jd-font-latin);
	font-size: 13.5px;
	color: var(--jd-ink);
	white-space: normal;
}

.jd-invoice__table th:nth-child(1),
.jd-invoice__table td:nth-child(1),
.jd-invoice__table th:nth-child(3),
.jd-invoice__table td:nth-child(3),
.jd-invoice__table th:nth-child(6),
.jd-invoice__table td:nth-child(6) { text-align: center; }

.jd-invoice__table th:nth-child(n + 4),
.jd-invoice__table td:nth-child(n + 4) { text-align: end; }

.jd-invoice__table td.jd-mono {
	color: var(--jd-ink);
	font-family: var(--jd-font-mono);
	white-space: nowrap;
}

.jd-invoice__table td.jd-invoice__amount {
	font-family: var(--jd-font-mono);
	font-size: 12px;
	color: var(--jd-navy);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.jd-invoice__table td.jd-invoice__service {
	font-family: var(--jd-font-ui);
	font-size: 12px;
	color: var(--jd-ink);
	white-space: normal;
}

.jd-invoice__note {
	font-size: 10px;
	color: var(--jd-text-muted);
	margin-block: var(--jd-space-4) 0;
}

.jd-invoice__totals {
	max-inline-size: 280px;
	margin-inline-start: auto;
	margin-block: var(--jd-space-6) 0;
	display: grid;
	grid-template-columns: 1fr max-content;
	gap: 0;
	font-size: 12px;
}

.jd-invoice__totals dt,
.jd-invoice__totals dd {
	padding-block: var(--jd-space-2);
	color: var(--jd-text-secondary);
	margin: 0;
}

.jd-invoice__totals dd {
	text-align: end;
	font-variant-numeric: tabular-nums;
}

.jd-invoice__totals .jd-invoice__grand {
	padding-block: var(--jd-space-4) 0;
	margin-block-start: var(--jd-space-3);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--jd-navy);
	border-block-start: var(--jd-border);
}

/* ---- Confirmation: actions and configured cross-sells ----------------- */

.jd-conf__actions {
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--jd-space-5);
	margin-block: var(--jd-space-16) 40px;
}

.jd-conf__actions .jd-btn {
	font-size: 13.5px;
	font-weight: 600;
	block-size: 46px;
	min-block-size: 46px;
	padding-inline: var(--jd-space-13);
}

.jd-conf__actions .jd-btn--hairline { background-color: var(--jd-surface); }

.jd-conf__crosshead {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--jd-space-9);
	margin-block: 0 var(--jd-space-8);
}

.jd-conf__crosshead h3 {
	font-size: 19px;
	line-height: normal;
	margin: 0;
	flex-shrink: 0;
}

.jd-conf__cross {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--jd-space-8);
}

.jd-conf__crosscard {
	background-color: var(--jd-surface);
	padding: var(--jd-space-6);
	border: var(--jd-border);
	border-radius: var(--jd-radius-card);
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--jd-space-5);
}

.jd-conf__crossthumb {
	inline-size: 36px;
	block-size: 46px;
	flex-shrink: 0;
	padding: 3px;
	background-color: var(--jd-paper);
	border: var(--jd-border);
	border-radius: var(--jd-radius-tag);
	display: flex;
	align-items: center;
	justify-content: center;
}

.jd-conf__crossthumb img {
	inline-size: 28px;
	block-size: 38px;
	object-fit: cover;
}

.jd-conf__crossbody {
	flex: 1;
	min-inline-size: 0;
}

.jd-conf__crosstitle {
	font-family: var(--jd-font-latin);
	font-size: 12px;
	line-height: 1.4;
	font-weight: 400;
	color: var(--jd-ink);
	max-block-size: 34px;
	overflow: hidden;
	margin: 0;
}

.jd-conf__crosstitle a { color: inherit; }

.jd-conf__crossprice {
	font-family: var(--jd-font-mono);
	font-size: 11.5px;
	color: var(--jd-navy);
	margin-block: var(--jd-space-1) 0;
}

.jd-conf__crossadd {
	font-family: var(--jd-font-mono);
	font-size: 15px;
	line-height: 1;
	color: var(--jd-navy);
	background-color: var(--jd-surface);
	padding-block: 1px;
	padding-inline: var(--jd-space-3);
	border: var(--jd-border);
	border-radius: var(--jd-radius-btn);
	inline-size: 30px;
	block-size: 30px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.jd-thankyou__meta,
.jd-conf__sent,
.jd-conf__count,
.jd-voucher__kicker,
.jd-voucher__no,
.jd-voucher__meta,
.jd-voucher__code,
.jd-voucher__btn,
.jd-voucher__url,
.jd-voucher__steps > summary,
.jd-shipment__biblio,
.jd-shipment__chip,
.jd-shipment__step,
.jd-shipment__awb,
.jd-shipment__eta,
.jd-shipment__foot .jd-btn,
.jd-invoice__issuer,
.jd-invoice__zatca,
.jd-invoice__meta,
.jd-invoice__table th,
.jd-invoice__table td,
.jd-invoice__note,
.jd-invoice__totals,
.jd-conf__actions .jd-btn,
.jd-conf__crossprice {
	line-height: normal;
}

.jd-voucher__btn--copy,
.jd-conf__actions .jd-btn--primary {
	border-color: transparent;
}

@media (max-width: 1080px) {
	.jd-conf__cross { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
	.jd-voucher__code {
		font-size: 13px;
		letter-spacing: .16em;
		padding-inline: var(--jd-space-4);
		min-inline-size: 0;
	}

	.jd-voucher__btn--copy { inline-size: 100%; }

	.jd-voucher__stepsbody { grid-template-columns: minmax(0, 1fr); }

	.jd-invoice__table th {
		padding-block: var(--jd-space-4);
		letter-spacing: .02em;
	}

	.jd-invoice__table th,
	.jd-invoice__table td {
		padding-inline: var(--jd-space-3);
	}

	.jd-invoice__table th:first-child,
	.jd-invoice__table td:first-child,
	.jd-invoice__table th:last-child,
	.jd-invoice__table td:last-child {
		padding-inline: 9px;
	}

	.jd-conf__cross { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Product detail sections ------------------------------------------- */

/* A card, like the data card and the verify block - the list was rendering straight onto
   the page. [el.116: #FCF9F1, 1px #DBCFB8, radius 8, padding 4px 22px, --jd-shadow-card] */
.jd-includes {
	display: grid;
	gap: 0;
	background-color: var(--jd-surface);
	border: var(--jd-border);
	border-radius: var(--jd-radius-card);
	padding-block: var(--jd-space-2);      /* 4px  */
	padding-inline: var(--jd-space-11);    /* 22px */
	box-shadow: var(--jd-shadow-card);
}

.jd-includes__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.jd-includes__item {
	padding-block: 11px;                                    /* [el.117] */
	border-block-end: 1px solid var(--jd-paper-deep);       /* [el.117: #EDE4D0, not the hairline] */
}

.jd-includes__item:last-child { border-block-end: 0; }

.jd-includes__name {
	display: block;
	font-size: var(--jd-fs-base);
	line-height: normal;
	color: var(--jd-ink);                                   /* [el.118: EB Garamond 16px] */
}

.jd-includes__desc {
	display: block;
	font-size: 12px;
	line-height: 22.8px;                                    /* [el.119] */
	color: var(--jd-text-secondary);
	margin-block-start: 0;
}

/* The card's closing note, above the bottom edge on the hairline rather than the
   second-tier divider. [el.128/129] */
.jd-includes__foot {
	margin: 0;
	padding-block: var(--jd-space-5) var(--jd-space-6);     /* 10px / 12px */
	border-block-start: var(--jd-border);
	font-size: 11.5px;
	color: var(--jd-text-secondary);
}

/* Rows on a divider, not a 12px stack - [el.168: flex row gap:10px, padding-block 10px,
   border-block-end 1px #EDE4D0, max-inline-size 820px; el.169: 13px/24.7px #1C2433]. */
.jd-checks { display: block; max-inline-size: 820px; }

.jd-checks__item {
	position: relative;
	padding-block: var(--jd-space-5);              /* 10px */
	padding-inline-start: var(--jd-space-5);       /* 10px - the prototype's flex gap [el.168] */
	border-block-end: 1px solid var(--jd-paper-deep);
	font-size: 13px;
	line-height: 24.7px;
	color: var(--jd-ink);
}

.jd-checks__item:last-child { border-block-end: 0; }

.jd-checks__item a {
	margin-inline-start: var(--jd-space-3);
	border-block-end: 1px solid currentColor;
	font-size: 12px;
	font-weight: 500;
	line-height: 22.8px;
	color: var(--jd-navy);
}

/* A typographic tick rather than an icon font - the design rule is that meaning
   comes from text, and this avoids loading an icon set for one glyph. */
.jd-checks__item::before {
	content: "\2713";
	position: absolute;
	inset-inline-start: 0;
	color: var(--jd-emerald);
}

.jd-activation__on {
	display: flex;
	align-items: baseline;
	gap: var(--jd-space-2);
	margin-block: 0 var(--jd-space-8);
	font-size: 13.5px;
	font-weight: 600;
	line-height: normal;
	color: var(--jd-navy);
}

.jd-activation__on .jd-latin { font-weight: 600; }

.jd-steps__list.jd-steps__list--product {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--jd-space-12);
	max-inline-size: 820px;
	margin-block-start: var(--jd-space-8);
}

.jd-activation .jd-steps__item {
	padding-block-start: 0;
	padding-inline-start: var(--jd-space-10);
	border-block-start: 0;
	border-inline-end: var(--jd-border);
}

.jd-activation .jd-steps__item:last-child {
	padding-inline-start: 0;
	border-inline-end: 0;
}

.jd-activation .jd-steps__num {
	font-size: 34px;
	line-height: 40.8px;
	color: var(--jd-navy);
	margin-block-end: 0;
}

.jd-activation .jd-steps__body {
	font-size: 12.5px;
	line-height: 23.75px;
	color: var(--jd-text-secondary);
}

.jd-activation__platform {
	display: flex;
	align-items: baseline;
	gap: var(--jd-space-2);
	margin-block: 18px 0;
	font-size: 12px;
	line-height: normal;
	color: var(--jd-text-secondary);
}

.jd-activation__platform .jd-mono {
	font-size: 11.5px;
	color: var(--jd-navy);
}

.jd-activation__requirements {
	max-inline-size: 720px;
	margin-block: var(--jd-space-7) 0;
	padding-block-start: var(--jd-space-5);
	border-block-start: 1px solid var(--jd-paper-deep);
	font-size: 11.5px;
	line-height: 23px;
	color: var(--jd-text-secondary);
}

.jd-activation__requirements > span { font-weight: 500; }

@media (max-width: 768px) {
	/* The product prototype keeps three 98px activation columns at 390px. */
	.jd-steps__list.jd-steps__list--product {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--jd-space-12);
	}
}

/* ---- FAQ ---------------------------------------------------------------- */

.jd-faq { display: grid; max-inline-size: 760px; }   /* [el.197: rows are 760 wide] */

.jd-faq__item { border-block-end: var(--jd-border); }   /* [el.197: #DBCFB8] */

.jd-faq__q {
	cursor: pointer;
	list-style: none;
	padding-block: 0;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--jd-navy);                  /* [el.198] */
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--jd-space-8);
	min-block-size: 48px;                   /* [el.197: 760x48] */
}

.jd-faq__q::-webkit-details-marker { display: none; }

/* A real element, not a ::after. The prototype's sign is a <span> in IBM Plex Mono
   [el.199], and parity.mjs anchors on visible text - a pseudo-element is invisible to it,
   so the four «+» rows could never clear while the glyph was drawn in CSS. */
.jd-faq__sign {
	font-family: var(--jd-font-mono);
	font-size: 14px;
	line-height: 1;
	color: var(--jd-text-muted);            /* [el.199] */
}

.jd-faq__sign--close { display: none; }
.jd-faq__item[open] .jd-faq__sign--open { display: none; }
.jd-faq__item[open] .jd-faq__sign--close { display: inline; }

.jd-faq__q:hover { color: var(--jd-navy-700); }

.jd-faq__q:focus-visible {
	outline: 2px solid var(--jd-navy);
	outline-offset: 2px;
}

.jd-faq__a {
	padding-block-end: var(--jd-space-9);
	color: var(--jd-text-secondary);
	max-inline-size: 68ch;
}

/* ---- 404 (prototype screen 23) -------------------------------------------
 *
 * commerce.css and not pages.css: inc/enqueue.php:96 makes is_404() a commerce surface,
 * and a commerce surface sets $needs_pages = false - pages.css never loads here.
 *
 * Every value below is measured, from docs/design/23-404--1440.json and --390.json. Those
 * two files carry IDENTICAL type, spacing and box values; the screen narrows entirely
 * through its max-widths, which is why this block has no media query. The literals that
 * fall outside tokens.css (52/90px page padding, 15px field inset, 12.5px and 13.5px type,
 * 34px foot gap, the seven spine sizes) are the prototype's own hand-tuning - tokens.css's
 * header forbids snapping a measured value to the nearest step.
 *
 * `line-height: normal` is declared, not inherited, wherever the prototype leaves it there:
 * body's 1.7 would make the eyebrow 18px against a measured 15px and push every element
 * below it down the page.
 */

.jd-404 {
	max-inline-size: 720px;
	margin-inline: auto;
	padding-block: 52px 90px;
	padding-inline: var(--jd-gutter);
	text-align: center;
}

/* el.34 672×15 - 10.5px/.2em brass, 26px of air under it. */
.jd-404__eyebrow {
	margin-block-end: var(--jd-space-13);
	font-size: var(--jd-fs-3xs);
	line-height: normal;
	letter-spacing: .2em;
	color: var(--jd-brass);
}

/* The two Latin runs. .jd-mono carries the family, the isolation and the direction;
   only the eyebrow's 11px differs from its surrounding text (el.35 vs el.53's 10.5px). */
.jd-404__ref {
	letter-spacing: inherit;
}

.jd-404__eyebrow .jd-404__ref {
	font-size: 11px;
}

/* ---- The shelf with one book missing (el.36-44) ------------------------- */

.jd-404__shelf {
	max-inline-size: 430px;
	margin-inline: auto;
}

.jd-404__spines {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: var(--jd-space-4);
	padding-inline: var(--jd-space-6);
}

.jd-404__spine {
	display: block;
	border-start-start-radius: var(--jd-radius-xs);
	border-start-end-radius: var(--jd-radius-xs);
	line-height: normal;
}

.jd-404__spine--a { inline-size: 30px; block-size: 118px; background-color: var(--jd-navy); }
.jd-404__spine--b { inline-size: 24px; block-size: 100px; background-color: var(--jd-brass); }
.jd-404__spine--c { inline-size: 34px; block-size: 128px; background-color: var(--jd-navy-700); }
.jd-404__spine--e { inline-size: 32px; block-size: 124px; background-color: var(--jd-navy); }
.jd-404__spine--f { inline-size: 22px; block-size: 96px;  background-color: var(--jd-navy-700); }

/* The gap the book came out of: dashed on three sides, open at the shelf. */
.jd-404__spine--gap {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 34px;
	block-size: 122px;
	border: 1px dashed var(--jd-brass);
	border-block-end: 0;
	color: var(--jd-brass);
	font-family: var(--jd-font-mono);
	font-size: 17px;
}

/* Its neighbour is the one cream spine - a hairline box, not a filled one. */
.jd-404__spine--d {
	inline-size: 26px;
	block-size: 108px;
	background-color: var(--jd-paper-deep);
	border: var(--jd-border);
	border-block-end: 0;
}

.jd-404__rule {
	block-size: 1px;
	background-color: var(--jd-brass);
}

.jd-404__shade {
	block-size: 10px;
	background-image: linear-gradient(to bottom, rgb(24 41 94 / .12), transparent);
}

/* ---- Copy ---------------------------------------------------------------
 * The h1 needs no type of its own: style.css already gives every h1 Amiri 700, 32px
 * (--jd-fs-display) and --jd-lh-title (1.5 = the measured 48px). Only the air is local. */

.jd-404__title {
	margin-block: var(--jd-space-13) var(--jd-space-5);
}

/* el.46 460×57 - 13.5px/2.1, centred in the 672 column by its own max-width. */
.jd-404__body {
	max-inline-size: 460px;
	margin-inline: auto;
	font-size: 13.5px;
	line-height: 2.1;
	color: var(--jd-text-secondary);
	text-wrap: pretty;
}

/* ---- Search (el.47-48) --------------------------------------------------
 * A fourth treatment of the search control, not one of the three in
 * template-parts/header/search.php: 48px, bordered, with a worded submit beside it. */

.jd-404__search {
	display: flex;
	gap: var(--jd-space-4);
	max-inline-size: 440px;
	margin-block-start: var(--jd-space-12);
	margin-inline: auto;
}

.jd-404__field {
	flex: 1 1 auto;
	min-inline-size: 0;
	block-size: 48px;
	padding-inline: 15px;
	border: var(--jd-border);
	border-radius: var(--jd-radius-btn);
	background-color: var(--jd-surface);
	color: var(--jd-ink);
	font-family: var(--jd-font-ui);
	font-size: var(--jd-fs-xs);
	line-height: normal;
	transition: border-color var(--jd-transition);
}

/* The prototype's focus state. The global :focus-visible ring in style.css stays on top
   of it - it is the keyboard affordance and the prototype's outline:none is not a design
   decision this theme copies. */
.jd-404__field:focus {
	border-color: var(--jd-navy);
}

.jd-404__go {
	block-size: 48px;
	padding-inline: var(--jd-space-11);
	border: 0;
	border-radius: var(--jd-radius-btn);
	background-color: var(--jd-navy);
	color: var(--jd-on-navy);
	font-family: var(--jd-font-ui);
	font-size: var(--jd-fs-xs);
	font-weight: 600;
	line-height: normal;
	cursor: pointer;
	transition: background-color var(--jd-transition);
}

.jd-404__go:hover {
	background-color: var(--jd-navy-700);
}

/* ---- The three routes (el.49-51) ---------------------------------------- */

.jd-404__links {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--jd-space-5);
	margin-block-start: var(--jd-space-8);
}

/*
 * 42px, against .jd-btn's 44px minimum. The 44 is this theme's touch-target floor for
 * controls; these three are page links on a dead end, they are 90-123px wide, and the
 * prototype measures 42 at both viewports (el.49-51 in both JSONs). The measured box wins.
 *
 * The :hover pair below is not optional. This rule is 0,2,0 - the same specificity as
 * style.css's `.jd-btn--hairline:hover`, and it comes later in the cascade, so without an
 * equally-specific hover of its own it would silently erase the hover border.
 */
.jd-404 .jd-btn--hairline {
	min-block-size: 42px;
	block-size: 42px;
	padding-inline: var(--jd-space-10);
	background-color: var(--jd-surface);
	color: var(--jd-navy);
	font-size: 12.5px;
	font-weight: 600;
	line-height: normal;
	transition: border-color var(--jd-transition), transform var(--jd-transition);
}

.jd-404 .jd-btn--hairline:hover {
	border-color: var(--jd-navy);
	transform: translateY(-1px);
}

/* el.52 - 34px below the buttons, with el.53's Latin reference inside it. */
.jd-404__foot {
	margin-block-start: 34px;
	font-size: var(--jd-fs-3xs);
	line-height: normal;
	color: var(--jd-text-muted);
}

/* ======================================================================== *
 * Cart (prototype 09)
 *
 * WooCommerce renders the items as a <table>, and the override keeps it that way so
 * the responsive-table behaviour and third-party cell selectors survive. These rules
 * turn each <tr> into a flex row and hide the header, which gives the prototype's card
 * list without touching the markup contract.
 * ======================================================================== */

.jd-container.jd-cart { padding-block: var(--jd-space-16) var(--jd-space-24); }

/* Cart notices are emitted before the item list. WooCommerce wraps them in
   .woocommerce-notices-wrapper, including the remove-item notice on the empty-cart branch.
   Keep that wrapper inside the cart rail rather than allowing a viewport-wide strip. */
.jd-cart > .woocommerce-notices-wrapper {
	margin-block-end: var(--jd-space-12);
}

.jd-cart > .woocommerce-notices-wrapper > div.woocommerce-message,
.jd-cart > .woocommerce-notices-wrapper > div.woocommerce-info,
.jd-cart > .woocommerce-notices-wrapper > ul.woocommerce-error,
.jd-cart > div.woocommerce-message,
.jd-cart > div.woocommerce-info,
.jd-cart > ul.woocommerce-error {
	margin: 0;
	padding: var(--jd-space-7) var(--jd-space-9);
	border-radius: var(--jd-radius-card);
}

.jd-cart > .woocommerce-notices-wrapper .button,
.jd-cart > div.woocommerce-message .button,
.jd-cart > div.woocommerce-info .button,
.jd-cart > ul.woocommerce-error .button {
	float: inline-end;
	min-block-size: 36px;
	padding-inline: var(--jd-space-6);
	margin-inline-start: var(--jd-space-6);
	border: var(--jd-border);
	border-radius: var(--jd-radius-btn);
	background-color: transparent;
	color: var(--jd-navy);
}

.jd-cart__head {
	display: flex;
	align-items: baseline;
	gap: var(--jd-space-6);
	margin-block-end: var(--jd-space-4);
}

.jd-cart__title {
	font-size: var(--jd-fs-display);
	line-height: 1.4;
	margin: 0;
}

/*
 * Its own class, NOT .jd-cart__count: that name belongs to the header's cart badge
 * (layout.css:255-263, :572), which draws its parentheses with ::before/::after and, at
 * <=768, positions itself absolutely in the button's corner. Sharing the name gave the h1
 * «((١))» and an absolutely-positioned count on mobile. [el.35/el.24@390 mono 13/n #566078,
 * 23x17, with the numeral in its own child span el.36/el.25] */
.jd-cart__headcount { font-size: var(--jd-fs-xs); line-height: normal; color: var(--jd-text-secondary); }

.jd-cart__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 370px;
	gap: var(--jd-space-12);
	align-items: start;
	padding-block-start: var(--jd-space-12);
	border-block-start: var(--jd-border);
	margin-block-start: var(--jd-space-3);
}

@media (max-width: 1080px) {
	.jd-cart__layout { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Item list ---------------------------------------------------------- */

.jd-cart__table {
	inline-size: 100%;
	border-collapse: collapse;
	background-color: var(--jd-surface);
	border: var(--jd-border);
	border-radius: var(--jd-radius-card);
	box-shadow: var(--jd-shadow-card);
	padding-block: var(--jd-space-2);      /* [el.38 padding 4px 18px] */
	padding-inline: var(--jd-space-9);
	display: block;
}

/* ---- WooCommerce's table skin loses here --------------------------------- *
 * :where() is not involved; these are plain descendant selectors at 0,2,1-0,3,2 and they
 * beat every single-class rule below. The prototype's cells have no padding, no cell
 * border and no fixed label column, so the skin has to be taken back explicitly. */
.woocommerce table.shop_table.jd-cart__table {
	border: var(--jd-border);              /* [el.38 border 1px #dbcfb8] */
	border-radius: var(--jd-radius-card);  /* [el.38 radius 8px] */
	border-collapse: collapse;
	border-spacing: 0;
	margin: 0;                             /* [el.38 no margin; WC adds 0 0 24px -1px] */
	text-align: start;                     /* [el.38/39 start; woocommerce-rtl forces physical right] */
}

.woocommerce table.shop_table.jd-cart__table th,
.woocommerce table.shop_table.jd-cart__table td,
.woocommerce table.shop_table.jd-cart__table tbody th {
	padding: 0;                            /* [el.42/43/48/55/57 padding 0] */
	border-block-start: 0;                 /* [el.39 the row's only border is block-end] */
	line-height: normal;                   /* [el.43/55/57 line-height normal] */
	font-weight: 400;
}

.jd-cart__table thead {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.jd-cart__table tbody { display: block; }

.jd-cart__row {
	display: flex;
	align-items: center;
	gap: var(--jd-space-7);
	padding-block: var(--jd-space-8);
	padding-inline: var(--jd-space-1);
	row-gap: var(--jd-space-5);
	max-inline-size: 100%;
}

/* The hairline leads each subsequent row rather than trailing every row. `:last-of-type` could
   never match - `tr.jd-cart__actions` is emitted after the loop (cart.php) and only hidden, so
   the last `tr` in the tbody is never a `.jd-cart__row` - and the prototype draws no rule under
   its final row at all (`store.dc.html:2356`, `borderBottom: last ? 'none' : '1px solid #DBCFB8'`).
   Adjacent-sibling form is immune to that hidden row and to anything
   `woocommerce_after_cart_contents` may append. Pixel-identical between rows. */
.jd-cart__row + .jd-cart__row { border-block-start: var(--jd-border); }

.jd-cart__cover {
	inline-size: 56px;
	block-size: 72px;
	flex-shrink: 0;
	background-color: var(--jd-paper);
	border: var(--jd-border);
	border-radius: var(--jd-radius-tag);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--jd-space-2);
	overflow: hidden;
}

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

/* `.woocommerce-cart table.cart img { width: 32px }` is 0,2,2 and beats the rule above
   (0,2,1), so the cover rendered as a 30x30 thumbnail inside its 56x72 frame.
   [el.41 46x62 = el.40's 56x72 less 4px padding and 1px border per side] */
/* The cover cell is a `td`, so the shop_table reset above (`padding: 0; border-block-start: 0`,
   0,3,1) also strips the 4px inset and the top border that `.jd-cart__cover` (0,1,0) declares —
   the frame rendered with three borders and the image filling it edge to edge.
   [el.40 frame 56x72 · el.41 image 46x62 = 56x72 less 4px padding and 1px border per side] */
.woocommerce table.shop_table.jd-cart__table td.jd-cart__cover {
	padding: var(--jd-space-2);
	border-block-start: var(--jd-border);
}

.woocommerce-cart table.cart .jd-cart__cover img,
.woocommerce-page table.cart .jd-cart__cover img {
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: 100%;
	max-block-size: 100%;
	object-fit: contain;
	box-shadow: none;
}

.jd-cart__meta { flex: 1; min-inline-size: 0; }

.jd-cart__name {
	display: block;
	font-family: var(--jd-font-latin);
	font-size: 15.5px;
	color: var(--jd-ink);
	line-height: 1.4;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	/*
	 * .jd-latin forces direction:ltr so the Latin title reads and truncates LTR; that
	 * also makes text-align:start resolve to LEFT, throwing the title to the wrong side
	 * of an RTL column. match-parent resolves start/end against the PARENT's direction,
	 * so the title sits at the row's start in Arabic and in the English mirror with one
	 * declaration. Depends on the cell computing `start`, which the shop_table reset
	 * above guarantees. [el.42 text-align right, direction ltr]
	 */
	text-align: match-parent;
}

.jd-cart__cover > a { display: flex; inline-size: 100%; block-size: 100%; }

.jd-cart__name a {
	color: inherit;
	text-decoration: none;
}

.jd-cart__name a:hover,
.jd-cart__name a:focus-visible {
	color: var(--jd-navy);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.jd-cart__biblio {
	display: block;
	font-size: 10px;
	color: var(--jd-text-secondary);
	margin-block: var(--jd-space-2) var(--jd-space-3);
}

.jd-cart__tags {
	display: flex;
	align-items: center;
	gap: var(--jd-space-5);
	flex-wrap: wrap;
}

.jd-cart__ship { font-size: 11px; color: var(--jd-text-muted); }   /* [el.68] */
.jd-cart__ship--instant { color: var(--jd-emerald); }              /* [el.49 #1b5e43] */

/* ---- Quantity ----------------------------------------------------------- */

/* woocommerce_quantity_input() emits .quantity > input.qty; the stepper frame is drawn
   around whatever it produces, so the Phase 5 quantity-limit hooks stay in charge of the
   min/max attributes rather than the theme hardcoding them. */
.jd-cart__qty { flex-shrink: 0; }

/* The prototype's control is a hairline frame holding the two signs around the value, and
   its wrapper carries dir="ltr" so the signs keep their order in both languages.
   [store.dc.html cart row: 1px solid #DBCFB8, radius 6px, background #FCF9F1] */
.jd-cart__qty .jd-qty {
	display: inline-flex;
	align-items: center;
	direction: ltr;
	border: var(--jd-border);
	border-radius: var(--jd-radius-btn);
	background-color: var(--jd-surface);
	flex-shrink: 0;                        /* [el.50 box 88x32] */
	overflow: hidden;
}

.jd-cart__qty .jd-qty__btn {
	inline-size: 30px;                     /* [el.51/54 30x30] */
	block-size: 30px;
	padding: 1px var(--jd-space-3);        /* [el.51 padding 1px 6px] */
	border: 0;
	background: transparent;
	color: var(--jd-navy);                 /* [el.51 #18295e] */
	font-family: var(--jd-font-mono);      /* [el.51 IBM Plex Mono] */
	font-size: 15px;                       /* [el.51 15/15] */
	line-height: 1;
	cursor: pointer;
}

/* WooCommerce emits type="hidden" when min === max (a sold-individually book), so there is
   nothing to step and nothing to paint - without this the frame renders as a 2x2 dot. */
.jd-cart__qty .jd-qty:not(:has(input[type="number"])) { display: none; }

.jd-cart__qty .quantity {
	display: inline-flex;
	align-items: center;
	border: 0;
	border-radius: 0;
	background: transparent;
	overflow: visible;
}

.jd-cart__qty input.qty {
	inline-size: 26px;                     /* [el.52 26x28, min-width 26px] */
	padding-block: 5px;                    /* [el.52 padding 5px 0] */
	padding-inline: 0;
	text-align: center;
	font-family: var(--jd-font-mono);
	font-size: 13.5px;                     /* [el.53 13.5px] */
	color: var(--jd-ink);                  /* [el.53 #1c2433] */
	background: transparent;
	border: 0;
	border-inline: 1px solid var(--jd-hairline);
	appearance: textfield;
}

.jd-cart__qty input.qty::-webkit-outer-spin-button,
.jd-cart__qty input.qty::-webkit-inner-spin-button { appearance: none; margin: 0; }

/* WooCommerce's own sheet carries `.woocommerce .quantity .qty { width: 3.631em }` at (0,3,0),
 * which beats the (0,2,1) rule above - logical inline-size and physical width cascade as one
 * property, so specificity decides. 3.631 x 13.5px = 49px against the prototype's 26, which
 * pushed the frame to 111x32 instead of el.50's 88x32; and because .jd-cart__meta is the
 * flexible child of the row, all 23px came straight off the visible title. Scoped to
 * .jd-cart__qty so the product page's own quantity input is untouched. [el.50 88x32, el.52 26x28] */
.woocommerce .jd-cart__qty input.qty,
.woocommerce-page .jd-cart__qty input.qty {
	inline-size: 26px;
}

/* ---- Line total --------------------------------------------------------- */

/* The unit price is carried in the markup for plugins and screen readers, but the
   prototype shows it only as the small caption under the line total. */
.jd-cart__unit { display: none; }

.jd-cart__line {
	inline-size: 104px;
	flex-shrink: 0;
	text-align: end;
}

/* `direction: inherit` undoes `.jd-mono`'s `direction: ltr` on this block, and that is the whole
   fix: the td declares `text-align: end`, which under the block's forced LTR resolved to the
   physical right - the wrong edge of an RTL column. The number does not need LTR on the block,
   because WooCommerce wraps the amount in `<bdi>`, which isolates it either way.
   MEASURED live on staging, all three candidates, because this is the fourth appearance of the
   direction/text-align shape and the remedy has differed every time:
     as shipped          AR bdi x=622 (wrong)  ·  EN x=752 (right edge, correct)
     text-align: start   AR x=603 (correct)    ·  EN x=733 (LEFT - breaks the LTR mirror)
     direction: inherit  AR x=603 (correct)    ·  EN x=752 (correct)
   `match-parent` does NOT work here: Chromium keeps the parent's `end` and then resolves it
   against THIS element's direction, which is the ltr that caused the bug. It is right for
   `.jd-cart__name`, which needs LTR on the block for its ellipsis; this one does not.
   [el.55 «75.00» x603 · el.74 «120.00» x603 - the price sits at the column's end] */
.jd-cart__linetotal {
	display: block;
	direction: inherit;
	font-size: 16.5px;
	font-weight: 500;
	color: var(--jd-navy);
}

/* inline-block, not block: the prototype's caption is an inline span inside a block
   wrapper [el.57 49x14], so a full-width block reports the column width instead. It still
   starts on its own line because .jd-cart__linetotal above it is a block. */
.jd-cart__linenote {
	display: inline-block;
	font-size: 9.5px;
	color: var(--jd-text-muted);
}

.jd-cart__remove { flex-shrink: 0; }

.jd-cart__remove .remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 30px;
	block-size: 30px;
	border-radius: var(--jd-radius-tag);
	color: var(--jd-text-muted);
	font-size: var(--jd-fs-xs);
	text-decoration: none;
	transition: color var(--jd-transition);
}

.jd-cart__remove .remove:hover { color: var(--jd-danger); }

/* woocommerce-rtl.css paints it bright red: `.woocommerce a.remove { color: var(--wc-red)
   !important; font-size:1.5em; font-weight:700; border-radius:100%; display:block }` plus a
   red disc on hover. !important is required to beat !important.
   [el.58 arial 13/n 400 #6e7689, padding 1px 6px, radius 4px, 30x30, centred] */
.woocommerce .jd-cart__remove a.remove,
.woocommerce-page .jd-cart__remove a.remove {
	color: var(--jd-text-muted) !important;
	inline-size: 30px;
	block-size: 30px;
	padding: 1px var(--jd-space-3);
	font-size: var(--jd-fs-xs);
	font-weight: 400;
	line-height: 1;
	border-radius: var(--jd-radius-tag);
	background: transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.woocommerce .jd-cart__remove a.remove:hover,
.woocommerce-page .jd-cart__remove a.remove:hover {
	color: var(--jd-danger) !important;
	background: transparent;
}

.jd-cart__actions td {
	display: block;
	padding-block: var(--jd-space-6);
	border-block-start: var(--jd-border);
}

/* The prototype has no "update cart" control - its stepper commits on click. The button
   stays as the only no-JS commit path and assets/js/cart.js hides the row once the stepper
   is wired. Keyed off a marker class on <html> rather than [hidden] on the row itself:
   `update_wc_div` calls replaceWith() on the whole cart form, so any state written onto a
   node inside it is discarded on the first AJAX refresh and the row came back. <html> is
   the one node WooCommerce never replaces. Still a class-and-element selector (0,3,2)
   because at <=768 `shop_table_responsive tr { display:block }` (0,2,2) is an author rule
   that a bare [hidden] would lose to.
   DERIVED: see PENDING-DECISIONS #20 */
.jd-cart-js .jd-cart__table tr.jd-cart__actions { display: none; }

.jd-cart__back {
	display: inline-block;
	margin-block-start: var(--jd-space-8);
	font-size: var(--jd-fs-xs);
	font-weight: 500;
	line-height: normal;                   /* [el.78 13/n 500, box 87x20] */
	color: var(--jd-navy);
	border-block-end: 1px solid transparent;
}

/* No ::before arrow: ar.po already translates 'Continue shopping' with the glyph in the
   text node, and a second one measured the link at 103px against [el.78 87x20]. */
.jd-cart__back:hover { border-block-end-color: var(--jd-navy); }

@media (max-width: 768px) {
	.jd-cart__row { flex-wrap: wrap; gap: var(--jd-space-5); }
	.jd-cart__line { inline-size: auto; min-inline-size: 84px; flex-shrink: 1; }
	/*
	 * No `white-space: normal` here. store.dc.html sets nowrap/hidden/ellipsis on the cart
	 * title at every width, and the meta column at 390 is barely 60px wide: wrapping turned
	 * a long Latin title into one character per line and added ~300px of page height.
	 */
	/*
	 * DERIVED: see PENDING-DECISIONS #22. The wrapped row can collapse the meta cell to 1px.
	 * Its mobile line is the row content less the measured 56px cover and 10px gap: 234px
	 * at 390. Size the flex item—not an overflowing child—so later cells wrap below it.
	 */
	.jd-cart__meta {
		flex-basis: calc(100% - 56px - var(--jd-space-5));
		min-inline-size: calc(100% - 56px - var(--jd-space-5));
	}

	/*
	 * woocommerce-smallscreen-rtl.css is enqueued with media="only screen and
	 * (max-width:768px)" and stacks every shop_table: rows become blocks, every tbody th
	 * disappears, each td is set to display:block and flushed physically left with an
	 * !important, and gains a bold
	 * floated `attr(data-title)": "` label, even rows get a grey wash, and the cover is
	 * hidden outright. The prototype keeps the flex row at 390 [el.28 304x230, gap 10px,
	 * wrapping] and shows the cover [el.29 56x72]. All of these are 0,4,2-0,5,3 against
	 * WooCommerce's 0,2,2-0,3,1.
	 *
	 * `tr.jd-cart__row` and not a bare `tr`: tr.jd-cart__actions holds the full-width
	 * «تحديث السلة» fallback and must stay a block.
	 */
	.woocommerce table.shop_table_responsive.jd-cart__table tr.jd-cart__row { display: flex; }
	.woocommerce-cart .cart-collaterals .cart_totals table.shop_table_responsive.jd-summary__table > tbody > tr { display: flex; }

	.woocommerce table.shop_table_responsive.jd-cart__table tbody th,
	.woocommerce-cart .cart-collaterals .cart_totals table.shop_table_responsive.jd-summary__table tbody th { display: block; }

	/* WooCommerce's flush is !important; !important against !important is settled by
	   specificity, and `end` is what keeps the English mirror right. */
	.woocommerce table.shop_table_responsive.jd-cart__table tr td,
	.woocommerce-cart .cart-collaterals .cart_totals table.shop_table_responsive.jd-summary__table tr td { text-align: end !important; }

	.woocommerce table.shop_table_responsive.jd-cart__table tr td::before,
	.woocommerce-cart .cart-collaterals .cart_totals table.shop_table_responsive.jd-summary__table tr td::before { content: none; }

	.woocommerce table.shop_table_responsive.jd-cart__table tr:nth-child(2n) td,
	.woocommerce-cart .cart-collaterals .cart_totals table.shop_table_responsive.jd-summary__table tr:nth-child(2n) td { background-color: transparent; }

	.woocommerce table.cart.jd-cart__table td.jd-cart__cover { display: flex; }
	.woocommerce table.shop_table_responsive.jd-cart__table td.jd-cart__unit { display: none; }
}

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

/* The summary panel is WooCommerce's `.cart_totals`, and woocommerce-layout-rtl.css sets
   `.woocommerce .cart-collaterals .cart_totals { width: 48%; float: left }` at 0,3,0.
   Against a 370px grid column that resolved to 177.6px, so the panel rendered at less
   than half its column with every label broken one word per line - "حساب تكلفة الشحن"
   over three. The theme placed the column but never took the float back off. 0,4,0. */
.woocommerce .jd-cart__summary .cart_totals.jd-summary,
.woocommerce-page .jd-cart__summary .cart_totals.jd-summary {
	inline-size: 100%;
	float: none;
}

.jd-summary {
	background-color: var(--jd-surface);
	border: var(--jd-border);
	border-radius: var(--jd-radius-card);
	box-shadow: var(--jd-shadow-card);
	padding: var(--jd-space-9) var(--jd-space-10);
	position: sticky;
	inset-block-start: 96px;
}

.jd-summary__title {
	font-size: 19px;
	line-height: normal;                   /* [el.80 amiri 19/n 700; style.css h1-h4 is 1.5 = 28.5px] */
	color: var(--jd-navy);
	padding-block-end: var(--jd-space-5);
	border-block-end: var(--jd-border);
	margin: 0 0 var(--jd-space-2);
}

.jd-summary__table { inline-size: 100%; border-collapse: collapse; display: block; }
.jd-summary__table tbody { display: block; }

/* WooCommerce's summary skin outranks every single-class rule below:
   `.woocommerce-cart .cart-collaterals .cart_totals table th { width:35% }` (0,3,2) made
   all three labels exactly 114px, and `table.shop_table th/td { padding:9px 12px;
   border-top:1px; line-height:1.5em; font-weight:700 }` (0,2,2) drew a cell grid the
   prototype does not have. [el.79 the rows sit straight on the card; el.82/85/87/88
   padding 0, line-height normal, weight 400; el.87 box 43x21 weight 600] */
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table.jd-summary__table {
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
	margin: 0;                             /* [el.80 title margin-block-end puts el.81 at y=304] */
	padding: 0;
	text-align: start;
}

.woocommerce-cart .cart-collaterals .cart_totals table.shop_table.jd-summary__table th,
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table.jd-summary__table td,
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table.jd-summary__table tbody th {
	padding: 0;
	border-block-start: 0;                 /* [el.81/84 the row carries the 1px, not the cell] */
	line-height: normal;
	inline-size: auto;                     /* kills WooCommerce's width:35% */
	font-weight: 400;
}

.woocommerce-cart .cart-collaterals .cart_totals table.shop_table.jd-summary__table .jd-summary__row--total th {
	font-weight: 600;                      /* [el.87 font-weight 600] */
}

/*
 * The shipping rows come from WooCommerce's own cart/cart-shipping.php, which the theme
 * does not override, so they never carry .jd-summary__row and rendered as real table rows
 * with 16px table-cells. `:not(.jd-summary__row)` is what makes this safe: a flat
 * extension of the list would also outrank .jd-summary__row--total (0,1,0) and undo the
 * total row's own padding and border. [el.81/84 flex row, space-between, baseline]
 */
.jd-summary__row,
.jd-cart__summary .jd-summary__table > tbody > tr:not(.jd-summary__row) {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--jd-space-4);
	padding-block: var(--jd-space-4);
	border-block-end: var(--jd-border);
	font-size: 12.5px;
	color: var(--jd-text-secondary);
}

.jd-summary__row th,
.jd-cart__summary .jd-summary__table > tbody > tr:not(.jd-summary__row) > th { font-weight: 400; text-align: start; }

.jd-summary__row td,
.jd-cart__summary .jd-summary__table > tbody > tr:not(.jd-summary__row) > td {
	color: var(--jd-ink);
	font-family: var(--jd-font-mono);
	font-variant-numeric: tabular-nums;
	text-align: end;
}

/* WooCommerce prints shipping methods as a <ul>; flatten it so a single available rate
   reads as a value rather than a one-item bullet list. */
.jd-summary__row td ul,
.jd-cart__summary .jd-summary__table > tbody > tr:not(.jd-summary__row) > td ul { list-style: none; margin: 0; padding: 0; }
.jd-summary__row td label,
.jd-cart__summary .jd-summary__table > tbody > tr:not(.jd-summary__row) > td label { font-family: var(--jd-font-ui); }

/* F15 - the prototype's shipping line is a label and an amount. WooCommerce writes the
   estimate sentence AND the "Shipping to X." branch into the same <p>, so the filter on
   woocommerce_shipping_estimate_html cannot cover both; one scoped rule does.
   The calculator link is removed at source in inc/woocommerce.php. */
.jd-summary .woocommerce-shipping-destination { display: none; }

.jd-summary__row--discount,
.jd-summary__row--discount td { color: var(--jd-emerald); }

.jd-summary__row--nodelivery td {
	font-family: var(--jd-font-ui);
	font-size: 11.5px;
	color: var(--jd-emerald);
}

.jd-summary__row--total {
	padding-block: var(--jd-space-6) var(--jd-space-1);
	border-block-end: 0;
}

.jd-summary__row--total th { font-size: var(--jd-fs-sm); font-weight: 600; color: var(--jd-navy); }
.jd-summary__row--total td { font-size: 21px; font-weight: 500; color: var(--jd-navy); }

.jd-summary__vat {
	font-size: 10.5px;
	line-height: normal;                   /* outside .jd-summary__table, so it inherits body 1.7 = 18px [el.91 15px] */
	color: var(--jd-text-muted);
	text-align: end;
	margin-block: 0 var(--jd-space-6);
}

.jd-summary__coupon {
	display: flex;
	gap: var(--jd-space-4);
	margin-block-end: var(--jd-space-6);
}

/* [el.94 12.5/n, 256x42, padding 0 13, radius 6px, border 1px #dbcfb8, bg #fcf9f1] */
.jd-summary__coupon .jd-input { flex: 1; min-inline-size: 0; min-block-size: 42px; font-size: 12.5px; line-height: normal; }

/* This button carries .jd-btn--hairline but not .button, so style.css's
   `.woocommerce .jd-btn.jd-btn--hairline.button { font-weight: 600 }` never reaches it.
   [el.95 12.5/n 600, padding-inline 16px, 64x42] */
.jd-summary__coupon .jd-btn { min-block-size: 42px; padding-inline: var(--jd-space-8); font-size: 12.5px; font-weight: 600; line-height: normal; }

/* `.jd-btn--hairline:hover` (style.css) goes to --jd-hairline-strong and does not move. The
   prototype declares this button's own hover: `style-hover="border-color:#18295E;
   transform:translateY(-1px)"` (store.dc.html:821). */
.jd-summary__coupon .jd-btn:hover {
	border-color: var(--jd-navy);
	transform: translateY(-1px);
}

.jd-summary__checkout {
	inline-size: 100%;
	min-block-size: 50px;
	font-size: 15px;
	margin-block-end: var(--jd-space-5);
}

/* `.woocommerce-cart .wc-proceed-to-checkout a.checkout-button` (0,3,1) sets
   `font-size:1.25em; padding:1em; display:block`, and `.woocommerce-cart
   .wc-proceed-to-checkout` (0,2,0) adds `padding:1em 0`. The rule above is 0,1,0 and lost:
   the button measured 20px type in a 62px box. [el.96 15/n 600, padding 1px 6px, 328x50,
   radius 6px, transparent border over the same navy fill] */
.woocommerce-cart .jd-summary .wc-proceed-to-checkout { padding: 0; }

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button.jd-summary__checkout,
.woocommerce-page .wc-proceed-to-checkout a.checkout-button.jd-summary__checkout {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-weight: 600;
	line-height: normal;
	padding: 1px var(--jd-space-3);
	min-block-size: 50px;
	inline-size: 100%;
	border: 1px solid transparent;
	border-radius: var(--jd-radius-btn);
	margin: 0 0 var(--jd-space-5);
	text-align: center;
}

.jd-summary__methods {
	text-align: center;
	font-size: 10.5px;
	line-height: normal;                   /* same as .jd-summary__vat: a <p> outside the table [el.99 15px] */
	color: var(--jd-text-muted);
	margin: 0;
}

/* The SAR glyph is an inline SVG injected by new-saudi-currency-symbol at a fixed pixel
   size and a fixed vertical-align. Left alone it does not scale with the number beside
   it, so every price on the site would be typographically off by a few pixels - most
   visibly in the 21px cart total next to a 16px glyph. */
.riyal-svg {
	inline-size: .8em;
	block-size: .8em;
	vertical-align: baseline;
	margin-inline-start: .15em;
}

/* ---- Empty states ------------------------------------------------------- */

.jd-empty--panel {
	background-color: var(--jd-surface);
	border: var(--jd-border);
	border-radius: var(--jd-radius-card);
	padding: var(--jd-space-20);
	text-align: center;
}

.jd-empty--panel .jd-empty__title { font-size: var(--jd-fs-title); margin-block-end: var(--jd-space-4); }

/*
 * The prototype's empty-cart panel is larger than the shared one screens 01/05/14 use:
 * [store.dc.html cartEmpty branch: padding 56px; title Amiri 700 24px #18295E]. Scoped to
 * the cart so the shared block keeps the values its own screens were measured against.
 */
/* The hairline under the head sits outside both branches in the prototype
   (store.dc.html: `border-top:1px solid #DBCFB8; margin:6px 0 24px`), so the empty state
   needs it too - the filled state already carries it on .jd-cart__layout. Drawn on the
   head rather than on the panel: the panel is the card and already has four borders. */
.jd-cart--empty .jd-cart__head {
	padding-block-end: var(--jd-space-4);   /* the prototype's head margin 8px and divider margin 6px are
	                                           adjacent siblings: the collapse resolves to 8, not 6 */
	border-block-end: var(--jd-border);
	margin-block-end: var(--jd-space-12);
}

.jd-cart--empty .jd-empty--panel { padding: 56px; }
.jd-cart--empty .jd-empty__title { font-size: 24px; }

/* [store.dc.html cartEmpty branch: height 46px; padding 0 30px; 14px/600; border 1px
   transparent]. Scoped: .jd-btn--primary carries the 44px touch-target floor for every
   other screen and must keep it. */
.jd-cart--empty .jd-empty--panel .jd-btn--primary {
	min-block-size: 46px;
	padding-inline: 30px;
	font-size: 14px;
	border-color: transparent;
}

.jd-empty--panel .jd-empty__body {
	font-size: var(--jd-fs-xs);
	color: var(--jd-text-secondary);
	margin-block-end: var(--jd-space-10);
}

/* ======================================================================== *
 * Checkout (prototype screens 10 + 11)
 *
 * Screens 10 and 11 are one URL. sms-global-services swaps the whole checkout template
 * for its phone form until the number is verified, so the step bar is rendered from
 * page.php and both stages share this file.
 * ======================================================================== */

/* ---- Step bar ----------------------------------------------------------- */

/* 30px, not var(--jd-space-9) 18px: both prototype containers declare `padding: 30px 24px ...`
   and both widths agree - el.34 y155 minus the header's bottom 125 at 1440, el.23 y127 minus 97
   at 390. Screen 11's prototype uses the same 30. */
.jd-steps-bar { padding-block: 30px 0; }

.jd-steps-bar__list {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--jd-space-5);
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--jd-fs-2xs);
	font-weight: 500;
	line-height: normal;
}

.jd-steps-bar__item {
	display: flex;
	align-items: center;
	gap: 7px;
	color: var(--jd-text-muted);
}

.jd-steps-bar__link {
	display: flex;
	align-items: center;
	gap: 7px;
	color: inherit;
	text-decoration: none;
}

.jd-steps-bar__dot {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 26px;
	block-size: 26px;
	border-radius: 50%;
	border: var(--jd-border);
	font-size: 11.5px;
	flex-shrink: 0;
}

.jd-steps-bar__item--done { color: var(--jd-emerald); }

.jd-steps-bar__item--done .jd-steps-bar__dot {
	background-color: var(--jd-emerald);
	border-color: var(--jd-emerald);
	color: var(--jd-on-navy);
}

.jd-steps-bar__item--now { color: var(--jd-navy); }

.jd-steps-bar__item--now .jd-steps-bar__dot {
	background-color: var(--jd-navy);
	border-color: var(--jd-navy);
	color: var(--jd-on-navy);
}

.jd-steps-bar__rule {
	inline-size: 34px;
	block-size: 1px;
	background-color: var(--jd-hairline);
	flex: 0 0 auto;
}

.jd-steps-bar__rule--done { background-color: var(--jd-emerald); }

/* ---- Step bar: screen 10's own numbers ---------------------------------
 *
 * The base block above is screen 11's contract and stays that way. Screen 10 draws a
 * tighter bar - store.dc.html:833 against :884 - so its values go behind a modifier that
 * template-parts/checkout/steps.php adds only while the OTP phone stage is on screen.
 *
 * There is no @media block here any more: the previous one hid every label below 768 and
 * shrank the rule to 18px. Both prototypes keep all five labels at 390 and wrap them onto
 * two centred rows, which the base flex-wrap already does. [10: el.23/26/29/32/35] */
.jd-steps-bar--otp .jd-steps-bar__list { gap: var(--jd-space-4); font-size: 11.5px; }  /* 8px; el.34 font 11.5 */
.jd-steps-bar--otp .jd-steps-bar__item { gap: var(--jd-space-3); }                     /* 6px, declared so a later base change for 11 cannot leak in */
.jd-steps-bar--otp .jd-steps-bar__link { gap: var(--jd-space-3); }
.jd-steps-bar--otp .jd-steps-bar__dot  { inline-size: 24px; block-size: 24px; font-size: 11px; }  /* el.35/38/41/44/47 */

/* el.36/39/42/45 box 26x1. Steps and rules are sibling list entries, so the list's 8px
   gap applies equally on both sides. Checked against el.34 x906 (right edge 961),
   el.36 x872 (right edge 898), and el.37 right edge 864. */
.jd-steps-bar--otp .jd-steps-bar__rule { inline-size: 26px; }

/* ---- Layout ------------------------------------------------------------- */

.jd-checkout { padding-block: var(--jd-space-9) var(--jd-space-24); }

.jd-checkout__guest {
	background-color: var(--jd-surface);
	border: var(--jd-border);
	border-radius: var(--jd-radius-btn);
	padding: var(--jd-space-6) var(--jd-space-9);
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--jd-space-6);
	flex-wrap: wrap;
	margin-block-end: var(--jd-space-10);
}

.jd-checkout__guestlede { font-size: var(--jd-fs-xs); font-weight: 600; color: var(--jd-navy); }

.jd-checkout__guestlink {
	font-size: var(--jd-fs-2xs);
	font-weight: 500;
	color: var(--jd-text-secondary);
	border-block-end: 1px solid transparent;
}

.jd-checkout__guestlink:hover { color: var(--jd-navy); border-block-end-color: var(--jd-navy); }

/* Progressive enhancement: the full review remains visible until checkout.js has copied
   WooCommerce's current total into the measured narrow summary disclosure. */
.jd-checkout__summarybar { display: none; }

.jd-checkout__summarylabel {
	display: inline-flex;
	align-items: baseline;
	min-inline-size: 0;
}

.jd-checkout__summarytotal {
	font-family: var(--jd-font-mono);
	font-size: var(--jd-fs-xs);
	font-weight: 600;
}

.jd-checkout__summaryicon {
	flex-shrink: 0;
	font-family: var(--jd-font-mono);
	font-size: var(--jd-fs-xs);
	font-weight: 400;
	color: var(--jd-text-muted);
}

.jd-checkout__form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 370px;
	gap: var(--jd-space-12);
	align-items: start;
}

/* Checkout's #order_review keeps only the totals table now (payment is relocated in
   inc/woocommerce.php), and display:contents lets that table sit directly in the grid
   while the wrapper stays in the DOM for plugins that address it. WooCommerce reuses
   this ID in form-pay.php, where flattening the form breaks the pending-payment page. */
.woocommerce-checkout .jd-checkout__form #order_review { display: contents; }
.woocommerce-checkout .jd-checkout__form #order_review[hidden] { display: none; }

.jd-checkout__details { grid-column: 1; }
.jd-checkout__section--payment { grid-column: 1; }
.jd-checkout__section--notes { grid-column: 1; }

/* WooCommerce floats both col2-set children into half of the checkout content column.
   The prototype uses one full-width details stack; .jd-fields owns its internal columns. */
.woocommerce .jd-checkout__details.col2-set .col-1,
.woocommerce .jd-checkout__details.col2-set .col-2,
.woocommerce-page .jd-checkout__details.col2-set .col-1,
.woocommerce-page .jd-checkout__details.col2-set .col-2 {
	float: none;
	inline-size: 100%;
}

.jd-checkout__reviewhead {
	grid-column: 2;
	grid-row: 1;
	/* The card carries its own caption; this heading stays for screen readers and for
	   plugins that anchor to #order_review_heading. */
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.jd-summary--review {
	grid-column: 2;
	grid-row: 1 / span 4;
	position: sticky;
	inset-block-start: 96px;
}

@media (max-width: 1080px) {
	.jd-checkout[data-jd-summary-ready] > .jd-checkout__summarybar {
		display: flex;
		inline-size: 100%;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--jd-space-6);
		background-color: var(--jd-surface);
		border: var(--jd-border);
		border-radius: var(--jd-radius-card);
		padding: 13px var(--jd-space-9);
		margin-block-end: var(--jd-space-8);
		font-size: var(--jd-fs-xs);
		font-weight: 600;
		line-height: normal;
		color: var(--jd-navy);
		text-align: start;
		cursor: pointer;
	}

	.jd-checkout__form { grid-template-columns: minmax(0, 1fr); }

	.jd-checkout__details,
	.jd-checkout__section--payment,
	.jd-checkout__section--notes,
	.jd-summary--review {
		grid-column: 1;
		grid-row: auto;
	}

	/* The disclosure controls the summary at the top of the narrow form; details and
	   payment follow in the prototype's reading order. */
	.jd-checkout__details { order: 1; }
	.jd-summary--review { order: 0; position: static; }
	.jd-checkout__section--notes { order: 3; }
	.jd-checkout__section--payment { order: 4; }
}

/* ---- Sections ----------------------------------------------------------- */

.jd-checkout__section {
	background-color: var(--jd-surface);
	border: var(--jd-border);
	border-radius: var(--jd-radius-card);
	box-shadow: var(--jd-shadow-card);
	padding: var(--jd-space-11);
	margin-block-end: var(--jd-space-9);
}

/* Hook wrappers may retain empty structural divs, so hide sections only when none of the
   checkout content roots exist. [11 plan F3; stale 46px shipping/notes cards] */
.jd-checkout__section:not(:has(h2, .jd-fields > *, .shipping_address)) { display: none; }

.jd-checkout__legend {
	display: flex;
	align-items: baseline;
	gap: var(--jd-space-6);
	margin: 0 0 var(--jd-space-9);
	font-family: var(--jd-font-display);
	font-size: 19px;
	font-weight: 700;
	line-height: normal;
	color: var(--jd-navy);
}

.jd-checkout__step {
	font-family: var(--jd-font-display);
	font-size: var(--jd-space-12);
	color: var(--jd-brass);
	line-height: 1;
}

/* The hairline that runs from the legend to the edge of the card. */
.jd-checkout__legend::after {
	content: "";
	flex: 1;
	block-size: 1px;
	background-color: var(--jd-hairline);
}

.jd-checkout__note {
	border: 1px solid rgb(24 41 94 / .3);
	border-radius: var(--jd-radius-btn);
	padding: var(--jd-space-4) var(--jd-space-7);
	font-size: var(--jd-fs-2xs);
	color: var(--jd-navy);
	margin-block: 0 var(--jd-space-8);
}

.jd-checkout__shiptoggle { margin-block-end: var(--jd-space-8); }

/* ---- Fields ------------------------------------------------------------- */

.jd-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--jd-space-7);
}

/* Core's form-row width and float rules otherwise shrink each grid cell to 47%. */
.woocommerce form .jd-fields .form-row,
.woocommerce-page form .jd-fields .form-row {
	float: none;
	inline-size: auto;
	overflow: visible;
}

@media (max-width: 768px) {
	.jd-fields { grid-template-columns: 1fr; }
	.jd-checkout__form .jd-fields { grid-template-columns: 1fr 1fr; }
}

/* WooCommerce's own width classes decide which fields span the row; honouring them means
   a plugin that adds a wide field gets a wide field without touching the theme. */
.jd-fields .form-row-wide,
.jd-fields .form-row-first + .form-row-wide,
.jd-fields #order_comments_field,
.jd-fields .create-account { grid-column: 1 / -1; }

.jd-field { margin: 0; padding: 0; }

.jd-label-field,
.jd-fields label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--jd-ink);
	margin-block-end: var(--jd-space-3);
}

/* Beat WooCommerce's `.woocommerce form .form-row label { line-height: 2 }`. */
.woocommerce form .jd-checkout__section .form-row label,
.woocommerce-page form .jd-checkout__section .form-row label { line-height: normal; }

.jd-fields .required { color: var(--jd-danger); text-decoration: none; }
.jd-fields .optional { color: var(--jd-text-muted); font-weight: 400; }
.jd-checkout__hint { font-weight: 400; color: var(--jd-text-muted); }
.jd-fields .description {
	display: block;
	margin-block-start: 5px;
	font-size: 11px;
	line-height: normal;
	color: var(--jd-emerald);
}

.jd-checkout__phone {
	display: grid;
	align-content: start;
	min-inline-size: 0;
}

.jd-checkout__verifiedrow {
	display: flex;
	align-items: center;
	gap: var(--jd-space-5);
	margin-block-start: var(--jd-space-3);
}

.jd-checkout__verified {
	font-size: 10.5px;
	font-weight: 500;
	color: var(--jd-emerald);
	padding: var(--jd-space-1) var(--jd-space-5);
	border: 1px solid rgb(27 94 67 / .4);
	border-radius: var(--jd-radius-tag);
}

.jd-checkout__verifiednote { font-size: 10.5px; color: var(--jd-text-muted); }

.jd-checkout__change {
	font-size: 11px;
	font-weight: 500;
	color: var(--jd-navy);
	border-block-end: 1px solid var(--jd-navy);
}

.jd-input,
.jd-fields input[type="text"],
.jd-fields input[type="tel"],
.jd-fields input[type="email"],
.jd-fields input[type="password"],
.jd-fields textarea,
.jd-fields select,
.jd-fields .select2-container .select2-selection {
	inline-size: 100%;
	min-block-size: 46px;
	padding-inline: var(--jd-space-7);
	border: var(--jd-border);
	border-radius: var(--jd-radius-btn);
	background-color: var(--jd-surface);
	color: var(--jd-ink);
	font-family: var(--jd-font-ui);
	font-size: var(--jd-fs-sm);
	outline: none;
	transition: border-color var(--jd-transition);
}

/* WooCommerce's `.woocommerce form .form-row input.input-text` carries greater
   specificity than the component rule above. Keep the measured 46px / 14px / r6
   input chrome on checkout and account forms without changing inputs elsewhere. */
.woocommerce form .jd-fields .form-row input.input-text,
.woocommerce-page form .jd-fields .form-row input.input-text {
	padding-block: 0;
	padding-inline: var(--jd-space-7);
	border: var(--jd-border);
	border-radius: var(--jd-radius-btn);
}

.jd-fields .jd-field input[readonly] {
	background-color: var(--jd-paper-deep);
	color: var(--jd-text-secondary);
}

.jd-fields textarea { min-block-size: 96px; padding-block: var(--jd-space-4); resize: vertical; }

.jd-input:focus,
.jd-fields input:focus,
.jd-fields textarea:focus,
.jd-fields select:focus { border-color: var(--jd-navy); }

.jd-checkbox {
	display: flex;
	align-items: center;
	gap: var(--jd-space-4);
	font-size: var(--jd-fs-xs);
	color: var(--jd-ink);
	cursor: pointer;
}

.jd-checkbox input { inline-size: 18px; block-size: 18px; accent-color: var(--jd-navy); }

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

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

@media (max-width: 1080px) { .jd-payment__methods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px)  { .jd-payment__methods { grid-template-columns: minmax(0, 1fr); } }

.jd-payment__methods > li {
	border: var(--jd-border);
	border-radius: var(--jd-radius-btn);
	padding: var(--jd-space-6) var(--jd-space-7);
	transition: border-color var(--jd-transition);
}

.jd-payment__methods > li:hover { border-color: var(--jd-navy); }

/* WooCommerce marks the chosen gateway's <li> with .woocommerce-checkout-payment-method
   plus a checked radio; the selected look keys off :has() so it survives the AJAX
   replacement of the whole #payment block. */
.jd-payment__methods > li:has(input[type="radio"]:checked) {
	border-color: var(--jd-navy);
	background-color: var(--jd-surface);
	box-shadow: var(--jd-shadow-card);
}

.jd-payment__methods label {
	display: flex;
	align-items: center;
	gap: var(--jd-space-4);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--jd-navy);
	cursor: pointer;
	margin: 0;
}

.woocommerce-checkout #payment.jd-payment ul.jd-payment__methods input[type="radio"] {
	appearance: none;
	inline-size: 15px;
	block-size: 15px;
	flex-shrink: 0;
	margin: 0;
	margin-block-start: var(--jd-space-1);
	border: var(--jd-border);
	border-radius: 50%;
	background-color: var(--jd-on-navy);
}

.woocommerce-checkout #payment.jd-payment ul.jd-payment__methods input[type="radio"]:checked {
	border: 4px solid var(--jd-navy);
}

/* Gateway logos ship at whatever size the provider gives them. */
.woocommerce-checkout #payment.jd-payment ul.jd-payment__methods label img {
	max-block-size: 24px;
	inline-size: auto;
	margin: 0;
	margin-inline-start: auto;
}

.jd-payment__methods .payment_box p:last-child { margin-block-end: 0; }

.jd-payment__place {
	margin-block-start: var(--jd-space-9);
	padding-block-start: var(--jd-space-9);
	border-block-start: var(--jd-border);
}

.woocommerce .jd-checkout__form button.button.jd-payment__submit,
.woocommerce-page .jd-checkout__form button.button.jd-payment__submit {
	inline-size: 100%;
	min-block-size: 52px;
	font-size: 15px;
	line-height: normal;
	padding-block: 1px;
	padding-inline: var(--jd-space-3);
	border-color: transparent;
}

.woocommerce #payment #place_order.jd-payment__submit,
.woocommerce-page #payment #place_order.jd-payment__submit {
	float: none;
	inline-size: 100%;
	margin: 0;
}

.jd-payment__place .woocommerce-terms-and-conditions-wrapper { margin-block-end: var(--jd-space-8); }

.jd-payment__assure {
	font-size: 10.5px;
	line-height: 19px;
	color: var(--jd-text-muted);
	text-align: center;
	margin: var(--jd-space-5) 0 0;
}

/* Core's checkout selectors otherwise paint a grey payment panel and physical alignment. */
.woocommerce-checkout #payment.jd-payment,
.woocommerce-cart #payment.jd-payment { background: none; border-radius: 0; }

.woocommerce-checkout #payment.jd-payment ul.jd-payment__methods {
	padding: 0;
	border-block-end: 0;
	text-align: start;
}

.woocommerce-checkout #payment.jd-payment ul.jd-payment__methods > li {
	line-height: inherit;
	text-align: start;
}

.woocommerce-checkout #payment.jd-payment div.jd-payment__place { padding: 0; }

.woocommerce-checkout #payment.jd-payment div.payment_box {
	background: none;
	padding: 0;
	margin: 0;
	border-radius: 0;
	border-block-start: 0;
	font-size: 10.5px;
	line-height: 1.7;
	color: var(--jd-text-secondary);
}

.woocommerce-checkout #payment.jd-payment div.payment_box::before { content: none; }

/* ---- The review card ---------------------------------------------------- */

/* Styled onto the <table> itself, never onto a wrapper: update_order_review replaces this
   element by selector, so a wrapper emitted from review-order.php would nest one level
   deeper on every totals refresh. */
.jd-summary--review {
	display: block;
	inline-size: 100%;
	border-collapse: collapse;
	background-color: var(--jd-surface);
	border: var(--jd-border);
	border-radius: var(--jd-radius-card);
	box-shadow: var(--jd-shadow-card);
	padding: var(--jd-space-9) var(--jd-space-10);
}

/* WooCommerce's shop-table skin has greater specificity than the component class. */
.woocommerce table.shop_table.jd-summary--review,
.woocommerce-page table.shop_table.jd-summary--review {
	border: var(--jd-border);
	border-radius: var(--jd-radius-card);
	margin: 0;
	text-align: start;
}

@media (max-width: 1080px) {
	.woocommerce table.shop_table.jd-summary--review,
	.woocommerce-page table.shop_table.jd-summary--review { margin-block-end: var(--jd-space-9); }
}

.woocommerce table.shop_table.jd-summary--review th,
.woocommerce table.shop_table.jd-summary--review td {
	padding: 0;
	border-block-start: 0;
	line-height: normal;
	vertical-align: baseline;
}

.woocommerce table.shop_table.jd-summary--review .jd-summary__row th { font-weight: 400; }
.woocommerce table.shop_table.jd-summary--review .jd-summary__row--total th { font-weight: 600; }
.woocommerce table.shop_table.jd-summary--review tfoot td { font-weight: 400; }
.woocommerce table.shop_table.jd-summary--review .jd-summary__row--total td { font-weight: 500; }
.woocommerce table.shop_table.jd-summary--review .jd-summary__row--total td strong { font-weight: inherit; }

.jd-summary--review caption,
.jd-summary--review thead,
.jd-summary--review tbody,
.jd-summary--review tfoot { display: block; }

.jd-summary--review .jd-summary__title {
	text-align: start;
	font-family: var(--jd-font-display);
	font-size: 19px;
	font-weight: 700;
	color: var(--jd-navy);
	padding-block-end: var(--jd-space-5);
	margin-block-end: var(--jd-space-5);
}

.jd-summary--review > tbody {
	display: flex;
	flex-direction: column;
	gap: var(--jd-space-5);
	margin-block-end: var(--jd-space-6);
}

.jd-summary__item {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--jd-space-5);
	padding-block: 0;
	border-block-end: 0;
	font-size: var(--jd-fs-2xs);
	line-height: normal;
}

.jd-summary__item + .jd-summary__item { margin-block-start: var(--jd-space-5); }
.jd-summary--review > tbody > .jd-summary__item + .jd-summary__item { margin-block-start: 0; }

.jd-summary__item .product-name {
	display: flex;
	align-items: flex-start;
	/* 14px clear space between the 34px cover and its title, [11: el.108–110]. */
	gap: var(--jd-space-7);
	flex: 1;
	color: var(--jd-ink);
	min-inline-size: 0;
}
.jd-summary__item .product-total { flex-shrink: 0; text-align: end; color: var(--jd-navy); }

.jd-summary__thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 34px;
	inline-size: 34px;
	block-size: 44px;
	padding: 3px;
	background-color: var(--jd-paper);
	border: var(--jd-border);
	border-radius: var(--jd-radius-tag);
	overflow: hidden;
	box-sizing: border-box;
}

.jd-summary__thumb img,
.jd-summary__thumbfallback {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.jd-summary__thumbfallback { background-color: var(--jd-navy); }

.jd-summary__lines { flex: 1; min-inline-size: 0; }

.jd-summary__book {
	display: block;
	font-size: 12.5px;
	line-height: normal;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.jd-summary__item .product-quantity {
	display: block;
	font-family: var(--jd-font-ui);
	font-size: 10px;
	font-weight: 400;
	color: var(--jd-text-muted);
}

.jd-summary--review .jd-summary__row { border-block-end: 0; padding-block: var(--jd-space-4); }
.jd-summary--review tfoot .jd-summary__row:first-child { border-block-start: var(--jd-border); }
.jd-summary--review .jd-summary__row--total {
	border-block-start: 1px solid var(--jd-text-secondary);
	padding-block: var(--jd-space-6) var(--jd-space-1);
}
.jd-summary--review .jd-summary__row--total td { font-size: 20px; }

/* Core owns the shipping row markup, so it carries no jd-summary__row class. */
.jd-summary--review tfoot tr.woocommerce-shipping-totals {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--jd-space-4);
	padding-block: 0 var(--jd-space-4);
	font-size: 12px;
	color: var(--jd-text-secondary);
}

.woocommerce table.shop_table.jd-summary--review tfoot tr.woocommerce-shipping-totals th,
.woocommerce table.shop_table.jd-summary--review tfoot tr.woocommerce-shipping-totals td {
	padding: 0;
	border-block-start: 0;
	line-height: inherit;
	font-weight: 400;
}

.jd-summary--review tfoot tr.woocommerce-shipping-totals td,
.jd-summary--review tfoot tr.woocommerce-shipping-totals td label {
	font-family: var(--jd-font-mono);
	font-size: 12px;
	color: var(--jd-ink);
	text-align: end;
}

.jd-summary--review tfoot tr.woocommerce-shipping-totals td ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.jd-summary--review tfoot tr.woocommerce-shipping-totals td ul#shipping_method li { margin: 0; }
.jd-summary--review tfoot tr.woocommerce-shipping-totals td ul#shipping_method .amount {
	font-weight: inherit;
}

.jd-summary--review tfoot .jd-summary__row:last-child { border-block-end: 0; }

.jd-summary__row--vat th,
.jd-summary__row--vat td { font-size: 10.5px; color: var(--jd-text-muted); }

/* ======================================================================== *
 * My Account (prototype screens 13, 18–22)
 * ======================================================================== */

/* store.dc.html:1222 - measured account host padding is 34px 24px 72px. */
.jd-account { padding-block: 34px 72px; }

.jd-account__head { margin-block-end: var(--jd-space-4); }
.jd-account__title { font-size: var(--jd-fs-display); line-height: 1.4; margin: 0; }

.jd-account__layout {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: var(--jd-space-12);
	align-items: start;
	padding-block-start: var(--jd-space-12);
	border-block-start: var(--jd-border);
	margin-block-start: var(--jd-space-3);
}

/*
 * WooCommerce's own layout stylesheet floats these two at 30% / 68% of whatever box
 * they sit in (woocommerce-layout-rtl.css, specificity 0,2,0, outside any media query).
 * They are grid items here, so the float is inert but the width is not: it resolves
 * against the grid TRACK and shrinks the 250px rail to 75px. Three classes (0,3,0) so
 * this wins regardless of stylesheet enqueue order.
 *
 * It also fixes the 769-1080 band, which nothing else does: WooCommerce's own restore
 * (float:none;width:100%) ships in woocommerce-smallscreen-rtl.css, enqueued at
 * max-width:768px only, so between 769 and 1080 the theme stacks the two blocks while
 * WooCommerce still renders them a third and two thirds wide.
 */
.woocommerce-account .jd-account__layout > .jd-account__nav,
.woocommerce-account .jd-account__layout > .jd-account__content {
	inline-size: 100%;
	float: none;
}

@media (max-width: 1080px) {
	.jd-account__layout { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Navigation rail ---------------------------------------------------- */

.jd-account__nav {
	background-color: var(--jd-surface);
	border: var(--jd-border);
	border-radius: var(--jd-radius-card);
	box-shadow: var(--jd-shadow-card);
	padding: var(--jd-space-7);
}

.jd-account__identity {
	display: flex;
	align-items: center;
	gap: var(--jd-space-6);
	padding: var(--jd-space-3) var(--jd-space-4) var(--jd-space-7);
	/*
	 * el.37 measures border-bottom: 1px solid rgb(219,207,184) - the cream hairline.
	 * The ink here until now came from the .md's border column, which prints
	 * border-TOP-color; el.37's border-top-width is 0px, so that ink never renders.
	 * Identical in the 13, 20 and 22 JSONs.
	 */
	border-block-end: var(--jd-border);
	margin-block-end: var(--jd-space-5);
}

.jd-account__avatar {
	inline-size: 42px;
	block-size: 42px;
	border-radius: 50%;
	background-color: var(--jd-navy);
	color: var(--jd-on-navy);
	font-family: var(--jd-font-display);
	font-size: 19px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.jd-account__who { min-inline-size: 0; }

/* el.39 is 13.5/normal in a 21px box and el.40 10/normal in a 13px box; the body's 1.7
   made them 23 and 17. The 42px avatar governs the 63px identity block either way, so
   this never showed up as a box mismatch - and the matcher cannot pair either string,
   because the prototype's persona is a different person from any real customer. */
.jd-account__name {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	line-height: normal;
	color: var(--jd-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.jd-account__email {
	display: block;
	font-size: 10px;
	line-height: normal;
	color: var(--jd-text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.jd-account__menu {
	display: flex;
	flex-direction: column;
	gap: var(--jd-space-1);
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--jd-fs-xs);
}

.jd-account__menu a {
	display: block;
	/* 9px is measured, not a token: el.41 pad 9 12, so 19 + 9 + 9 = 37 = the row height. */
	padding-block: 9px;
	padding-inline: var(--jd-space-6);
	border-radius: var(--jd-radius-btn);
	line-height: normal;                /* el.42/43/44/45 - the inherited 1.7 makes the row 38-60px */
	color: var(--jd-text-secondary);    /* el.43/44/45 #566078 */
	transition: background-color var(--jd-transition), color var(--jd-transition);
}

.jd-account__menu a:hover { background-color: var(--jd-paper); }

/* WooCommerce marks the current endpoint with .is-active. */
.jd-account__menu .is-active a {
	background-color: var(--jd-navy);
	color: var(--jd-on-navy);
	font-weight: 600;                   /* el.42 */
}

.jd-account__menu .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--jd-danger); }

.jd-account__menu .woocommerce-MyAccount-navigation-link--customer-logout a:hover {
	background-color: var(--jd-paper);
	color: var(--jd-danger);
}

/* ---- Content panels ----------------------------------------------------- */

.jd-account__content { min-inline-size: 0; }

.jd-panel {
	background-color: var(--jd-surface);
	border: var(--jd-border);
	border-radius: var(--jd-radius-card);
	box-shadow: var(--jd-shadow-card);
	overflow: hidden;
	margin-block-end: var(--jd-space-9);
}

.jd-panel__head {
	padding: var(--jd-space-9) var(--jd-space-10);
	/* el.48 measures border-bottom: 1px solid rgb(219,207,184). Same .md border-column
	   artifact as .jd-account__identity - border-top-width is 0px there. */
	border-block-end: var(--jd-border);
}

.jd-panel__title {
	font-family: var(--jd-font-display);
	font-size: var(--jd-space-10);
	font-weight: 700;
	/* el.49 is amiri 20/normal in a 35px box - the heading rule's 1.5 makes it 30. */
	line-height: normal;
	color: var(--jd-navy);
	margin: 0 0 var(--jd-space-1);
}

/* el.50 is 12/normal in an 18px box; --jd-lh-body 1.7 would make it 20.4. */
.jd-panel__lede {
	font-size: var(--jd-fs-2xs);
	line-height: normal;
	color: var(--jd-text-secondary);
	margin: 0;
}
.jd-panel__body { padding: var(--jd-space-9) var(--jd-space-10); }
.jd-panel__subtitle { font-size: var(--jd-fs-base); margin: 0 0 var(--jd-space-6); }

.jd-panel__actions {
	display: flex;
	gap: var(--jd-space-5);
	flex-wrap: wrap;
	padding: 0 var(--jd-space-10) var(--jd-space-10);
	margin: 0;
}

.jd-panel .jd-empty { padding: var(--jd-space-20) var(--jd-space-10); text-align: center; }

/*
 * The panel footnote (screen 20 el.81, 876x44 = 13 + 18 + 13). It sits OUTSIDE the order
 * loop in the prototype (store.dc.html:1308), so it renders over the empty state too.
 * padding is 13px on all four sides - a literal, as measured; the scale has no 13 step.
 */
.jd-panel__foot {
	margin: 0;
	padding: 13px;
	text-align: center;
	font-size: 11.5px;
	line-height: normal;
	color: var(--jd-text-muted);                  /* rgb(110,118,137) - el.81 */
	border-block-start: var(--jd-border);         /* 1px rgb(219,207,184) - el.81 border-TOP */
}

/*
 * WooCommerce puts an <a class="button"> inside its notices. layout.css:1005-1012 already
 * declares what this theme wants one to look like - navy, 600, underlined, in flow - i.e.
 * a link, not a pill. It never clears WooCommerce's own .woocommerce a.button skin, so the
 * #e9e6ed purple-grey background and its padding survived underneath and the email-confirm
 * notice on every account screen drew a grey pill with underlined text inside it.
 *
 * This only removes that skin so the declared intent shows through; it invents no box. It
 * is scoped under .jd-account and lives here rather than in layout.css's shared notice
 * block so no screen outside the account shell can move. Unmeasured - the prototype has no
 * counterpart, because the notice is data (an unconfirmed customer email).
 */
.jd-account div.woocommerce-info .button,
.jd-account div.woocommerce-message .button,
.jd-account ul.woocommerce-error .button {
	background-color: transparent;
	padding: 0;
}

/* ---- Digital codes table (prototype screen 13) -------------------------- */

/*
 * The track list is arithmetic, not a guess. 1440: inner 836 (876 - 2x20), free
 * 836 - 40 gaps = 796, 796 / 16fr = 49.75 -> 248.75 / 111.9375 / 236.3125 /
 * 111.9375 / 87.0625, which is el.51 exactly. 390: inner 300, free 260, 260 / 16
 * = 16.25 -> 81.25 / 36.5625 / 77.1875 / 36.5625 / 28.4375 = el.40 exactly.
 * fr also survives the 1081-1440 squeeze, where fixed px tracks would overflow.
 */
.jd-codes__head,
.jd-codes__row {
	display: grid;
	grid-template-columns: 5fr 2.25fr 4.75fr 2.25fr 1.75fr;
	gap: var(--jd-space-5);                                   /* 10px - el.51 / el.40 */
	align-items: center;
}

.jd-codes__head {
	padding: 9px var(--jd-space-10);                          /* el.51 pad 9 20 */
	background-color: var(--jd-paper);                        /* #F6F1E6 - el.51 */
	/* el.51 measures border-bottom: 1px solid rgb(219,207,184); the #566078 is its
	   border-TOP-color, and border-top-width is 0px. Same artifact again. */
	border-block-end: var(--jd-border);
}

.jd-codes__th {
	font-size: 10px;                                          /* el.52-56 */
	line-height: normal;
	letter-spacing: .8px;
	color: var(--jd-text-secondary);
}

/*
 * 13px block padding is arithmetic too: el.57 is 876x85 (84 + the 1px top border)
 * and its tallest cell is the code group el.63/64/66 at 58 tall - (84 - 58) / 2.
 * It also reproduces the cover plate's measured y: 365 + 13 + (58 - 42) / 2 = 386.
 */
.jd-codes__row {
	padding: 13px var(--jd-space-10);
	border-block-start: 1px solid var(--jd-paper-deep);       /* #EDE4D0 - el.57/71/85 */
}

/* Book cell - el.58/59/60/61 */
.jd-codes__book { display: flex; gap: var(--jd-space-5); align-items: center; }

.jd-codes__plate {                                            /* el.58: 32x42 */
	inline-size: 32px;
	block-size: 42px;
	padding: 3px;
	background-color: var(--jd-paper);
	border: var(--jd-border);
	border-radius: var(--jd-radius-tag);                      /* 4px */
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.jd-codes__cover { inline-size: 24px; block-size: 34px; object-fit: cover; }   /* el.59 */

.jd-codes__cover--fallback {                                  /* el.73/87: navy plate, 2px radius */
	background-color: var(--jd-navy);
	border-radius: 2px;
	display: block;
}

.jd-codes__titles { min-inline-size: 0; }

.jd-codes__title {                                            /* el.60 */
	display: block;
	font-family: var(--jd-font-latin);
	font-size: 13px;
	line-height: normal;
	color: var(--jd-ink);
	/* el.60's text is 319px inside a 207px box - the prototype clips it. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.jd-codes__pub {                                              /* el.61 */
	display: block;
	font-size: 9.5px;
	line-height: normal;
	letter-spacing: .57px;
	color: var(--jd-text-muted);
}

.jd-codes__date {                                             /* el.62 */
	font-size: 11.5px;
	line-height: normal;
	color: var(--jd-text-secondary);
}

/* Code cell - el.63 group is 236x58, flex row gap 6px */
.jd-codes__codecell {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jd-space-3);                                   /* 6px */
	align-items: center;
}

.jd-codes__value {                                            /* el.63 */
	font-family: var(--jd-font-mono);
	font-size: 10.5px;
	line-height: normal;
	letter-spacing: .84px;
	color: var(--jd-ink);
	user-select: all;
}

/*
 * Both forms are in the DOM and one is hidden; the UA sheet's [hidden] loses to any
 * author `display`, and this one sits in a flex row. Saying it here means a later
 * `display` on .jd-codes__value cannot silently reveal every full code at once.
 */
.jd-codes__value[hidden] { display: none; }

.jd-codes__btn {                                              /* el.64/65: 62x26 */
	padding: 0 9px;
	min-block-size: 26px;
	background-color: var(--jd-surface);
	border: var(--jd-border);
	border-radius: var(--jd-radius-tag);
	font-size: 10px;
	font-weight: 600;
	line-height: normal;
	color: var(--jd-navy);
}

.jd-codes__btn--copy {                                        /* el.66/67: 38x26, navy */
	background-color: var(--jd-navy);
	border-color: transparent;
	color: var(--jd-on-navy);
}

/* Activation cell - el.68 and its el.69 "+" */
.jd-codes__steps {
	/* el.68 is a 49x18 box that hugs its text, not a full-width summary row. */
	display: inline-block;
	font-size: 11.5px;
	font-weight: 500;
	line-height: normal;
	color: var(--jd-navy);
	border-block-end: 1px solid var(--jd-navy);               /* el.68 */
	cursor: pointer;
	list-style: none;
}

.jd-codes__steps::-webkit-details-marker { display: none; }

.jd-codes__plus {                                             /* el.69 */
	font-family: var(--jd-font-mono);
	font-size: 11px;
	font-weight: 500;
	color: var(--jd-text-muted);
}

/*
 * Panel chrome in the prototype - present with three rows and equally relevant with
 * none - so it renders unconditionally, and it carries the whole sentence as one
 * element's own text (el.99 / el.88 are a single node).
 */
.jd-codes__help {
	display: block;
	margin: 0;
	padding: 13px;                                            /* el.99 pad 13 */
	border-block-start: var(--jd-border);                     /* 1px #DBCFB8 - el.99 */
	font-size: 11.5px;
	line-height: normal;                                      /* 18 + 13 + 13 = 44 = el.99 */
	color: var(--jd-text-muted);                              /* #6E7689 - el.99 */
	text-align: center;
}

/* ---- Orders ------------------------------------------------------------- */

.jd-orders { list-style: none; margin: 0; padding: 0; }

/*
 * The row is a 70px band: el.51 measures padding 15/20 around a 40px tallest child
 * (the 39px ident, the 34px button). 15 is a literal, like .jd-tag's 3px - the spacing
 * scale steps 14 -> 16 and tokens.css forbids snapping a measured value to the nearest.
 * --jd-transition is .18s ease-out, which is store.dc.html:1299 exactly.
 */
.jd-orders__row {
	display: flex;
	align-items: center;
	gap: var(--jd-space-7);                       /* 14px - el.51 */
	flex-wrap: wrap;
	padding: 15px var(--jd-space-10);             /* el.51 pad 15 20 */
	border-block-start: 1px solid var(--jd-paper-deep);   /* rgb(237,228,208) - el.51 */
	transition: background-color var(--jd-transition);
}

/* store.dc.html:1299 style-hover="background:#F6F1E6" - measured, keep. */
.jd-orders__row:hover { background-color: var(--jd-paper); }

.jd-orders__ident { min-inline-size: 140px; flex-shrink: 0; }

/* el.52 is a 140x19 box at 12.5px, el.54 a 17px box at 11px - both line-height normal,
   where the body's 1.7 would make them 21 and 19. el.52 ends at 365 and el.54 starts at
   368, so the gap is 3px, not --jd-space-2's 4. 19 + 3 + 17 = the 39px ident. */
.jd-orders__no { display: block; font-size: 12.5px; font-weight: 600; line-height: normal; color: var(--jd-navy); }
.jd-orders__date { display: block; font-size: 11px; line-height: normal; color: var(--jd-text-muted); margin-block-start: 3px; }

/*
 * The title slot. store.dc.html:1302 is flex:1;min-width:180px, which resolves to the
 * measured 388px: 836 inner - 56 gaps - 140 ident - 70 pill - 76 total - 107 button.
 * el.55 is 13.5px/1.5 #1c2433. It also measures a PHYSICAL text alignment, toward the
 * page edge the ident sits on, and that is deliberately not copied: on an RTL page that
 * edge is the one the ident is on, but in English it is the opposite side, so the literal
 * value would push the title away from the ident. The logical `start` says the same thing
 * in both directions. The Latin-ness lives on the inner span (.jd-latin: EB Garamond,
 * direction ltr, unicode-bidi isolate), never on this block.
 */
.jd-orders__items {
	flex: 1;
	min-inline-size: 180px;
	text-align: start;
	font-size: 13.5px;
	line-height: 1.5;                             /* el.55 20.25px at 13.5 */
	color: var(--jd-ink);
}

/* el.58 is 14/normal 500 navy in an 18px box; the inherited 1.7 would make it 24. */
.jd-orders__total { font-size: var(--jd-fs-sm); font-weight: 500; line-height: normal; color: var(--jd-navy); }
.jd-orders__extra:empty { display: none; }

.jd-orders__status,
.jd-orders__total,
.jd-orders__actions { flex-shrink: 0; }

.jd-orders__actions { display: flex; gap: var(--jd-space-4); flex-wrap: wrap; margin-inline-start: auto; }

/*
 * el.60 is 11.5/600 with padding-inline 14 in a 107x34 box. .jd-btn--hairline's own
 * padding-inline is 24px (style.css) and .jd-btn's floor is 44px; this rule is 0,2,0 and
 * beats both. WooCommerce's 0,4,0 override needs .button, which this <a> does not carry.
 */
.jd-orders__actions .jd-btn {
	font-size: 11.5px;
	font-weight: 600;
	padding-inline: var(--jd-space-7);
	min-block-size: 34px;
}

/* store.dc.html:1305 style-hover="border-color:#18295E;transform:translateY(-1px)".
   transform stays out of the transition list - the prototype transitions border-color only. */
.jd-orders__actions .jd-btn:hover {
	border-color: var(--jd-navy);
	transform: translateY(-1px);
}

/* Order status. WooCommerce statuses are open-ended - this store registers wc-shipping
   through oh-cities-world - so the base tag styles every status and only the ones with a
   distinct meaning are picked out. An unknown status still renders legibly. */
/*
 * .jd-tag (style.css) supplies the padding 3/10, the 4px radius, the border and nowrap,
 * all of which el.56 measures. The three things it adds that el.56/el.57 do NOT measure
 * are neutralised here: 1.7 line-height (el.57 is normal in a 17px box, so 3 + 17 + 3 + 2
 * = the measured 25px pill), .05em tracking (.55px at 11px, above tolerance), and the
 * 10.5px this rule used to force where el.57 reads 11.
 */
.jd-orders__status {
	font-size: 11px;
	line-height: normal;
	letter-spacing: normal;
	border: var(--jd-border);
	color: var(--jd-text-secondary);
}

.jd-tag--completed { color: var(--jd-emerald); border-color: rgb(27 94 67 / .4); }
.jd-tag--processing { color: var(--jd-navy); border-color: rgb(24 41 94 / .35); }
/* el.56/el.57 measure the in-flight pill navy on rgba(24,41,94,.35). It was brass, and
   grep -rn "96793f" docs/design/ finds brass on hairline rules and Amiri numerals only —
   never on a status chip. .jd-tag--processing stays as it is; screen 12 el.79 measures
   that one neutral, and that correction belongs to screen 12's slice. */
.jd-tag--shipping { color: var(--jd-navy); border-color: rgb(24 41 94 / .35); }
.jd-tag--cancelled,
.jd-tag--failed,
.jd-tag--refunded { color: var(--jd-danger); border-color: rgb(140 59 46 / .45); }

/* ---- Addresses ---------------------------------------------------------- */

.jd-addresses {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--jd-space-7);
	padding: var(--jd-space-9) var(--jd-space-10);
}

@media (max-width: 768px) { .jd-addresses { grid-template-columns: 1fr; } }

.jd-address {
	background-color: var(--jd-surface);
	border: var(--jd-border);
	border-radius: var(--jd-radius-card);
	padding: var(--jd-space-8);
}

.jd-address__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--jd-space-5);
	margin-block-end: var(--jd-space-4);
}

.jd-address__title {
	font-family: var(--jd-font-ui);
	font-size: 13.5px;
	font-weight: 600;
	line-height: normal;
	color: var(--jd-ink);
	margin: 0;
}

.jd-address__badge {
	font-size: 10px;
	font-weight: 500;
	line-height: normal;
	color: var(--jd-brass);
	border: 1px solid rgb(150 121 63 / .5);
	border-radius: var(--jd-radius-tag);
	padding-block: var(--jd-space-1);
	padding-inline: 9px;
	white-space: nowrap;
}

.jd-address__body {
	font-style: normal;
	font-size: var(--jd-fs-2xs);
	line-height: 24px;
	color: var(--jd-text-secondary);
}

.jd-address__line { display: block; }

.jd-address__actions {
	display: flex;
	gap: var(--jd-space-7);
	border-block-start: 1px solid var(--jd-paper-deep);
	margin-block-start: var(--jd-space-6);
	padding-block-start: var(--jd-space-5);
	font-size: 11.5px;
	font-weight: 500;
	line-height: normal;
}

.jd-address__action {
	color: var(--jd-navy);
	border-block-end: 1px solid transparent;
}

.jd-address__action:hover {
	color: var(--jd-navy);
	border-block-end-color: var(--jd-navy);
	text-decoration: none;
}

.jd-address--add {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--jd-space-4);
	min-block-size: 120px;
	padding: var(--jd-space-13);
	color: var(--jd-text-secondary);
	background-color: transparent;
	border-style: dashed;
	text-align: center;
	transition: border-color var(--jd-transition), color var(--jd-transition);
}

.jd-address--add:hover {
	color: var(--jd-navy);
	border-color: var(--jd-navy);
}

.jd-address__addaction {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--jd-space-4);
	color: inherit;
}

.jd-address__addaction:hover {
	color: inherit;
	text-decoration: none;
}

.jd-address__plus {
	font-size: 20px;
	line-height: 20px;
}

.jd-address__addlabel {
	font-size: 12.5px;
	font-weight: 500;
	line-height: normal;
}

/* ---- Settings (prototype screen 22) --------------------------------------
 *
 * The prototype's panel is NOT WooCommerce's account-details form. It is four rows in a
 * single-column grid - full name · read-only verified mobile · email · masked password —
 * closed by a hairline actions row that is the grid's LAST CELL, not a panel-wide strip.
 * .jd-fieldset / .jd-fieldset__legend used to style the password fieldset here; they went
 * with it (no other template carried either class).
 *
 * Geometry, from docs/design/22-settings--1440.json unless a 390 element is named:
 *   el.47 panel 878x557 · el.48 head 876x92 · the form is the body - padding 20, gap 16,
 *   max-width 560 (store.dc.html:1347) -> 520 of content = el.51 box.w 520 @x481.
 *   At 390 the column caps it below 560: el.36 panel 342 -> el.40 content 300.
 */

.jd-panel__body--settings {
	display: grid;
	gap: var(--jd-space-8);          /* 16px - store.dc.html:1347 */
	max-inline-size: 560px;
	padding: var(--jd-space-10);     /* 20px on all four sides; the base body is 18/20 */
}

/*
 * WooCommerce ships `.woocommerce form .form-row label { line-height: 2 }` at 0,2,2, which
 * beats `.jd-fields label` (0,1,1) - that is the 12.5px/25px the report measured against
 * el.57's 11.5px/normal/17px. The template drops the form-row classes so the rule cannot
 * match at all; this is 0,3,1 so it still wins if a plugin puts them back.
 * .jd-fields label is NOT retuned: 12.5px is right for checkout, login and register.
 * [el.51/53/57/59 - 11.5px 600, line-height normal, margin-bottom 6, box 520x17]
 */
.woocommerce-account .jd-settings .jd-field label,
.woocommerce-account .jd-settings .jd-settings__label {
	display: block;
	font-size: 11.5px;
	font-weight: 600;
	line-height: normal;
	color: var(--jd-ink);
	margin-block-end: var(--jd-space-3);
}

/* el.52/54/58: 46px controls with zero block padding and normal line-height. */
.woocommerce-account .jd-settings .jd-input {
	padding-block: 0;
	line-height: normal;
}

/* The phone and password rows are a field plus a button, 8px apart. [store.dc.html:1354/:1366] */
.jd-settings__row {
	display: flex;
	gap: var(--jd-space-4);
}

.jd-settings__row--center { align-items: center; }   /* store.dc.html:1366 */

.jd-settings__row .jd-input {
	flex: 1;
	min-inline-size: 0;              /* el.54 457.438 = 520 - 8 gap - 54.5625 button */
}

/* «تغيير» - el.55/el.61: 55x46, 12/600 navy on the panel ground, 16px inline, cream 1px, r6. */
.jd-settings__ghost {
	flex-shrink: 0;
	min-block-size: 46px;            /* .jd-btn's floor is 44; el.55 box.h is 46 */
	padding-inline: var(--jd-space-8);
	font-size: var(--jd-fs-2xs);
	font-weight: 600;
	line-height: normal;
	text-align: center;
	text-decoration: none;
	color: var(--jd-navy);
	background-color: var(--jd-surface);
	border: var(--jd-border);
	border-radius: var(--jd-radius-btn);
}

/* store.dc.html:1356 style-hover also lifts it 1px; translateY is motion the tokens do not
   carry and no other control on this site has it, so only the border darkens. */
.jd-settings__ghost:hover,
.jd-settings__ghost:focus-visible {
	border-color: var(--jd-navy);
	text-decoration: none;
}

/* The verified number is read-only here - el.54: #EDE4D0 ground, #566078 ink. The
   .jd-input:focus navy border is deliberately left alone; a readonly input is focusable. */
.jd-settings__locked {
	direction: inherit;
	background-color: var(--jd-paper-deep);
	color: var(--jd-text-secondary);
}

/* «••••••••» - el.60. The only LTR island on this screen, and the only mono. */
.jd-settings__mask {
	flex: 1;
	min-inline-size: 0;
	display: flex;
	align-items: center;
	min-block-size: 46px;
	padding-inline: var(--jd-space-7);      /* 14px */
	font-family: var(--jd-font-mono);
	font-size: var(--jd-fs-sm);             /* 14px */
	line-height: normal;
	letter-spacing: 2.8px;                  /* el.60 - store.dc.html:1366 writes .2em */
	color: var(--jd-text-secondary);
	background-color: var(--jd-paper);      /* #F6F1E6, one step below the panel */
	border: var(--jd-border);
	border-radius: var(--jd-radius-btn);
}

/* «موثّق - …» - el.56: 10.5px emerald, 5px below the row. Emerald is the digital identity
   colour and this line is the only place it appears on an account screen. */
.jd-settings__verified {
	margin-block: 5px 0;
	font-size: var(--jd-fs-3xs);
	line-height: normal;
	color: var(--jd-emerald);
}

/*
 * The actions row is the LAST CELL of the fields grid (el.62 520x63 @481,710), not the
 * panel-wide .jd-panel__actions strip screens 20/21 use - that one carries its own 20px
 * inline padding and, inside an already-padded body, would inset the button 40px from the
 * panel edge. The divider is --jd-paper-deep (#EDE4D0), NOT the cream hairline:
 * el.62 border-top-color is rgb(237,228,208). 1 + 16 + 46 = 63.
 */
.jd-settings__actions {
	display: flex;
	align-items: center;
	gap: var(--jd-space-6);                 /* 12px - el.62 gap */
	margin: 0;
	padding: var(--jd-space-8) 0 0;         /* 16px - el.62 padding-top */
	border-block-start: 1px solid var(--jd-paper-deep);
}

/* el.64 - 11px muted, one line, 133x17. */
.jd-settings__note {
	font-size: 11px;
	line-height: normal;
	color: var(--jd-text-muted);
}

/*
 * The save button's METRICS. WooCommerce's `button.button{font-size:100%;line-height:1;
 * padding:.618em 1em}` is 0,1,1 and beats .jd-btn (0,1,0); style.css:302 already fights it
 * at 0,4,0 but only for colour, border and radius, so the button rendered 16px/123px with
 * 9.888px block padding and a navy border. el.63 is 133x46, 13.5/600, line-height normal,
 * 0 block padding, 28px inline, border-color transparent on the navy fill. The 133 is NOT
 * declared - it falls out of the type and the padding, and the next run has to show it.
 * Scoped to this actions row so cart, checkout, login and 404 buttons keep their own boxes.
 */
.woocommerce .jd-settings__actions .jd-btn.button,
.woocommerce-page .jd-settings__actions .jd-btn.button {
	min-block-size: 46px;
	padding-block: 0;
	padding-inline: var(--jd-space-14);     /* 28px */
	font-size: 13.5px;
	font-weight: 600;
	line-height: normal;
	border-color: transparent;
}

/* Re-stated at the same 0,4,0: raising specificity over WooCommerce lifts the base rule
   above style.css:311's hover, so the hover has to be re-declared or it disappears.
   store.dc.html:1372 changes only the fill. */
.woocommerce .jd-settings__actions .jd-btn.button:hover,
.woocommerce .jd-settings__actions .jd-btn.button:focus-visible,
.woocommerce-page .jd-settings__actions .jd-btn.button:hover,
.woocommerce-page .jd-settings__actions .jd-btn.button:focus-visible {
	background-color: var(--jd-navy-700);
	border-color: transparent;
}

.jd-field__hint {
	display: block;
	font-size: 10.5px;
	color: var(--jd-text-muted);
	margin-block-start: var(--jd-space-2);
}

/* ---- Dashboard ---------------------------------------------------------- */

.jd-dashboard {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--jd-space-7);
}

@media (max-width: 768px) { .jd-dashboard { grid-template-columns: 1fr; } }

.jd-dashboard__card {
	display: block;
	border: var(--jd-border);
	border-radius: var(--jd-radius-btn);
	padding: var(--jd-space-8);
	transition: border-color var(--jd-transition);
}

.jd-dashboard__card:hover { border-color: var(--jd-navy); }
.jd-dashboard__title { display: block; font-size: var(--jd-fs-base); font-weight: 600; color: var(--jd-navy); }

.jd-dashboard__body {
	display: block;
	font-size: var(--jd-fs-2xs);
	color: var(--jd-text-secondary);
	margin-block-start: var(--jd-space-2);
}

/* ---- Order notes -------------------------------------------------------- */

.jd-notes { list-style: none; margin: 0; padding: 0; }

.jd-notes__item {
	padding-block: var(--jd-space-6);
	border-block-end: 1px solid var(--jd-paper-deep);
}

.jd-notes__item:last-child { border-block-end: 0; }
.jd-notes__meta { font-size: 10.5px; color: var(--jd-text-muted); margin: 0 0 var(--jd-space-2); }
.jd-notes__body { font-size: var(--jd-fs-xs); color: var(--jd-text-secondary); }
.jd-notes__body p:last-child { margin-block-end: 0; }
/* ---- Login and register (screens 18 and 19) -----------------------------
 *
 * ONE URL, ONE COLUMN. woocommerce/myaccount/form-login.php renders exactly one of the two
 * prototype screens per request, and each is a single 560px column centred on the page
 * ground - never two panels side by side. Every number below is a measured row of
 * docs/design/18-login.md at 1440 and 390; the two widths share the whole card, so this
 * block needs no media query of its own.
 *
 * Specificity note (S28's standing lesson): WooCommerce ships `.woocommerce form .form-row`
 * (0,2,1), `… .form-row label` (0,2,1, and it sets line-height:2) and `… .form-row
 * .input-text` (0,3,1). Every rule here that competes with one of those is written one
 * class heavier on purpose, so the cascade does not depend on sheet order.
 */

.jd-auth {
	/* 560 wide (el. box 560×648) minus .jd-container's 24px gutter = the 512 content column. */
	max-inline-size: 560px;
	/*
	 * 44px above (header ends 125, the eyebrow starts 169 at 1440; 97 → 141 at 390).
	 * Below, 90px: the prototype's own wrapper runs 125→773 (560×648) and its last line
	 * ends at 683. The remaining 30px to the footer band at 803 is the prototype page
	 * host's, not this screen's - and layout.css gives `.jd-footer` a 64px
	 * margin-block-start instead, which is why the footer sits 34px low at BOTH widths.
	 * That 34 belongs to the shared footer and reaches every screen; shaving it off here
	 * would falsify this value and fix nothing anywhere else.
	 */
	padding-block: var(--jd-space-20) 90px;
}

/* .jd-container's own max-inline-size is a single class; this must outrank it. */
.jd-container.jd-auth { max-inline-size: 560px; }

/* ---- The heading block sits on the page ground, OUTSIDE the card (el.34–36) ---- */

.jd-auth__head { text-align: center; }

.jd-auth__eyebrow {
	font-size: 10.5px;
	line-height: normal;
	font-weight: 400;
	letter-spacing: 1.68px;
	color: var(--jd-text-secondary);
	margin: 0 0 var(--jd-space-3);
}

/* h1/h2 already carry Amiri 700 / lh 1.5 / navy from style.css; only the size is local. */
.jd-auth__title { font-size: 30px; margin: 0; }

.jd-auth__lede {
	font-size: 12.5px;
	line-height: 2;
	color: var(--jd-text-secondary);
	margin: var(--jd-space-4) 0 0;
}

/* ---- The card (el.37): form, rule, second way in ---- */

.jd-auth__card {
	display: flex;
	flex-direction: column;
	gap: var(--jd-space-8);
	background-color: var(--jd-surface);
	border: var(--jd-border);
	border-radius: var(--jd-radius-card);
	box-shadow: var(--jd-shadow-card);
	padding: var(--jd-space-11);
	margin-block-start: var(--jd-space-11);
}

/*
 * WooCommerce draws its own box around this form. One declaration in woocommerce.css
 * dresses `.woocommerce form.checkout_coupon, .woocommerce form.login, .woocommerce
 * form.register` (0,2,1) with a 1px #cfc8d8 border, 20px of padding, 2em of block margin,
 * a 5px radius and a physical text alignment - read it there, it is not quoted here
 * because gate 4 rightly refuses physical direction properties in this sheet. Inside the
 * prototype's card that is a second box around the first, and it is invisible in a text
 * diff: measured, it cost the form 42px of width (every field 424 instead of 466) and the
 * card 106px of height (464 instead of 358) - 40+2 padding/border, 64 of margin. Reset it
 * here, one class heavier, never globally: the same declaration dresses the coupon form.
 */
.jd-auth .jd-auth__card .jd-auth__form {
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0;
	text-align: start;
}

.jd-auth__form {
	display: grid;
	gap: var(--jd-space-7);
}

.jd-auth .jd-auth__form .jd-auth__field { margin: 0; padding: 0; }

/* Core's reset templates mark fields first/last, which otherwise makes them half-width. */
.jd-auth .jd-auth__form .jd-auth__field,
.jd-auth .jd-auth__form .jd-auth__action {
	float: none;
	inline-size: 100%;
	margin: 0;
	padding: 0;
}

.jd-auth .jd-auth__form .jd-auth__field label {
	display: block;
	font-size: 11.5px;
	line-height: normal;
	font-weight: 600;
	color: var(--jd-ink);
	margin: 0 0 var(--jd-space-3);
}

/* Password label and "forgotten?" share one 466×18 line (el.40/41), ends apart. */
.jd-auth__labelrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--jd-space-6);
	margin: 0 0 var(--jd-space-3);
}

.jd-auth .jd-auth__form .jd-auth__labelrow label { margin: 0; }

.jd-auth .jd-auth__form .jd-auth__lost {
	font-size: 11px;
	line-height: normal;
	font-weight: 400;
	color: var(--jd-navy);
	/* Measured transparent in the prototype (el.41): the rule appears on hover, not at rest. */
	border-block-end: 1px solid transparent;
	white-space: nowrap;
}

.jd-auth .jd-auth__form .jd-auth__lost:hover { color: var(--jd-navy-700); border-block-end-color: var(--jd-navy-700); }

.jd-auth .jd-auth__form .jd-auth__field .jd-auth__input {
	display: block;
	inline-size: 100%;
	block-size: 46px;
	padding: 0 var(--jd-space-7);
	font-family: var(--jd-font-ui);
	font-size: 14px;
	line-height: normal;
	color: var(--jd-ink);
	background-color: var(--jd-surface);
	border: var(--jd-border);
	border-radius: var(--jd-radius-btn);
	margin: 0;
	box-sizing: border-box;
}

.jd-auth .jd-auth__form .jd-auth__field .jd-auth__input:focus { border-color: var(--jd-navy); }

.jd-auth .jd-auth__form .jd-auth__submit {
	min-block-size: 50px;
	inline-size: 100%;
	font-size: 14.5px;
	line-height: normal;
	font-weight: 600;
	border-radius: var(--jd-radius-btn);
	padding-block: 1px;
	padding-inline: var(--jd-space-3);
}

.jd-auth .jd-auth__view .jd-auth__card .jd-auth__form .jd-auth__submit { border-color: transparent; }

/*
 * Screen 06 reuses the measured login fields inside a taxonomy archive. The archive
 * intentionally does not carry `.jd-auth` (that class owns screen 18's page width and
 * 44/90px outer padding), so these scoped aliases share only the form geometry.
 */
.jd-gate .jd-gate__form {
	display: grid;
	gap: var(--jd-space-6);
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0;
	text-align: start;
}

.jd-gate .jd-gate__form .jd-auth__field { margin: 0; padding: 0; }

.jd-gate .jd-gate__form .jd-auth__field label {
	display: block;
	font-size: var(--jd-fs-2xs);
	line-height: normal;
	font-weight: 600;
	color: var(--jd-ink);
	margin: 0 0 var(--jd-space-3);
}

.jd-gate .jd-gate__form .jd-auth__labelrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--jd-space-6);
	margin: 0 0 var(--jd-space-3);
}

.jd-gate .jd-gate__form .jd-auth__labelrow label { margin: 0; }

.jd-gate .jd-gate__form .jd-auth__lost {
	font-size: 11px;
	line-height: normal;
	font-weight: 400;
	color: var(--jd-navy);
	border-block-end: 1px solid transparent;
	white-space: nowrap;
}

.jd-gate .jd-gate__form .jd-auth__lost:hover {
	color: var(--jd-navy-700);
	border-block-end-color: var(--jd-navy-700);
}

.woocommerce .jd-gate .jd-gate__form .jd-auth__field input.jd-auth__input {
	display: block;
	inline-size: 100%;
	block-size: 46px;
	padding: 0 var(--jd-space-7);
	font-family: var(--jd-font-mono);
	font-size: var(--jd-fs-xs);
	line-height: normal;
	color: var(--jd-ink);
	background-color: var(--jd-surface);
	border: var(--jd-border);
	border-radius: var(--jd-radius-btn);
	margin: 0;
	box-sizing: border-box;
}

.jd-gate .jd-gate__form .password-input {
	display: block;
	position: relative;
	inline-size: 100%;
}

.woocommerce .jd-gate .jd-gate__form .jd-auth__field .password-input input.jd-auth__input {
	padding-inline-end: calc(44px + var(--jd-space-3));
}

.woocommerce .jd-gate .jd-gate__form .show-password-input {
	inset-inline: auto var(--jd-space-1);
	inline-size: 44px;
	block-size: 44px;
	color: var(--jd-ink);
}
.woocommerce .jd-gate .jd-gate__form .jd-auth__field input.jd-auth__input:focus {
	border-color: var(--jd-navy);
}

.jd-gate .jd-gate__form .jd-auth__submit {
	min-block-size: 50px;
	inline-size: 100%;
	font-size: var(--jd-fs-sm);
	line-height: normal;
	font-weight: 600;
	border-radius: var(--jd-radius-btn);
	padding-block: 1px;
	padding-inline: var(--jd-space-3);
	border-color: transparent;
}

/* ---- Below the card (el.48/49): the way to the other screen ---- */

.jd-auth__switch {
	text-align: center;
	margin: var(--jd-space-8) 0 0;
	font-size: 12.5px;
	line-height: normal;
	color: var(--jd-text-secondary);
}

.jd-auth .jd-auth__switch a {
	font-size: 12.5px;
	font-weight: 600;
	line-height: normal;
	color: var(--jd-navy);
	/* Transparent at rest, like el.49; the hover rule below paints it. */
	border-block-end: 1px solid transparent;
}

.jd-auth .jd-auth__switch a:hover { color: var(--jd-navy-700); border-block-end-color: var(--jd-navy-700); }

/* ---- Register view only (screen 19) -------------------------------------
 *
 * The login card stacks three things with a flex gap; the register card stacks two, and the
 * prototype spaces them with the benefits box's own 18px bottom margin (el.37), not a gap.
 * Block layout, so that margin is the only thing between the box and the form.
 */

.jd-auth__view--register .jd-auth__card { display: block; }

/*
 * el.37 - the benefits are a bordered box inside the card, not a bullet list: 466×120 at
 * 1440 and 296×120 at 390 (the same box, the card's width apart), 4px of block padding and
 * 16px of inline padding, a #DBCFB8 hairline and a 6px radius.
 */
.jd-auth__benefits {
	list-style: none;
	margin: 0 0 var(--jd-space-9);        /* 18px - el.37 margin-bottom */
	padding-block: var(--jd-space-2);     /* 4px  - el.37 */
	padding-inline: var(--jd-space-8);    /* 16px - el.37 */
	border: var(--jd-border);
	border-radius: var(--jd-radius-btn);
	font-size: var(--jd-fs-2xs);          /* 12px - el.38/40/42 */
	line-height: normal;                  /* el.38: the inherited 1.7 makes the row 24, not 18 */
	color: var(--jd-text-secondary);
}

/*
 * 9px above and below a single 18px line = 36, plus the divider = el.38's 37. Three rows,
 * the last without a rule (el.42), fill the box exactly: 37 + 37 + 36 + 4 + 4 + 1 + 1 = 120.
 */
.jd-auth__benefits li {
	display: flex;
	align-items: center;
	gap: var(--jd-space-5);               /* 10px - el.38 */
	padding-block: 9px;                   /* el.38 padding-top/bottom */
	margin: 0;
	/* #EDE4D0. The design .md prints this column from border-TOP-color; the JSON is the truth. */
	border-block-end: 1px solid var(--jd-paper-deep);
}

.jd-auth__benefits li:last-child { border-block-end: 0; }   /* el.42 has none */

/*
 * el.39/41/43 - a «✓» glyph in the emerald that means digital delivery across this theme,
 * not a dot. Decorative, so it stays a pseudo-element and never reaches the accessibility
 * tree (same reasoning as PENDING-DECISIONS #9); as the first flex item it lands at the
 * inline start in both directions with no extra rule.
 */
.jd-auth__benefits li::before {
	content: "✓";
	color: var(--jd-emerald);
}

/*
 * el.48 - the mobile field's hint sits 5px under its input, not the shared 4px, and it is a
 * 15px single line: the inherited --jd-lh-body 1.7 makes the box 17.85 instead.
 */
.jd-auth .jd-auth__form .jd-field__hint {
	line-height: normal;
	margin-block-start: 5px;
}

/* Renders only while woocommerce_registration_generate_password is 'yes' - PENDING #33. */
.jd-auth__note { font-size: var(--jd-fs-2xs); color: var(--jd-text-muted); }

/* el.54/55 - the consent line; the grid gap owns its spacing, so no margin of its own. */
.jd-auth__terms {
	margin: 0;
	font-size: var(--jd-fs-3xs);          /* 10.5px - el.54 */
	line-height: 1.9;                     /* 19.95px - el.54 */
	color: var(--jd-text-muted);
	text-align: center;                   /* el.54 */
}

/*
 * The phrase is a link when a help page exists and a plain span when it does not (the page
 * is unassigned on staging); both are drawn the same, because el.55 is measured either way.
 * Hairline, not navy - the .md renders that column from border-top-color.
 */
.jd-auth .jd-auth__terms a,
.jd-auth .jd-auth__terms .jd-auth__termslink {
	color: var(--jd-navy);                /* el.55 */
	border-block-end: 1px solid var(--jd-hairline);   /* 1px #DBCFB8 - el.55 */
	text-decoration: none;
}

/*
 * WooCommerce notices printed OUTSIDE any container.
 *
 * The shortcode pages wrap their output in `div.woocommerce` directly under `#jd-main`, and
 * the templates inside carry their own `.jd-container`. Anything WooCommerce prints BEFORE
 * those templates - woocommerce_output_all_notices, or wc_print_notice() called straight from
 * WC_Shortcode_Checkout on the blocked order-received page - lands between the two and so sits
 * in no container at all. Measured on staging at 1440: /my-account/'s notices wrapper is
 * 1440px wide starting at 0, while the same wrapper on /cart/ (inside `.jd-cart`) is 1152 at
 * 144. page.php cannot fix it, because it deliberately adds no container on these pages -
 * the templates own theirs.
 *
 * The wrapper is a bare div, so it takes `.jd-container`'s three declarations verbatim.
 * A notice printed with no wrapper - notices/notice.php emits `div.woocommerce-info` on its
 * own, and core's checkout/order-received.php a bare `p.woocommerce-notice` - already carries
 * its own padding from layout.css, so it gets the container's CONTENT column instead: the same
 * width the wrapper's children end up with, and a gutter of its own below 1200.
 */
.jd-main > .woocommerce > .woocommerce-notices-wrapper {
	inline-size: 100%;
	max-inline-size: var(--jd-container);
	margin-inline: auto;
	padding-inline: var(--jd-gutter);
}

.jd-main > .woocommerce > div.woocommerce-info,
.jd-main > .woocommerce > div.woocommerce-message,
.jd-main > .woocommerce > ul.woocommerce-error,
.jd-main > .woocommerce > p.woocommerce-notice {
	inline-size: calc(100% - 2 * var(--jd-gutter));
	max-inline-size: calc(var(--jd-container) - 2 * var(--jd-gutter));
	margin-inline: auto;
}