/* ==========================================================================
   Books by LB Williams — WordPress & WooCommerce layer
   --------------------------------------------------------------------------
   Loads after assets/css/style.css and adds only what the static build had no
   markup for: the cart, checkout and thank-you pages, the single book page,
   WordPress furniture (menus, archives, comments, pagination) and a handful of
   adjustments where a static section became dynamic.

   The design tokens all come from style.css :root, so nothing is re-declared.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Adjustments where static markup became dynamic
   -------------------------------------------------------------------------- */

/* The medallion panel is a two-column grid in the static build because it
   carried a cover-comparison preview. The cover beside the copy is optional
   here, so with no image set let the copy use the full width instead of
   sitting in half of it. */
@media (min-width: 1000px) {
	.medal-explore:not(:has(.medal-explore__covers)) {
		grid-template-columns: 1fr;
	}
}

/* .cover-compare was built to hold two covers side by side. The approved
   design shows one, so the single card fills the column rather than leaving a
   gap where the second used to be. */
.cover-compare--single {
	grid-template-columns: 1fr;
}

/* The shop header's selling points span both columns of the header grid and
   sit clear of the band's bottom edge. They used to be printed after the
   band and pulled back over it with a negative margin, which left the line
   resting on the edge with nothing beneath it. */
.phead .shop-line {
	grid-column: 1 / -1;
	margin-top: clamp(1.25rem, 2.5vw, 2rem);
}

/* The separator follows its item instead of leading the next one, so a line
   that wraps on a narrow screen starts with a word rather than a bullet. */
.shop-line li + li::before {
	content: none;
}

.shop-line li:not(:last-child)::after {
	content: "\2022";
	margin: 0 .7rem;
	color: var(--gold-deep);
}

/* The header nav renders bare anchors; a nested menu item is flattened into
   the same row, so give it a lighter weight to keep the hierarchy readable. */
.nav a.nav__sub {
	font-weight: 400;
	opacity: .85;
}

/* An uploaded Site Logo replaces the script wordmark. */
.logo--image {
	margin-right: auto;
}

.logo__img {
	max-height: 52px;
	width: auto;
}

@media (max-width: 1279px) {
	.logo__img {
		max-height: 44px;
	}
}

/* The honeypot field must be reachable by a bot but never by a person. */
.lbw-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* A button waiting on the server. */
.btn.is-loading {
	opacity: .65;
	pointer-events: none;
}

.btn.is-disabled {
	background: #EEF1F7;
	color: var(--muted);
	box-shadow: none;
	cursor: not-allowed;
}

/* The drawer's checkout control is an <a>, so it needs the button's centring. */
.drawer__foot a.btn {
	width: 100%;
}

/* --------------------------------------------------------------------------
   2. Shared page furniture
   -------------------------------------------------------------------------- */

.entry-content > * + * {
	margin-top: 1.1em;
}

.entry-content h2,
.entry-content h3 {
	margin-top: 2em;
	color: var(--navy);
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.4rem;
}

.entry-content li + li {
	margin-top: .35rem;
}

.entry-content blockquote {
	margin: 2rem 0;
	padding: 1.25rem 1.5rem;
	border-left: 4px solid var(--gold);
	background: var(--sun-wash);
	border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.entry-content blockquote p:last-child {
	margin-bottom: 0;
}

.entry-content :where(img, figure) {
	border-radius: var(--r-sm);
}

.entry-content figcaption {
	font-size: .88rem;
	color: var(--muted);
	margin-top: .5rem;
}

.entry-content a {
	text-underline-offset: 3px;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
}

.entry-content :where(th, td) {
	padding: .65rem .8rem;
	border-bottom: 1px solid var(--line);
	text-align: left;
}

/* --------------------------------------------------------------------------
   3. Blog, archives and single posts
   -------------------------------------------------------------------------- */

.post-grid {
	display: grid;
	gap: 1.75rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.post-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1.5px solid var(--line);
	border-radius: var(--r-md);
	overflow: hidden;
	transition: transform .25s, box-shadow .25s;
}

.post-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow);
}

.post-card__art {
	aspect-ratio: 16 / 10;
	background: var(--sky-wash);
	overflow: hidden;
}

.post-card__art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.post-card__body {
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: .5rem;
}

.post-card h3 {
	font-size: 1.25rem;
	color: var(--navy);
	margin: 0;
}

.post-card h3 a {
	color: inherit;
	text-decoration: none;
}

.post-card h3 a:hover {
	color: var(--red);
}

.post-card time {
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
}

.post-card p {
	color: var(--muted);
	font-size: .96rem;
	margin: 0;
}

.post-card .link-arrow {
	margin-top: auto;
	align-self: flex-start;
}

.single-layout {
	display: grid;
	gap: 3rem;
}

@media (min-width: 1040px) {
	.single-layout {
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: 4rem;
	}
}

.single-layout .entry-content {
	max-width: 72ch;
}

.widget + .widget {
	margin-top: 2.25rem;
}

.widget h3 {
	font-size: .82rem;
	font-family: 'Atkinson Hyperlegible', sans-serif;
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--gold-ink);
	margin-bottom: .9rem;
}

.widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .4rem;
}

.widget a {
	color: var(--navy);
	text-decoration: none;
	font-weight: 700;
}

.widget a:hover {
	color: var(--red);
}

.pager {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	justify-content: center;
	margin-top: 3rem;
}

.pager .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 46px;
	height: 46px;
	padding: 0 .9rem;
	border-radius: 999px;
	border: 1.5px solid var(--line);
	background: #fff;
	color: var(--navy);
	font-weight: 700;
	text-decoration: none;
}

.pager .page-numbers:hover {
	border-color: var(--navy);
}

.pager .page-numbers.current {
	background: var(--navy);
	border-color: var(--navy);
	color: #fff;
}

.comments {
	margin-top: 4rem;
	padding-top: 2.5rem;
	border-top: 2px solid var(--line);
}

.comments h2,
.comments h3 {
	color: var(--navy);
}

.comment-list {
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
}

.comment-list ul.children {
	list-style: none;
	margin: 1.25rem 0 0 1.5rem;
	padding-left: 1.25rem;
	border-left: 2px solid var(--line);
}

.comment-body {
	padding: 1.25rem;
	border-radius: var(--r-sm);
	background: #FAFBFE;
	border: 1px solid var(--line);
	margin-bottom: 1.25rem;
}

.comment-meta {
	display: flex;
	align-items: center;
	gap: .7rem;
	margin-bottom: .6rem;
	font-size: .88rem;
	color: var(--muted);
}

.comment-meta img {
	border-radius: 50%;
}

.comment-form .input,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	min-height: 50px;
	padding: .75rem 1rem;
	border-radius: var(--r-sm);
	border: 1.5px solid #C7CFE0;
	background: #fff;
}

.comment-form textarea {
	min-height: 150px;
}

.comment-form .submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: .8em 1.45em;
	border-radius: 999px;
	border: 0;
	background: var(--red);
	color: #fff;
	font-weight: 700;
	box-shadow: 0 4px 0 var(--red-deep);
	cursor: pointer;
}

.search-head {
	display: flex;
	gap: .6rem;
	flex-wrap: wrap;
	margin-top: 1.25rem;
}

.search-head .input {
	flex: 1 1 240px;
}

/* --------------------------------------------------------------------------
   4. WooCommerce notices
   -------------------------------------------------------------------------- */

.woocommerce-notices-wrapper:empty {
	display: none;
}

/* WooCommerce positions an icon-font glyph absolutely inside every notice, and
   adds a clearfix pseudo-pair. Both land badly in a flex notice — the glyph
   overlaps the text and the clearfix becomes a flex item. The theme's notices
   carry their own styling, so drop all four. */
.woocommerce-error::before,
.woocommerce-error::after,
.woocommerce-info::before,
.woocommerce-info::after,
.woocommerce-message::before,
.woocommerce-message::after {
	display: none;
	content: none;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem 1rem;
	align-items: center;
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	border-radius: var(--r-sm);
	border: 1px solid #B9E2C6;
	background: #EAF7EE;
	color: #14532D;
	list-style: none;
	font-size: .97rem;
}

.woocommerce-info {
	border-color: #C9D3F5;
	background: #EEF2FF;
	color: #1E2A63;
}

.woocommerce-error {
	border-color: #F3C2BD;
	background: #FDECEA;
	color: #7F1D1D;
}

.woocommerce-error li + li {
	margin-top: .35rem;
}

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	margin-left: auto;
}

/* WooCommerce's generic .button, wherever the theme has not replaced it. */
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55em;
	min-height: 48px;
	padding: .8em 1.45em;
	border: 2px solid transparent;
	border-radius: 999px;
	background: var(--navy);
	color: #fff;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 4px 0 var(--navy-deep);
	transition: background-color .18s ease, transform .18s ease;
}

.woocommerce .button:hover {
	background: var(--navy-soft);
}

.woocommerce .button:disabled,
.woocommerce .button.disabled {
	opacity: .55;
	cursor: not-allowed;
	box-shadow: none;
}

/* --------------------------------------------------------------------------
   5. Cart page
   -------------------------------------------------------------------------- */

.cart-page {
	display: grid;
	gap: 2.5rem;
	align-items: start;
}

@media (min-width: 1000px) {
	.cart-page {
		grid-template-columns: minmax(0, 1.6fr) minmax(0, .9fr);
		gap: 3.5rem;
	}
}

.cart-lines {
	display: grid;
	gap: 0;
	border: 1.5px solid var(--line);
	border-radius: var(--r-md);
	background: #fff;
	overflow: hidden;
}

.cart-line {
	display: grid;
	grid-template-columns: 104px minmax(0, 1fr);
	gap: 1.25rem;
	align-items: start;
	padding: 1.25rem;
}

.cart-line + .cart-line {
	border-top: 1px solid var(--line);
}

@media (min-width: 760px) {
	.cart-line {
		grid-template-columns: 104px minmax(0, 1fr) auto;
		align-items: center;
	}
}

.cart-line__art img {
	width: 104px;
	height: 104px;
	object-fit: cover;
	border-radius: var(--r-sm);
}

.cart-line__body {
	display: grid;
	gap: .3rem;
}

.cart-line__body .kicker {
	margin: 0;
}

.cart-line__title {
	font-family: 'Young Serif', Georgia, serif;
	font-size: 1.22rem;
	font-weight: 400;
	line-height: 1.2;
	color: var(--navy);
	margin: 0;
}

.cart-line__title a {
	color: inherit;
	text-decoration: none;
}

.cart-line__title a:hover {
	color: var(--red);
}

.cart-line__fmt {
	font-size: .9rem;
	color: var(--muted);
}

.cart-line__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem 1rem;
	margin-top: .5rem;
}

.cart-line__total {
	font-family: 'Young Serif', Georgia, serif;
	font-size: 1.35rem;
	color: var(--navy);
	white-space: nowrap;
}

@media (min-width: 760px) {
	.cart-line__total {
		text-align: right;
	}
}

/* The quantity stepper, reusing the drawer's pill. */
.cart-qty {
	display: inline-flex;
	align-items: center;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	overflow: hidden;
}

.cart-qty input {
	width: 3.2rem;
	min-height: 40px;
	padding: 0 .4rem;
	border: 0;
	background: none;
	text-align: center;
	font-weight: 700;
	color: var(--navy);
	-moz-appearance: textfield;
	appearance: textfield;
}

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

.cart-qty button {
	width: 38px;
	height: 40px;
	border: 0;
	background: none;
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--navy);
	cursor: pointer;
}

.cart-qty button:hover {
	background: var(--sky-wash);
}

.cart-line__remove {
	border: 0;
	background: none;
	padding: .4rem 0;
	font-size: .88rem;
	color: var(--muted);
	text-decoration: underline;
	cursor: pointer;
}

.cart-line__remove:hover {
	color: var(--red-deep);
}

.cart-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem 1rem;
	align-items: center;
	margin-top: 1.5rem;
}

.cart-actions .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	flex: 1 1 320px;
}

.cart-actions .coupon .input {
	flex: 1 1 180px;
}

/* The order summary card. */
.cart-summary {
	position: sticky;
	top: calc(var(--hdr) + 1.25rem);
	padding: clamp(1.4rem, 3vw, 2rem);
	border-radius: var(--r-md);
	background: #FAFBFE;
	border: 1.5px solid var(--line);
}

.cart-summary h2 {
	font-size: 1.6rem;
	color: var(--navy);
	margin-bottom: 1.25rem;
}

/* The totals are a table, because WooCommerce's total/shipping helpers all
   emit <tr>/<th>/<td> and the shipping template is shared with checkout. */
.cart-totals-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.25rem;
}

.cart-totals-table th,
.cart-totals-table td {
	padding: .6rem 0;
	text-align: left;
	vertical-align: top;
	font-size: .97rem;
	font-weight: 400;
	border: 0;
}

.cart-totals-table th {
	font-weight: 700;
	color: var(--ink);
	white-space: nowrap;
	padding-right: 1rem;
}

.cart-totals-table td {
	text-align: right;
}

.cart-totals-table tr + tr th,
.cart-totals-table tr + tr td {
	border-top: 1px solid var(--line);
}

.cart-totals-table .order-total th,
.cart-totals-table .order-total td {
	padding-top: .9rem;
	border-top: 2px solid var(--line);
}

.cart-totals-table .order-total .amount {
	font-family: 'Young Serif', Georgia, serif;
	font-weight: 400;
	font-size: 1.6rem;
	color: var(--navy);
}

/* Shipping choices and the "change address" calculator. */
.cart-totals-table ul#shipping_method {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .4rem;
	text-align: right;
}

.cart-totals-table ul#shipping_method li {
	display: flex;
	gap: .5rem;
	align-items: center;
	justify-content: flex-end;
}

.cart-totals-table ul#shipping_method input[type="radio"] {
	accent-color: var(--navy);
}

.cart-totals-table .woocommerce-shipping-destination {
	margin: .5rem 0 0;
	font-size: .88rem;
	color: var(--muted);
}

.cart-totals-table .shipping-calculator-button {
	display: inline-block;
	margin-top: .35rem;
	color: var(--sky-deep);
	font-weight: 700;
	font-size: .9rem;
}

.cart-totals-table .shipping-calculator-form {
	margin-top: .75rem;
	text-align: left;
}

.cart-totals-table .shipping-calculator-form .button {
	min-height: 42px;
	padding: .6em 1.1em;
	font-size: .94rem;
}

.cart-summary .btn {
	width: 100%;
}

.cart-summary .shipping-calculator-button {
	color: var(--sky-deep);
	font-weight: 700;
}

.cart-trust {
	display: grid;
	gap: .6rem;
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--line);
	font-size: .88rem;
	color: var(--muted);
}

.cart-trust li {
	display: flex;
	gap: .5rem;
	align-items: flex-start;
	list-style: none;
}

.cart-trust .ico {
	color: var(--gold-deep);
	margin-top: .15rem;
	flex: none;
}

.cart-trust ul {
	margin: 0;
	padding: 0;
	display: grid;
	gap: .6rem;
}

/* The cross-sell shelf under the cart. */
.cart-crosssell {
	margin-top: clamp(3rem, 5vw, 4.5rem);
}

/* --------------------------------------------------------------------------
   6. Checkout
   --------------------------------------------------------------------------
   WooCommerce's float-based layout stylesheet is dequeued (see
   lbw_woocommerce_styles), so the form is laid out here from scratch rather
   than fought with overrides. Two things it used to supply are restored
   below: label display, and the first/last field pairing.
   -------------------------------------------------------------------------- */

.checkout-page {
	display: grid;
	gap: 2.5rem;
	align-items: start;
}

@media (min-width: 1000px) {
	.checkout-page {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		gap: 3rem;
	}
}

.checkout-panel {
	padding: clamp(1.4rem, 3vw, 2.25rem);
	border-radius: var(--r-md);
	background: #fff;
	border: 1.5px solid var(--line);
}

.checkout-panel + .checkout-panel,
#customer_details > .checkout-panel + .checkout-panel {
	margin-top: 1.75rem;
}

/* A panel holding only an unchecked "ship elsewhere" toggle needs less room. */
.checkout-panel--shipping {
	padding-block: clamp(1.1rem, 2vw, 1.4rem);
}

/* WooCommerce's own section headings act as the panel titles. */
.checkout-panel > h3,
.checkout-panel > h2,
.woocommerce-billing-fields > h3,
.woocommerce-additional-fields > h3 {
	font-size: clamp(1.3rem, 1.8vw, 1.6rem);
	color: var(--navy);
	margin: 0 0 1.35rem;
}

.woocommerce-additional-fields {
	margin-top: 1.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--line);
}

/* "Ship to a different address?" is a heading wrapping a checkbox. Make it
   read as a control rather than a display headline. */
#ship-to-different-address {
	margin: 0;
	font-family: 'Atkinson Hyperlegible', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--navy);
}

#ship-to-different-address label,
.woocommerce-form__label-for-checkbox {
	display: flex;
	gap: .7rem;
	align-items: center;
	cursor: pointer;
	font-weight: 700;
}

#ship-to-different-address input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--navy);
	flex: none;
}

.shipping_address {
	margin-top: 1.4rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--line);
}

/* ---- Progress steps ---- */

.checkout-steps {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	font-size: .86rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
	counter-reset: step;
}

.checkout-steps li {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	counter-increment: step;
}

.checkout-steps li::before {
	content: counter(step);
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--line);
	color: var(--navy-deep);
	display: grid;
	place-items: center;
	font-size: .78rem;
}

.checkout-steps .is-on {
	color: var(--navy);
}

.checkout-steps .is-on::before {
	background: var(--gold);
}

.checkout-steps .is-done::before {
	background: var(--navy);
	color: #fff;
}

/* ---- The field grid ----
   Each .form-row is one cell. form-row-first / form-row-last pair up on wide
   screens; everything else spans the row. */

.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 1.1rem;
}

@media (min-width: 620px) {
	.woocommerce-billing-fields__field-wrapper,
	.woocommerce-shipping-fields__field-wrapper,
	.woocommerce-additional-fields__field-wrapper {
		grid-template-columns: 1fr 1fr;
	}

	.woocommerce form .form-row-first {
		grid-column: 1;
	}

	.woocommerce form .form-row-last {
		grid-column: 2;
	}

	.woocommerce form .form-row-wide,
	.woocommerce form .form-row.notes,
	.woocommerce-additional-fields__field-wrapper .form-row {
		grid-column: 1 / -1;
	}
}

/* The clearfix pseudo-elements WooCommerce adds would become grid items and
   open phantom rows. Neutralised here so the layout survives even if that
   stylesheet is ever re-enabled. */
.woocommerce form .form-row::before,
.woocommerce form .form-row::after,
.woocommerce-page form .form-row::before,
.woocommerce-page form .form-row::after {
	content: none;
}

.woocommerce form .form-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: .4rem;
	width: auto;
	float: none;
	margin: 0 0 1.15rem;
	padding: 0;
}

.woocommerce form .form-row label {
	display: block;
	font-weight: 700;
	font-size: .92rem;
	line-height: 1.4;
	color: var(--ink);
}

.woocommerce form .form-row label .optional,
.woocommerce form .form-row .optional {
	font-weight: 400;
	color: var(--muted);
}

.woocommerce form .form-row .required {
	color: var(--red-deep);
	font-weight: 700;
	text-decoration: none;
	border: 0;
	visibility: visible;
}

.woocommerce form .form-row .woocommerce-input-wrapper {
	display: block;
	width: 100%;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce form .form-row .select2-container .select2-selection--single {
	display: block;
	width: 100%;
	min-height: 50px;
	padding: .75rem 1rem;
	border-radius: var(--r-sm);
	border: 1.5px solid #C7CFE0;
	background-color: #fff;
	color: var(--ink);
	color-scheme: light;
	font: inherit;
	line-height: 1.4;
	box-sizing: border-box;
}

.woocommerce form .form-row select {
	padding-right: 2.6rem;
	background-position: calc(100% - .85rem) 50%;
	cursor: pointer;
}

.woocommerce form .form-row textarea {
	min-height: 118px;
	height: auto;
	line-height: 1.55;
	resize: vertical;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	outline: 3px solid rgba(31, 111, 168, .35);
	border-color: var(--sky-deep);
}

.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select,
.woocommerce form .form-row.woocommerce-invalid textarea {
	border-color: var(--red);
}

.woocommerce form .form-row.woocommerce-validated input.input-text,
.woocommerce form .form-row.woocommerce-validated select {
	border-color: #7BBF8F;
}

/* select2, which WooCommerce uses for the country and state pickers. */
.woocommerce form .form-row .select2-container {
	width: 100% !important;
}

.woocommerce form .form-row .select2-container .select2-selection--single {
	display: flex;
	align-items: center;
	height: auto;
}

.woocommerce form .form-row .select2-container .select2-selection__rendered {
	padding: 0;
	line-height: 1.4;
	color: var(--ink);
}

.woocommerce form .form-row .select2-container .select2-selection__arrow {
	top: 50%;
	right: .7rem;
	transform: translateY(-50%);
}

/* Inline checkbox rows, e.g. "Create an account?". */
.woocommerce form .form-row .checkbox,
.woocommerce form .form-row label.checkbox {
	display: flex;
	gap: .7rem;
	align-items: flex-start;
	font-weight: 400;
	cursor: pointer;
}

.woocommerce form .form-row input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin: .1rem 0 0;
	accent-color: var(--navy);
	flex: none;
}

.woocommerce form .form-row .description {
	display: block;
	font-size: .86rem;
	color: var(--muted);
	margin: .35rem 0 0 1.9rem;
}

/* ---- Coupon and login prompts ---- */

.woocommerce-form-coupon-toggle,
.woocommerce-form-login-toggle {
	margin-bottom: 1.25rem;
}

.woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-form-login-toggle .woocommerce-info {
	margin-bottom: 0;
}

.woocommerce-form-coupon,
.woocommerce-form-login {
	padding: clamp(1.1rem, 2.5vw, 1.5rem);
	border: 1.5px solid var(--line);
	border-radius: var(--r-md);
	background: #FAFBFE;
	margin-bottom: 1.75rem;
}

.woocommerce-form-coupon .form-row,
.woocommerce-form-login .form-row {
	margin-bottom: 1rem;
}

/* ---- Order review ---- */

.checkout-review {
	position: sticky;
	top: calc(var(--hdr) + 1.25rem);
	padding: clamp(1.4rem, 3vw, 2rem);
	border-radius: var(--r-md);
	background: #FAFBFE;
	border: 1.5px solid var(--line);
}

.checkout-review h3 {
	font-size: 1.6rem;
	color: var(--navy);
	margin: 0 0 1.25rem;
}

.woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.25rem;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
	padding: .7rem 0;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--line);
	font-size: .97rem;
}

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

.woocommerce-checkout-review-order-table thead th {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted);
	border-bottom-width: 2px;
}

.woocommerce-checkout-review-order-table .product-name {
	color: var(--navy);
	font-weight: 700;
}

.woocommerce-checkout-review-order-table .variation {
	margin: .25rem 0 0;
	font-size: .88rem;
	font-weight: 400;
	color: var(--muted);
}

.woocommerce-checkout-review-order-table .variation dt,
.woocommerce-checkout-review-order-table .variation dd {
	display: inline;
	margin: 0;
}

.woocommerce-checkout-review-order-table .product-quantity {
	color: var(--muted);
	font-weight: 400;
}

.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
	border-bottom: 0;
	padding-top: 1rem;
	font-size: 1.05rem;
}

.woocommerce-checkout-review-order-table .order-total .amount {
	font-family: 'Young Serif', Georgia, serif;
	font-weight: 400;
	font-size: 1.6rem;
	color: var(--navy);
}

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

/* WooCommerce tints this panel lilac by default. */
#add_payment_method #payment,
.woocommerce-cart #payment,
.woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
}

#payment ul.payment_methods {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	display: grid;
	gap: .6rem;
	border: 0;
}

#payment ul.payment_methods li {
	padding: .9rem 1rem;
	border: 1.5px solid var(--line);
	border-radius: var(--r-sm);
	background: #fff;
	list-style: none;
}

#payment ul.payment_methods li label {
	display: inline-flex;
	gap: .6rem;
	align-items: center;
	font-weight: 700;
	color: var(--navy);
	cursor: pointer;
	line-height: 1.4;
}

#payment ul.payment_methods li input[type="radio"] {
	width: 20px;
	height: 20px;
	accent-color: var(--navy);
	flex: none;
}

#payment ul.payment_methods li img {
	max-height: 26px;
	width: auto;
	display: inline-block;
	vertical-align: middle;
	margin-left: .4rem;
}

/* Matching WooCommerce's own specificity here on purpose — it styles this box
   with "#payment div.payment_box" and a lilac fill, which a shorter selector
   cannot override. */
#add_payment_method #payment div.payment_box,
.woocommerce-cart #payment div.payment_box,
.woocommerce-checkout #payment div.payment_box {
	position: relative;
	width: 100%;
	margin: .8rem 0 0;
	padding: .9rem 1rem;
	border-radius: var(--r-sm);
	background-color: #EEF2FF;
	border: 1px solid #C9D3F5;
	font-size: .92rem;
	line-height: 1.55;
	color: #1E2A63;
}

/* The little pointer triangle above the box. */
#add_payment_method #payment div.payment_box::before,
.woocommerce-cart #payment div.payment_box::before,
.woocommerce-checkout #payment div.payment_box::before {
	display: none;
	content: none;
}

#payment .payment_box p:last-child {
	margin-bottom: 0;
}

/* The place-order block: opt-in, terms, then the button, each on its own row. */
#payment .form-row.place-order,
.woocommerce form #payment .form-row.place-order {
	display: block;
	margin: 0;
	padding: 0;
}

#payment .form-row.lbw-opt-in,
.woocommerce form .form-row.lbw-opt-in {
	display: block;
	padding: .85rem 1rem;
	border-radius: var(--r-sm);
	background: var(--sun-wash);
	border: 1px solid #F1DDAE;
	margin: 0 0 1.1rem;
	font-size: .93rem;
}

#payment .form-row.lbw-opt-in label {
	font-weight: 400;
}

#payment .form-row.lbw-opt-in .description {
	margin-left: 1.9rem;
}

#payment #place_order,
.woocommerce #payment #place_order {
	display: block;
	width: 100%;
	min-height: 58px;
	height: auto;
	padding: 1rem 1.6rem;
	border: 0;
	border-radius: 999px;
	background: var(--red);
	color: #fff;
	font-weight: 700;
	font-size: 1.08rem;
	line-height: 1.2;
	white-space: normal;
	box-shadow: 0 4px 0 var(--red-deep);
	cursor: pointer;
}

#payment #place_order:hover {
	background: #D63B2F;
}

#payment #place_order:active {
	box-shadow: 0 1px 0 var(--red-deep);
	transform: translateY(2px);
}

.woocommerce-terms-and-conditions-wrapper {
	margin-bottom: 1rem;
}

.woocommerce-terms-and-conditions-wrapper:empty,
.woocommerce-privacy-policy-text:empty {
	display: none;
	margin: 0;
}

.woocommerce-privacy-policy-text {
	font-size: .86rem;
	color: var(--muted);
}

.woocommerce-privacy-policy-text p:last-child {
	margin-bottom: 0;
}

/* ---- My Account ----
   The dequeued layout stylesheet used floats for this; a grid reads better
   and needs no clearing. */

.woocommerce-account .woocommerce {
	display: grid;
	gap: 2rem;
	align-items: start;
}

@media (min-width: 900px) {
	.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
		grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
		gap: 3rem;
	}
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .2rem;
}

.woocommerce-MyAccount-navigation a {
	display: block;
	padding: .7rem 1rem;
	border-radius: var(--r-sm);
	color: var(--navy);
	font-weight: 700;
	text-decoration: none;
}

.woocommerce-MyAccount-navigation a:hover {
	background: var(--sky-wash);
}

.woocommerce-MyAccount-navigation .is-active a {
	background: var(--navy);
	color: #fff;
}

/* --------------------------------------------------------------------------
   7. Thank-you / order received
   -------------------------------------------------------------------------- */

.thankyou {
	display: grid;
	gap: 2.5rem;
}

.thankyou__hero {
	text-align: center;
	padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 3rem);
	border-radius: var(--r-lg);
	background: linear-gradient(160deg, #fff 0%, var(--sun-wash) 100%);
	border: 1.5px solid #F0D9A4;
}

.thankyou__tick {
	display: grid;
	place-items: center;
	width: 84px;
	height: 84px;
	margin: 0 auto 1.5rem;
	border-radius: 50%;
	background: var(--gold);
	color: var(--navy-deep);
	box-shadow: 0 0 0 10px rgba(226, 174, 69, .2);
}

.thankyou__tick .ico {
	width: 44px;
	height: 44px;
	stroke-width: 2.2;
}

.thankyou__hero h1 {
	font-size: clamp(2rem, 3.6vw, 3.2rem);
	color: var(--navy-deep);
	margin-bottom: .75rem;
}

.thankyou__hero p {
	color: #3A4366;
	max-width: 58ch;
	margin-inline: auto;
}

.thankyou__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
}

.thankyou__meta li {
	min-width: 150px;
	padding: .9rem 1.2rem;
	border-radius: var(--r-sm);
	background: #fff;
	border: 1px solid var(--line);
	text-align: left;
}

.thankyou__meta small {
	display: block;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: .2rem;
}

.thankyou__meta b,
.thankyou__meta .amount {
	font-family: 'Young Serif', Georgia, serif;
	font-weight: 400;
	font-size: 1.15rem;
	color: var(--navy);
}

.thankyou__ctas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .9rem;
	margin-top: 2rem;
}

/* Shown instead of the thank-you page when an order link is opened outside
   the session that placed it. */
.verify-email {
	max-width: 32rem;
	margin-inline: auto;
	text-align: center;
	padding-block: clamp(1rem, 3vw, 2.5rem);
}

.verify-email__icon {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	margin: 0 auto 1.5rem;
	border-radius: 50%;
	background: var(--sky-wash);
	color: var(--navy);
}

.verify-email__icon .ico {
	width: 34px;
	height: 34px;
}

.verify-email h1 {
	font-size: clamp(1.9rem, 3vw, 2.6rem);
	color: var(--navy-deep);
	margin-bottom: .75rem;
}

.verify-email .lede {
	margin-bottom: 1.75rem;
}

.verify-email .form-card {
	text-align: left;
}

.verify-email .fine {
	margin-top: 1.25rem;
}

.thankyou-grid {
	display: grid;
	gap: 2rem;
}

@media (min-width: 900px) {
	.thankyou-grid {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
		gap: 3rem;
	}
}

.order-table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border: 1.5px solid var(--line);
	border-radius: var(--r-md);
	overflow: hidden;
}

.order-table caption {
	text-align: left;
	font-family: 'Young Serif', Georgia, serif;
	font-size: 1.5rem;
	color: var(--navy);
	margin-bottom: 1rem;
}

.order-table th,
.order-table td {
	padding: .85rem 1.1rem;
	text-align: left;
	border-bottom: 1px solid var(--line);
	font-size: .97rem;
	vertical-align: top;
}

.order-table thead th {
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted);
	background: #FAFBFE;
}

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

.order-table tfoot th {
	font-weight: 700;
	color: var(--ink);
}

.order-table tfoot tr:last-child th,
.order-table tfoot tr:last-child td {
	border-bottom: 0;
	font-size: 1.05rem;
}

.order-table tfoot tr:last-child .amount {
	font-family: 'Young Serif', Georgia, serif;
	font-weight: 400;
	font-size: 1.5rem;
	color: var(--navy);
}

.order-table .product-name a {
	color: var(--navy);
	font-weight: 700;
	text-decoration: none;
}

.order-table .wc-item-meta {
	margin: .3rem 0 0;
	padding: 0;
	list-style: none;
	font-size: .88rem;
	color: var(--muted);
}

.order-table .wc-item-meta p,
.order-table .wc-item-meta strong {
	display: inline;
	margin: 0;
	font-weight: 400;
}

/* WooCommerce's own customer-details block. The float layout it relied on came
   from the dequeued layout stylesheet, so the columns are set up here. */
.woocommerce-customer-details {
	margin-top: clamp(2rem, 4vw, 2.75rem);
}

.woocommerce-customer-details .woocommerce-columns--addresses,
.order-addresses {
	display: grid;
	gap: 1.5rem;
	margin: 0;
}

@media (min-width: 560px) {
	.woocommerce-customer-details .woocommerce-columns--addresses,
	.order-addresses {
		grid-template-columns: 1fr 1fr;
	}
}

.woocommerce-customer-details .woocommerce-column,
.order-address {
	padding: 1.25rem;
	border-radius: var(--r-sm);
	background: #FAFBFE;
	border: 1px solid var(--line);
}

/* These are <h2> in core and would otherwise render at display size. */
.woocommerce-customer-details .woocommerce-column__title,
.woocommerce-customer-details h2,
.order-address h3 {
	font-size: .78rem;
	font-family: 'Atkinson Hyperlegible', sans-serif;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gold-ink);
	margin: 0 0 .7rem;
}

/* Core gives this <address> its own rounded border, which would sit inside the
   column's box. Matching its specificity to take the inner box off. */
.woocommerce .woocommerce-customer-details address,
.woocommerce-customer-details address,
.order-address address {
	font-style: normal;
	line-height: 1.7;
	color: var(--ink);
	width: 100%;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0;
}

.woocommerce-customer-details address p {
	margin: .4rem 0 0;
}

.woocommerce-customer-details .woocommerce-customer-details--phone,
.woocommerce-customer-details .woocommerce-customer-details--email {
	display: block;
	margin: .5rem 0 0;
	font-size: .93rem;
	color: var(--muted);
	word-break: break-word;
}

/* The workbook promise, restated on the thank-you page. */
.thankyou-workbooks {
	padding: clamp(1.4rem, 3vw, 2rem);
	border-radius: var(--r-md);
	background: var(--navy);
	color: #E8EBF6;
}

.thankyou-workbooks h2 {
	font-size: 1.5rem;
	color: #fff;
	margin-bottom: .6rem;
}

.thankyou-workbooks p {
	color: #D2D8EC;
}

.thankyou-workbooks .wb-titles {
	margin-top: 1rem;
}

/* --------------------------------------------------------------------------
   8. Single book page
   -------------------------------------------------------------------------- */

.book-single {
	display: grid;
	gap: 2.5rem;
	align-items: start;
}

@media (min-width: 900px) {
	.book-single {
		grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
		gap: 4rem;
	}
}

.book-single__art {
	display: grid;
	place-items: center;
	padding: 1rem 0;
	perspective: 1600px;
}

.book-single__art .b3d {
	--w: min(400px, 76vw);
	--d: 30px;
}

/* The card's art area is a link here, where the static build used a plain
   <div>. Without this the typographic cover's title and byline inherit the
   link underline. */
a.shop-card__art,
a.shop-card__art:hover {
	text-decoration: none;
	color: inherit;
}

/* A book with no artwork yet shows the typographic cover instead. It has no
   intrinsic size, so give the 3D block an explicit aspect ratio and let the
   panel fill it. */
.b3d--art .type-art,
.shop-card__art .type-art {
	aspect-ratio: inherit;
	min-height: 100%;
}

.b3d--art .b3d__tilt {
	aspect-ratio: var(--ar, 2 / 3);
}

.b3d--art .type-art {
	height: 100%;
	border-radius: 2px 6px 6px 2px;
}

.book-single h1 {
	font-size: clamp(2rem, 3.4vw, 3rem);
	color: var(--navy-deep);
	margin-bottom: .5rem;
}

.book-single .sub {
	font-size: clamp(1.05rem, 1.3vw, 1.2rem);
	color: var(--muted);
	margin-bottom: 1rem;
}

.book-single__gallery {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	justify-content: center;
	margin-top: 1.25rem;
	list-style: none;
	padding: 0;
}

.book-single__gallery img {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: 8px;
	border: 2px solid #fff;
	box-shadow: 0 10px 20px -12px rgba(15, 24, 64, .5);
}

/* The .wb-titles chips are white-on-navy, built for the dark workbook panel.
   This is the same shape for a light background. */
.chip-list {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}

.chip-list li {
	padding: .35em .8em;
	border-radius: 999px;
	background: var(--sky-wash);
	border: 1px solid #CBE3F4;
	font-size: .9rem;
}

.chip-list a {
	color: var(--navy);
	text-decoration: none;
	font-weight: 700;
}

.chip-list a:hover {
	color: var(--red);
}

.book-meta {
	display: grid;
	gap: .5rem;
	margin: 1.75rem 0 0;
	padding: 1.25rem 0 0;
	border-top: 1px solid var(--line);
	font-size: .93rem;
	color: var(--muted);
}

.book-meta div {
	display: flex;
	gap: .6rem;
	flex-wrap: wrap;
}

.book-meta dt {
	font-weight: 700;
	color: var(--ink);
	min-width: 7rem;
}

.book-meta dd {
	margin: 0;
}

/* Related books. */
.related-books {
	margin-top: clamp(3rem, 5vw, 4.5rem);
}

/* --------------------------------------------------------------------------
   8b. Product reviews
   -------------------------------------------------------------------------- */

/* The theme's own SVG star rating. Named lbw-stars because WooCommerce's
   review form builds an interactive picker at p.stars. */
.lbw-stars {
	display: inline-flex;
	gap: 2px;
	color: var(--gold-deep);
	vertical-align: middle;
}

.lbw-stars__s {
	width: 18px;
	height: 18px;
	flex: none;
}

/* WooCommerce replaces the rating <select> with this picker via JS. It draws
   the stars from its own icon font, so only the colour and size need setting. */
.woocommerce #review_form p.stars,
.woocommerce p.stars {
	display: flex;
	gap: .15rem;
	margin: 0;
	line-height: 1;
}

.woocommerce p.stars a {
	color: var(--gold-deep);
	font-size: 26px;
	width: 1em;
	height: 1em;
}

.woocommerce p.stars a:hover,
.woocommerce p.stars:hover a,
.woocommerce p.stars.selected a.active,
.woocommerce p.stars.selected a:not(.active) {
	color: var(--gold);
}

/* The <select> is still in the DOM as the fallback when JS is off. */
.comment-form-rating select#rating {
	max-width: 22rem;
}

/* The rating line beside the book title. */
.book-rating {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .75rem;
	margin: 0 0 1rem;
	font-size: .95rem;
}

.book-rating a {
	color: var(--sky-deep);
	font-weight: 700;
	text-underline-offset: 3px;
}

.reviews-sec {
	background: var(--sun-wash);
}

.reviews-sec__avg {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .75rem;
	margin: .5rem 0 0;
	color: var(--muted);
	font-size: .97rem;
}

.reviews-sec__avg .lbw-stars__s {
	width: 21px;
	height: 21px;
}

.reviews-layout {
	display: grid;
	gap: 2.5rem;
	align-items: start;
}

@media (min-width: 1000px) {
	.reviews-layout {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
		gap: 3.5rem;
	}
}

/* The review list reuses the quote-card grid, one card per review. */
.commentlist.fb-grid--reviews,
.woocommerce #reviews #comments ol.commentlist {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

.commentlist.fb-grid--reviews {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.commentlist.fb-grid--reviews {
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
	}
}

/* WooCommerce clearfixes this list with display:table pseudo-elements. In a
   grid they become items of their own and take the first cell, which pushed
   the first review into the second column. */
.woocommerce #reviews #comments ol.commentlist::before,
.woocommerce #reviews #comments ol.commentlist::after,
.commentlist.fb-grid--reviews::before,
.commentlist.fb-grid--reviews::after {
	content: none;
	display: none;
}

/* WooCommerce resets these list items to "padding:0;background:0 0;border:0"
   through a two-id selector, which strips the quote card back to bare text.
   Matched here so the card keeps its panel. */
.woocommerce #reviews #comments ol.commentlist li.fb,
.commentlist .review {
	display: flex;
	flex-direction: column;
	position: relative;
	margin: 0;
	padding: 1.75rem 1.6rem 1.5rem;
	border: 1.5px solid #F0D9A4;
	border-radius: var(--r-md);
	background: #fff;
	box-shadow: 0 20px 40px -32px rgba(169, 118, 28, .7);
}

/* The card is the <li>; this wrapper only exists to carry the #comment-{id}
   anchor, so let its children take part in the card's flex column. */
.review__inner {
	display: contents;
}

.review .lbw-stars {
	margin-bottom: .6rem;
}

.review blockquote.description {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	border-radius: 0;
}

.review blockquote.description p:last-child {
	margin-bottom: 0;
}

.review__by {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .35rem .6rem;
	margin: 1rem 0 0;
	padding-top: .9rem;
	border-top: 1px solid var(--line);
	font-size: .9rem;
}

.review__by b {
	color: var(--ink);
}

.review__by span,
.review__by time {
	color: var(--muted);
}

.review__by .verified {
	font-style: normal;
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #14532D;
	background: #EAF7EE;
	border: 1px solid #B9E2C6;
	border-radius: 999px;
	padding: .15em .6em;
}

/* A review the author can see but nobody else can, until it is approved. */
.review--pending {
	border: 1.5px dashed #E0C68A;
}

.review__pending {
	display: flex;
	gap: .5rem;
	align-items: flex-start;
	margin: 0 0 1rem;
	padding: .7rem .85rem;
	border-radius: var(--r-sm);
	background: var(--sun-wash);
	border: 1px solid #F1DDAE;
	font-size: .88rem;
	color: var(--gold-ink);
}

.review__pending .ico {
	flex: none;
	margin-top: .15rem;
}

.reviews-empty {
	display: flex;
	gap: .9rem;
	align-items: flex-start;
	padding: 1.5rem;
	border-radius: var(--r-md);
	background: #fff;
	border: 1.5px dashed var(--line);
	color: var(--muted);
}

.reviews-empty .ico {
	width: 1.9rem;
	height: 1.9rem;
	color: var(--sky);
	flex: none;
}

.reviews-empty p {
	margin: 0;
}

.reviews-empty b {
	color: var(--ink);
}

/* The review form, as one of the design's form cards. */
.reviews-form .form-card {
	position: sticky;
	top: calc(var(--hdr) + 1.25rem);
}

@media (max-width: 999px) {
	.reviews-form .form-card {
		position: static;
	}
}

.reviews-form .comment-reply-title,
.reviews-form .comment-reply-title span {
	display: block;
	font-family: 'Young Serif', Georgia, serif;
	font-weight: 400;
	font-size: clamp(1.3rem, 1.8vw, 1.55rem);
	line-height: 1.15;
	color: var(--navy);
	margin: 0 0 1.1rem;
}

.reviews-form .comment-form .field {
	display: grid;
	gap: .4rem;
	margin: 0 0 1rem;
}

.reviews-form .comment-form label {
	font-weight: 700;
	font-size: .92rem;
	color: var(--ink);
}

.reviews-form .comment-form .required {
	color: var(--red-deep);
	text-decoration: none;
}

.reviews-form .comment-form textarea {
	min-height: 150px;
	resize: vertical;
}

.reviews-form .comment-form .form-submit {
	margin: 1.25rem 0 0;
}

/* WooCommerce styles this grey with ".woocommerce #respond input#submit",
   which carries two ids — a plain .btn-buy cannot outrank it. */
.woocommerce #respond input#submit,
.woocommerce #review_form #respond input#submit,
.reviews-form .comment-form .submit {
	display: block;
	width: 100%;
	min-height: 52px;
	padding: .9em 1.5em;
	border: 0;
	border-radius: 999px;
	background-color: var(--red);
	color: #fff;
	font-weight: 700;
	font-size: 1.02rem;
	line-height: 1.2;
	box-shadow: 0 4px 0 var(--red-deep);
	cursor: pointer;
}

.woocommerce #respond input#submit:hover,
.woocommerce #review_form #respond input#submit:hover {
	background-color: #D63B2F;
}

.woocommerce #respond input#submit:active {
	box-shadow: 0 1px 0 var(--red-deep);
	transform: translateY(2px);
}

.reviews-form .comment-form-cookies-consent {
	display: flex;
	gap: .7rem;
	align-items: flex-start;
	font-size: .9rem;
	color: var(--muted);
	margin: 0 0 1rem;
}

.reviews-form .comment-form-cookies-consent input {
	width: 18px;
	height: 18px;
	margin: .15rem 0 0;
	accent-color: var(--navy);
	flex: none;
}

.reviews-form .must-log-in {
	margin: 0;
	color: var(--muted);
}

/* A review that bounced server-side. The same wording also opens in the
   #formAlert dialog; this is what is left once the dialog is dismissed, and
   the whole message for anyone without JavaScript. */
.reviews-form .form-alert {
	display: flex;
	gap: .7rem;
	align-items: flex-start;
	margin: 0 0 1.25rem;
	padding: .9rem 1.1rem;
	border-radius: var(--r-sm, 10px);
	background: #FCEFEE;
	border: 1px solid #E8B3AE;
	color: var(--red-deep);
	font-size: .95rem;
}

.reviews-form .form-alert .ico {
	width: 1.2rem;
	height: 1.2rem;
	flex: none;
	margin-top: .1rem;
}

.reviews-form [aria-invalid="true"] {
	border-color: var(--red);
	box-shadow: 0 0 0 3px rgba(199, 53, 42, .14);
}

/* The "what still needs doing" dialog. Shares the subscribe dialog's shell;
   only the list inside it is new. */
.notify--alert .notify__list {
	margin: 0 0 1.25rem;
	padding: 0 0 0 1.1rem;
	color: var(--muted);
	text-align: left;
}

.notify--alert .notify__list li {
	margin: .3rem 0;
}

.notify--alert .notify__list li::marker {
	color: var(--red);
}

/* --------------------------------------------------------------------------
   9. Reader feedback and reflections (dynamic versions of the static cards)
   -------------------------------------------------------------------------- */

.fb-grid:empty,
.reflect-grid--future:empty {
	display: none;
}

/* --------------------------------------------------------------------------
   9b. Reader-quote slider
   A scroll-snap carousel: it works by swipe, trackpad, keyboard and the
   arrows, and needs no library. With too few quotes to scroll, the arrows
   hide themselves.
   -------------------------------------------------------------------------- */

/* Quotes about a book in the catalogue link to it. Keep that quiet — the
   caption is a credit line, not a call to action. */
.fb figcaption a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(169, 118, 28, .35);
}

.fb figcaption a:hover {
	color: var(--navy);
	border-bottom-color: var(--gold-deep);
}

.fb-slider {
	position: relative;
}

.fb-slider__track {
	display: flex;
	gap: 1.25rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 2px;
	/* Room for the cards' drop shadow, which the overflow would otherwise clip. */
	padding: .5rem 2px 2.5rem;
	margin: -.5rem -2px -2.5rem;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
}

.fb-slider__track::-webkit-scrollbar {
	display: none;
}

.fb-slider__track > .fb {
	flex: 0 0 min(100%, 340px);
	scroll-snap-align: start;
}

@media (min-width: 760px) {
	.fb-slider__track > .fb {
		flex-basis: calc(50% - .625rem);
	}
}

@media (min-width: 1100px) {
	.fb-slider__track > .fb {
		flex-basis: calc(33.333% - .834rem);
	}
}

.fb-slider__track:focus-visible {
	outline: 3px solid var(--sky-deep);
	outline-offset: 4px;
	border-radius: var(--r-md);
}

/* Arrows sit just outside the track where there is room, and overlap the
   edges on narrower screens. */
.fb-slider__nav {
	position: absolute;
	top: calc(50% - 1.25rem);
	transform: translateY(-50%);
	z-index: 2;
	background: #fff;
	border-color: #EFD08E;
	box-shadow: 0 10px 24px -14px rgba(169, 118, 28, .9);
}

.fb-slider__nav:hover:not(:disabled) {
	background: var(--navy);
	border-color: var(--navy);
	color: #fff;
}

.fb-slider__nav:disabled {
	opacity: 0;
	pointer-events: none;
}

.fb-slider__nav--prev {
	left: -10px;
}

.fb-slider__nav--next {
	right: -10px;
}

@media (min-width: 1460px) {
	.fb-slider__nav--prev {
		left: -26px;
	}

	.fb-slider__nav--next {
		right: -26px;
	}
}

/* Nothing to scroll: drop the arrows entirely. */
.fb-slider.is-static .fb-slider__nav {
	display: none;
}

.fb-slider.is-static .fb-slider__track {
	overflow-x: visible;
}

/* Before the script runs, the track is already a usable scroller. */
.js-off .fb-slider__nav {
	display: none;
}

/* --------------------------------------------------------------------------
   10. Narrow screens
   The design system is already responsive; these cover the tables and cards
   this file adds, which are the only places that could overflow.
   -------------------------------------------------------------------------- */

/* Long book names plus a price column can exceed a phone's width. Let the
   order tables scroll horizontally inside their card rather than pushing the
   whole page sideways, and keep the headers readable while they do. */
.woocommerce-order-details,
.checkout-review,
.cart-summary {
	max-width: 100%;
}

.order-table,
.woocommerce-checkout-review-order-table {
	table-layout: auto;
	word-break: break-word;
}

@media (max-width: 560px) {
	.woocommerce-order-details {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.order-table {
		min-width: 340px;
	}

	.order-table th,
	.order-table td {
		padding: .7rem .8rem;
	}

	.order-table caption {
		font-size: 1.3rem;
	}

	/* A sticky summary is unhelpful on a phone: it eats the viewport. */
	.cart-summary,
	.checkout-review {
		position: static;
	}

	.thankyou__meta li {
		min-width: 0;
		flex: 1 1 100%;
	}

	.thankyou__ctas .btn,
	.cart-actions .btn {
		width: 100%;
	}

	.cart-actions .coupon {
		flex: 1 1 100%;
	}

	.checkout-panel,
	.cart-summary,
	.checkout-review,
	.thankyou-workbooks {
		padding: 1.15rem;
	}
}

/* Between phone and tablet the cart line's price column is better underneath
   the details than squeezed beside them; the 760px rule above handles the
   switch, this just keeps the price left-aligned below it. */
@media (max-width: 759px) {
	.cart-line__total {
		grid-column: 2;
		margin: 0;
	}
}

/* --------------------------------------------------------------------------
   11. Print
   -------------------------------------------------------------------------- */

@media print {
	.annc,
	.hdr,
	.join,
	.ftr,
	.drawer,
	.scrim,
	.toast,
	.skip,
	.thankyou__ctas {
		display: none !important;
	}

	.sec {
		padding-block: 1rem;
	}
}