/* ==========================================================================
   RJL DESIGN SYSTEM — 06 COMMERCE

   Shop archive, product card, single product, cart and checkout.

   This file does two jobs at once:
   1. Styles our own template markup.
   2. Maps WooCommerce's own class names onto the same tokens, because
      WooCommerce, ShopEngine and WooLentor all emit markup we do not author.
      Without the mapping those areas would keep their old sizing and the
      "one type scale everywhere" requirement would quietly fail on exactly
      the pages that matter most.

   The cart and checkout are the money path. Both are built for a 360px
   screen first and widen from there.
   ========================================================================== */

/* ==========================================================================
   WOOCOMMERCE BUTTON MAPPING
   Every Woo button becomes an RJL button. Doing this by selector rather than
   by editing templates means buttons injected by plugins are covered too.
   ========================================================================== */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--rjl-space-2xs);
	min-height: 48px;
	padding: var(--rjl-space-xs) var(--rjl-space-md);
	border: var(--rjl-border-heavy) solid var(--rjl-text);
	border-radius: var(--rjl-radius-sm);
	background: var(--rjl-text);
	color: var(--rjl-bg);
	font-family: var(--rjl-font-display);
	font-size: 0.8125rem;
	font-weight: var(--rjl-weight-bold);
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color var(--rjl-dur-fast) var(--rjl-ease-out),
	            border-color var(--rjl-dur-fast) var(--rjl-ease-out),
	            color var(--rjl-dur-fast) var(--rjl-ease-out),
	            transform var(--rjl-dur-fast) var(--rjl-ease-out);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background: var(--rjl-accent);
	border-color: var(--rjl-accent);
	color: var(--rjl-on-accent);
}

.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active { transform: translateY(1px) scale(0.99); }

/* The two genuine primaries: place order and proceed to checkout. */
.woocommerce #place_order,
.woocommerce .checkout-button.button {
	background: var(--rjl-accent);
	border-color: var(--rjl-accent);
	color: var(--rjl-on-accent);
	min-height: 56px;
	font-size: 0.875rem;
	width: 100%;
}
.woocommerce #place_order:hover,
.woocommerce .checkout-button.button:hover {
	background: var(--rjl-accent-press);
	border-color: var(--rjl-accent-press);
	color: var(--rjl-on-accent-press);
	box-shadow: var(--rjl-shadow-accent);
}

/* ==========================================================================
   SHOP ARCHIVE
   ========================================================================== */
.rjl-shop-head {
	padding-block: var(--rjl-section-y-tight);
	border-bottom: var(--rjl-border) solid var(--rjl-rule);
}

/* Category chips. The Records / Books / Merch split is the primary way people
   navigate this shop, so it is a first-class control, not a sidebar filter. */
.rjl-shop-cats {
	display: flex;
	gap: var(--rjl-space-2xs);
	overflow-x: auto;
	scrollbar-width: none;
	margin-inline: calc(var(--rjl-gutter) * -1);
	padding-inline: var(--rjl-gutter);
	padding-bottom: var(--rjl-space-3xs);
}
.rjl-shop-cats::-webkit-scrollbar { display: none; }

.rjl-shop-cat {
	display: inline-flex;
	align-items: center;
	gap: var(--rjl-space-3xs);
	white-space: nowrap;
	min-height: 42px;
	padding-inline: var(--rjl-space-md);
	border: var(--rjl-border) solid var(--rjl-rule-strong);
	border-radius: var(--rjl-radius-sm);
	font-family: var(--rjl-font-display);
	font-size: 0.75rem;
	font-weight: var(--rjl-weight-bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--rjl-text);
	transition: background-color var(--rjl-dur-fast) var(--rjl-ease-out),
	            border-color var(--rjl-dur-fast) var(--rjl-ease-out),
	            color var(--rjl-dur-fast) var(--rjl-ease-out);
}
.rjl-shop-cat:hover { border-color: var(--rjl-text); color: var(--rjl-text); }
.rjl-shop-cat[aria-current="page"],
.rjl-shop-cat.is-active {
	background: var(--rjl-text);
	border-color: var(--rjl-text);
	color: var(--rjl-bg);
}
.rjl-shop-cat__count {
	font-family: var(--rjl-font-mono);
	font-size: 0.625rem;
	color: var(--rjl-text-faint);
	font-variant-numeric: tabular-nums;
}
.rjl-shop-cat[aria-current="page"] .rjl-shop-cat__count,
.rjl-shop-cat.is-active .rjl-shop-cat__count { color: var(--rjl-ink-300); }

/* Result count + ordering row. Styled directly on WooCommerce's own markup;
   the theme emits no wrapper of its own here. */
.woocommerce .woocommerce-result-count {
	margin: 0;
	font-family: var(--rjl-font-mono);
	font-size: var(--rjl-text-xs);
	letter-spacing: var(--rjl-track-mono);
	color: var(--rjl-text-muted);
}
.woocommerce .woocommerce-ordering { margin: 0; }
.woocommerce .woocommerce-ordering select {
	min-height: 44px;
	padding: var(--rjl-space-3xs) var(--rjl-space-xl) var(--rjl-space-3xs) var(--rjl-space-sm);
	border: var(--rjl-border) solid var(--rjl-rule-strong);
	border-radius: var(--rjl-radius-sm);
	background-color: var(--rjl-bg-raised);
	font-family: var(--rjl-font-body);
	font-size: 1rem;
	color: var(--rjl-text);
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237b7b83' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--rjl-space-sm) center;
}

/* --------------------------------------------------------------------------
   PRODUCT GRID
   Two columns on the smallest screens. One column wastes a phone screen for
   square album and book covers, and users expect to compare covers side by
   side in a record shop.
   ----------------------------------------------------------------------- */
.woocommerce ul.products,
.rjl-products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--rjl-space-md) var(--rjl-space-sm);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 40em) {
	.woocommerce ul.products,
	.rjl-products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rjl-space-lg) var(--rjl-space-md); }
}
@media (min-width: 64em) {
	.woocommerce ul.products,
	.rjl-products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--rjl-space-xl) var(--rjl-space-lg); }
}

/* Neutralises the float/width arithmetic WooCommerce ships for its own
   column classes, which fights CSS Grid. */
.woocommerce ul.products li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	clear: none !important;
}

/* --------------------------------------------------------------------------
   PRODUCT CARD
   The cover is the product. Everything else is quiet around it.
   ----------------------------------------------------------------------- */
.woocommerce ul.products li.product,
.rjl-product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	text-align: left;
}

.woocommerce ul.products li.product a img,
.rjl-product-card__media img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	margin: 0 0 var(--rjl-space-sm);
	border-radius: var(--rjl-radius-md);
	background: var(--rjl-bg-sunk);
	transition: transform var(--rjl-dur-slow) var(--rjl-ease-out);
}

.woocommerce ul.products li.product:hover a img { transform: scale(1.03); }

/* Media wrapper clips the zoom. */
.rjl-product-card__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--rjl-radius-md);
	margin-bottom: var(--rjl-space-sm);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.rjl-product-card__title {
	font-family: var(--rjl-font-display);
	font-size: var(--rjl-text-base);
	font-weight: var(--rjl-weight-semi);
	line-height: 1.25;
	letter-spacing: var(--rjl-track-head);
	margin: 0 0 var(--rjl-space-3xs);
	padding: 0;
	/* 2026-09 QA round: "centre align the names underneath the items". */
	text-align: center;
	/* Two-line clamp keeps every card's price on the same baseline. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Artist / author line. */
.rjl-product-card__meta {
	font-size: var(--rjl-text-sm);
	color: var(--rjl-text-muted);
	margin: 0 0 var(--rjl-space-2xs);
}

/* Centred per product (2026-09 QA round 3: "centre align all the prices
   under their respective items") - the grid price row used to hug the
   left edge under a left-aligned title; justify-content is what actually
   centres it, since align-items only controls the baseline the currency
   symbol and amount sit on. */
.woocommerce ul.products li.product .price,
.rjl-product-card__price {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: var(--rjl-space-2xs);
	margin: auto 0 0;          /* pins price to card bottom */
	padding-top: var(--rjl-space-3xs);
	font-family: var(--rjl-font-mono);
	font-size: var(--rjl-text-base);
	font-weight: var(--rjl-weight-bold);
	font-variant-numeric: tabular-nums;
	color: var(--rjl-text);
}

.woocommerce ul.products li.product .price del {
	color: var(--rjl-text-faint);
	font-weight: var(--rjl-weight-regular);
	font-size: var(--rjl-text-sm);
	text-decoration: line-through;
}
.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	color: var(--rjl-accent-ink);
}

/* --------------------------------------------------------------------------
   CURRENCY SYMBOL

   The naira sign renders thinner and slightly smaller than the digits beside
   it. This is NOT a CSS override: the symbol and the amount compute to the
   same font-family and font-size (Space Mono, 17px). Space Mono simply has no
   ₦ glyph — document.fonts.check() returns false for ₦ and true for '0' — so
   the browser silently falls back to another font for that one character, and
   that fallback draws a lighter ₦.

   Naming a font with real ₦ coverage for the symbol only fixes the mismatch at
   source. The digits stay on Space Mono, so tabular-nums and the catalogue
   look are untouched — this rule sets font-family and nothing else.

   Applies to every price on the site: loop, single product, cart, checkout,
   order review and mini-cart all wrap the symbol in this same class.
   ----------------------------------------------------------------------- */
.woocommerce-Price-currencySymbol {
	/* 2026-09 QA: "the jumbled/garbled price at from the crates on the phone".
	   Root cause found - the self-hosted Space Mono webfont has no Naira
	   glyph and silently renders U+20A6 as a hash sign ("#37,500.00")
	   instead of falling back, which is what the digits sit in. The Arial
	   fallback below fixed this in every desktop test, but Arial is a
	   system font - not every Android build ships a copy with a correct
	   Naira glyph, which is the likeliest reason this kept reappearing on
	   phones after being "fixed". Archivo is a webfont already loaded by
	   this theme for headings, so it renders identically on every device
	   regardless of what fonts that device has installed - putting it
	   first removes the platform dependency. Arial/Helvetica stay as a
	   safety net if the webfont somehow fails to load. */
	font-family: var(--rjl-font-body);
	/* tabular-nums (set on .price and inherited here) tries to lock every
	   character to the same digit width - harmless for 0-9, but applied to
	   the Naira sign rendered in a swapped-out fallback font, it can throw
	   off spacing enough to read as a jumbled/garbled price. Turning it off
	   just for this symbol leaves the digits' alignment untouched. */
	font-variant-numeric: normal;
}

/* Sale flash — square, top-left, over the cover. */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
	position: absolute;
	top: var(--rjl-space-2xs);
	left: var(--rjl-space-2xs);
	z-index: var(--rjl-z-raised);
	min-height: 0;
	min-width: 0;
	margin: 0;
	padding: 3px var(--rjl-space-2xs);
	border-radius: var(--rjl-radius-xs);
	background: var(--rjl-accent);
	color: var(--rjl-on-accent);
	font-family: var(--rjl-font-mono);
	font-size: var(--rjl-text-2xs);
	font-weight: var(--rjl-weight-bold);
	letter-spacing: var(--rjl-track-label);
	text-transform: uppercase;
	line-height: 1.5;
}

/* Loop add-to-cart: quiet until hover on desktop, always visible on touch
   (where there is no hover to reveal it). */
.woocommerce ul.products li.product .button {
	width: 100%;
	margin-top: var(--rjl-space-2xs);
	min-height: 42px;
	font-size: 0.6875rem;
}

.woocommerce ul.products li.product .added_to_cart {
	display: block;
	margin-top: var(--rjl-space-3xs);
	font-family: var(--rjl-font-mono);
	font-size: var(--rjl-text-xs);
	color: var(--rjl-positive);
	text-decoration: underline;
}

/* Star rating. */
.woocommerce .star-rating { color: var(--rjl-warning); font-size: 0.8em; margin-bottom: var(--rjl-space-3xs); }

/* ==========================================================================
   SINGLE PRODUCT
   ========================================================================== */
/* NOTE: the single-product page is rendered entirely by WooCommerce's own
   template, which this theme does not override, so everything below targets Woo
   selectors directly rather than an .rjl-product wrapper of ours.
   The .rjl-product / .rjl-product__buy wrapper rules were removed in the 04c
   audit as unreferenced. */

.woocommerce div.product div.images img {
	border-radius: var(--rjl-radius-lg);
	background: var(--rjl-bg-sunk);
}

.woocommerce div.product .product_title {
	font-size: var(--rjl-text-3xl);
	margin-bottom: var(--rjl-space-2xs);
}

/* Price on the product page is a headline number, in the catalogue face. */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	display: flex;
	align-items: baseline;
	gap: var(--rjl-space-2xs);
	margin: 0 0 var(--rjl-space-md);
	font-family: var(--rjl-font-mono);
	font-size: var(--rjl-text-2xl);
	font-weight: var(--rjl-weight-bold);
	font-variant-numeric: tabular-nums;
	color: var(--rjl-text);
}
.woocommerce div.product p.price del { font-size: var(--rjl-text-lg); color: var(--rjl-text-faint); }
.woocommerce div.product p.price ins  { text-decoration: none; color: var(--rjl-accent); }

.woocommerce div.product .woocommerce-product-details__short-description {
	max-width: var(--rjl-measure);
	color: var(--rjl-text-muted);
	margin-bottom: var(--rjl-space-md);
}

/* QUANTITY + ADD TO CART */
.woocommerce div.product form.cart {
	display: grid;
	gap: var(--rjl-space-sm);
	margin-bottom: var(--rjl-space-md);
}

@media (min-width: 30em) {
	.woocommerce div.product form.cart {
		grid-template-columns: auto minmax(0, 1fr);
		align-items: stretch;
	}
	/* Variation forms stack rather than sitting beside the selects. */
	.woocommerce div.product form.variations_form.cart { grid-template-columns: 1fr; }
}

.woocommerce .quantity { display: flex; align-items: stretch; }

.woocommerce .quantity .qty {
	width: 5rem;
	min-height: 48px;
	text-align: center;
	border: var(--rjl-border) solid var(--rjl-rule-strong);
	border-radius: var(--rjl-radius-sm);
	background: var(--rjl-bg-raised);
	font-family: var(--rjl-font-mono);
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
	color: var(--rjl-text);
}

.woocommerce div.product form.cart .button {
	min-height: 52px;
	background: var(--rjl-accent);
	border-color: var(--rjl-accent);
	color: var(--rjl-on-accent);
	font-size: 0.875rem;
}
.woocommerce div.product form.cart .button:hover {
	background: var(--rjl-accent-press);
	border-color: var(--rjl-accent-press);
	color: var(--rjl-on-accent-press);
	box-shadow: var(--rjl-shadow-accent);
}

/* Variation selects. */
.woocommerce div.product table.variations { margin-bottom: var(--rjl-space-sm); }
.woocommerce div.product table.variations td,
.woocommerce div.product table.variations th { border: 0; padding: 0 0 var(--rjl-space-2xs); display: block; }
.woocommerce div.product table.variations label {
	font-family: var(--rjl-font-mono);
	font-size: var(--rjl-text-xs);
	font-weight: var(--rjl-weight-bold);
	letter-spacing: var(--rjl-track-label);
	text-transform: uppercase;
	color: var(--rjl-text-muted);
}
.woocommerce div.product table.variations select {
	width: 100%;
	min-height: 48px;
	padding: var(--rjl-space-xs) var(--rjl-space-sm);
	border: var(--rjl-border) solid var(--rjl-rule-strong);
	border-radius: var(--rjl-radius-sm);
	background: var(--rjl-bg-raised);
	font-size: 1rem;
}

/* Stock + meta. */
.woocommerce div.product .stock { font-family: var(--rjl-font-mono); font-size: var(--rjl-text-xs); letter-spacing: var(--rjl-track-label); text-transform: uppercase; }
.woocommerce div.product .stock.in-stock { color: var(--rjl-positive); }
.woocommerce div.product .stock.out-of-stock { color: var(--rjl-critical); }

.woocommerce div.product .product_meta {
	margin-top: var(--rjl-space-md);
	padding-top: var(--rjl-space-md);
	border-top: var(--rjl-border) solid var(--rjl-rule);
	font-family: var(--rjl-font-mono);
	font-size: var(--rjl-text-xs);
	letter-spacing: var(--rjl-track-mono);
	color: var(--rjl-text-muted);
	display: grid;
	gap: var(--rjl-space-3xs);
}
.woocommerce div.product .product_meta > span { display: block; }

/* TABS */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: var(--rjl-space-md);
	overflow-x: auto;
	scrollbar-width: none;
	list-style: none;
	margin: 0 0 var(--rjl-space-md);
	padding: 0 0 0 0;
	border-bottom: var(--rjl-border) solid var(--rjl-rule);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0; padding: 0; background: none; border: 0; border-radius: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: var(--rjl-space-xs) 0;
	font-family: var(--rjl-font-display);
	font-size: 0.8125rem;
	font-weight: var(--rjl-weight-bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--rjl-text-muted);
	border-bottom: var(--rjl-border-heavy) solid transparent;
	white-space: nowrap;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--rjl-text);
	border-bottom-color: var(--rjl-accent);
}

/* Related / upsells. */
.woocommerce .related > h2,
.woocommerce .upsells > h2,
.woocommerce .cross-sells > h2 {
	font-size: var(--rjl-text-2xl);
	margin-bottom: var(--rjl-space-md);
}

/* ==========================================================================
   CART
   The default Woo cart is a wide data table, which is unusable at 360px.
   Below 48em each row is re-flowed into a card using the data-title
   attributes WooCommerce already emits, so no template surgery is needed for
   the mobile view to work.
   ========================================================================== */
.woocommerce table.shop_table {
	border: 0;
	border-radius: 0;
	margin: 0 0 var(--rjl-space-lg);
	width: 100%;
}

.woocommerce table.shop_table th {
	font-family: var(--rjl-font-mono);
	font-size: var(--rjl-text-xs);
	font-weight: var(--rjl-weight-bold);
	letter-spacing: var(--rjl-track-label);
	text-transform: uppercase;
	color: var(--rjl-text-muted);
	border-bottom: var(--rjl-border-heavy) solid var(--rjl-text);
	padding: var(--rjl-space-sm) var(--rjl-space-xs);
}

.woocommerce table.shop_table td {
	padding: var(--rjl-space-sm) var(--rjl-space-xs);
	border-top: 0;
	border-bottom: var(--rjl-border) solid var(--rjl-rule);
	vertical-align: middle;
}

.woocommerce table.cart img { width: 72px; border-radius: var(--rjl-radius-sm); }

.woocommerce table.cart .product-name a {
	font-family: var(--rjl-font-display);
	font-weight: var(--rjl-weight-semi);
	font-size: var(--rjl-text-base);
	text-decoration: none;
	letter-spacing: var(--rjl-track-head);
}

.woocommerce table.cart .product-price,
.woocommerce table.cart .product-subtotal,
.woocommerce table.cart .product-total {
	font-family: var(--rjl-font-mono);
	font-variant-numeric: tabular-nums;
	font-weight: var(--rjl-weight-semi);
}

.woocommerce a.remove {
	display: inline-grid;
	place-items: center;
	width: 30px; height: 30px;
	border-radius: var(--rjl-radius-sm);
	color: var(--rjl-text-faint) !important;
	font-size: 1.1rem;
	line-height: 1;
	text-decoration: none;
	transition: background-color var(--rjl-dur-fast) var(--rjl-ease-out),
	            color var(--rjl-dur-fast) var(--rjl-ease-out);
}
.woocommerce a.remove:hover {
	background: var(--rjl-critical-tint) !important;
	color: var(--rjl-critical) !important;
}

/* ---- CART, SMALL SCREEN -------------------------------------------------- */
@media (max-width: 47.999em) {

	.woocommerce table.shop_table.cart thead { display: none; }

	.woocommerce table.shop_table.cart,
	.woocommerce table.shop_table.cart tbody { display: block; width: 100%; }

	.woocommerce table.shop_table.cart tr.cart_item {
		display: grid;
		grid-template-columns: 72px minmax(0, 1fr) auto;
		grid-template-areas:
			"thumb name    remove"
			"thumb price   price"
			"thumb qty     total";
		gap: var(--rjl-space-3xs) var(--rjl-space-2xs);
		align-items: center;
		padding: var(--rjl-space-md) 0;
		border-bottom: var(--rjl-border) solid var(--rjl-rule);
	}

	.woocommerce table.shop_table.cart tr.cart_item td {
		display: block;
		border: 0;
		padding: 0;
	}

	.woocommerce table.shop_table.cart td.product-thumbnail { grid-area: thumb; align-self: start; }
	.woocommerce table.shop_table.cart td.product-name      { grid-area: name; }
	.woocommerce table.shop_table.cart td.product-price     { grid-area: price; }
	.woocommerce table.shop_table.cart td.product-quantity  { grid-area: qty; }
	.woocommerce table.shop_table.cart td.product-subtotal  { grid-area: total; text-align: right; }
	.woocommerce table.shop_table.cart td.product-remove    { grid-area: remove; text-align: right; }

	.woocommerce table.shop_table.cart td.product-thumbnail img { width: 72px; }

	/* Label the reflowed cells, using the attribute Woo already provides. */
	.woocommerce table.shop_table.cart td.product-price::before,
	.woocommerce table.shop_table.cart td.product-subtotal::before {
		content: attr(data-title) ": ";
		font-family: var(--rjl-font-mono);
		font-size: var(--rjl-text-2xs);
		font-weight: var(--rjl-weight-regular);
		letter-spacing: var(--rjl-track-label);
		text-transform: uppercase;
		color: var(--rjl-text-faint);
	}

	/* The actions row (coupon + update) stacks. */
	.woocommerce table.shop_table.cart td.actions {
		display: grid;
		gap: var(--rjl-space-2xs);
		padding-top: var(--rjl-space-md);
	}
	.woocommerce table.shop_table.cart td.actions .coupon {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: var(--rjl-space-2xs);
	}
	.woocommerce table.shop_table.cart td.actions .button { width: 100%; }
}

.woocommerce td.actions .coupon input[type="text"] {
	min-height: 48px;
	padding: var(--rjl-space-xs) var(--rjl-space-sm);
	border: var(--rjl-border) solid var(--rjl-rule-strong);
	border-radius: var(--rjl-radius-sm);
	font-size: 1rem;
	width: 100%;
}

/* CART TOTALS */
.woocommerce .cart_totals,
.woocommerce-cart .cart-collaterals .cart_totals {
	width: 100%;
	padding: var(--rjl-space-md);
	background: var(--rjl-bg-sunk);
	border-radius: var(--rjl-radius-lg);
}
.woocommerce .cart_totals h2 { font-size: var(--rjl-text-xl); margin-bottom: var(--rjl-space-sm); }
.woocommerce .cart_totals table.shop_table td,
.woocommerce .cart_totals table.shop_table th {
	padding: var(--rjl-space-2xs) 0;
	border-bottom: var(--rjl-border) solid var(--rjl-rule);
}
.woocommerce .cart_totals .order-total td,
.woocommerce .cart_totals .order-total th {
	border-bottom: 0;
	padding-top: var(--rjl-space-sm);
	font-size: var(--rjl-text-lg);
	font-weight: var(--rjl-weight-bold);
}
.woocommerce .cart_totals .amount {
	font-family: var(--rjl-font-mono);
	font-variant-numeric: tabular-nums;
	font-weight: var(--rjl-weight-bold);
}

@media (min-width: 64em) {
	.rjl-cart-layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 22rem;
		gap: var(--rjl-space-2xl);
		align-items: start;
	}
	.rjl-cart-layout .cart-collaterals {
		position: sticky;
		top: calc(var(--rjl-header-h) + var(--rjl-space-md));
		width: 100%;
	}
	.woocommerce-cart .cart-collaterals .cart_totals { width: 100%; float: none; }
}

/* ==========================================================================
   CHECKOUT
   ========================================================================== */
@media (min-width: 64em) {
	.woocommerce .checkout.woocommerce-checkout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 24rem;
		gap: var(--rjl-space-2xl);
		align-items: start;
	}
	.woocommerce .checkout.woocommerce-checkout #customer_details { grid-column: 1; }
	.woocommerce .checkout.woocommerce-checkout .rjl-checkout__review {
		grid-column: 2;
		grid-row: 1 / span 3;
		position: sticky;
		top: calc(var(--rjl-header-h) + var(--rjl-space-md));
	}
}

.woocommerce .checkout h3 {
	font-size: var(--rjl-text-xl);
	padding-bottom: var(--rjl-space-2xs);
	margin-bottom: var(--rjl-space-md);
	border-bottom: var(--rjl-border-heavy) solid var(--rjl-text);
}

/* Checkout fields, mapped to the RJL input. */
.woocommerce form .form-row { padding: 0; margin: 0 0 var(--rjl-space-md); display: grid; gap: var(--rjl-space-3xs); }

.woocommerce form .form-row label {
	font-family: var(--rjl-font-mono);
	font-size: var(--rjl-text-xs);
	font-weight: var(--rjl-weight-bold);
	letter-spacing: var(--rjl-track-label);
	text-transform: uppercase;
	color: var(--rjl-text-muted);
	line-height: 1.4;
}
.woocommerce form .form-row .required { color: var(--rjl-accent-ink); text-decoration: none; border: 0; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
	width: 100%;
	min-height: 48px;
	padding: var(--rjl-space-xs) var(--rjl-space-sm);
	background: var(--rjl-bg-raised);
	border: var(--rjl-border) solid var(--rjl-rule-strong);
	border-radius: var(--rjl-radius-sm);
	font-family: var(--rjl-font-body);
	font-size: 1rem;                 /* prevents iOS zoom-on-focus */
	color: var(--rjl-text);
	transition: border-color var(--rjl-dur-fast) var(--rjl-ease-out),
	            box-shadow var(--rjl-dur-fast) var(--rjl-ease-out);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	outline: none;
	border-color: var(--rjl-accent);
	box-shadow: 0 0 0 3px var(--rjl-accent-tint);
}

/* Woo's own invalid/valid markers. */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select,
.woocommerce form .form-row.woocommerce-invalid .select2-container .select2-selection--single {
	border-color: var(--rjl-critical);
	background: var(--rjl-critical-tint);
}
.woocommerce form .form-row.woocommerce-validated input.input-text { border-color: var(--rjl-positive); }

/* Two-up name fields from 30em. */
@media (min-width: 30em) {
	.woocommerce form .form-row-first,
	.woocommerce form .form-row-last { width: 100%; float: none; }
	.woocommerce .woocommerce-billing-fields__field-wrapper,
	.woocommerce .woocommerce-shipping-fields__field-wrapper {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--rjl-space-sm);
	}
	/* Fields that must stay full width. */
	.woocommerce .woocommerce-billing-fields__field-wrapper > .form-row-wide,
	.woocommerce .woocommerce-shipping-fields__field-wrapper > .form-row-wide,
	.woocommerce .woocommerce-billing-fields__field-wrapper > #billing_address_1_field,
	.woocommerce .woocommerce-billing-fields__field-wrapper > #billing_address_2_field {
		grid-column: 1 / -1;
	}
}

/* ORDER REVIEW */
.rjl-checkout__review {
	padding: var(--rjl-space-md);
	background: var(--rjl-bg-sunk);
	border-radius: var(--rjl-radius-lg);
}
.woocommerce .checkout #order_review_heading { font-size: var(--rjl-text-xl); }

.woocommerce table.woocommerce-checkout-review-order-table { margin-bottom: var(--rjl-space-md); }
.woocommerce table.woocommerce-checkout-review-order-table td,
.woocommerce table.woocommerce-checkout-review-order-table th {
	padding: var(--rjl-space-2xs) 0;
	border-bottom: var(--rjl-border) solid var(--rjl-rule);
}
.woocommerce table.woocommerce-checkout-review-order-table .order-total td,
.woocommerce table.woocommerce-checkout-review-order-table .order-total th {
	padding-top: var(--rjl-space-sm);
	border-bottom: 0;
	font-size: var(--rjl-text-lg);
	font-weight: var(--rjl-weight-bold);
}
.woocommerce table.woocommerce-checkout-review-order-table .amount {
	font-family: var(--rjl-font-mono);
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   PAYMENT METHODS

   Explicitly built to hold N gateways, not one.

   The site currently offers only Direct bank transfer, and the old styling
   made that single option read as a fixed block of instructions rather than a
   choice. Once Paystack is installed there will be at least two, and card will
   become the option most people want, so the list has to read as a genuine
   selection from the first render.

   Nothing here is conditional on the number of gateways. There is no
   :only-child rule and no "if one option, hide the radio" shortcut, so adding
   Paystack changes the content of the list and nothing about its behaviour.

   IMPORTANT: this styles WooCommerce's own core markup and does NOT override
   checkout/payment-method.php. That is deliberate. Gateway plugins — Paystack
   included — hook into the exact DOM shape core emits (core's checkout.js
   finds the description panel via .closest('li').find('.payment_box')), and a
   restructured template is a classic way to break a gateway in a way that only
   shows up at the moment someone tries to pay. Layout is done entirely in CSS
   on top of the untouched core structure:
       li  > input[type=radio]   the control
       li  > label               gateway title + icon
       li  > div.payment_box     description, shown only when selected
   ========================================================================== */
.woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
	padding: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
	display: grid;
	gap: var(--rjl-space-2xs);
	list-style: none;
	margin: 0 0 var(--rjl-space-md);
	padding: 0;
	border: 0;
}

/* Each gateway is a two-column grid: radio, then label. The description panel
   spans both columns underneath. */
.woocommerce-checkout #payment ul.payment_methods li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	column-gap: var(--rjl-space-2xs);
	margin: 0;
	padding: var(--rjl-space-sm) var(--rjl-space-md);
	list-style: none;
	background: var(--rjl-bg-raised);
	border: var(--rjl-border-heavy) solid var(--rjl-rule-strong);
	border-radius: var(--rjl-radius-md);
	/* Comfortable target height whether the gateway has a logo or not. */
	min-height: 64px;
	cursor: pointer;
	transition: border-color var(--rjl-dur-fast) var(--rjl-ease-out),
	            background-color var(--rjl-dur-fast) var(--rjl-ease-out);
}

.woocommerce-checkout #payment ul.payment_methods li:hover { border-color: var(--rjl-ink-400); }

/* Selected state. :has() where supported; .rjl-is-selected is the class the
   theme's JS mirrors on for browsers without it. */
.woocommerce-checkout #payment ul.payment_methods li:has(input:checked),
.woocommerce-checkout #payment ul.payment_methods li.rjl-is-selected {
	border-color: var(--rjl-accent);
	background: var(--rjl-accent-tint);
}

.woocommerce-checkout #payment ul.payment_methods li > input[type="radio"] {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--rjl-accent);
	flex-shrink: 0;
	cursor: pointer;
}

.woocommerce-checkout #payment ul.payment_methods li > label {
	display: flex;
	align-items: center;
	gap: var(--rjl-space-2xs);
	margin: 0;
	padding: 0;
	cursor: pointer;
	font-family: var(--rjl-font-display);
	font-size: var(--rjl-text-base);
	font-weight: var(--rjl-weight-semi);
	letter-spacing: var(--rjl-track-head);
	color: var(--rjl-text);
	line-height: 1.3;
}

/* Gateway logos. Capped so a large supplied image cannot blow out the row, and
   pushed to the trailing edge so titles stay left-aligned in a column. */
.woocommerce-checkout #payment ul.payment_methods li > label img {
	max-height: 26px;
	width: auto;
	margin: 0 0 0 auto;
	border-radius: var(--rjl-radius-xs);
}

/* Description panel. Spans the full row, under the label. */
.woocommerce-checkout #payment ul.payment_methods li > .payment_box {
	grid-column: 1 / -1;
	position: relative;
	margin: var(--rjl-space-2xs) 0 0;
	padding: var(--rjl-space-sm) 0 0;
	border-top: var(--rjl-border) solid var(--rjl-rule);
	background: transparent;
	border-radius: 0;
	font-family: var(--rjl-font-body);
	font-size: var(--rjl-text-sm);
	font-weight: var(--rjl-weight-regular);
	letter-spacing: 0;
	line-height: var(--rjl-leading-body);
	color: var(--rjl-text-muted);
	text-transform: none;
}
.woocommerce-checkout #payment ul.payment_methods li > .payment_box::before { display: none; }
.woocommerce-checkout #payment ul.payment_methods li > .payment_box p:last-child { margin-bottom: 0; }

/* Bank-transfer instructions carry account numbers that people transcribe by
   hand, so they get the mono face and tabular figures. */
.woocommerce-checkout #payment ul.payment_methods li > .payment_box .wc-bacs-bank-details,
.woocommerce-checkout #payment ul.payment_methods li > .payment_box ul {
	font-family: var(--rjl-font-mono);
	font-variant-numeric: tabular-nums;
	font-size: var(--rjl-text-sm);
	list-style: none;
	padding: var(--rjl-space-sm);
	margin: var(--rjl-space-2xs) 0 0;
	background: var(--rjl-bg-sunk);
	border-radius: var(--rjl-radius-sm);
}

/* Payment fields a gateway renders inline (card number and so on). */
.woocommerce-checkout #payment ul.payment_methods li > .payment_box input[type="text"],
.woocommerce-checkout #payment ul.payment_methods li > .payment_box input[type="tel"],
.woocommerce-checkout #payment ul.payment_methods li > .payment_box input[type="email"],
.woocommerce-checkout #payment ul.payment_methods li > .payment_box select {
	width: 100%;
	min-height: 48px;
	padding: var(--rjl-space-xs) var(--rjl-space-sm);
	border: var(--rjl-border) solid var(--rjl-rule-strong);
	border-radius: var(--rjl-radius-sm);
	background: var(--rjl-bg-raised);
	font-size: 1rem;
}

/* Heading above the block, added by rjl_payment_heading(). */
.rjl-payment-head { margin-bottom: var(--rjl-space-sm); }
.rjl-payment-head h3 {
	margin: 0 0 var(--rjl-space-3xs);
	font-size: var(--rjl-text-xl);
	padding-bottom: var(--rjl-space-2xs);
	border-bottom: var(--rjl-border-heavy) solid var(--rjl-text);
}
.rjl-payment-head .rjl-label { display: block; }

/* Terms + place order. */
.woocommerce-checkout #payment .form-row.place-order { margin: 0; padding: 0; }
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { margin-bottom: var(--rjl-space-md); }

/* Trust line under the button. Reassurance at the exact point of hesitation. */
.rjl-checkout__trust {
	display: flex;
	align-items: flex-start;
	gap: var(--rjl-space-3xs);
	margin-top: var(--rjl-space-sm);
	font-family: var(--rjl-font-mono);
	font-size: var(--rjl-text-2xs);
	letter-spacing: var(--rjl-track-mono);
	line-height: 1.5;
	color: var(--rjl-text-faint);
	text-transform: uppercase;
}
.rjl-checkout__trust svg { flex-shrink: 0; margin-top: 1px; }
/* ==========================================================================
   WOOCOMMERCE NOTICES
   ========================================================================== */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: var(--rjl-space-2xs);
	padding: var(--rjl-space-sm) var(--rjl-space-md);
	margin: 0 0 var(--rjl-space-md);
	border: 0;
	border-left: var(--rjl-border-brut) solid currentColor;
	border-radius: var(--rjl-radius-md);
	font-size: var(--rjl-text-base);
	list-style: none;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }

.woocommerce-message   { background: var(--rjl-positive-tint); color: var(--rjl-positive); }
.woocommerce-info      { background: var(--rjl-bg-sunk);       color: var(--rjl-text); }
.woocommerce-error     { background: var(--rjl-critical-tint); color: var(--rjl-critical); }

.woocommerce-message .button,
.woocommerce-info .button { margin-left: auto; min-height: 40px; font-size: 0.6875rem; }

/* ==========================================================================
   MY ACCOUNT
   ========================================================================== */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none; margin: 0 0 var(--rjl-space-lg); padding: 0;
	display: flex; flex-wrap: wrap; gap: var(--rjl-space-3xs);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: inline-flex; align-items: center; min-height: 42px;
	padding-inline: var(--rjl-space-sm);
	border: var(--rjl-border) solid var(--rjl-rule-strong);
	border-radius: var(--rjl-radius-sm);
	font-family: var(--rjl-font-display);
	font-size: 0.75rem; font-weight: var(--rjl-weight-bold);
	letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--rjl-text); border-color: var(--rjl-text); color: var(--rjl-bg);
}

@media (min-width: 64em) {
	.woocommerce-account .woocommerce-MyAccount-navigation { float: none; width: auto; }
	.woocommerce-account .woocommerce-MyAccount-content { float: none; width: auto; }
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */
.woocommerce nav.woocommerce-pagination ul {
	display: flex; flex-wrap: wrap; gap: var(--rjl-space-3xs);
	border: 0; margin: var(--rjl-space-xl) 0 0; padding: 0;
	justify-content: center;
}
.woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0; overflow: visible; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: grid; place-items: center;
	min-width: 44px; height: 44px; padding: 0 var(--rjl-space-2xs);
	border: var(--rjl-border) solid var(--rjl-rule-strong);
	border-radius: var(--rjl-radius-sm);
	font-family: var(--rjl-font-mono); font-size: var(--rjl-text-sm);
	font-variant-numeric: tabular-nums;
	color: var(--rjl-text); background: transparent;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--rjl-text); border-color: var(--rjl-text); color: var(--rjl-bg);
}
.woocommerce nav.woocommerce-pagination ul li a:hover { border-color: var(--rjl-text); background: transparent; }

/* Home page "SHOP / RJL MERCH" featured-product spotlight (UCaddon Woo product
   list widget, element 47148a9) ships title/price text as pure white straight
   from Elementor's own generated widget CSS - it was styled for a dark image
   backdrop, but on this page the info column sits on the plain light body
   background, so the title and price render white-on-cream and are basically
   unreadable (2026-09 QA round, screenshot 2). Overriding to the standard ink
   color; !important is needed because Elementor's per-post CSS is generated
   separately and there's no reliable load-order guarantee against it. */
.elementor-element-47148a9 .product-text-name,
.elementor-element-47148a9 .uc_regular_price,
.elementor-element-47148a9 .uc_sale_price {
	color: var(--rjl-text) !important;
}

/* Single-product template (WooLentor's shared "Single Product" Elementor
   template, element 11de0d4 - same template renders every product page site-
   wide) sets its own container background to solid black, but the title and
   price still pull the ordinary light-page ink color from --rjl-text, so both
   are near-invisible dark-on-black (2026-09 QA round, screenshot 1). Rather
   than hardcode a color, this reassigns the same semantic tokens the
   .rjl-inverse pattern uses elsewhere on the site, scoped to this one
   container, so title, price and any other text built on --rjl-text/-muted
   fall in line automatically. */
.elementor-element-11de0d4 {
	--rjl-text: var(--rjl-paper);
	--rjl-text-muted: var(--rjl-ink-300);
}

/* Same single-product template's "Related products" block sits in its own
   black container (element f5cc1d5) further down the same page - same story
   as element 11de0d4 above: title and price inherit --rjl-text (light-page
   ink) and disappear into the black backdrop. Same fix, same reasoning. */
.elementor-element-f5cc1d5 {
	--rjl-text: var(--rjl-paper);
	--rjl-text-muted: var(--rjl-ink-300);
}

/* Related-products grid on the single-product template renders every title
   and price TWICE per card - once as an overlay baked into the image link
   (.astra-shop-thumbnail-wrap, Astra's "show on image" placement) and again
   in the normal summary block underneath (.astra-shop-summary-wrap). Both
   placements are switched on at once, so every card prints its name and
   price stacked twice (2026-09 QA round, found while checking the related-
   products block for the same contrast issue as the black box above).
   Keeping the summary-wrap copy, since that is the placement used by every
   other product card on the site, and dropping the image-overlay one. */
.related.products .astra-shop-thumbnail-wrap .woocommerce-loop-product__title,
.related.products .astra-shop-thumbnail-wrap .price {
	display: none !important;
}

/* Journals landing page (/journals/) intro block - heading, description
   paragraph, and all eight category links (History, Album of the Week,
   Memories, G.O.A.T, Pioneers, Tributes, Playlists, Reading Lists) sit in
   their own dark container (element 0e104d5, background rgb(31,31,29))
   that never got flipped to the .rjl-inverse token set, so every text
   element in it still pulls the ordinary light-page ink color and reads
   as near-black on near-black - same root cause as the two black-panel
   fixes above, just on a page nobody had checked yet (2026-09 QA sweep).
   Same fix: reassign the semantic tokens for this one container instead
   of hardcoding a color. */
.elementor-element-0e104d5 {
	--rjl-text: var(--rjl-paper);
	--rjl-text-muted: var(--rjl-ink-300);
}

/* "The Space" subpages (Book & Record Store, Listening Lounge, Restaurant,
   Events) and "Members" subpages (Members, Renegrade Book Club) each carry
   their own copy of the same dark info block (address, hours, mission
   copy) - same root cause as the Journals fix above, just six more
   instances of it found in the same sweep: a dark container (background
   rgb(31,31,29)) that never got flipped to the .rjl-inverse token set, so
   its paragraph and heading text - which all pull --rjl-text/--rjl-text-
   muted - stayed the default light-page ink color and read as near-black
   on near-black. Same fix, one line per page. */
.elementor-element-bd4ff1e,
.elementor-element-c9d943d,
.elementor-element-53dcc3a,
.elementor-element-60e906c,
.elementor-element-1798060,
.elementor-element-e6c24fc {
	--rjl-text: var(--rjl-paper);
	--rjl-text-muted: var(--rjl-ink-300);
}

/* Checkout page, "Payment" section heading (ShopEngine's checkout-payment
   widget, element 561078a) sits directly on the checkout page's black
   background - every other label on this page (Billing Details, Town/
   City, State...) already renders correctly in light text, but this one
   widget was missed, so "Payment" read as near-invisible dark-on-black
   above the payment method options (2026-09 QA sweep). Same token-
   reassignment fix as above. */
.elementor-element-561078a {
	--rjl-text: var(--rjl-paper);
	--rjl-text-muted: var(--rjl-ink-300);
}

/* Checkout page, order summary table (ShopEngine's checkout-review-order
   widget) sits in a light cream card (.rjl-checkout__review), but
   ShopEngine's own per-post generated CSS (post-3204.css, scoped to
   .shopengine-checkout-review-order) hardcodes every header, line item,
   subtotal, shipping and the final Total row to white - styling clearly
   meant for a dark checkout background, not this card. The result: a
   customer cannot read their own order total before paying (2026-09 QA
   sweep - the most severe issue found this round). !important is needed
   because ShopEngine regenerates that stylesheet from its own settings,
   so there's no reliable way to out-specificity it long-term. */
.shopengine-checkout-review-order .woocommerce-checkout-review-order-table :is(th, td, label) {
	color: var(--rjl-text) !important;
}

/* ShopEngine ships a SECOND, more specific rule in its per-post CSS that
   targets the totals footer alone (tfoot), which outranks the general
   override just above and left Subtotal/Shipping/Total still white-on-cream -
   the order total a customer must read before paying. Matching the same
   compound-class structure plus one extra legitimate class beats it on
   specificity regardless of which stylesheet loads second. */
.elementor-3204 .elementor-element.elementor-element-25ae656f.elementor-widget-shopengine-checkout-review-order .shopengine-checkout-review-order .woocommerce-checkout-review-order-table tfoot :is(th, td, label) {
	color: var(--rjl-text) !important;
}


/* Shop grid: Quick View and Add to Cart used to share one absolutely
   positioned box, laid out as a horizontal pair centred along the bottom
   edge of the photo (see the round above). Pairing them made that box
   wide, and on some products it ran past the image or up against the
   card's own black border (2026-09 QA round 3: "the add to cart button
   touches the black edges and sometime overlaps with some images").
   Splitting them fixes it: the box now spans the full photo instead of
   sitting in one spot, and each button is positioned on its own inside
   it - Quick View back in the top-right corner, Add to Cart alone at the
   bottom, sized down to fit there without touching anything. */
.ht-product-image-wrap .ht-product-action {
	position: absolute !important;
	inset: 0 !important;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	transform: none !important;
	width: auto !important;
	pointer-events: none;
}
.ht-product-image-wrap .woolentor-action-btn-area {
	display: block !important;
	position: relative;
	width: 100%;
	height: 100%;
}
.ht-product-image-wrap .woolentor-action-btn-area li {
	position: absolute !important;
	margin: 0 !important;
	width: 40px;
	height: 40px;
	pointer-events: auto;
}
.ht-product-image-wrap .woolentor-action-btn-area li:not(.woolentor-cart) {
	top: var(--rjl-space-2xs);
	right: var(--rjl-space-2xs);
}

/* Add to Cart's <li> (WooLentor calls it .woolentor-cart) also holds three
   ShopEngine icons - wishlist, a second quickview trigger duplicating the
   one WooLentor already renders above, and a comparison toggle. ShopEngine
   used to show only one of the four at a time via its own hover logic;
   giving the icons above a fixed size and position broke that, so all four
   rendered stacked on top of each other (2026-09 QA round 2: "why are
   there two add to bag buttons" - one was WooCommerce's real button, the
   others were these three ShopEngine duplicates peeking out from behind
   it). ShopEngine and WooLentor were already flagged elsewhere in the
   audit as redundant, overlapping plugins, so hiding ShopEngine's three
   here is the pragmatic fix - it leaves exactly the two actions the grid
   needs. Excluding by the real button's own class, rather than by
   position, keeps this working even if ShopEngine's markup order changes. */
.ht-product-image-wrap .woolentor-action-btn-area li.woolentor-cart a:not(.add_to_cart_button) {
	display: none !important;
}
.ht-product-image-wrap .woolentor-action-btn-area li.woolentor-cart {
	width: auto !important;
	height: 34px !important;
	bottom: var(--rjl-space-2xs);
	left: 50%;
	right: auto;
	transform: translateX(-50%);
}

/* Quick View: a plain icon circle, back in its own corner now that it no
   longer shares a row with Add to Cart. */
.ht-product-image-wrap .woolentor-action-btn-area li a.woolentorquickview {
	width: 40px !important;
	height: 40px !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	background: var(--rjl-bg-raised) !important;
	border: 1px solid var(--rjl-border) !important;
	border-radius: 999px !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	transition: background var(--rjl-dur-fast) var(--rjl-ease-out), transform var(--rjl-dur-fast) var(--rjl-ease-out);
}
.ht-product-image-wrap .woolentor-action-btn-area li a.woolentorquickview:hover {
	background: var(--rjl-paper-sunk) !important;
	transform: translateY(-1px);
}

/* Add to Cart: the card's real purchase action, so it still reads as the
   primary button - same orange/ink pairing .rjl-btn--primary uses
   elsewhere. Now that it stands alone at the bottom instead of sharing
   space with Quick View, it can drop the extra width it needed to hold
   both buttons apart (2026-09 QA round 3: "the add to cart button will be
   made a bit smaller so it doesn't touch anything else"). The theme's own
   styling pushes this button's real text off-screen with a large negative
   text-indent and relies on an icon font glyph that never actually
   rendered in this grid - clearing both and showing the real label is
   simpler and more reliable than chasing the missing icon. */
.ht-product-image-wrap .woolentor-action-btn-area li a.add_to_cart_button {
	width: auto !important;
	height: 34px !important;
	min-width: 104px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	padding: 0 16px !important;
	text-indent: 0 !important;
	overflow: visible !important;
	white-space: nowrap;
	background: var(--rjl-accent) !important;
	border: 1px solid var(--rjl-accent) !important;
	border-radius: 999px !important;
	color: var(--rjl-on-accent) !important;
	font-family: inherit !important;
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em;
	line-height: 1 !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
	transition: background var(--rjl-dur-fast) var(--rjl-ease-out), color var(--rjl-dur-fast) var(--rjl-ease-out);
}
.ht-product-image-wrap .woolentor-action-btn-area li a.add_to_cart_button::before {
	content: none !important;
}
.ht-product-image-wrap .woolentor-action-btn-area li a.add_to_cart_button:hover {
	background: var(--rjl-accent-press) !important;
	border-color: var(--rjl-accent-press) !important;
	color: var(--rjl-on-accent-press) !important;
}

/* Shop grid: category filter pills (All / Booking / Books / ...). Elementor's
   own per-post CSS for this widget pins them to square corners and the
   template leaves no gap between them and the breadcrumb's rule above
   (2026-09 QA round 3: "all the options... are too close to the
   horizontal line of the section with Home/Shop... make their containers
   oval not regular looking squares"). !important on the radius beats that
   generated CSS regardless of which stylesheet loads second - editing the
   generated file directly would only last until the widget is next saved
   in Elementor. */
.product-tab-list {
	padding-top: var(--rjl-space-md) !important;
}
.ht-tab-menus li a {
	border-radius: 999px !important;
}

/* Shop grid: the price still hugged the left edge here after the fix above.
   Turns out this card's price isn't matched by
   .woocommerce ul.products li.product .price at all - WooLentor renders its
   own div-based markup instead of <li class="product">, and the flex row
   that actually positions the price is WooLentor's own .ht-product-price
   wrapper. That wrapper is full-width and flex, but never told to centre
   its one child, so the price just sat at flex-start. */
.ht-product-price {
	justify-content: center;
}

/* 2026-09 QA round 4: shop grid title, out-of-stock badge, filter-pill
   hover, add-to-cart tooltip glitch, add-to-cart relocation. */

/* WooLentor's own div markup for the shop grid title, same trap as the
   price above - .woocommerce-loop-product__title never matches it. */
.ht-product-title {
	text-align: center;
	/* Cards with a one-line title sat with their price/button noticeably
	   higher than a neighbour whose title wrapped to two lines - reserving
	   two lines' worth of height up front keeps every card's price and
	   Add to Cart at the same row regardless of title length (2026-09 QA:
	   "not all the add to cart buttons align properly"). */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 43.2px;
}

/* "centre align the out of stock label too" - it was pinned to the right
   corner (.ht-product-label-right) and was clipping against the card
   edge. Centring it over the image reads as a proper ribbon instead. */
.ht-product-image-wrap .ht-product-label.ht-product-label-right {
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%);
}

/* "as you hover the items under the horizontal line... they should turn
   red and the text white" - Elementor's own generated CSS for this
   widget (post-3156.css) already marks its hover white !important, so
   an !important rule alone doesn't reliably win; it comes down to
   specificity between the two. Repeating the class selector pushes ours
   past it regardless of which stylesheet loads first or last. */
.ht-tab-menus.ht-tab-menus.ht-tab-menus.ht-tab-menus.ht-tab-menus li a:hover {
	background-color: var(--rjl-ink-950) !important;
	color: #fff !important;
}

/* "when you hover the add to cart button, no message should appear (it
   overlaps with the button and causes som glitching)" - WooLentor injects
   a "woolentor-tip" span reading "Add to cart" on hover, sitting right on
   top of the button's own already-visible label. The button says what it
   does; the extra tooltip is the glitch. */
.woolentor-cart .woolentor-tip {
	display: none !important;
}

/* "place the add to cart button underneath the prices... make sure there
   a little space between the button and the label" - relocateAddToCart()
   in rjl-ui.js moves the whole .woolentor-cart <li> (already stripped
   down to just the cart link - see the ShopEngine-duplicate-hiding rule
   above) out of the image overlay and into the text panel, right after
   the price, tagging the card .rjl-atc-relocated so this file only
   changes the cards it actually touched. None of the .ht-product-image-
   wrap-scoped rules above apply once the <li> is out of that container -
   this is a clean, separate ruleset for its new home. */
.rjl-atc-relocated .ht-product-price {
	margin-bottom: var(--rjl-space-2xs) !important;
}
.ht-product-content-inner > .woolentor-cart {
	position: static;
	display: flex;
	justify-content: center;
	width: 100%;
	margin: 0 0 28px;
}
.ht-product-content-inner > .woolentor-cart > a:not(.add_to_cart_button) {
	display: none !important;
}
.ht-product-content-inner > .woolentor-cart a.add_to_cart_button {
	position: static;
	width: auto;
	height: 34px;
	min-width: 104px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 16px;
	white-space: nowrap;
	background: var(--rjl-accent);
	border: 1px solid var(--rjl-accent);
	border-radius: 999px;
	color: var(--rjl-on-accent);
	font-family: inherit;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}

/* Add to Cart, relocated into the text panel, had no hover feedback at
   all - the site's other buttons all press to --rjl-accent-press on
   hover (see .rjl-btn--primary in rjl-components.css); matching that here
   so this button behaves like every other primary action on the site. */
.ht-product-content-inner > .woolentor-cart a.add_to_cart_button:hover {
	background: var(--rjl-accent-press);
	border-color: var(--rjl-accent-press);
	color: var(--rjl-on-accent-press);
}

/* 2026-09 QA round 9: single product pages ("From The Crates" items) are built
   through the WooLentor/Elementor Woo Builder template, which bypasses the
   theme's default ".woocommerce button.button.alt" styling for Add to Cart -
   that rule matches this button by class but WooLentor's own generated CSS
   wins on load order, so it kept rendering as the plain square white/black
   WooCommerce default, a leftover from before the redesign. Targeting the
   button's own unique class plus !important beats that generated CSS without
   having to fight its specificity. Values match .rjl-btn--primary exactly. */
/* WooLentor's single-product template (post-3186.css, generated from the
   Elementor "Style" tab) ships its own ".wl-addto-cart[class*=wl-style-]
   form.cart button { background/color/border-radius !important }" rule with
   specificity (0,6,2) - higher than a normal 3-class selector even with
   !important on both sides, so it kept winning. The repeated class below is
   the standard way to out-specify an !important rule without an ID hack or
   editing generated page-builder CSS (which gets wiped on the next template
   edit); it only affects cascade weight, not what the selector matches. */
.single_add_to_cart_button.single_add_to_cart_button.single_add_to_cart_button.single_add_to_cart_button.single_add_to_cart_button.button.alt {
	background: var(--rjl-accent) !important;
	border: 1.6px solid var(--rjl-accent) !important;
	color: var(--rjl-on-accent) !important;
	border-radius: 4px !important;
	font-weight: 700 !important;
	letter-spacing: 0.07em !important;
}
.single_add_to_cart_button.single_add_to_cart_button.single_add_to_cart_button.single_add_to_cart_button.single_add_to_cart_button.button.alt:hover,
.single_add_to_cart_button.single_add_to_cart_button.single_add_to_cart_button.single_add_to_cart_button.single_add_to_cart_button.button.alt:focus {
	background: var(--rjl-accent-press) !important;
	border-color: var(--rjl-accent-press) !important;
	color: var(--rjl-on-accent-press) !important;
}

/* Same round: the ShopEngine wishlist + compare icons on this template ship
   completely unstyled - the wishlist button renders as a full-width white bar
   with a black border (clashes hard with the dark page), and the compare
   icon renders in a near-black tone that's almost invisible against the black
   background. Restyled as a matching pair of compact icon buttons. */
/* The wishlist control is a real <button> inside form.cart, so it is also
   caught by that same WooLentor "form.cart button" rule above - same
   specificity fight, same fix. The compare control is an <a>, not a button,
   so it never matched that rule; it just needed a visible color. */
.wl-addto-cart .shopengine_add_to_list_action.shopengine_add_to_list_action.shopengine_add_to_list_action.shopengine_add_to_list_action.shopengine_add_to_list_action.shopengine-wishlist,
.wl-addto-cart .shopengine_comparison_add_to_list_action.shopengine-comparison {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 44px !important;
	height: 44px !important;
	padding: 0 !important;
	background: transparent !important;
	border: 1.6px solid var(--rjl-rule) !important;
	border-radius: 4px !important;
	color: var(--rjl-text) !important;
	font-size: 18px;
}
.wl-addto-cart .shopengine_add_to_list_action.shopengine_add_to_list_action.shopengine_add_to_list_action.shopengine_add_to_list_action.shopengine_add_to_list_action.shopengine-wishlist:hover,
.wl-addto-cart .shopengine_comparison_add_to_list_action.shopengine-comparison:hover,
.wl-addto-cart .shopengine_add_to_list_action.shopengine_add_to_list_action.shopengine_add_to_list_action.shopengine_add_to_list_action.shopengine_add_to_list_action.shopengine-wishlist.active,
.wl-addto-cart .shopengine_comparison_add_to_list_action.shopengine-comparison.active {
	border-color: var(--rjl-accent) !important;
	color: var(--rjl-accent) !important;
}

/* 2026-09 QA round 9: the shop-grid widget's own Elementor "Style" panel
   (a per-template color swatch, not theme CSS) sets EVERY span inside
   .ht-product-price to a bright green - a leftover from before the dark
   redesign that clashes with the black info strip added in an earlier
   round. That means it hits the currency symbol, amount and bdi wrapper
   individually, not just the outer .price element, so the override has to
   match "span" the same way the original rule does. var(--rjl-text) turned
   out to resolve to the dark ink tone (this section doesn't repaint it to
   the light value the way the card title's own link color does), so this
   matches the product title link's actual white instead of guessing at a
   token. Same specificity technique as the Add to Cart fix above: repeated
   classes beat the per-widget rule without hardcoding its generated
   template/element IDs. */
.ht-product-price.ht-product-price.ht-product-price.ht-product-price.ht-product-price.ht-product-price.ht-product-price.ht-product-price.ht-product-price span {
	color: #fff !important;
}

/* Every product on the shop grid also carries a redundant "All" product
   category term (in addition to its real category), and the card template
   displays only the alphabetically-first term - so every single card reads
   "— All" under its price, which is not real information (it is not the
   product's actual category) and reads like leftover placeholder text.
   Hiding it rather than reordering which term shows, since that would need
   a functions.php change rather than a style fix. */
.ht-product-categories {
	display: none !important;
}


/* ------------------------------------------------------------------
   2026-09 QA round 3: single-product quantity stepper (WooLentor
   .wl-quantity-cal) renders the native WooCommerce qty input at the
   default black text on a dark-enough background that it is
   effectively invisible until selected/highlighted. Bumped size,
   weight and color so the number reads clearly at a glance.
   ------------------------------------------------------------------ */
.wl-quantity-cal input.qty {
	color: #fff !important;
	font-size: 18px !important;
	font-weight: 700 !important;
}

/* Same invisible-quantity problem shows up in the cart page's
   ShopEngine quantity stepper, plus the input there was overlapping
   the +/- controls because it had no width of its own. */
.shopengine-cart-quantity .quantity input.qty {
	width: 40px !important;
	min-width: 0 !important;
	margin-left: 6px !important;
}
.shopengine-cart-quantity .quantity {
	width: auto !important;
	margin: 0 !important;
}

/* ------------------------------------------------------------------
   2026-09 QA round 3: cart page items table was being squeezed into a
   352px sidebar column. rjl-cart-layout's grid assumed a
   .cart-collaterals sidebar sibling that doesn't actually exist in
   this theme's markup, so grid auto-placement put the real items
   table into the narrow track meant for that sidebar while an empty
   notices wrapper took the wide track. Forcing the items table to
   span both tracks fixes the squeeze without needing to touch the
   grid-template-columns definition itself.
   ------------------------------------------------------------------ */
.rjl-cart-layout .shopengine-cart-form.woocommerce-cart-form {
	grid-column: 1 / -1 !important;
}

/* ------------------------------------------------------------------
   2026-09 QA round 3: "compare doesn't work" - it does; ShopEngine's
   add-to-comparison click, cookie and AJAX-loaded modal all fire
   correctly. The real bug is that the modal's own backdrop
   (.jquery-modal.se-blocker, z-index 99999) sits above the modal
   window it belongs to (.se-modal, z-index 2 by default), so a
   successfully-opened comparison modal renders completely hidden
   behind an opaque black screen - which reads to a visitor as "the
   button did nothing" or "the site froze."
   ------------------------------------------------------------------ */
.se-modal {
	z-index: 100000 !important;
}

/* ------------------------------------------------------------------
   2026-09 QA round 11: cart and checkout totals rows unreadable.
   Elementor's own per-page generated CSS (post-3191.css for Cart,
   post-3204.css for Checkout) hardcodes color:#fff on the totals
   table's th/td and .amount spans. That was fine wherever it was
   first written, but the table itself sits on the light cart_totals
   panel (rgb(230,227,217)), not a dark one, so "Subtotal" and
   "Total" render as white-on-beige, close to invisible. Doubling
   the element-ID class beats the generated rule's specificity
   regardless of stylesheet load order.
   ------------------------------------------------------------------ */
.elementor-element-335cef3d.elementor-element-335cef3d .shopengine-cart-totals .shop_table tr th,
.elementor-element-335cef3d.elementor-element-335cef3d .shopengine-cart-totals .shop_table tr td,
.elementor-element-335cef3d.elementor-element-335cef3d .shopengine-cart-totals .shop_table tr td * {
	color: var(--rjl-text) !important;
}
.elementor-element-25ae656f.elementor-element-25ae656f .shopengine-checkout-review-order .woocommerce-checkout-review-order-table tfoot :is(th, td) .amount,
.elementor-element-25ae656f.elementor-element-25ae656f .shopengine-checkout-review-order .woocommerce-checkout-review-order-table tfoot :is(th, td) .amount * {
	color: var(--rjl-text) !important;
}

/* ------------------------------------------------------------------
   2026-09 QA round 11: checkout privacy-policy link, black on black.
   The payment section's own generated CSS (post-3204.css) gives
   links in that panel a readable red (rgb(244,80,92)) so they show
   up against the panel's dark background, but a second, more
   specific rule scoped to .woocommerce-terms-and-conditions-wrapper
   a re-forces plain black onto this one link, on top of the same
   dark panel. The link is real and clickable, a shopper just can't
   see it exists.
   ------------------------------------------------------------------ */
.elementor-element-561078a.elementor-element-561078a .shopengine .woocommerce-terms-and-conditions-wrapper a {
	color: var(--rjl-accent) !important;
}

/* ------------------------------------------------------------------
   2026-09 QA round 12: checkout layout collapses on every load, and
   stays broken through the shipping error state (BUG-04 from the
   tester's report). <form class="checkout shopengine-woocommerce-
   checkout-form"> itself is a two-column CSS grid (grid-template-
   columns resolving to roughly 1073px + 384px, with a 64px gap), but
   ShopEngine only ever prints ONE child into it: the whole Elementor
   template (billing form + order review together, laid out as its
   own two-column flex row further down the tree). That leaves the
   grid's second track permanently empty - about 450px of dead space
   pinned to the right of the page on every single checkout view, not
   only after an AJAX refresh. Forcing a single full-width track lets
   the real Elementor content use the whole row; the two-column
   billing/order-review split still comes from Elementor's own inner
   layout, untouched.
   ------------------------------------------------------------------ */
form.checkout.shopengine-woocommerce-checkout-form {
	grid-template-columns: 1fr !important;
}


/* ------------------------------------------------------------------
   2026-09 QA round 12: BUG-05 - required-field checkout errors were
   printing in the page's default light-page ink (near-black) against
   the checkout's dark panel, so "Billing First name is a required
   field." etc. rendered but was, for all practical purposes,
   invisible. The invalid fields carried no visual cue of their own
   either - same dark border as any other field - so nothing on
   screen distinguished a missing field from a filled one until you
   went looking for the (also unreadable) message underneath it.
   ------------------------------------------------------------------ */
.woocommerce-checkout .checkout-inline-error-message {
    color: var(--rjl-accent) !important;
}
.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
.woocommerce-checkout .form-row.woocommerce-invalid textarea,
.woocommerce-checkout .form-row.woocommerce-invalid select,
.woocommerce-checkout .form-row.woocommerce-invalid .select2-selection {
    border-color: var(--rjl-accent) !important;
}


/* ------------------------------------------------------------------
   2026-09-10: Book & Record Store, Listening Lounge and Restaurant
   dark intro panels centered to match the Journals page's layout.
   Same underlying issue as the About page fix in rjl-content.css:
   Book & Record Store's sub-headings/paragraphs were left-aligned
   outright; Listening Lounge and Restaurant already had text-align:
   center on their paragraphs, but the paragraph is a narrower block
   (Elementor's own generated max-width, ~615px inside an 880px panel)
   with no auto margins, so it still sat flush against the panel's
   left edge instead of centered - "centered text in a left-anchored
   box" reads as left-aligned on the page either way.
   ------------------------------------------------------------------ */
.elementor-element-bd4ff1e .elementor-widget-container :is(h1, h2, h3, h4),
.elementor-element-c9d943d .elementor-widget-container :is(h1, h2, h3, h4),
.elementor-element-53dcc3a .elementor-widget-container :is(h1, h2, h3, h4) {
	text-align: center !important;
}
.elementor-element-bd4ff1e .elementor-widget-container p,
.elementor-element-c9d943d .elementor-widget-container p,
.elementor-element-53dcc3a .elementor-widget-container p {
	text-align: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
}


/* ====================================================================
   2026-09 QA round 14: Cart page redesign. The cart page had never
   been folded into the rest of the site's design system - it was
   still running on ShopEngine's unstyled defaults: three flat black
   panels (header row, item table, button row) plus a fourth black
   frame around the totals card, three oversized grey buttons whose
   label colour was barely a shade off their own fill, a 50%-opacity
   remove icon that read as washed-out pink instead of solid red, a
   "Shipment:" label rendered in hardcoded white on the totals card's
   cream background, a coupon form stranded against the left edge of
   a much wider column, and a plain square white "Proceed to
   checkout" button that didn't match any button language used
   anywhere else on the site.

   ShopEngine and its per-widget Elementor-generated stylesheet
   (post-3191.css) both carry !important rules 5-8 classes deep, and
   ties between two !important declarations resolve on specificity,
   not source order - so most rules below repeat their own class
   several times to out-specificity those generated selectors
   regardless of how deeply ShopEngine happens to nest them. This is
   the same technique used against elementor-element-335cef3d in
   round 11, just applied more times because the selectors it's
   racing against here go deeper.
   ==================================================================== */

/* ---- Remove the three black panels (header row, item table, button
   row) - all three are painted by ShopEngine at 5-7 classes deep.
   The cream page background shows through instead, the same as
   every other section on the site. ---- */
body.woocommerce-cart .shopengine-table__head.shopengine-table__head.shopengine-table__head.shopengine-table__head.shopengine-table__head.shopengine-table__head.shopengine-table__head.shopengine-table__head,
body.woocommerce-cart .shopengine-table__body.shopengine-table__body.shopengine-table__body.shopengine-table__body.shopengine-table__body.shopengine-table__body.shopengine-table__body.shopengine-table__body,
body.woocommerce-cart .shopengine-table__footer.shopengine-table__footer.shopengine-table__footer.shopengine-table__footer.shopengine-table__footer.shopengine-table__footer.shopengine-table__footer.shopengine-table__footer {
	background: transparent !important;
}
body.woocommerce-cart .shopengine-table__head.shopengine-table__head.shopengine-table__head.shopengine-table__head.shopengine-table__head.shopengine-table__head.shopengine-table__head.shopengine-table__head,
body.woocommerce-cart .shopengine-table__body.shopengine-table__body.shopengine-table__body.shopengine-table__body.shopengine-table__body.shopengine-table__body.shopengine-table__body.shopengine-table__body {
	border: 1px solid var(--rjl-ink-100) !important;
}
body.woocommerce-cart .shopengine-table__head.shopengine-table__head.shopengine-table__head.shopengine-table__head.shopengine-table__head.shopengine-table__head.shopengine-table__head.shopengine-table__head {
	border-bottom: 0 !important;
	border-radius: var(--rjl-radius-md) var(--rjl-radius-md) 0 0 !important;
}
body.woocommerce-cart .shopengine-table__body.shopengine-table__body.shopengine-table__body.shopengine-table__body.shopengine-table__body.shopengine-table__body.shopengine-table__body.shopengine-table__body {
	border-top: 0 !important;
	border-radius: 0 0 var(--rjl-radius-md) var(--rjl-radius-md) !important;
}
body.woocommerce-cart .shopengine-table__footer.shopengine-table__footer.shopengine-table__footer.shopengine-table__footer.shopengine-table__footer.shopengine-table__footer.shopengine-table__footer.shopengine-table__footer {
	border-top: 0 !important;
	padding-top: var(--rjl-space-md) !important;
	flex-wrap: wrap;
	gap: var(--rjl-space-sm);
}

/* ---- The header row and item rows were styled white-on-black, so
   removing the black fill above left every label, product name,
   price and subtotal figure white-on-cream and effectively
   invisible. Everything in those two panels goes back to the page's
   ink colour - except the quantity stepper, which keeps its own
   black pill and needs its white text to stay exactly as it is. ---- */
body.woocommerce-cart .shopengine-table__head.shopengine-table__head.shopengine-table__head.shopengine-table__head.shopengine-table__head.shopengine-table__head.shopengine-table__head.shopengine-table__head *,
body.woocommerce-cart .shopengine-table__body.shopengine-table__body.shopengine-table__body.shopengine-table__body.shopengine-table__body.shopengine-table__body.shopengine-table__body.shopengine-table__body *:not(.shopengine-cart-quantity):not(.shopengine-cart-quantity *) {
	color: var(--rjl-text) !important;
}

/* ---- The totals card's own black frame. Its cream background and
   radius already read as a card on their own - it doesn't need a
   black box around it too. ---- */
body.woocommerce-cart .elementor-element-335cef3d.elementor-element-335cef3d.elementor-element-335cef3d.elementor-element-335cef3d.elementor-element-335cef3d.elementor-element-335cef3d.elementor-element-335cef3d.elementor-element-335cef3d > .elementor-widget-container {
	background: transparent !important;
	padding: 0 !important;
}
body.woocommerce-cart .cart_totals.cart_totals.cart_totals.cart_totals.cart_totals.cart_totals.cart_totals.cart_totals {
	border: 1px solid var(--rjl-ink-100) !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

/* ---- Continue Shopping / Update Cart / Clear All: were all the
   same ~220px-wide grey button with the label barely distinguishable
   from the fill. Narrowed to fit their own label, and given real
   foreground/background pairings instead of grey-on-grey. ---- */
body.woocommerce-cart .shopengine-footer-button.shopengine-footer-button.shopengine-footer-button.shopengine-footer-button.shopengine-footer-button.shopengine-footer-button.shopengine-footer-button.shopengine-footer-button {
	width: auto !important;
	padding: 12px 20px !important;
	border-radius: var(--rjl-radius-md) !important;
}
body.woocommerce-cart .return-to-shop.return-to-shop.return-to-shop.return-to-shop.return-to-shop.return-to-shop.return-to-shop.return-to-shop {
	background: transparent !important;
	color: var(--rjl-text) !important;
	border: 1.5px solid var(--rjl-ink-200) !important;
}
body.woocommerce-cart .update-cart-btn.update-cart-btn.update-cart-btn.update-cart-btn.update-cart-btn.update-cart-btn.update-cart-btn.update-cart-btn {
	background: var(--rjl-ink-950) !important;
	color: var(--rjl-paper) !important;
	border: 1.5px solid var(--rjl-ink-950) !important;
}
body.woocommerce-cart .update-cart-btn.update-cart-btn.update-cart-btn.update-cart-btn.update-cart-btn.update-cart-btn.update-cart-btn.update-cart-btn:disabled {
	background: var(--rjl-ink-100) !important;
	color: var(--rjl-ink-400) !important;
	border-color: var(--rjl-ink-100) !important;
}
body.woocommerce-cart .clear-btn.clear-btn.clear-btn.clear-btn.clear-btn.clear-btn.clear-btn.clear-btn {
	background: transparent !important;
	color: var(--rjl-ink-950) !important;
	border: 1.5px solid var(--rjl-ink-950) !important;
}
body.woocommerce-cart .return-to-shop.return-to-shop.return-to-shop.return-to-shop.return-to-shop.return-to-shop.return-to-shop.return-to-shop :is(a, i, span),
body.woocommerce-cart .update-cart-btn.update-cart-btn.update-cart-btn.update-cart-btn.update-cart-btn.update-cart-btn.update-cart-btn.update-cart-btn :is(a, i, span),
body.woocommerce-cart .clear-btn.clear-btn.clear-btn.clear-btn.clear-btn.clear-btn.clear-btn.clear-btn :is(a, i, span) {
	color: inherit !important;
}

/* ---- Remove-item icon: was 50% opacity, reading as a washed-out
   pink smear rather than a solid red control. ---- */
body.woocommerce-cart a.remove_from_cart_button.remove_from_cart_button.remove_from_cart_button.remove_from_cart_button.remove_from_cart_button.remove_from_cart_button.remove_from_cart_button.remove_from_cart_button {
	opacity: 1 !important;
}

/* ---- "Shipment:" label. The round-11 fix on this same element
   already covers the rendered th/td text and its descendant nodes,
   but ShopEngine prints this specific row's label through a
   td::before pseudo-element instead of real text - a pseudo-element
   isn't a descendant node, so it slipped past that fix and kept its
   hardcoded white. Covering it here. ---- */
body.woocommerce-cart .elementor-element-335cef3d.elementor-element-335cef3d.elementor-element-335cef3d.elementor-element-335cef3d.elementor-element-335cef3d.elementor-element-335cef3d.elementor-element-335cef3d.elementor-element-335cef3d .shop_table tr td::before {
	color: var(--rjl-text) !important;
}

/* ---- Totals card row rhythm: a hairline divider between rows and
   a little breathing room above the address line, so Subtotal /
   Shipment / Total / "Shipping to Lagos." read as a list instead of
   a run-on block. ---- */
body.woocommerce-cart .cart_totals.cart_totals.cart_totals.cart_totals.cart_totals.cart_totals.cart_totals.cart_totals table.shop_table tr {
	padding: var(--rjl-space-xs) 0 !important;
	border-bottom: 1px solid var(--rjl-ink-100) !important;
}
body.woocommerce-cart .cart_totals.cart_totals.cart_totals.cart_totals.cart_totals.cart_totals.cart_totals.cart_totals table.shop_table tr:last-child {
	border-bottom: 0 !important;
}
body.woocommerce-cart .woocommerce-shipping-destination.woocommerce-shipping-destination.woocommerce-shipping-destination.woocommerce-shipping-destination.woocommerce-shipping-destination.woocommerce-shipping-destination.woocommerce-shipping-destination.woocommerce-shipping-destination {
	display: block !important;
	margin-top: var(--rjl-space-2xs) !important;
}

/* ---- Checkout button. Was the classic WooCommerce plain rectangle:
   white fill, square corners, "Proceed to checkout", packed to the
   left of its row. Made oval, filled with --rjl-positive (the same
   green already used for the "Cart updated" success message - there
   is no colour on the shop page actually used for the currency
   figures themselves to match instead, so this reuses the nearest
   established positive-action green), white label, centred in its
   own row. The shorter "Checkout" label is set by
   assets/js/rjl-ui.js, since WooCommerce hardcodes this string with
   no template filter available to change it from CSS/PHP alone. ---- */
body.woocommerce-cart .wc-proceed-to-checkout.wc-proceed-to-checkout.wc-proceed-to-checkout.wc-proceed-to-checkout.wc-proceed-to-checkout.wc-proceed-to-checkout.wc-proceed-to-checkout.wc-proceed-to-checkout {
	text-align: center !important;
	margin-top: var(--rjl-space-md) !important;
}
body.woocommerce-cart .checkout-button.checkout-button.checkout-button.checkout-button.checkout-button.checkout-button.checkout-button.checkout-button {
	display: inline-flex !important;
	justify-content: center !important;
	align-items: center !important;
	width: auto !important;
	min-width: 220px !important;
	margin: 0 auto !important;
	padding: 14px 40px !important;
	background: var(--rjl-positive) !important;
	color: #fff !important;
	border-radius: 999px !important;
	text-align: center !important;
	font-weight: var(--rjl-weight-semi) !important;
	border: 0 !important;
}
body.woocommerce-cart .checkout-button.checkout-button.checkout-button.checkout-button.checkout-button.checkout-button.checkout-button.checkout-button:hover {
	filter: brightness(0.92);
}

/* ---- Coupon form: was pinned to the left edge of a column much
   wider than the form itself, leaving a wall of empty space beside
   it. Given a card of its own and centred in its column. ---- */
body.woocommerce-cart .shopengine-checkout-coupon-form.shopengine-checkout-coupon-form.shopengine-checkout-coupon-form.shopengine-checkout-coupon-form.shopengine-checkout-coupon-form.shopengine-checkout-coupon-form.shopengine-checkout-coupon-form.shopengine-checkout-coupon-form {
	width: 100% !important;
	max-width: 480px !important;
	margin: var(--rjl-space-lg) auto 0 !important;
	padding: var(--rjl-space-md) !important;
	background: var(--rjl-bg-sunk) !important;
	border-radius: var(--rjl-radius-md) !important;
	text-align: center !important;
}
body.woocommerce-cart .shopengine-checkout-coupon.shopengine-checkout-coupon.shopengine-checkout-coupon.shopengine-checkout-coupon.shopengine-checkout-coupon.shopengine-checkout-coupon.shopengine-checkout-coupon.shopengine-checkout-coupon {
	display: flex !important;
	justify-content: center !important;
	flex-wrap: wrap !important;
	gap: var(--rjl-space-xs) !important;
	width: 100% !important;
}
body.woocommerce-cart .shopengine-checkout-coupon.shopengine-checkout-coupon.shopengine-checkout-coupon.shopengine-checkout-coupon.shopengine-checkout-coupon.shopengine-checkout-coupon.shopengine-checkout-coupon.shopengine-checkout-coupon .form-row {
	margin: 0 !important;
	flex: 1 1 200px;
}
body.woocommerce-cart .shopengine-checkout-coupon.shopengine-checkout-coupon.shopengine-checkout-coupon.shopengine-checkout-coupon.shopengine-checkout-coupon.shopengine-checkout-coupon.shopengine-checkout-coupon.shopengine-checkout-coupon .form-row-last {
	flex: 0 0 auto;
}
body.woocommerce-cart .shopengine-checkout-coupon-form input.input-text.input-text.input-text.input-text.input-text.input-text.input-text.input-text {
	width: 100% !important;
	box-sizing: border-box !important;
}


/* ==========================================================================
   CHECKOUT PAGE — DARK-CANVAS/LIGHT-CARD REDESIGN (2026-09-12)

   The whole checkout template sits on one full-bleed black Elementor section
   (element 4b5d0c1f). The order-review column already floats as a cream
   card on top of it (.rjl-checkout__review, --rjl-bg-sunk) - that is the
   pattern the rest of the rebuilt site uses (a light content card on a dark
   canvas), so this brings the billing-details column in line with it
   instead of leaving it as loose white-on-black fields directly on the
   black backdrop, which read as the old site. So did three buttons stuck
   on an old plugin default pink (#ff3566 / #d83854) that was never
   remapped to the site's real accent/positive tokens, unlike every other
   button already on the site.
   ========================================================================== */

/* Trim the outsized top gap above the coupon field - nothing sits in it,
   just dead black space before the form starts. */
.woocommerce-checkout .elementor-element-4b5d0c1f { padding-top: 56px !important; }

/* Billing-details column becomes a cream card, matching the order-review
   card exactly (same token, same radius) instead of floating on black. */
.woocommerce-checkout .elementor-element-52a4f44c {
  background: var(--rjl-bg-sunk) !important;
  border-radius: var(--rjl-radius-lg) !important;
  padding: var(--rjl-space-md) !important;
}

/* Everything inside that card was styled (by ShopEngine/Elementor's own
   per-post CSS) for the black backdrop it no longer sits on - heading,
   field labels, inputs and selects all need to flip back to normal ink on
   a light field, the same token-reassignment approach used everywhere
   else in this file. !important is required because ShopEngine
   regenerates its own per-post stylesheet from its settings panel, so
   there is no reliable specificity or load-order win against it. */
.woocommerce-checkout .elementor-element-52a4f44c,
.woocommerce-checkout .elementor-element-52a4f44c .elementor-heading-title {
  color: var(--rjl-text) !important;
}
.woocommerce-checkout .elementor-element-52a4f44c .form-row label,
.woocommerce-checkout .elementor-element-52a4f44c .form-row label .optional {
  color: var(--rjl-text-muted) !important;
}
.woocommerce-checkout .elementor-element-52a4f44c input.input-text,
.woocommerce-checkout .elementor-element-52a4f44c textarea,
.woocommerce-checkout .elementor-element-52a4f44c select,
.woocommerce-checkout .elementor-element-52a4f44c .select2-container .select2-selection--single {
  background: var(--rjl-bg-raised) !important;
  color: var(--rjl-text) !important;
  border-color: var(--rjl-rule-strong) !important;
}
.woocommerce-checkout .elementor-element-52a4f44c input.input-text:focus,
.woocommerce-checkout .elementor-element-52a4f44c textarea:focus,
.woocommerce-checkout .elementor-element-52a4f44c select:focus {
  border-color: var(--rjl-accent) !important;
  box-shadow: 0 0 0 3px var(--rjl-accent-tint) !important;
}

/* Apply coupon: was the plugin's own leftover hot pink, square corners.
   Matches the cart page's already-approved secondary button - dark fill,
   barely-rounded corners. */
.woocommerce-checkout .shopengine-checkout-coupon button.button {
  background: var(--rjl-ink-800) !important;
  border-color: var(--rjl-ink-800) !important;
  color: #fff !important;
  border-radius: 3px !important;
}
.woocommerce-checkout .shopengine-checkout-coupon button.button:hover {
  background: #000 !important;
  border-color: #000 !important;
}

/* Get Delivery Prices (Shipbubble's own button): same leftover pink
   family, now the site's real accent orange, pill-shaped like every other
   primary action on the site. */
.woocommerce-checkout #request_courier_rates {
  background: var(--rjl-accent) !important;
  border-color: var(--rjl-accent) !important;
  color: var(--rjl-on-accent) !important;
  border-radius: 999px !important;
}
.woocommerce-checkout #request_courier_rates:hover {
  background: var(--rjl-accent-press) !important;
  border-color: var(--rjl-accent-press) !important;
  color: var(--rjl-on-accent-press) !important;
}

/* Place Order: was the same leftover pink, square. Now the same green pill
   as the cart page's Checkout button - both are the same "pay now" step
   in one purchase flow and should look like it. */
.woocommerce-checkout #place_order {
  background: var(--rjl-positive) !important;
  border-color: var(--rjl-positive) !important;
  color: #fff !important;
  border-radius: 999px !important;
  max-width: 320px;
  margin-inline: auto;
}
.woocommerce-checkout #place_order:hover {
  background: var(--rjl-positive) !important;
  border-color: var(--rjl-positive) !important;
}

/* Radio/checkbox inputs on this page were inheriting that same leftover
   pink as their native accent-color instead of the real accent orange. */
.woocommerce-checkout input[type="radio"],
.woocommerce-checkout input[type="checkbox"] {
  accent-color: var(--rjl-accent) !important;
}

/* The reassurance line under Place Order was set for a lighter black than
   this page actually uses - under 4:1 contrast against pure black.
   --rjl-ink-300 is the same "muted text on a dark panel" token used
   elsewhere in this file for exactly this situation. */
.woocommerce-checkout .rjl-checkout__trust { color: var(--rjl-ink-300) !important; }


/* ==========================================================================
   BOOK & RECORD STORE (post 2571) — CENTER LEGACY CONTENT (2026-09-12)

   The page's own written content (paragraphs + four photos, rendered
   through the shared .rjl-prose wrapper every page template uses for
   the_content()) was left-pinned inside its 1200px column with nothing
   centering it, so it reads as a narrow strip hugging the left edge with
   a wide dead stretch of cream down the right side (2026-09 request:
   "centre align all elements ... so there isn't too much empty space").
   This page's _elementor_data is corrupted (documented in the phase4 QA
   log - an unescaped \u00a0 and unescaped quotes inside a mailto link
   break JSON.parse), so widget settings can't be edited directly - this
   is a CSS-only fix, same approach already used successfully on this
   page's dark address/mission panel in an earlier round.

   Not widening the column much past its current measure: the four photos
   are served by Optimole at a fixed 560px and stretching them wider than
   that in CSS would upscale and blur them, so centering rather than
   force-filling is the honest fix here. */
body.page-id-2571 .rjl-prose {
  margin-inline: auto !important;
  max-width: 760px !important;
}
body.page-id-2571 .rjl-prose img {
  display: block !important;
  margin-inline: auto !important;
}


/* ==========================================================================
   CHECKOUT PAGE — FOLLOW-UP FIXES (2026-09-12)
   [1] Order Notes textarea (elementor-element-6ae26d02, ShopEngine
   "Additional information" widget) was inheriting a black background from
   its own plugin CSS despite sitting inside the cream billing card
   (elementor-element-52a4f44c) — text was rendering black-on-black.
   [2] "Your Order" / "Payment" section headings were left-aligned by
   Elementor default instead of centred over their cards.
   [3] "Get Delivery Prices" button was left-anchored in its own row.
   [4] Order-review table (line items, subtotal, shipping note, total) sat
   noticeably smaller than the surrounding billing-card text (15-16px vs
   16px inputs / 26px heading) — bumped up a step, total row bumped more.
   ========================================================================== */
.woocommerce-checkout textarea#order_comments,
.woocommerce-checkout .elementor-element-6ae26d02 textarea {
  background: var(--rjl-bg-raised) !important;
  color: var(--rjl-text) !important;
  border-color: var(--rjl-rule-strong) !important;
}
.woocommerce-checkout .elementor-element-4239e62a .elementor-heading-title {
  text-align: center !important;
}
.woocommerce-checkout .rjl-payment-head {
  text-align: center !important;
}
.rjl-checkout__review #request_courier_rates {
  display: block !important;
  margin-inline: auto !important;
}
.rjl-checkout__review .woocommerce-checkout-review-order-table th,
.rjl-checkout__review .woocommerce-checkout-review-order-table td {
  font-size: 17px !important;
}
.rjl-checkout__review .woocommerce-checkout-review-order-table .order-total th,
.rjl-checkout__review .woocommerce-checkout-review-order-table .order-total td {
  font-size: 19px !important;
}

.woocommerce-checkout .rjl-checkout__review .shipbubble-delivery-method-container #request_courier_rates {
  background: var(--rjl-accent) !important;
  border-color: var(--rjl-accent) !important;
  color: var(--rjl-on-accent) !important;
}
.woocommerce-checkout .rjl-checkout__review .shipbubble-delivery-method-container #request_courier_rates:hover {
  background: var(--rjl-accent-press) !important;
  border-color: var(--rjl-accent-press) !important;
}


/* ==========================================================================
   2026-09-14 BRAND-BOOK RETHEME, SHOP GRID QA
   ========================================================================== */

/* WooLentor's own stylesheet paints the out-of-stock label a hot pink-red
   (rgb(240,91,100)) in Roboto, both !important at six classes deep. Client
   asked for no red anywhere, and the brand carries one type family, so this
   repeats the label's own class to outrank it and puts it on the tokens. */
.ht-products .ht-product .ht-product-inner .ht-product-image-wrap .ht-product-label.ht-stockout.ht-stockout {
	white-space: nowrap !important;
	color: var(--rjl-paper) !important;
	background: var(--rjl-ink-950) !important;
	font-family: var(--rjl-font-display) !important;
	font-weight: var(--rjl-weight-bold) !important;
	letter-spacing: var(--rjl-track-label) !important;
	padding: 4px 10px !important;
	border-radius: var(--rjl-radius-xs) !important;
}

/* The grid's Add to Cart pill and its tooltip were still rendering in
   Roboto, pulled in by the Elementor kit rather than the theme. One family
   everywhere per the brand book. */
.ht-products .ht-product a.button,
.ht-products .ht-product .ht-product-action-tooltip,
.ht-products .ht-product .ht-product-title,
.ht-products .ht-product .ht-product-price {
	font-family: var(--rjl-font-display) !important;
}

/* The Shop template (WooLentor Theme Builder post 3156) is built from
   full-width Elementor containers with no inner boxing, so the product grid
   widget ran from x=0 to the viewport edge at every size: cards touched the
   screen edge on a phone (measured -16..387 at 390px) and the 4-column grid
   sprawled across all 1901px of a desktop monitor with the first column flush
   left. Boxing the grid widget itself to the site container fixes both: the
   dark title band above it stays full-bleed on purpose. The element ID is
   Elementor's own and survives re-saves of the template. */
.elementor-3156 .elementor-element-dbbc86b {
	max-width: var(--rjl-container) !important;
	margin-inline: auto !important;
	padding-inline: var(--rjl-gutter) !important;
}
.product-tab-list {
	padding-inline: var(--rjl-gutter) !important;
}

/* Related products on the single-product template rendered as a flex row
   whose items sized to each product photo's natural width (measured
   300/337/384/394px on one row), so the four cards were four different
   widths and the last one wrapped onto its own line. A real grid with
   square, cover-fitted images makes the row read as one set. Scoped to the
   related section only: the shop grid and the homepage rail have their own
   layouts. */
.related.products ul.products.columns-4 {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--rjl-space-md) !important;
	margin: 0 !important;
}
@media (min-width: 48em) {
	.related.products ul.products.columns-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--rjl-space-lg) !important;
	}
}
.related.products ul.products li.product {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	text-align: center;
}
.related.products ul.products li.product img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* Cart page, brand-book retheme QA. ShopEngine paints the remove-item
   control a hot red (rgb(253,57,57)) from its own widget CSS; no red on the
   site. It is now an outlined ink circle with an ink X that fills to ink
   with a white X on hover. Elementor's icon-font SVG sets its own fill, so
   the path is addressed directly. The section holding the coupon form and
   the totals card (Elementor 759a9775 on the cart template) carried 100px
   of padding top and bottom; brought onto the spacing scale. */
.shopengine-widget .shopengine-cart-table .shopengine-table__body-item .product-remove a.remove.remove.remove {
	background: transparent !important;
	border: 1.5px solid var(--rjl-ink-950) !important;
	color: var(--rjl-ink-950) !important;
	opacity: 1 !important;
}
.shopengine-widget .shopengine-cart-table .shopengine-table__body-item .product-remove a.remove.remove.remove svg,
.shopengine-widget .shopengine-cart-table .shopengine-table__body-item .product-remove a.remove.remove.remove svg path {
	fill: var(--rjl-ink-950) !important;
	color: var(--rjl-ink-950) !important;
}
.shopengine-widget .shopengine-cart-table .shopengine-table__body-item .product-remove a.remove.remove.remove svg {
	width: 11px !important;
	height: 11px !important;
}
.shopengine-widget .shopengine-cart-table .shopengine-table__body-item .product-remove a.remove.remove.remove:hover {
	background: var(--rjl-ink-950) !important;
	border-color: var(--rjl-ink-950) !important;
}
.shopengine-widget .shopengine-cart-table .shopengine-table__body-item .product-remove a.remove.remove.remove:hover svg,
.shopengine-widget .shopengine-cart-table .shopengine-table__body-item .product-remove a.remove.remove.remove:hover svg path {
	fill: var(--rjl-paper) !important;
	color: var(--rjl-paper) !important;
}
.elementor-3191 .elementor-element-759a9775 {
	padding-top: var(--rjl-space-lg) !important;
	padding-bottom: var(--rjl-space-2xl) !important;
}

/* Checkout payment methods, 2026-09-14 follow-up. WooCommerce floats the
   radio left and ShopEngine's box padding pushed it to the top corner, so
   the two radios sat at different heights. Each method box now positions
   its radio on the right edge, vertically centred, 16px in. The privacy
   policy link in the terms text was ink-on-ink on the dark payment panel. */
.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method {
	position: relative !important;
	padding-right: 3.25rem !important;
}
/* ShopEngine anchors its rule on #payment with !important, so this one
   carries the same ID plus repeated classes to outrank it. */
.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method > input.input-radio.input-radio.input-radio {
	position: absolute !important;
	left: auto !important;
	right: var(--rjl-space-sm) !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	float: none !important;
	margin: 0 !important;
	width: 18px !important;
	height: 18px !important;
	accent-color: var(--rjl-accent);
}
.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method > label {
	padding-right: 0 !important;
}
.woocommerce-checkout .elementor-element-561078a.elementor-element-561078a.elementor-element-561078a .woocommerce-terms-and-conditions-wrapper a,
.woocommerce-checkout .elementor-element-561078a.elementor-element-561078a.elementor-element-561078a .woocommerce-privacy-policy-text a {
	color: var(--rjl-paper) !important;
	text-decoration: underline !important;
	text-decoration-color: var(--rjl-accent) !important;
	text-underline-offset: 0.18em;
}
.woocommerce-checkout .elementor-element-561078a.elementor-element-561078a.elementor-element-561078a .woocommerce-terms-and-conditions-wrapper a:hover,
.woocommerce-checkout .elementor-element-561078a.elementor-element-561078a.elementor-element-561078a .woocommerce-privacy-policy-text a:hover {
	color: var(--rjl-accent) !important;
}

/* The replacement no-shipping text (see rjl_no_shipping_message in
   functions.php) reads as guidance, not an error. */
/* Shipping hint: sits under the Shipment label, left-aligned, in the muted small text. */
.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals > td:has(> .rjl-shipping-hint) {
	text-align: left !important;
}
.woocommerce-checkout-review-order-table .rjl-shipping-hint {
	display: block;
	font-size: var(--rjl-text-sm);
	line-height: 1.5;
	color: var(--rjl-text-muted);
	text-align: left;
}

/* ==========================================================================
   Quantity inputs: no native number spinner (2026-10-03)
   ==========================================================================
   Every quantity box on the site (cart, product page, quick view) already
   has its own − and + buttons. The browser's built-in up/down arrows inside
   the number field doubled them up. Typing a number still works.
   ========================================================================== */
.quantity input.qty::-webkit-inner-spin-button,
.quantity input.qty::-webkit-outer-spin-button {
	-webkit-appearance: none !important;
	appearance: none !important;
	margin: 0 !important;
}
.quantity input.qty {
	-moz-appearance: textfield !important;
	appearance: textfield !important;
}

/* ==========================================================================
   Shop grid: stock count under the price (2026-10-03)
   ==========================================================================
   rjl-ui.js (section 10) reads each card's stock from the WooCommerce Store
   API and adds a .rjl-card-stock line between the price and Add to Cart.
   Bookings and donations are skipped. Green dot = in stock, orange dot =
   three or fewer left.
   ========================================================================== */
.ht-product-content .rjl-card-stock {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.45em;
	margin: 0 0 0.85rem;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.78);
}
.ht-product-content .rjl-card-stock::before {
	content: "";
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: #4caf50;
	flex: none;
}
.ht-product-content .rjl-card-stock.is-low::before {
	background: #e0913f;
}

/* ==========================================================================
   Quick view popup: one tidy action block (2026-10-03)
   ==========================================================================
   The shared product-page rule (.woocommerce div.product form.cart, a
   two-column grid built for quantity + Add to Cart) also caught the quick
   view, where the wishlist and compare controls print first. They took the
   grid's first cells: wishlist became a long bar with the heart pinned left,
   compare a small unlabelled icon. Here the form becomes a wrapping row:
     row 1  [ − 1 + ]  [ ADD TO CART ............ ]
     row 2  [ ♡ ADD TO WISHLIST ]  [ ⇄ COMPARE ]
   All controls share one 48px height and the 4px corner Add to Cart uses.
   ========================================================================== */
.woolentor-quickview-content-area div.product form.cart {
	display: flex !important;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0 12px !important;
	margin: 0 0 var(--rjl-space-md, 1.5rem) !important;
}
/* The form's clearfix pseudo-elements count as flex items. ::before would
   push row 1 in by a gap; ::after becomes a full-width line break after
   Add to Cart, so wishlist + compare always start their own row, even when
   the quantity stepper is hidden (one item left in stock). */
.woolentor-quickview-content-area div.product form.cart::before {
	content: none !important;
	display: none !important;
}
.woolentor-quickview-content-area div.product form.cart::after {
	content: "" !important;
	display: block !important;
	order: 2;
	flex: 0 0 100%;
	height: 0;
	margin: 0;
}
.woolentor-quickview-content-area div.product form.cart > * {
	margin: 0 !important;
}

/* Row 1: quantity stepper + Add to Cart */
.woolentor-quickview-content-area div.product form.cart .quantity {
	order: 1;
	flex: 0 0 auto;
	display: inline-flex !important;
	align-items: stretch;
	height: 48px;
	border: 1.6px solid var(--rjl-ink-950, #000);
	border-radius: 4px;
	overflow: hidden;
	background: #fff;
}
.woolentor-quickview-content-area div.product form.cart .quantity:has(input[type="hidden"]) {
	display: none !important;
}
.woolentor-quickview-content-area div.product form.cart .quantity .minus,
.woolentor-quickview-content-area div.product form.cart .quantity .plus {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: auto !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--rjl-ink-950, #000) !important;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none !important;
	cursor: pointer;
}
.woolentor-quickview-content-area div.product form.cart .quantity .minus:hover,
.woolentor-quickview-content-area div.product form.cart .quantity .plus:hover {
	background: var(--rjl-accent-tint, #f4ebe0) !important;
	color: var(--rjl-accent-ink, #8a5019) !important;
}
.woolentor-quickview-content-area div.product form.cart .quantity input.qty {
	width: 48px !important;
	height: auto !important;
	padding: 0 !important;
	border: 0 !important;
	border-left: 1px solid var(--rjl-ink-200, #ccc) !important;
	border-right: 1px solid var(--rjl-ink-200, #ccc) !important;
	border-radius: 0 !important;
	background: #fff !important;
	color: var(--rjl-ink-950, #000) !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	text-align: center;
}
.woolentor-quickview-content-area div.product form.cart .single_add_to_cart_button {
	order: 2;
	flex: 1 1 11rem;
	height: 48px !important;
	min-height: 48px;
	justify-content: center;
	align-items: center;
}

/* Row 2: wishlist + compare, equal halves, icon plus a written label */
.woolentor-quickview-content-area div.product form.cart .shopengine-wishlist,
.woolentor-quickview-content-area div.product form.cart .shopengine-comparison {
	order: 3;
	flex: 1 1 calc(50% - 6px);
	min-width: 9rem;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	height: 48px !important;
	padding: 0 1rem !important;
	border: 1.6px solid var(--rjl-ink-950, #000) !important;
	border-radius: 4px !important;
	background: transparent !important;
	color: var(--rjl-ink-950, #000) !important;
	font-family: inherit;
	font-size: 0.8125rem !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-decoration: none !important;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
	margin-top: 12px !important;
}
.woolentor-quickview-content-area div.product form.cart .shopengine-comparison {
	order: 4;
}
.woolentor-quickview-content-area div.product form.cart .shopengine-wishlist i,
.woolentor-quickview-content-area div.product form.cart .shopengine-comparison i {
	font-size: 1.05rem;
	line-height: 1;
	margin: 0 !important;
	color: inherit !important;
}
.woolentor-quickview-content-area div.product form.cart .shopengine-wishlist::after {
	content: "Add to wishlist";
}
.woolentor-quickview-content-area div.product form.cart .shopengine-wishlist.active::after {
	content: "In your wishlist";
}
.woolentor-quickview-content-area div.product form.cart .shopengine-comparison::after {
	content: "Compare";
}
.woolentor-quickview-content-area div.product form.cart .shopengine-comparison.active::after {
	content: "Comparing";
}
.woolentor-quickview-content-area div.product form.cart .shopengine-wishlist:hover,
.woolentor-quickview-content-area div.product form.cart .shopengine-comparison:hover,
.woolentor-quickview-content-area div.product form.cart .shopengine-wishlist:focus-visible,
.woolentor-quickview-content-area div.product form.cart .shopengine-comparison:focus-visible {
	border-color: var(--rjl-accent, #a96420) !important;
	color: var(--rjl-accent-ink, #8a5019) !important;
	background: var(--rjl-accent-tint, #f4ebe0) !important;
}
.woolentor-quickview-content-area div.product form.cart .shopengine-wishlist.active,
.woolentor-quickview-content-area div.product form.cart .shopengine-comparison.active {
	border-color: var(--rjl-accent, #a96420) !important;
	color: var(--rjl-accent-ink, #8a5019) !important;
}

/* Quick view on phones: the summary column is narrow (about 240px), so
   every control takes its own full-width row with the same 12px gap, and the
   summary drops its own inner scrollbar so only the popup scrolls (two
   nested scroll areas made the buttons hard to reach). */
@media (max-width: 767px) {
	.woolentor-quickview-content-area div.product form.cart {
		gap: 12px !important;
	}
	.woolentor-quickview-content-area div.product form.cart::after {
		display: none !important;
	}
	.woolentor-quickview-content-area div.product form.cart .single_add_to_cart_button {
		flex-basis: 100%;
	}
	.woolentor-quickview-content-area div.product form.cart .shopengine-wishlist,
	.woolentor-quickview-content-area div.product form.cart .shopengine-comparison {
		margin-top: 0 !important;
	}
	.woolentor-quickview-modal .summary-content {
		max-height: none !important;
		overflow: visible !important;
	}
}

/* Stock line in the quick view: same green-dot treatment as the shop cards */
.woolentor-quickview-content-area .summary p.stock {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}
.woolentor-quickview-content-area .summary p.stock.in-stock::before {
	content: "";
	width: 0.55em;
	height: 0.55em;
	border-radius: 50%;
	background: var(--rjl-positive, #237120);
}