/**
 * Cart + checkout — v3 (premium dark redesign, Claude 2026-08-12).
 *
 * Dark canvas / elevated-surface theme for cart + checkout, matching the
 * site's own black/yellow brand and the Shopify-checkout reference feel.
 * Pairs with inc/td-checkout.php + cart-shopify.js.
 *
 * Design tokens: brand black #0c0c0c canvas, elevated dark surfaces for
 * cards, brand yellow #fee100 (the site's ACTUAL yellow — every other
 * stylesheet on this theme uses #fee100, not the approximate #ffe200 from
 * the brief; matching the real value keeps this from reading as a second,
 * slightly-off yellow next to the header/logo/buttons everywhere else).
 */

:root {
	--td-bg: #0c0c0c;
	--td-surface: #171717;
	--td-surface-2: #212121;
	--td-surface-3: #2a2a2a;
	--td-border: rgba(255, 255, 255, .12);
	/* round 5 fix: was rgba(255,255,255,.24) — on the #171717/#212121 dark
	 * surfaces every "card" in cart+checkout uses this for (payment method
	 * boxes, the Card/PayPal radios, consent checkboxes, billing/order-review
	 * panels), .24 read as a harsh bright-white rim rather than a quiet
	 * outline. Softened into the surface instead of the surface itself, so
	 * the yellow selected-payment accent (--td-yellow, a separate variable)
	 * still reads as the one deliberately bright edge on the page. */
	--td-border-strong: rgba(255, 255, 255, .13);
	--td-text: #f7f7f5;
	--td-text-dim: #adadb2;
	--td-text-faint: #9a9aa0;
	--td-yellow: #fee100;
	--td-yellow-ink: #0c0c0c;
	--td-error: #ff5b4d;
	--td-radius: 14px;
	--td-radius-lg: 18px;
}

/* ============ shared ============ */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.woocommerce-cart h1.page-header__title,
.woocommerce-checkout h1.page-header__title {
	font-family: 'Anton', 'Arial Narrow', sans-serif;
	font-weight: 400;
}

/* dark page canvas (both cart + checkout) */
body.woocommerce-cart,
body.woocommerce-checkout,
.woocommerce-cart .boxed-container,
.woocommerce-checkout .boxed-container {
	background: var(--td-bg) !important;
	color: var(--td-text);
}
.woocommerce-cart .page-header,
.woocommerce-checkout .page-header { background: var(--td-bg) !important; }
.woocommerce-cart .page-header__title,
.woocommerce-checkout .page-header__title { color: var(--td-text) !important; }

/* ============ notices (error / info / message) — brand-flat ============
 * Parent theme default: 0 top/bottom margin on the checkout page + garish
 * colors — reads as "jammed at the very top with no separation". Give
 * every notice type breathing room from the header and a consistent flat
 * card that matches the rest of the page. Solid-color cards already carry
 * their own contrast, unchanged by the dark-canvas switch other than a
 * brighter error red (the old #b42318 read muddy on a near-black page). */
.woocommerce-cart .woocommerce-notices-wrapper,
.woocommerce-checkout .woocommerce-notices-wrapper {
	display: block;
	margin: 24px 0 0;
}
.woocommerce-cart .woocommerce-error,
.woocommerce-cart .woocommerce-info,
.woocommerce-cart .woocommerce-message,
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-message {
	border-radius: 12px !important;
	margin: 0 0 20px !important;
	padding: 16px 20px !important;
	/* traced a real ~15px horizontal overflow on narrow viewports to this
	 * exact element: the parent theme's own .woocommerce-notice/.woocommerce-
	 * info default computes to width:390px (== 100vw on a 390px-viewport
	 * screenshot) while its actual parent is only 360px wide (padded 15px
	 * each side) — confirmed via getComputedStyle, width:390px against a
	 * 360px-wide parent at x:15, which is precisely a 15px right-edge
	 * overflow. Force a real 100%-of-parent width instead, border-box so
	 * our own padding doesn't reopen the same gap from the other side. */
	width: 100% !important;
	box-sizing: border-box !important;
	font-size: 15px !important;
}
.woocommerce-cart .woocommerce-error,
.woocommerce-checkout .woocommerce-error {
	background: var(--td-error) !important;
	color: #1a0a08 !important;
	font-weight: 600;
}
.woocommerce-cart .woocommerce-error a,
.woocommerce-checkout .woocommerce-error a { color: #1a0a08 !important; text-decoration: underline !important; }
.woocommerce-cart .woocommerce-info,
.woocommerce-checkout .woocommerce-info {
	background: var(--td-surface) !important;
	border: 1px solid var(--td-border) !important;
	color: var(--td-text) !important;
}
.woocommerce-cart .woocommerce-info a,
.woocommerce-checkout .woocommerce-info a { color: var(--td-yellow) !important; }
.woocommerce-cart .woocommerce-info .showlogin,
.woocommerce-checkout .woocommerce-info .showlogin,
.woocommerce-cart .woocommerce-error .wc-forward,
.woocommerce-checkout .woocommerce-error .wc-forward,
.woocommerce-cart .woocommerce-message .wc-forward,
.woocommerce-checkout .woocommerce-message .wc-forward {
	background: var(--td-yellow) !important;
	color: var(--td-yellow-ink) !important;
	border: 0 !important;
	border-radius: 30px !important;
	font-weight: 700 !important;
	padding: 10px 20px !important;
	box-shadow: none !important;
	text-decoration: none !important;
}
.woocommerce-cart .woocommerce-info .showlogin:hover,
.woocommerce-checkout .woocommerce-info .showlogin:hover,
.woocommerce-cart .woocommerce-error .wc-forward:hover,
.woocommerce-checkout .woocommerce-error .wc-forward:hover,
.woocommerce-cart .woocommerce-message .wc-forward:hover,
.woocommerce-checkout .woocommerce-message .wc-forward:hover {
	background: #fff !important;
	color: var(--td-yellow-ink) !important;
}
.woocommerce-cart .woocommerce-message,
.woocommerce-checkout .woocommerce-message {
	background: var(--td-yellow) !important;
	color: var(--td-yellow-ink) !important;
}
/* empty-cart "Return to shop" — NOT part of wc_print_notices(), it's a
 * sibling <p class="return-to-shop"><a class="button wc-backward"> from the
 * cart-empty template, so it falls outside the .woocommerce-info card above
 * and inherits the parent theme's glossy gold-gradient .woocommerce .button
 * default. Flatten it to match the rest of the cart's brand-yellow pills. */
.woocommerce-cart .return-to-shop .button {
	background: var(--td-yellow) !important;
	background-image: none !important;
	color: var(--td-yellow-ink) !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 30px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	padding: 12px 24px !important;
}
.woocommerce-cart .return-to-shop .button:hover { background: #fff !important; color: var(--td-yellow-ink) !important; }
.woocommerce-cart .return-to-shop { color: var(--td-text-dim); }

/* ============ cart layout: items left, summary right ============ */
@media (min-width: 992px) {
	.woocommerce-cart .woocommerce {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 400px;
		gap: 0 40px;
		align-items: start;
	}
	.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; grid-row: 1; }
	.woocommerce-cart .woocommerce-cart-form { grid-column: 1; grid-row: 2; }
	.woocommerce-cart .cart-collaterals { display: contents; }
	.woocommerce-cart .cart_totals { grid-column: 2; grid-row: 2; }
	.woocommerce-cart .cross-sells { grid-column: 1 / -1; grid-row: 3; width: 100%; }
	.woocommerce-cart .woocommerce > wc-order-attribution-inputs { display: none; }
}
.woocommerce-cart table.shop_table { display: table; width: 100%; }

/* meta line above the items card */
.td-cart__meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 0 14px;
	color: var(--td-text-dim);
	font-size: 16px;
}
.td-cart__clear {
	border: 1px solid var(--td-border-strong) !important;
	border-radius: 8px;
	padding: 8px 16px;
	color: var(--td-text) !important;
	font-size: 15px;
	text-decoration: none !important;
	transition: background .12s ease, border-color .12s ease;
}
.td-cart__clear:hover { background: var(--td-surface); border-color: var(--td-text-dim) !important; }

/* ============ cart items card ============ */
.woocommerce-cart table.shop_table {
	border: 1px solid var(--td-border) !important;
	border-radius: var(--td-radius-lg);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: var(--td-surface);
	margin-bottom: 24px;
}
.woocommerce-cart table.shop_table th,
.woocommerce-cart table.shop_table td {
	border: 0 !important;
	border-bottom: 1px solid var(--td-border) !important;
	background: transparent !important;
	color: var(--td-text);
	padding: 14px 16px;
	vertical-align: middle;
}
.woocommerce-cart table.shop_table thead th {
	font-weight: 600;
	font-size: 15px;
	color: var(--td-text-dim);
	text-transform: none;
	letter-spacing: 0;
}
.woocommerce-cart table.shop_table tbody tr:last-child td { border-bottom: 0 !important; }
/* parent theme paints <thead> AND every <tr> itself with a light #f5f7fa
 * background (separately from the th/td cells, which we already set
 * transparent) — transparent cells just let that light band show through
 * underneath. On desktop this only showed as a stray white bar behind the
 * "Product / Subtotal" header; on mobile, where WooCommerce's responsive
 * table CSS collapses each row into a block-level "card" with
 * `tr { background: #f5f7fa }` doing the visible work, it was worse: the
 * light row background sat directly behind our (correctly light-colored,
 * for a dark row) product-name text, producing literal white-on-white
 * invisible text. Neutralize both ancestors directly, every breakpoint. */
.woocommerce-cart table.shop_table thead,
.woocommerce-cart table.shop_table tr,
.woocommerce-checkout table.shop_table thead,
.woocommerce-checkout table.shop_table tr { background: transparent !important; }
/* same story for BORDER color: the parent theme's own #e6e6e6 leaks through
 * on every th/tr/td (a full-width rule under the "Product/Subtotal" title,
 * a bright white outline around each mobile responsive "card", stray ~93px
 * fragments from cells that only exist at the mobile breakpoint) wherever a
 * border exists that our explicit border-bottom rules above didn't already
 * recolor. A blanket border-color catch-all on the whole table is the only
 * reliable way to guarantee none of the parent theme's #e6e6e6 survives,
 * regardless of which specific rule/breakpoint is painting it. */
.woocommerce-cart table.shop_table,
.woocommerce-cart table.shop_table * {
	border-color: rgba(255, 255, 255, .08) !important;
}

/* ---- mobile responsive "card" rows (≤768px, WooCommerce's own
 * shop_table_responsive breakpoint): drop the redundant "Product:" /
 * "Price:" / "Subtotal:" data-title labels (self-evident once each row IS
 * the product, image-first), left-align the name instead of the responsive
 * default's right-alignment, and cap the thumbnail so it can't dominate the
 * card the way a full-bleed image did. ---- */
@media (max-width: 768px) {
	.woocommerce-cart table.shop_table td::before { display: none !important; }
	.woocommerce-cart table.shop_table td { text-align: left !important; }
	.woocommerce-cart table.shop_table td.product-thumbnail img {
		width: 100% !important;
		max-width: 120px !important;
		height: 120px !important;
		min-width: 0 !important;
	}
}

.woocommerce-cart table.shop_table td.product-thumbnail { width: 116px; }
.woocommerce-cart table.shop_table td.product-thumbnail img {
	width: 100px !important;
	min-width: 100px !important;
	height: 100px !important;
	max-width: none !important;
	object-fit: cover;
	border-radius: 16px;
	background: #fff;
	display: block;
}
.woocommerce-cart table.shop_table td.product-name a {
	color: var(--td-text) !important;
	font-weight: 700;
	font-size: 17px;
	text-decoration: none !important;
}
.woocommerce-cart table.shop_table td.product-name a:hover { text-decoration: underline !important; color: var(--td-yellow) !important; }
.woocommerce-cart table.shop_table td.product-price { color: var(--td-text-dim); }
.woocommerce-cart table.shop_table td.product-subtotal { font-weight: 700; color: var(--td-text); }

/* ---- remove "x" — pixel-centered via a masked SVG glyph, not a font
 * character. The unicode × / &times; glyph sits optically high-left inside
 * its own em box (ascender-heavy, no descender) — flex/line-height centering
 * only centers the LINE BOX, never the glyph's actual ink, so it always
 * reads as "off-center" no matter how the text is aligned. Hiding the text
 * and drawing an exact two-line X via SVG mask removes the font metric
 * entirely: the mask is centered on pure geometry (12x12 box in a 30x30
 * circle), so it is centered, full stop. `background-color: currentColor`
 * on the mask means the existing `color` / hover-`color` rules below still
 * drive the icon's color with zero extra rules. */
.woocommerce-cart table.shop_table td.product-remove { width: 60px; }
/* 44x44 hit area (WCAG target-size guidance) while the drawn ring stays a
 * visually-tidy 30px — the ring is a separate ::after layer sized/centered
 * independently of the anchor's own box, so enlarging the tap target never
 * touches the × glyph's centering math below (still center-of-parent,
 * parent's just bigger now). */
.woocommerce-cart table.shop_table a.remove {
	display: inline-flex !important;
	position: relative;
	align-items: center;
	justify-content: center;
	color: var(--td-text-dim) !important;
	background: transparent;
	border: 0;
	width: 44px;
	height: 44px;
	font-size: 0 !important;
	line-height: 0 !important;
	transition: color .12s ease;
}
.woocommerce-cart table.shop_table a.remove::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 30px;
	height: 30px;
	transform: translate(-50%, -50%);
	border: 1px solid var(--td-border-strong);
	border-radius: 50%;
	transition: background .12s ease, border-color .12s ease;
}
/* ---- remove "x" — pixel-centered via a masked SVG glyph, not a font
 * character. The unicode × / &times; glyph sits optically high-left inside
 * its own em box (ascender-heavy, no descender) — flex/line-height centering
 * only centers the LINE BOX, never the glyph's actual ink, so it always
 * reads as "off-center" no matter how the text is aligned. Hiding the text
 * and drawing an exact two-line X via SVG mask removes the font metric
 * entirely: the mask is centered on pure geometry, so it is centered, full
 * stop. `background-color: currentColor` on the mask means the existing
 * `color` / hover-`color` rules below still drive the icon's color with
 * zero extra rules. */
.woocommerce-cart table.shop_table a.remove::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 12px;
	transform: translate(-50%, -50%);
	background-color: currentColor;
	z-index: 1;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5L19 19M19 5L5 19' stroke='%23000' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5L19 19M19 5L5 19' stroke='%23000' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.woocommerce-cart table.shop_table a.remove:hover { color: #1a0a08 !important; }
.woocommerce-cart table.shop_table a.remove:hover::after {
	background: var(--td-error) !important;
	border-color: var(--td-error);
}

.woocommerce-cart table.shop_table td.product-quantity .quantity .qty {
	width: 64px;
	border: 1px solid var(--td-border-strong);
	border-radius: 8px;
	padding: 8px 6px;
	text-align: center;
	background: var(--td-surface-2);
	color: var(--td-text);
}

.woocommerce-cart table.shop_table td.actions { padding: 14px 16px; }
/* round 5 fix: the coupon <input> and "Apply coupon" <button> are adjacent
 * inline elements with no margin between them anywhere in this stylesheet —
 * with both pill-shaped (30px radius) they visually kissed at the corners
 * (confirmed against the owner's screenshot). display:flex + an explicit
 * gap is used instead of a one-off margin so it stays correct however many
 * children .coupon ends up with (WooCommerce also prints a nonce <input
 * type=hidden> as a sibling here, which flex simply ignores).
 *
 * r12 fix (owner screenshot: Coupon-code input and "Apply coupon" pill
 * touching again): the r5 selector `.woocommerce-cart .coupon` (0,2,0) was
 * silently LOSING the display battle to the parent theme's
 * `table.cart td.actions .coupon { display:inline-block; float:left }`
 * (woondershop-fab.min.css, specificity 0,3,2) — the rule was present in
 * the served CSS all along, but its display:flex never applied (the float
 * then blockified the element, so the two pills sat flush). The gap:10px
 * half DID compute (parent declares no gap) which is why this was easy to
 * misread as "the rule is live". Selector bumped to (0,4,2) so the flex
 * layout actually wins. The parent's float:left is deliberately KEPT (float
 * blockifies the flex box but doesn't disable it): floated, the coupon
 * cluster shrink-wraps its content and "Update cart" stays right-aligned on
 * the same row at desktop widths — float:none made the flex row full-width
 * and pushed Update cart onto its own line (verified both ways in WebKit).
 * The parent theme also glues the Apply button to the input with
 * `.woocommerce-cart-form .actions .input-text+.button{margin-left:-.25rem}`
 * (it eats half the flex gap — measured 5px instead of 10px); zeroed here. */
.woocommerce-cart .coupon,
.woocommerce-cart table.cart td.actions .coupon {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
.woocommerce-cart .woocommerce-cart-form td.actions .coupon .input-text + .button { margin-left: 0; }
.woocommerce-cart .coupon .input-text {
	border: 1px solid var(--td-border-strong) !important;
	border-radius: 30px !important;
	padding: 10px 18px !important;
	min-width: 200px;
	background: var(--td-surface-2) !important;
	color: var(--td-text) !important;
}
.woocommerce-cart .coupon .input-text::placeholder { color: var(--td-text-faint); }
.woocommerce-cart .coupon button,
.woocommerce-cart td.actions > .button {
	background: transparent !important;
	color: var(--td-text) !important;
	border: 1px solid var(--td-border-strong) !important;
	border-radius: 30px !important;
	padding: 10px 22px !important;
	font-weight: 700;
}
.woocommerce-cart .coupon button:hover,
.woocommerce-cart td.actions > .button:hover { background: var(--td-surface-2) !important; border-color: var(--td-text-dim) !important; }

/* ============ cart summary card ============ */
.woocommerce-cart .cart_totals {
	background: var(--td-surface);
	border: 1px solid var(--td-border);
	border-radius: var(--td-radius-lg);
	padding: 24px;
	width: 100%;
}
.woocommerce-cart .cart_totals h2 {
	font-family: 'Anton', 'Arial Narrow', sans-serif;
	font-weight: 400;
	font-size: 22px;
	margin: 0 0 6px;
	color: var(--td-text);
}
.woocommerce-cart .cart_totals table.shop_table {
	border: 0 !important;
	border-radius: 0;
	margin: 0 0 6px;
	background: transparent;
}
.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
	padding: 8px 0;
	border: 0 !important;
	color: var(--td-text);
}
.woocommerce-cart .cart_totals table.shop_table th { color: var(--td-text-dim); }
.woocommerce-cart .cart_totals .order-total td,
.woocommerce-cart .cart_totals .order-total th { border-top: 1px solid var(--td-border) !important; }
.woocommerce-cart .cart_totals .order-total .amount {
	font-family: 'Anton', 'Arial Narrow', sans-serif;
	font-weight: 400;
	font-size: clamp(30px, 3vw, 42px);
	line-height: 1.1;
	color: var(--td-text);
}
.td-cart__note { color: var(--td-text-dim); font-size: 15px; margin: 4px 0 12px; }
.td-cart__ready {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 15px;
	color: var(--td-text);
	margin: 0 0 16px;
	cursor: pointer;
}
/* size/appearance/color now owned by .td-checkbox (cart-shopify.js tags
 * #td-ready-check with it too, for the same look as every checkout box) */
.td-cart__ready input { margin-top: 1px; }

.woocommerce-cart .wc-proceed-to-checkout { padding: 0; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	background: var(--td-yellow) !important;
	color: var(--td-yellow-ink) !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 30px !important;
	font-size: 19px !important;
	font-weight: 700;
	padding: 15px 20px !important;
	text-align: center;
	transition: background .12s ease, color .12s ease, transform .12s ease;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover { background: #fff !important; color: var(--td-yellow-ink) !important; }
.woocommerce-cart.td-cart-locked .cart_totals [class*='stripe'],
.woocommerce-cart.td-cart-locked .cart_totals [id*='payment-request'],
.woocommerce-cart.td-cart-locked .cart_totals [id*='express'],
.woocommerce-cart.td-cart-locked .cart_totals [class*='express'] {
	pointer-events: none;
	opacity: .55;
	filter: grayscale(.5);
}
/* the checkout button gets its OWN disabled palette instead of opacity —
 * opacity blends the whole element (text AND background) toward the black
 * page canvas, which collapses the text/background contrast ratio far
 * below what the two colors read as in isolation (measured 1.61:1 with the
 * old opacity:.4 approach). Solid, deliberately-picked disabled colors
 * keep the button legible (base contrast) while still unambiguously
 * reading as "not clickable right now". */
.woocommerce-cart.td-cart-locked .cart_totals a.checkout-button {
	pointer-events: none;
	background: var(--td-surface-3) !important;
	color: var(--td-text-dim) !important;
	opacity: 1 !important;
	filter: none !important;
}
/* helper text tying the disabled button back to the checkbox that unlocks
 * it — only shown while locked, directly under the button. */
.td-cart__helper {
	display: none;
	text-align: center;
	font-size: 13px;
	color: var(--td-text-faint);
	margin: 10px 0 0;
}
.woocommerce-cart.td-cart-locked .td-cart__helper { display: block; }

/* ============ cart cross-sells ============ */
.woocommerce-cart .cross-sells { margin-top: 44px; }
.woocommerce-cart .cross-sells > h2 {
	font-family: 'Anton', 'Arial Narrow', sans-serif;
	font-weight: 400;
	font-size: clamp(26px, 2.6vw, 38px);
	margin: 0 0 18px;
	color: var(--td-text);
}
.woocommerce-cart .cross-sells ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (max-width: 991px) { .woocommerce-cart .cross-sells ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.woocommerce-cart .cross-sells ul.products li { width: auto !important; margin: 0 !important; float: none !important; }

/* =====================================================================
 * CHECKOUT — premium dark, Shopify-hosted-checkout layout
 * slim topbar -> Express checkout -> OR -> Billing -> note -> Payment -> Pay
 * right: dark order-summary card with thumbnails (sticky)
 * =================================================================== */

.woocommerce-checkout .woocommerce { max-width: 1120px; margin: 0 auto; }

/* ---- slim topbar (replaces the tall "logo + Checkout" band) ----
 * #pg-40-0 is SiteOrigin Page Builder's row wrapper for the Checkout page
 * (post ID 40) — a STABLE id tied to the row's position, independent of
 * whatever text/widgets an editor puts inside it. #pgc-40-0-0 / -1 / -2..4
 * are its column cells, same stability guarantee. We restyle this row into
 * a compact flex bar entirely in CSS (safe against future content edits);
 * cart-shopify.js injects the two live pieces that need real DOM nodes (the
 * "Secure checkout" label swap and the "Back to cart" link) into these same
 * stable ids — see buildCheckoutTopbar() there. */
.woocommerce-checkout #pg-40-0 {
	background: var(--td-bg) !important;
	border-bottom: 1px solid var(--td-border);
	width: 100vw;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	padding: 0 !important;
}
.woocommerce-checkout #pg-40-0 .siteorigin-panels-stretch {
	display: flex !important;
	align-items: center;
	justify-content: flex-start;
	gap: 20px;
	max-width: 1360px;
	margin: 0 auto;
	padding: 0 24px;
	min-height: 60px;
}
.woocommerce-checkout #pg-40-0 .panel-grid-cell-empty { display: none !important; }
.woocommerce-checkout #pg-40-0 [id^="pgc-40-0-"] {
	width: auto !important;
	flex: 0 0 auto !important;
	padding: 0 !important;
}
/* logo cell: SiteOrigin Page Builder gives .panel-grid-cell an explicit
 * height equal to the row's own stretched height (confirmed live: cell
 * height === row height, to the sub-pixel), not just its content's natural
 * height. The row's `align-items: center` above only centers each flex
 * ITEM's box as a whole — once this cell's box already equals the full row
 * height, centering it is a no-op, and the 108px-wide/~22px-tall logo image
 * inside (a plain block element) then sits at the TOP of that tall cell by
 * normal block-layout default, reading as "logo not vertically centered"
 * next to the "Secure checkout" text and "Back to cart" pill, whose own
 * (shorter, unstretched) cells DO get centered correctly. Fix at the level
 * that actually has slack to distribute: center the image within its own
 * cell, rather than the cell within the row (which was already centered). */
.woocommerce-checkout #pgc-40-0-0 {
	display: flex !important;
	align-items: center;
}
.woocommerce-checkout #pgc-40-0-0 .so-panel { margin: 0 !important; }
/* round 4 fix: the logo <img> itself carries margin-bottom:35.1px from the
 * SiteOrigin text-widget wrapper it's edited inside of (the widget's own
 * paragraph-spacing default), which pushes the image's visual center ~18px
 * above the "Secure checkout" / "Back to cart" row it sits next to in the
 * 56-60px topbar — the row-level align-items:center above only centers the
 * img's OWN box, and that box already includes the phantom bottom margin as
 * part of its height, so centering the box still leaves the image content
 * riding high within it. Zero out the margin at the image itself. */
.woocommerce-checkout #pgc-40-0-0 img { width: 108px !important; height: auto !important; margin: 0 !important; display: block; }
/* cell 1: was a static "Checkout" h1 — cart-shopify.js swaps its text to a
 * lock icon + "Secure checkout"; style whatever text ends up in there */
.woocommerce-checkout #pgc-40-0-1 { flex: 1 1 auto !important; }
.woocommerce-checkout #pgc-40-0-1 h1 {
	margin: 0 !important;
	text-align: left !important;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: .02em;
}
.woocommerce-checkout #pgc-40-0-1 h1 span {
	color: var(--td-text-dim) !important;
	display: inline-flex !important;
	align-items: center;
	gap: 7px;
}
.woocommerce-checkout #pgc-40-0-1 h1 span svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--td-text-dim); }
/* back-to-cart link injected by JS as the row's last child */
.woocommerce-checkout .td-topbar__back {
	flex: 0 0 auto;
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	color: var(--td-text) !important;
	background: var(--td-surface-2);
	border: 1px solid var(--td-border-strong);
	border-radius: 30px;
	padding: 9px 18px 9px 14px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none !important;
	white-space: nowrap;
	transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.woocommerce-checkout .td-topbar__back svg { width: 15px; height: 15px; flex: 0 0 auto; }
.woocommerce-checkout .td-topbar__back:hover {
	background: var(--td-yellow) !important;
	color: var(--td-yellow-ink) !important;
	border-color: var(--td-yellow) !important;
}
@media (max-width: 640px) {
	.woocommerce-checkout #pg-40-0 .siteorigin-panels-stretch { padding: 0 16px; gap: 10px; min-height: 56px; }
	.woocommerce-checkout #pgc-40-0-0 img { width: 84px !important; }
	/* trust cue stays visible but compacts to icon-only (the "Secure
	 * checkout" text collapses via font-size:0 — the lock svg is sized in
	 * px, not em, so it's unaffected and keeps the cue legible at a glance
	 * without competing for the little width 390px has left over) */
	.woocommerce-checkout #pgc-40-0-1 { flex: 0 0 auto !important; }
	.woocommerce-checkout #pgc-40-0-1 h1 { font-size: 0 !important; }
	.woocommerce-checkout #pgc-40-0-1 h1 span svg { width: 18px; height: 18px; }
	.woocommerce-checkout .td-topbar__back { margin-left: auto; padding: 8px 14px 8px 12px; font-size: 13px; }
}

/* pg-40-1: the plain-text "Login or register" row — redundant next to
 * WooCommerce's own "Returning customer?" toggle box rendered inside the
 * checkout form itself (restyled below); hidden on both breakpoints to
 * remove the duplicate prompt entirely. */
.woocommerce-checkout #pg-40-1 { display: none !important; }

/* WooCommerce's native "Returning customer?" login toggle */
.woocommerce-checkout .woocommerce-form-login-toggle {
	background: var(--td-surface) !important;
	border: 1px solid var(--td-border);
	border-radius: var(--td-radius);
	padding: 16px 20px !important;
	margin: 24px 0 0 !important;
	color: var(--td-text) !important;
	/* hard containment: belt-and-braces against the pill button bleeding
	 * past the card's own rounded corner at narrow widths (see below) */
	overflow: hidden;
}
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	min-width: 0;
}
/* the "Returning customer?" text node and the button are the two flex
 * items here — neither had min-width:0, so a flex item's default min-width
 * (auto = its content's natural width) could push the pill wider than the
 * row had room for, overflowing the card's rounded edge by a few pixels
 * even with flex-wrap set. min-width:0 lets both shrink/wrap properly; the
 * 480px stack below removes the edge case outright on the narrowest phones. */
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info > * { min-width: 0; }
.woocommerce-checkout .woocommerce-form-login-toggle .showlogin {
	background: transparent !important;
	color: var(--td-text) !important;
	border: 1px solid var(--td-border-strong) !important;
	padding: 9px 18px !important;
	flex-shrink: 0;
	max-width: 100%;
	white-space: normal;
	text-align: center;
	box-sizing: border-box;
}
@media (max-width: 480px) {
	.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info { flex-direction: column; align-items: stretch; }
	.woocommerce-checkout .woocommerce-form-login-toggle .showlogin { width: 100%; }
}
.woocommerce-checkout .woocommerce-form-login-toggle .showlogin:hover {
	background: var(--td-yellow) !important;
	color: var(--td-yellow-ink) !important;
	border-color: var(--td-yellow) !important;
}
.woocommerce-checkout .woocommerce-form-login {
	background: var(--td-surface) !important;
	border: 1px solid var(--td-border) !important;
	border-radius: var(--td-radius) !important;
	padding: 20px !important;
	margin: 12px 0 0 !important;
}
.woocommerce-checkout .woocommerce-form-login label { color: var(--td-text) !important; }
.woocommerce-checkout .woocommerce-form-login .input-text {
	background: var(--td-surface-2) !important;
	border: 1px solid var(--td-border-strong) !important;
	color: var(--td-text) !important;
}
.woocommerce-checkout .woocommerce-form-login .button {
	background: var(--td-yellow) !important;
	color: var(--td-yellow-ink) !important;
	border: 0 !important;
	border-radius: 30px !important;
	font-weight: 700 !important;
}
.woocommerce-checkout .woocommerce-form-login .lost_password a { color: var(--td-text-dim) !important; }
/* the password field's native "show/hide password" toggle button — browser
 * UA default button chrome (light grey fill, black outset bevel), never
 * styled anywhere in this file before. Rendered as a small stray white/grey
 * rectangle sitting inside the dark password field. Strip it down to an
 * invisible-but-still-clickable control rather than trying to theme a
 * bespoke eye icon (out of scope here) — "neutralize", not redesign. */
.woocommerce-checkout .woocommerce-form-login .show-password-input {
	appearance: none !important;
	-webkit-appearance: none !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}
/* "Remember me" checkbox on the login form — was left on native browser
 * chrome (plain white square) while every other checkbox on cart/checkout
 * got the shared .td-checkbox treatment (cart-shopify.js tags checkboxes
 * with that class, but this file's scope excludes the JS — so this checkbox
 * is matched directly by selector instead, sharing every rule/state of
 * .td-checkbox below: base/hover/checked/checked-tick/focus-visible). The
 * markup already has a literal space between the input and its <span>
 * label text, so no extra margin is needed here for spacing. */

/* Shopify-style floating labels: the small field name stays visible inside
 * the box above the value (the theme's fl-label, restyled properly) */
.woocommerce-checkout form.checkout .form-row,
.woocommerce-checkout form.checkout .woocommerce-input-wrapper,
.woocommerce-checkout form.checkout .woocommerce-input-wrapper > div { position: relative; }
.woocommerce-checkout form.checkout label.fl-label {
	position: absolute !important;
	top: 7px !important;
	left: 15px !important;
	width: auto !important;
	height: auto !important;
	overflow: visible !important;
	clip: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	/* parent theme's default .fl-label ships a hard-coded white background
	 * (it's designed to "punch a hole" in a light input's border line for a
	 * notched-outline look) — on our dark fields, sitting inline inside the
	 * field's own top padding rather than on its border, that white chip
	 * read as a stray light box behind the label text. Kill it. */
	background: transparent !important;
	opacity: 1 !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	color: var(--td-text-faint) !important;
	line-height: 1.3 !important;
	z-index: 2;
	pointer-events: none;
	transform: none !important;
}
.woocommerce-checkout form.checkout label.fl-label .required { color: var(--td-error); }
/* value sits under the small label */
.woocommerce-checkout form.checkout input.input-text,
.woocommerce-checkout form.checkout select {
	padding: 23px 14px 10px !important;
	line-height: 1.35 !important;
	min-height: 56px;
}
.woocommerce-checkout form.checkout .select2-selection {
	padding: 23px 14px 10px !important;
	min-height: 56px;
}

/* flat: no cards, no shadows around the form pieces */
.woocommerce-checkout form.checkout .col2-set,
.woocommerce-checkout form.checkout .col2-set .col-1,
.woocommerce-checkout form.checkout .col2-set .col-2,
.woocommerce-checkout form.checkout .woocommerce-billing-fields,
.woocommerce-checkout form.checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout form.checkout #payment,
.woocommerce-checkout form.checkout #order_review {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	/* !important required: the parent theme sets a hard-coded 2.25rem/2.5rem
	 * (desktop) or 1.5rem/0.9rem (mobile) padding on #customer_details via
	 * an ID selector, which beats this class-only selector on specificity
	 * alone — left unfixed, billing-details renders narrower than every
	 * other section. */
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	float: none !important;
}
.woocommerce-checkout form.checkout { padding: 32px 24px 60px; }
@media (max-width: 640px) { .woocommerce-checkout form.checkout { padding: 24px 16px 48px; } }

/* two columns */
@media (min-width: 992px) {
	.woocommerce-checkout form.checkout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 420px;
		grid-template-rows: repeat(5, auto) 1fr;
		gap: 0 56px;
		align-items: start;
	}
	.woocommerce-checkout form.checkout > #wc-stripe-express-checkout-element { grid-column: 1; grid-row: 1; }
	.woocommerce-checkout form.checkout > #wc-stripe-express-checkout-button-separator { grid-column: 1; grid-row: 2; }
	.woocommerce-checkout form.checkout > .col2-set { grid-column: 1; grid-row: 3; }
	.woocommerce-checkout form.checkout > .td-checkout-note { grid-column: 1; grid-row: 4; }
	.woocommerce-checkout form.checkout > #payment { grid-column: 1; grid-row: 5; }
	.woocommerce-checkout form.checkout > #order_review {
		grid-column: 2;
		grid-row: 1 / span 6;
		position: sticky;
		top: 24px;
	}
}
.woocommerce-checkout form.checkout > #order_review_heading { display: none; }

/* --- express checkout: Shopify "dynamic checkout button" prominence ---
 * full-width buttons above a centered OR divider. Apple Pay only renders in
 * Safari on a verified domain and Google Pay needs Chrome's wallet — in a
 * headless/CI screenshot neither shows, so the :empty rule below reserves
 * and visibly outlines the slot so the *layout* is verifiable even when no
 * wallet is available; the instant Stripe mounts a real button the element
 * is no longer :empty and this placeholder styling simply stops applying. */
.woocommerce-checkout #wc-stripe-express-checkout-element { margin-top: 4px; width: 100%; min-height: 48px; }
.woocommerce-checkout #wc-stripe-express-checkout-element::before {
	content: 'Express checkout';
	display: block;
	width: 100%;
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--td-text-faint);
	margin: 0 0 12px;
}
.woocommerce-checkout #wc-stripe-express-checkout-element:empty {
	border: 1px dashed var(--td-border-strong);
	border-radius: 12px;
	min-height: 48px;
}
/* ---- express checkout wallets (shared element: checkout, cart AND
 * product pages — same #wc-stripe-express-checkout-element id everywhere).
 * Two independent fixes here, the JS half (pruneExpressCheckoutWallets() in
 * cart-shopify.js / single-product-shopify.js) does the detection:
 *
 * 1) Equal-width children. Each wallet (Apple Pay / Google Pay / etc.)
 *    mounts as its own same-size child of this container — force them to
 *    share the row equally via flex so two side-by-side buttons (or one
 *    full-width button) both look deliberate.
 * 2) .td-express-empty (added by JS once it can confirm nothing usable
 *    ended up visible — e.g. no wallet at all in this browser) hides the
 *    element, its "Express checkout" label, AND the "OR" divider together,
 *    so a shopper on a non-wallet browser never sees a heading + divider
 *    sandwiching an empty gap. */
#wc-stripe-express-checkout-element,
.wc-stripe-express-checkout-element {
	display: flex !important;
	flex-wrap: wrap;
	gap: 10px;
}
#wc-stripe-express-checkout-element > div,
.wc-stripe-express-checkout-element > div {
	flex: 1 1 0;
	min-width: 140px;
}
#wc-stripe-express-checkout-element.td-express-empty,
#wc-stripe-express-checkout-element.td-express-empty::before,
.wc-stripe-express-checkout-element.td-express-empty,
#wc-stripe-express-checkout-button-separator.td-express-empty {
	display: none !important;
}
/* :not(.td-express-empty) — NOT just cosmetic. Without it this rule and the
 * ".td-express-empty ... { display: none !important }" hide-rule above have
 * identical specificity (one ID + one class either way); both !important,
 * so the cascade tie-break falls to source order and THIS rule (declared
 * later in the file) was winning even when the JS had already added
 * .td-express-empty — forcing the "— OR —" divider to stay visible over a
 * hidden/void express-checkout section (the orphan-divider bug). Scoping
 * this selector to the non-empty state removes the tie outright: exactly
 * one of the two rules can ever match a given element. */
.woocommerce-checkout #wc-stripe-express-checkout-button-separator:not(.td-express-empty) {
	display: block !important;
	text-align: center;
	color: var(--td-text-faint);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	margin: 20px 0 !important;
	position: relative;
}
.woocommerce-checkout #wc-stripe-express-checkout-button-separator::before,
.woocommerce-checkout #wc-stripe-express-checkout-button-separator::after {
	content: '';
	position: absolute;
	top: 50%;
	width: calc(50% - 28px);
	border-top: 1px solid var(--td-border);
}
.woocommerce-checkout #wc-stripe-express-checkout-button-separator::before { left: 0; }
.woocommerce-checkout #wc-stripe-express-checkout-button-separator::after { right: 0; }

/* =====================================================================
 * mobile (≤991px, the same breakpoint the two-column grid above turns off
 * at): order summary moves ABOVE everything else, as a collapsed "Order
 * summary v $9.00" bar, Shopify-style. Previously #order_review was simply
 * the LAST element in source order with no flex/grid on this breakpoint at
 * all, so `order` had nothing to act on — a shopper had to scroll past the
 * entire express/billing/payment form (place_order included) before ever
 * seeing what they were about to pay for. cart-shopify.js injects the
 * toggle bar as #order_review's first child; only its "open" state reveals
 * the actual review table. Desktop is untouched — nothing here overrides
 * the >=992px grid rule above, and the toggle bar itself doesn't render
 * any different there since #order_review already shows its table plainly.
 * ================================================================== */
/* base rule OUTSIDE the media query: cart-shopify.js injects this button
 * unconditionally (cheaper than teaching the script about viewport width),
 * so without an explicit always-on `display:none` default it fell back to
 * the browser's OWN default <button> chrome (white/grey box, black text)
 * and stayed visible above the order table on DESKTOP too, since nothing
 * outside the mobile query ever addressed the element at all. The mobile
 * query below is the only place that turns it back on. */
.td-order-summary-toggle { display: none; }
@media (max-width: 991px) {
	.woocommerce-checkout form.checkout {
		display: flex;
		flex-direction: column;
	}
	.woocommerce-checkout form.checkout > #order_review { order: -1; }
	.woocommerce-checkout form.checkout > #wc-stripe-express-checkout-element { order: 1; }
	.woocommerce-checkout form.checkout > #wc-stripe-express-checkout-button-separator { order: 2; }
	.woocommerce-checkout form.checkout > .col2-set { order: 3; }
	.woocommerce-checkout form.checkout > .td-checkout-note { order: 4; }
	.woocommerce-checkout form.checkout > #payment { order: 5; }

	.woocommerce-checkout form.checkout > #order_review {
		margin: 0 0 20px;
		padding: 0 !important;
		background: transparent;
		border: 0;
	}
	/* !important required: the unconditional `#order_review::before { content:
	 * 'Your order'; display: block; }` rule lives further down this same
	 * file (the "right: dark order-summary card" section) — same selector,
	 * same specificity, but declared AFTER this media query in source
	 * order, so without !important it would win the cascade back to
	 * display:block even inside this ≤991px block. */
	.woocommerce-checkout form.checkout > #order_review::before { display: none !important; }
	.woocommerce-checkout #order_review > table.shop_table { display: none; margin-top: 4px; }
	.woocommerce-checkout #order_review.td-order-review--open > table.shop_table { display: table; }

	.td-order-summary-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		background: var(--td-surface);
		border: 1px solid var(--td-border);
		border-radius: var(--td-radius);
		padding: 14px 18px;
		font-size: 15px;
		cursor: pointer;
	}
	.woocommerce-checkout #order_review.td-order-review--open .td-order-summary-toggle {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		border-bottom: 0;
	}
	.woocommerce-checkout #order_review.td-order-review--open > table.shop_table {
		border: 1px solid var(--td-border);
		border-top: 0;
		border-bottom-left-radius: var(--td-radius);
		border-bottom-right-radius: var(--td-radius);
		padding: 0 18px 6px;
		margin: 0;
	}
	.td-order-summary-toggle__label {
		display: flex;
		align-items: center;
		gap: 8px;
		color: var(--td-text-dim);
		font-weight: 600;
	}
	.td-order-summary-toggle__label svg { width: 16px; height: 16px; flex: 0 0 auto; transition: transform .2s ease; }
	.woocommerce-checkout #order_review.td-order-review--open .td-order-summary-toggle__label svg { transform: rotate(180deg); }
	.td-order-summary-toggle__total { font-weight: 800; font-size: 17px; color: var(--td-text); }

	/* round 4 fix: "Billing details" collided flush with the summary bar
	 * above it (bar bottom == heading top, zero gap). Root cause: #order_review's
	 * own margin-bottom:20px (set just above in this same media query) is
	 * being cancelled back to 0 by the earlier `.woocommerce-checkout
	 * form.checkout #order_review { margin: 0 !important }` rule in the
	 * "flat: no cards, no shadows" block (this file's line ~792) — that rule
	 * carries !important and #order_review's mobile margin doesn't, so it
	 * always wins regardless of source order. Rather than touch that shared
	 * !important rule (also relied on by desktop), give the heading itself
	 * the gap on this breakpoint. .woocommerce-checkout .woocommerce h3's
	 * base rule (margin: 0 0 14px, no top margin) still applies underneath —
	 * this only adds breathing room above it. */
	.woocommerce-checkout .woocommerce-billing-fields h3 {
		margin-top: 26px !important;
	}

	/* round 4 fix: required-asterisk detaches from wrapping consent-row text.
	 * Root cause (checkout terms row): label.checkbox is `display:flex` (see
	 * the "place order area" rules above) and WooCommerce's terms.php marks
	 * up that row as THREE separate flex items — input, the
	 * .woocommerce-terms-and-conditions-checkbox-text span, then a sibling
	 * <abbr class="required">*</abbr>. At full width all three sit on one
	 * line so the abbr just looks like it follows the text. Once the row is
	 * narrow enough that the text span itself needs to wrap to 2 lines, the
	 * abbr is STILL its own flex item laid out after the text span's box on
	 * the same main-axis line — it doesn't wrap along with the last word,
	 * it lands wherever the text span's (now-narrower) box ends, which reads
	 * as a red mark pinned near the row's right edge, detached above the
	 * wrapped second line. Simplest reliable fix, since the abbr is a
	 * separate flex sibling rather than inline content we can keep glued to
	 * the last word: don't render it. Both rows are already unmistakably
	 * required — native browser validation blocks submit on the terms
	 * checkbox, and the cart gate has its own bold lead-in + disabled CTA +
	 * helper text — so the asterisk was never the only cue. */
	.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper label.checkbox abbr.required {
		display: none !important;
	}
	.td-cart__ready-star { display: none; }
}

/* --- sections --- */
.woocommerce-checkout .woocommerce h3 {
	font-family: inherit;
	font-weight: 700;
	font-size: 17px;
	margin: 0 0 14px;
	color: var(--td-text);
}

/* consistent vertical rhythm */
.woocommerce-checkout #payment ul.payment_methods > li { margin: 0 0 12px !important; }
.woocommerce-checkout #payment .form-row.place-order label.checkbox,
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper label.checkbox { margin: 0 0 12px !important; }

/* inputs — one 15px scale everywhere, dark surface fields */
.woocommerce-checkout form.checkout .form-row { margin: 0 0 12px; padding: 0; }
.woocommerce-checkout form.checkout label { font-weight: 600; font-size: 14px; margin-bottom: 4px; color: var(--td-text); }
.woocommerce-checkout form.checkout input.input-text,
.woocommerce-checkout form.checkout select,
.woocommerce-checkout form.checkout .select2-selection {
	border: 1px solid var(--td-border-strong) !important;
	border-radius: 10px !important;
	/* NOTE: padding intentionally NOT set here — the floating-label rule
	 * above owns vertical padding for every field; a duplicate padding decl
	 * here used to win the cascade and shrink the box, pushing the value
	 * text on top of the floating label. Do not reintroduce it. */
	height: auto !important;
	font-size: 15px !important;
	color: var(--td-text) !important;
	background: var(--td-surface-2) !important;
	box-shadow: none !important;
}
.woocommerce-checkout form.checkout input.input-text::placeholder { color: var(--td-text-faint); opacity: 1; }
/* r12: browser autofill on dark fields (owner repro: picking an autofill
 * suggestion turned the value black-on-black). WebKit/Blink paint autofilled
 * inputs with an internal UA background + near-black text that ordinary
 * `background`/`color` rules cannot override (the UA sheet wins). Standard
 * escape hatch: an inset box-shadow large enough to fully cover the UA fill,
 * plus -webkit-text-fill-color (which DOES pierce the autofill style) and a
 * matching caret. The endless background-color transition delays Blink's
 * fill repaint forever as a belt-and-braces on top of the shadow. Applied to
 * every dark input this stylesheet owns: checkout billing fields, checkout
 * login form, cart coupon box. */
.woocommerce-checkout form.checkout input.input-text:-webkit-autofill,
.woocommerce-checkout form.checkout input.input-text:-webkit-autofill:hover,
.woocommerce-checkout form.checkout input.input-text:-webkit-autofill:focus,
.woocommerce-checkout form.checkout select:-webkit-autofill,
.woocommerce-checkout .woocommerce-form-login .input-text:-webkit-autofill,
.woocommerce-checkout .woocommerce-form-login .input-text:-webkit-autofill:hover,
.woocommerce-checkout .woocommerce-form-login .input-text:-webkit-autofill:focus,
.woocommerce-cart .coupon .input-text:-webkit-autofill,
.woocommerce-cart .coupon .input-text:-webkit-autofill:hover,
.woocommerce-cart .coupon .input-text:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px var(--td-surface-2) inset !important;
	box-shadow: 0 0 0 1000px var(--td-surface-2) inset !important;
	-webkit-text-fill-color: var(--td-text) !important;
	caret-color: var(--td-text) !important;
	transition: background-color 9999999s ease-in-out 0s;
}
.woocommerce-checkout form.checkout input.input-text:focus,
.woocommerce-checkout form.checkout select:focus { border-color: var(--td-yellow) !important; outline: none; box-shadow: 0 0 0 3px rgba(254, 225, 0, .18) !important; }
.woocommerce-checkout form.checkout .select2-selection__rendered { line-height: 1.4 !important; padding: 0 !important; color: var(--td-text) !important; }
.woocommerce-checkout form.checkout .select2-selection__arrow { top: 50% !important; transform: translateY(-50%); right: 10px !important; }
.woocommerce-checkout form.checkout .select2-selection__arrow b { border-color: var(--td-text-dim) transparent transparent transparent !important; }
/* select2 dropdown panel (country list) */
.select2-container--open .select2-dropdown {
	background: var(--td-surface-2) !important;
	border: 1px solid var(--td-border-strong) !important;
	border-radius: 10px !important;
	overflow: hidden;
	box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
}
.select2-container--open .select2-search--dropdown .select2-search__field {
	background: var(--td-surface-3) !important;
	border: 1px solid var(--td-border-strong) !important;
	color: var(--td-text) !important;
	border-radius: 8px !important;
}
.select2-results__option {
	color: var(--td-text) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--td-yellow) !important;
	color: var(--td-yellow-ink) !important;
}
.select2-container--default .select2-results__option[aria-selected=true] {
	background: var(--td-surface-3) !important;
}

/* invoice toggle */
.woocommerce-checkout .td-invoice-field { display: none; }
.woocommerce-checkout.td-show-invoice .td-invoice-field { display: block; }
.woocommerce-checkout .td-invoice-toggle .optional { display: none; }
.woocommerce-checkout .td-invoice-toggle label { font-weight: 600; font-size: 14.5px; color: var(--td-text); }

/* round 5: the top ".td-checkout-note" info box (owner: "You're ready to
 * create top message redundant... we already have that checkbox below")
 * was removed from inc/td-checkout.php (the woocommerce_checkout_after_
 * customer_details hook that echoed it) — the consent checkbox with the
 * same text stays. Rule block intentionally deleted along with the markup
 * rather than left dead; the grid-row/order assignments for
 * .td-checkout-note in the layout section above are harmless no-ops now
 * (an empty grid track collapses to 0), left alone so the row numbering
 * for the surrounding elements doesn't need renumbering. */

/* --- payment (left column) --- */
.woocommerce-checkout #payment ul.payment_methods {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}
.woocommerce-checkout #payment ul.payment_methods > li {
	border: 1px solid var(--td-border-strong) !important;
	border-radius: 10px;
	padding: 14px 16px !important;
	margin: 0 0 10px !important;
	background: var(--td-surface) !important;
	list-style: none;
	transition: border-color .12s ease;
}
.woocommerce-checkout #payment ul.payment_methods > li:has(input:checked) {
	border-color: var(--td-yellow) !important;
}
.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > label {
	display: inline !important;
	font-weight: 600;
	font-size: 15px !important;
	color: var(--td-text);
	cursor: pointer;
	border: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	width: auto !important;
}
.woocommerce-checkout #payment ul.payment_methods li img {
	max-height: 22px !important;
	width: auto !important;
	height: 22px !important;
	vertical-align: middle;
	margin-left: 6px;
	float: right;
	border-radius: 3px;
}
/* fully custom radio: appearance:none removes the browser's OWN default
 * light-mode control chrome. Without this, an unchecked native radio (even
 * with accent-color set, which only recolors the CHECKED state in most
 * engines) renders as a solid white-filled circle with a thin dark border
 * on our dark page — reading as "already selected" when it isn't. Custom
 * paint instead: hollow ring (border only, transparent center) unselected,
 * yellow ring + solid yellow center dot selected — unambiguous either way. */
body.woocommerce-checkout #payment ul.payment_methods li input[type='radio'] {
	appearance: none !important;
	-webkit-appearance: none !important;
	position: relative !important;
	opacity: 1 !important;
	display: inline-block !important;
	width: 18px !important;
	height: 18px !important;
	min-width: 18px !important;
	margin: 0 10px 0 0 !important;
	vertical-align: middle;
	border-radius: 50%;
	border: 1.5px solid var(--td-border-strong);
	background: transparent !important;
	cursor: pointer;
	transition: border-color .12s ease;
}
body.woocommerce-checkout #payment ul.payment_methods li input[type='radio']:hover {
	border-color: var(--td-text-dim);
}
body.woocommerce-checkout #payment ul.payment_methods li input[type='radio']:checked {
	border-color: var(--td-yellow);
}
body.woocommerce-checkout #payment ul.payment_methods li input[type='radio']:checked::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--td-yellow);
	transform: translate(-50%, -50%);
}
body.woocommerce-checkout #payment ul.payment_methods li input[type='radio']:focus-visible {
	outline: 2px solid var(--td-yellow);
	outline-offset: 2px;
}
.woocommerce-checkout #payment ul.payment_methods li::before,
.woocommerce-checkout #payment ul.payment_methods li::after,
.woocommerce-checkout #payment ul.payment_methods label::before,
.woocommerce-checkout #payment ul.payment_methods label::after { content: none !important; display: none !important; }

/* payment_box: houses the Stripe UPE card element. Stripe's own Payment
 * Element already draws its OWN rounded/bordered "accordion item" box
 * around the card fields inside the iframe (cross-origin, not ours to
 * touch) — giving payment_box a second background+border+padding here
 * stacked THREE visual boxes for one control (li -> payment_box -> Stripe's
 * own box), each eating horizontal padding, which got especially cramped
 * on mobile (~120px of width lost to redundant chrome). Flatten this
 * middle layer to near-nothing: the outer li (yellow ring when selected)
 * and Stripe's own inner box are enough structure on their own. */
.woocommerce-checkout #payment .payment_box {
	background: transparent !important;
	border: 0;
	border-radius: 0;
	padding: 10px 0 0 !important;
	margin: 10px 0 0 !important;
	font-size: 14px;
	color: var(--td-text-dim);
}
.woocommerce-checkout #payment .payment_box::before { display: none !important; }
.woocommerce-checkout #payment .payment_box p { color: var(--td-text-dim); }

/* -----------------------------------------------------------------------
 * Stripe UPE dark-theme hook: the plugin (build/upe-classic.js) extracts
 * its `appearance` config by reading getComputedStyle() off a hidden
 * `#wc-stripe-hidden-style-input.input-text` field plus
 * `.woocommerce-PaymentBox p` / `.woocommerce-PaymentMethod label` for text
 * color (upeThemeInputSelector / upeThemeTextSelectors in its own bundle) —
 * it is NOT hard-coded light. Because `input.input-text` above is already
 * themed dark (surface-2 bg, light text, 10px radius), the iframe's card
 * fields inherit that automatically with no extra Stripe-side config. These
 * two rules just make sure the *text-color* source selectors resolve to a
 * light, readable color too, so labels/placeholders drawn by Stripe from
 * that extraction aren't accidentally dark-on-dark. ------------------- */
.woocommerce-PaymentBox p,
.woocommerce-PaymentMethod label {
	color: var(--td-text) !important;
}

/* place order area — Shopify-style consent rows */
.woocommerce-checkout #payment .form-row.place-order { margin: 4px 0 0; padding: 0; }
.woocommerce-checkout #payment .woocommerce-privacy-policy-text p { font-size: 13px; color: var(--td-text-faint); line-height: 1.5; margin: 0 0 14px; }
.woocommerce-checkout #payment .woocommerce-privacy-policy-text a { color: var(--td-text-dim); }
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper { margin: 0; }
.woocommerce-checkout #payment .form-row.place-order label.checkbox,
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper label.checkbox {
	display: flex !important;
	align-items: flex-start;
	/* gap:0, not 11px — see the input margin-right rule just below for why */
	gap: 0;
	font-weight: 400;
	font-size: 14px !important;
	line-height: 1.5;
	color: var(--td-text-dim);
	background: var(--td-surface);
	border: 1px solid var(--td-border-strong);
	border-radius: 10px;
	padding: 13px 14px !important;
	margin: 0 0 10px !important;
	cursor: pointer;
}
.woocommerce-checkout #payment .form-row.place-order label.checkbox a,
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper label.checkbox a { color: var(--td-text) !important; }
/* checkbox-to-text spacing, moved off the row's flex `gap` (see above) onto
 * the input's own margin instead. With `gap:11px` on the row, that same
 * 11px ALSO landed between the text and the trailing required-asterisk
 * <abbr> (label.checkbox's 3rd flex child on rows like "terms and
 * conditions *") — stacking on top of the abbr's own 3px margin-left and
 * the literal &nbsp; WooCommerce prints before it, the asterisk ended up
 * ~28px clear of the text it belongs to, reading as a detached mark pinned
 * near the row's right edge instead of following the label inline. Scoping
 * the spacing to only the input->text gap removes that side effect — every
 * row still gets the same visual checkbox/text gap, and any trailing
 * required-mark now sits right after the text with no gap at all. */
.woocommerce-checkout #payment .form-row.place-order label.checkbox > input,
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper label.checkbox > input {
	margin-right: 11px !important;
}
.woocommerce-checkout #payment .form-row.place-order input[type='checkbox'],
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper input[type='checkbox'] {
	/* appearance/size/color now owned entirely by .td-checkbox below — this
	 * rule only keeps this checkbox's position in the flex row.
	 *
	 * position MUST stay relative (not static): this selector (1 ID + 4
	 * classes) outranks the shared ".td-checkbox { position: relative
	 * !important }" rule (1 class), so whatever this says wins. With
	 * `static` here, the checked-tick ::after/::before below — an
	 * absolutely-positioned pseudo-element meant to anchor to THIS 20x20
	 * checkbox — instead walked up to the nearest positioned ancestor (the
	 * .form-row.place-order wrapper, itself position:relative from the
	 * floating-label rule earlier in this file) and rendered as a stray
	 * checkmark near the row's top-left corner instead of centered in the
	 * box: the checked-but-no-visible-tick bug on the terms/consent rows
	 * specifically (billing_want_invoice etc. sit outside #payment /
	 * .woocommerce-terms-and-conditions-wrapper and were never affected). */
	position: relative !important;
	margin: 2px 0 0 !important;
	display: inline-block !important;
}
.woocommerce-checkout #payment label.checkbox::before,
.woocommerce-checkout #payment label.checkbox::after { content: none !important; display: none !important; }
.woocommerce-checkout #payment .form-row.place-order abbr,
.woocommerce-checkout #payment .required { text-decoration: none; color: var(--td-error); }
/* required asterisk: the parent theme floats it to the far right of the
 * form-row by default, which on a floating-label / boxed-field layout like
 * ours reads as a stray mark detached from the label it belongs to. Put it
 * back inline, right after the label text, like every other form here. */
.woocommerce-checkout form.checkout label .required,
.woocommerce-checkout form.checkout legend .required {
	float: none !important;
	margin-left: 3px;
}

/* ============ custom checkboxes ============
 * One consistent system replacing two clashing native-checkbox conventions
 * that existed side by side (13px appearance:auto on billing_want_invoice /
 * wc-stripe-new-payment-method vs 17px accent-color on terms / my_checkbox /
 * the newsletter checkbox). appearance:none removes ALL native chrome (so
 * this doesn't depend on the browser's own dark-mode form-control support,
 * which is inconsistent across engines) — dark surface box by default,
 * yellow fill + a mask-drawn check mark (crisp at any zoom, not a font
 * glyph) when checked. cart-shopify.js tags every target checkbox with this
 * one class; only the class needs styling here. */
.td-checkbox,
.woocommerce-checkout .woocommerce-form-login__rememberme input[type='checkbox'] {
	appearance: none !important;
	-webkit-appearance: none !important;
	width: 20px !important;
	height: 20px !important;
	min-width: 20px !important;
	margin: 0 !important;
	border: 1.5px solid var(--td-border-strong) !important;
	border-radius: 5px !important;
	background: var(--td-surface-2) !important;
	display: inline-block !important;
	position: relative !important;
	cursor: pointer;
	flex: 0 0 auto;
	vertical-align: middle;
	transition: background .12s ease, border-color .12s ease;
}
.td-checkbox:hover,
.woocommerce-checkout .woocommerce-form-login__rememberme input[type='checkbox']:hover { border-color: var(--td-text-dim) !important; }
.td-checkbox:checked,
.woocommerce-checkout .woocommerce-form-login__rememberme input[type='checkbox']:checked {
	background: var(--td-yellow) !important;
	border-color: var(--td-yellow) !important;
}
/* checkmark glyph: a rotated border segment ("Γ" rotated 45deg), not an
 * SVG mask. The previous mask-image technique (data-URI SVG via
 * -webkit-mask/mask) rendered invisibly in the headless-Chromium QA
 * pipeline (Playwright screenshots showed a solid yellow block, no glyph)
 * despite working in this interactive browser — a known class of headless
 * rendering gaps around CSS mask-image/compositing. A plain border+rotate
 * tick has no such dependency and is universally supported. */
.td-checkbox:checked::before,
.woocommerce-checkout .woocommerce-form-login__rememberme input[type='checkbox']:checked::before {
	content: '';
	position: absolute;
	left: 6px;
	top: 2px;
	width: 6px;
	height: 10px;
	border: solid var(--td-yellow-ink);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.td-checkbox:focus-visible,
.woocommerce-checkout .woocommerce-form-login__rememberme input[type='checkbox']:focus-visible {
	outline: 2px solid var(--td-yellow);
	outline-offset: 2px;
}
.woocommerce-checkout #place_order {
	display: block !important;
	background: var(--td-yellow) !important;
	color: var(--td-yellow-ink) !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 30px !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	padding: 16px 20px !important;
	width: 100% !important;
	margin-top: 14px;
	transition: background .12s ease, color .12s ease, transform .1s ease;
}
.woocommerce-checkout #place_order:hover { background: #fff !important; color: var(--td-yellow-ink) !important; }
.woocommerce-checkout #place_order:active { transform: scale(.99); }

/* --- right: dark order-summary card (DESKTOP ONLY — mobile keeps its own
 * collapsible toggle-bar pattern lower in this file) ---
 *
 * Two bugs fixed by scoping this to >=992px + adding !important throughout:
 *
 * 1) Panel not filled: this selector ties in specificity (1 ID + 2 classes)
 *    with the earlier ".woocommerce-checkout form.checkout .col2-set, ...,
 *    #order_review { background: transparent !important; border: 0
 *    !important; border-radius: 0 !important; ... }" flat-reset rule near
 *    the top of the checkout section. Both !important; only `padding` here
 *    carried !important before, so padding alone ever won the tie — the
 *    review column rendered as bare floating text ("Your order" + rows) on
 *    the page background instead of a filled card, exactly like the cart
 *    summary already gets. Adding !important to background/border/radius
 *    resolves that tie the same way padding already did.
 *
 * 2) Mobile toggle-bar inset: unscoped, this same rule ALSO tied with (and,
 *    by the later-source-wins rule, beat) the mobile-only "#order_review {
 *    padding: 0 !important; ... }" reset a few hundred lines up — so at
 *    <=991px #order_review kept this card's 22px/24px padding instead of
 *    going to 0. The injected .td-order-summary-toggle bar is width:100% of
 *    ITS parent (#order_review), so that leftover padding read as the
 *    collapsed "Order summary v $9.00" bar floating as an inset pill instead
 *    of running edge-to-edge with the billing fields below it. Scoping the
 *    whole card to the desktop breakpoint removes the cross-viewport bleed
 *    at the source instead of patching around it. */
@media (min-width: 992px) {
	.woocommerce-checkout form.checkout > #order_review {
		background: var(--td-surface) !important;
		border: 1px solid var(--td-border) !important;
		border-radius: var(--td-radius-lg) !important;
		padding: 22px 24px !important;
	}
	.woocommerce-checkout form.checkout > #order_review::before {
		content: 'Your order';
		display: block;
		font-size: 17px;
		font-weight: 700;
		margin: 0 0 14px;
		color: var(--td-text);
	}
}
.woocommerce-checkout #order_review table.shop_table { border: 0 !important; margin: 0; width: 100%; background: transparent; table-layout: fixed; }
.woocommerce-checkout #order_review table.shop_table th.product-total,
.woocommerce-checkout #order_review table.shop_table td.product-total { width: 76px; }
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
	border: 0 !important;
	border-bottom: 1px solid var(--td-border) !important;
	padding: 11px 0;
	background: transparent !important;
	color: var(--td-text);
	font-size: 14.5px;
	vertical-align: middle;
}
.woocommerce-checkout #order_review thead th { font-size: 13px; color: var(--td-text-faint); font-weight: 600; }
.woocommerce-checkout #order_review td.product-total { white-space: nowrap; text-align: right; font-weight: 600; }
.woocommerce-checkout #order_review tfoot th { font-weight: 600; color: var(--td-text); }
.woocommerce-checkout #order_review tfoot .order-total th,
.woocommerce-checkout #order_review tfoot .order-total td { border-bottom: 0 !important; padding-top: 14px; }
.woocommerce-checkout #order_review .order-total .amount { font-size: 21px; font-weight: 800; color: var(--td-text); }

/* summary items with thumbs */
.td-rev-item { display: flex; align-items: center; gap: 12px; }
.td-rev-item img.td-rev-thumb,
.td-rev-item img {
	width: 56px !important;
	min-width: 56px !important;
	height: 56px !important;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid var(--td-border);
	background: #fff;
	display: block;
}
.td-rev-name { font-size: 14.5px; line-height: 1.35; min-width: 0; color: var(--td-text); }
.td-rev-qty { color: var(--td-text-faint); font-size: 13px; white-space: nowrap; }
.woocommerce-checkout #order_review .product-name .product-quantity { display: none; }

/* ============ order-received (thank-you) page ============
 * Reached via /shop/checkout/order-received/<id>/?key=... — the SAME page
 * (post ID 40) as checkout, so the dark canvas + slim topbar above already
 * apply here; buildCheckoutTopbar() in cart-shopify.js also swaps the
 * topbar's link to "Continue shopping" -> shop on this specific page.
 * These rules cover what's unique to this state:
 *  - WooCommerce's own success notice, which is NOT run through
 *    wc_add_notice()/wc_print_notices() (those already got the dark
 *    .woocommerce-message treatment above) — checkout/order-received.php
 *    hardcodes class="woocommerce-notice woocommerce-notice--success
 *    woocommerce-thankyou-order-received" directly in the template, a
 *    different class our existing notice rules never matched, which is
 *    exactly why it was still rendering in WooCommerce's raw default green.
 *  - The itemized order-details table + downloads section + billing/
 *    shipping address columns, styled against the REAL class names in
 *    WooCommerce core's order/order-details.php, order/order-downloads.php
 *    and order/order-details-customer.php templates.
 *  - The "Please log in to view this order" fallback (shown once the
 *    placing session has expired and WooCommerce can't verify you're the
 *    customer who placed it) is already covered by the generic
 *    .woocommerce-info / .woocommerce-form-login rules above — body keeps
 *    the .woocommerce-checkout class on this endpoint too. */
.woocommerce-order-received .woocommerce-order {
	max-width: 720px;
	margin: 0 auto;
	padding: 32px 24px 60px;
}
@media (max-width: 640px) { .woocommerce-order-received .woocommerce-order { padding: 24px 16px 48px; } }

.woocommerce-order-received .woocommerce-notice.woocommerce-thankyou-order-received {
	background: var(--td-surface) !important;
	border: 1px solid var(--td-border) !important;
	border-left: 3px solid var(--td-yellow) !important;
	border-radius: var(--td-radius) !important;
	color: var(--td-text) !important;
	padding: 18px 20px !important;
	margin: 0 0 24px !important;
	font-size: 16px !important;
	/* same width:100vw-equivalent overflow as the generic notices above —
	 * this one is a separate rule (this class isn't matched by that shared
	 * selector) so it needs the same explicit fix on its own. */
	width: 100% !important;
	box-sizing: border-box !important;
}

.woocommerce-order-received .woocommerce-order-overview {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 32px;
	list-style: none;
	margin: 0 0 28px;
	padding: 20px 22px;
	background: var(--td-surface);
	border: 1px solid var(--td-border);
	border-radius: var(--td-radius);
}
.woocommerce-order-received .woocommerce-order-overview li {
	font-size: 12.5px;
	color: var(--td-text-faint);
	text-transform: uppercase;
	letter-spacing: .03em;
	list-style: none;
	margin: 0;
}
.woocommerce-order-received .woocommerce-order-overview li strong {
	display: block;
	font-size: 16px;
	color: var(--td-text);
	text-transform: none;
	letter-spacing: 0;
	font-weight: 700;
	margin-top: 3px;
}

.woocommerce-order-received .woocommerce-order-downloads,
.woocommerce-order-received .woocommerce-order-details,
.woocommerce-order-received .woocommerce-customer-details { margin: 0 0 28px; }
.woocommerce-order-received .woocommerce-order-downloads__title,
.woocommerce-order-received .woocommerce-order-details__title,
.woocommerce-order-received .woocommerce-column__title {
	font-family: 'Anton', 'Arial Narrow', sans-serif;
	font-weight: 400;
	font-size: 22px;
	color: var(--td-text);
	margin: 0 0 14px;
}
.woocommerce-order-received table.woocommerce-table {
	width: 100%;
	border: 1px solid var(--td-border);
	border-radius: var(--td-radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: var(--td-surface);
}
.woocommerce-order-received table.woocommerce-table th,
.woocommerce-order-received table.woocommerce-table td {
	border: 0 !important;
	border-bottom: 1px solid var(--td-border) !important;
	background: transparent !important;
	color: var(--td-text);
	padding: 13px 16px;
	text-align: left;
	font-size: 14.5px;
}
.woocommerce-order-received table.woocommerce-table thead th {
	color: var(--td-text-dim);
	font-size: 13px;
	font-weight: 600;
}
.woocommerce-order-received table.woocommerce-table tr:last-child td { border-bottom: 0 !important; }
.woocommerce-order-received table.woocommerce-table tfoot th,
.woocommerce-order-received table.woocommerce-table tfoot td { font-weight: 700; }
.woocommerce-order-received table.woocommerce-table a { color: var(--td-yellow); }
.woocommerce-order-received .woocommerce-MyAccount-downloads-file.button {
	display: inline-block;
	background: var(--td-yellow) !important;
	color: var(--td-yellow-ink) !important;
	text-decoration: none !important;
	font-weight: 700;
	padding: 8px 16px;
	border-radius: 30px;
	font-size: 13.5px;
}
.woocommerce-order-received .woocommerce-MyAccount-downloads-file.button:hover { background: #fff !important; }
.woocommerce-order-received .order-actions-button {
	display: inline-block;
	background: transparent !important;
	color: var(--td-text) !important;
	border: 1px solid var(--td-border-strong) !important;
	border-radius: 30px;
	padding: 8px 16px;
	text-decoration: none !important;
	font-weight: 600;
	font-size: 13px;
}

.woocommerce-order-received .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	list-style: none;
	padding: 0;
	margin: 0;
}
@media (max-width: 640px) { .woocommerce-order-received .woocommerce-columns--addresses { grid-template-columns: 1fr; } }
.woocommerce-order-received .woocommerce-column {
	background: var(--td-surface);
	border: 1px solid var(--td-border);
	border-radius: var(--td-radius);
	padding: 18px 20px;
}
.woocommerce-order-received .woocommerce-customer-details > .woocommerce-column__title { margin-bottom: 10px; }
.woocommerce-order-received address {
	font-style: normal;
	color: var(--td-text-dim);
	line-height: 1.6;
	font-size: 14.5px;
}
.woocommerce-order-received .woocommerce-customer-details--phone,
.woocommerce-order-received .woocommerce-customer-details--email { color: var(--td-text-dim); margin: 4px 0 0; }

/* ============ policy links row (checkout only — no footer on the
 * template-empty checkout page) ============ */
.td-checkout-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	justify-content: center;
	padding: 24px 24px 40px;
	border-top: 1px solid var(--td-border);
	margin-top: 8px;
}
.td-checkout-legal a {
	color: var(--td-text-faint);
	font-size: 13px;
	text-decoration: none;
}
.td-checkout-legal a:hover { color: var(--td-text); text-decoration: underline; }

/* ============ thank-you page BDD note (woocommerce_before_thankyou) ==== */
.td-thankyou-note {
	background: var(--td-surface);
	border: 1px solid var(--td-border);
	border-left: 3px solid var(--td-yellow);
	border-radius: 12px;
	padding: 16px 18px;
	font-size: 16px;
	color: var(--td-text);
	margin: 0 0 24px;
}

/* v2.0.9 consent-row fixes: stray <br> from newsletter plugin; unify required-asterisk styling */
form.checkout label.woocommerce-form__label-for-checkbox > br:first-child { display: none; }
form.checkout label.checkbox abbr.required,
form.checkout label.checkbox .required { color: var(--td-error); text-decoration: none; border-bottom: 0; cursor: default; }

/* r4-final: WooCommerce auto-appends the required * as a separate flex item on
 * the my_checkbox consent row, pinning it top-right of wrapped labels. The row
 * is already aria-required with validation + helper text - hide the glyph. */
#my_checkbox_field .required { display: none !important; }

/* ============ v3.3.0: bundle contents — collapsible child list ============
 * Rendered under a bundle parent's product name via
 * woocommerce_after_cart_item_name (inc/td-checkout.php). Native
 * <details>/<summary> — no JS, works with keyboard (Enter/Space toggles
 * a focused <summary> natively) and screen readers (native disclosure
 * semantics), degrades to an always-open list with JS/CSS off. Collapsed
 * by default per the owner's spec; "N items ▾" affordance expands the
 * hidden WOOSB child lines inline, matching the flat dark cart card. */
.woocommerce-cart table.shop_table td.product-name details.td-bundle-contents {
	margin-top: 8px;
}
.woocommerce-cart table.shop_table td.product-name summary.td-bundle-contents__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	list-style: none;
	font-size: 13px;
	font-weight: 600;
	color: var(--td-text-dim);
	padding: 4px 0;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}
/* kill the native disclosure-triangle marker (Firefox uses list-style,
 * Chrome/Safari use the -webkit pseudo-element) — our own chevron below
 * is the only expand/collapse affordance shown. */
.td-bundle-contents__toggle::-webkit-details-marker { display: none; }

.td-bundle-contents__toggle:hover,
.td-bundle-contents__toggle:focus-visible { color: var(--td-yellow); }
.td-bundle-contents__toggle:focus-visible {
	outline: 2px solid var(--td-yellow);
	outline-offset: 2px;
	border-radius: 4px;
}

.td-bundle-contents__chevron {
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .15s ease;
	flex: none;
}
details.td-bundle-contents[open] > .td-bundle-contents__toggle .td-bundle-contents__chevron {
	transform: rotate(-135deg);
}

.td-bundle-contents__list {
	list-style: none;
	margin: 6px 0 0;
	padding: 10px 12px;
	background: var(--td-surface-2);
	border: 1px solid var(--td-border);
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.td-bundle-contents__item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-size: 13px;
	line-height: 1.4;
}
.td-bundle-contents__name { color: var(--td-text-dim); }
.td-bundle-contents__price {
	color: var(--td-text-dim);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
	.td-bundle-contents__item { flex-wrap: wrap; }
}

/* ============ r12: Stripe minimum-charge top-up notice ============ */
/* Rendered by td-checkout.php (woocommerce_cart_totals_before_order_total /
 * woocommerce_review_order_before_order_total) only while the "Card
 * processing minimum" fee line is active — i.e. a coupon left the total
 * in the 0 < total < $1.00 band Stripe refuses to charge (this account
 * settles in CZK, so Stripe's floor is 15 Kc ~ $0.72, not the $0.50 USD
 * headline figure; $1.00 adds FX headroom — see td-checkout.php). Quiet
 * footnote treatment: it explains the fee line directly above it, it is
 * not an alert. !important on color/weight: the totals-cell rules
 * (.cart_totals table.shop_table td, parent-theme td{font-weight:700})
 * out-specify a bare class row and painted this bold near-white. */
.woocommerce-cart .cart_totals tr.td-min-fee-note td,
.woocommerce-checkout #order_review tr.td-min-fee-note td,
.td-min-fee-note td {
	font-size: 12.5px;
	font-weight: 400 !important;
	color: var(--td-text-dim) !important;
	line-height: 1.45;
	padding-top: 0 !important;
	border: 0 !important;
}

/* ============ r12 downloads-UX batch (2026-08-20) ============
 * Owner-tested fixes on the thank-you page:
 * 1) Compact order-overview - ORDER NUMBER / DATE / EMAIL / TOTAL / PAYMENT
 *    METHOD were "spread too far apart"; tight responsive grid instead of
 *    the loose flex row.
 * 2) Billing address block rendered WHITE on the dark page: on a digital-
 *    only order there is no shipping address, so order-details-customer.php
 *    outputs NO .woocommerce-column wrapper (the only element the earlier
 *    dark-card rule matched) - the bare section fell through to the parent
 *    theme's light styling. The dark card now sits on the section itself,
 *    with the column variant flattened when it does exist.
 * 3) Grouped downloads table (order/order-downloads.php override): product
 *    thumbnail + name once per group, files beneath, per-file download
 *    counter instead of "Downloads remaining / Expires"; bulk toolbar with
 *    a primary Download-all. Light twin lives in myaccount-shopify.css. */
.woocommerce-order-received .woocommerce-order-overview {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px 20px;
	padding: 16px 18px;
}
.woocommerce-order-received .woocommerce-order-overview li { font-size: 11.5px; }
.woocommerce-order-received .woocommerce-order-overview li strong { font-size: 15px; margin-top: 2px; }

.woocommerce-order-received .woocommerce-customer-details {
	background: var(--td-surface);
	border: 1px solid var(--td-border);
	border-radius: var(--td-radius);
	padding: 18px 20px;
}
.woocommerce-order-received .woocommerce-customer-details .woocommerce-column {
	background: transparent;
	border: 0;
	padding: 0;
}
.woocommerce-order-received .woocommerce-customer-details address {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
}

/* ---- bulk toolbar (dark) ---- */
.woocommerce-order-received .td-dl-toolbar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px 18px;
	margin: 0 0 14px;
}
.woocommerce-order-received .td-dl-download-all {
	background: var(--td-yellow);
	color: var(--td-yellow-ink);
	border: 0;
	border-radius: 30px;
	font-size: 15px;
	font-weight: 700;
	padding: 12px 26px;
	cursor: pointer;
	transition: background .12s ease, color .12s ease;
}
.woocommerce-order-received .td-dl-download-all:hover { background: #fff; }
.woocommerce-order-received .td-dl-form #bulk_download_button {
	background: transparent;
	color: var(--td-text);
	border: 1px solid var(--td-border-strong);
	border-radius: 30px;
	font-size: 13.5px;
	font-weight: 700;
	padding: 10px 20px;
	cursor: pointer;
	transition: background .12s ease, color .12s ease, opacity .12s ease;
}
.woocommerce-order-received .td-dl-form #bulk_download_button:hover:not(:disabled) { background: var(--td-yellow); color: var(--td-yellow-ink); border-color: var(--td-yellow); }
.woocommerce-order-received .td-dl-form #bulk_download_button:disabled { opacity: .35; cursor: not-allowed; }
.woocommerce-order-received .td-dl-selectall {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--td-text-dim);
	font-size: 14px;
	cursor: pointer;
	user-select: none;
}
.woocommerce-order-received .td-dl-form input[type="checkbox"] {
	width: 20px;
	height: 20px;
	accent-color: var(--td-yellow);
	cursor: pointer;
	margin: 0;
}
.woocommerce-order-received .td-dl-form .info-zip { color: var(--td-yellow); font-weight: 600; font-size: 13.5px; }
.woocommerce-order-received .td-dl-form .info-zip.d-none { display: none; }

/* ---- grouped downloads table (dark) ---- */
.woocommerce-order-received .td-dl-table td { vertical-align: middle; }
.woocommerce-order-received .td-dl-table tr.td-dl-group td {
	background: rgba(255, 255, 255, .045) !important;
	padding-top: 10px;
	padding-bottom: 10px;
}
.woocommerce-order-received .td-dl-table td.td-dl-check { width: 36px; text-align: center; padding-right: 0; }
.woocommerce-order-received .td-dl-table td.td-dl-thumb { width: 88px; padding-right: 8px; }
/* r16: 4:3 landscape thumb, same crop as the shop card (.td-card__media).
   max-width:none defeats the parent theme's global `img { max-width: 100% }`,
   which let the narrow table column squash the thumb to 42px (distorted). */
.woocommerce-order-received .td-dl-img { width: 72px; height: 54px; max-width: none; object-fit: cover; border-radius: 8px; display: block; }
.woocommerce-order-received .td-dl-table td.td-dl-name { font-size: 15.5px; }
.woocommerce-order-received .td-dl-table td.td-dl-name a { color: var(--td-text); font-weight: 700; text-decoration: none; }
.woocommerce-order-received .td-dl-table td.td-dl-name a:hover { color: var(--td-yellow); }
.woocommerce-order-received .td-dl-filecount { display: inline-block; margin-left: 10px; color: var(--td-text-faint); font-size: 12.5px; }
.woocommerce-order-received .td-dl-table td.td-dl-indent { width: 88px; padding: 0; }
.woocommerce-order-received .td-dl-table td.td-dl-label { color: var(--td-text-dim); font-size: 14px; word-break: break-word; }
.woocommerce-order-received .td-dl-badge {
	display: inline-block;
	margin: 0;
	font-size: 11.5px;
	font-weight: 600;
	border-radius: 20px;
	padding: 2px 9px;
	white-space: nowrap;
}
.woocommerce-order-received .td-dl-badge--new { color: var(--td-text-faint); border: 1px solid var(--td-border); }
.woocommerce-order-received .td-dl-badge--done { color: #7ee2a1; background: rgba(46, 160, 90, .16); }
.woocommerce-order-received .td-dl-table td.td-dl-action { text-align: right; width: 1%; white-space: nowrap; }
/* r16: badge + Download button on one right-aligned row, badge first with a
   clear gap. flex-wrap lets the badge drop ABOVE the button on narrow
   viewports rather than overlapping it. */
.woocommerce-order-received .td-dl-actionwrap {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: nowrap;
	gap: 6px 14px;
}
.woocommerce-order-received .td-dl-table td.td-dl-action .button { white-space: nowrap; }
@media (max-width: 640px) {
	.woocommerce-order-received .td-dl-table td.td-dl-thumb { width: 68px; }
	.woocommerce-order-received .td-dl-img { width: 56px; height: 42px; }
	.woocommerce-order-received .td-dl-table td.td-dl-indent { width: 20px; }
	.woocommerce-order-received .td-dl-badge { font-size: 10.5px; padding: 2px 7px; }
	.woocommerce-order-received .td-dl-actionwrap { gap: 6px 8px; flex-wrap: wrap; }
	.woocommerce-order-received .td-dl-table td.td-dl-action { width: auto; white-space: normal; padding-left: 8px; padding-right: 10px; }
	.woocommerce-order-received .td-dl-table td.td-dl-action .button { padding: 8px 12px !important; font-size: 12px !important; }
	.woocommerce-order-received .td-dl-table td.td-dl-check { padding-left: 10px; padding-right: 0; }
	.woocommerce-order-received .td-dl-table td.td-dl-thumb { padding: 10px 8px 10px 10px; }
	.woocommerce-order-received .td-dl-table td.td-dl-label { padding-left: 10px; padding-right: 10px; }
	.woocommerce-order-received .td-dl-table td.td-dl-name { padding-left: 10px; padding-right: 10px; }
	.woocommerce-order-received .td-dl-table td { padding: 10px 10px; }
}

/* ---- r21 (2026-08-24): live download-counter badges -----------------------
   Thank-you page twin of the rule in myaccount-shopify.css. Same behaviour,
   dark-surface ring colour. See td-downloads.js (window.tdDownloadBadges). */
.woocommerce-order-received .td-dl-badge { transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.woocommerce-order-received .td-dl-badge--bump { animation: td-dl-badge-bump-dark .9s ease; }
@keyframes td-dl-badge-bump-dark {
	0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(126, 226, 161, .45); }
	20%  { transform: scale(1.11); box-shadow: 0 0 0 6px rgba(126, 226, 161, 0); }
	100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(126, 226, 161, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.woocommerce-order-received .td-dl-badge { transition: none; }
	.woocommerce-order-received .td-dl-badge--bump { animation: none; }
}


/* =====================================================================
 * r25e (2026-08-26) — owner's mobile QA pass, downloads table (#4).
 *
 * On a phone the file name wrapped 4-6 characters per line with a wide
 * empty gutter to its left. Cause: `td.td-dl-thumb` (68px on mobile) and
 * `td.td-dl-indent` share the same TABLE COLUMN, so the indent cell on
 * every file row rendered at the thumbnail's width no matter what the
 * indent rule said — the name column was left ~140px, and
 * `word-break: break-word` then chopped long unbroken names like
 * "Golden_Snitch-Harry_Potter_3Demon" mid-token, repeatedly.
 *
 * Fix: below 560px the grouped table stops being a table and becomes
 * flex rows, so the file name gets the FULL row width and the Download
 * button drops onto its own line. Shared column widths no longer apply.
 * ===================================================================== */
@media (max-width: 560px) {
	.woocommerce-order-received .td-dl-table,
	.woocommerce-order-received .td-dl-table tbody { display: block; width: 100%; }
	.woocommerce-order-received .td-dl-table thead { display: none; }
	.woocommerce-order-received .td-dl-table tr {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		width: 100%;
		box-sizing: border-box;
	}
	.woocommerce-order-received .td-dl-table td {
		display: block;
		width: auto;
		border: 0;
	}

	/* product group row: [checkbox] [thumb] [name] */
	.woocommerce-order-received .td-dl-table tr.td-dl-group {
		gap: 10px;
		padding: 10px;
		border-top: 1px solid rgba(255, 255, 255, .12);
	}
	.woocommerce-order-received .td-dl-table tr.td-dl-group td { padding: 0 !important; }
	.woocommerce-order-received .td-dl-table tr.td-dl-group td.td-dl-check { flex: 0 0 auto; width: 22px; }
	.woocommerce-order-received .td-dl-table tr.td-dl-group td.td-dl-thumb { flex: 0 0 auto; width: 56px; }
	.woocommerce-order-received .td-dl-table tr.td-dl-group td.td-dl-name {
		flex: 1 1 0;
		min-width: 0;
		overflow-wrap: anywhere;
	}

	/* file row: name on its own full-width line, action beneath */
	.woocommerce-order-received .td-dl-table tr.td-dl-file {
		gap: 8px 10px;
		padding: 10px 10px 14px;
	}
	.woocommerce-order-received .td-dl-table tr.td-dl-file td { padding: 0 !important; }
	.woocommerce-order-received .td-dl-table tr.td-dl-file td.td-dl-indent { display: none; }
	.woocommerce-order-received .td-dl-table tr.td-dl-file td.td-dl-check { flex: 0 0 auto; width: 22px; }
	.woocommerce-order-received .td-dl-table tr.td-dl-file td.td-dl-label {
		flex: 1 1 100%;
		min-width: 0;
		/* break at separators first; only split a token when it genuinely
		 * cannot fit, instead of the old break-word free-for-all */
		word-break: normal;
		overflow-wrap: anywhere;
		line-height: 1.35;
	}
	.woocommerce-order-received .td-dl-table tr.td-dl-file td.td-dl-action {
		flex: 1 1 100%;
		width: auto;
		text-align: left;
		white-space: normal;
	}
	.woocommerce-order-received .td-dl-actionwrap { justify-content: flex-start; flex-wrap: wrap; }
}

/* ============ r25i (2026-08-27): downloads checkboxes — item 2 ============
 * The bulk-download checkboxes were left on NATIVE rendering
 * (appearance:auto) with a forced 20x20 box plus accent-color. On iOS
 * Safari a native control whose box is resized draws its own rounded
 * square at the intrinsic size inside the stretched box, which is the
 * "white square with an extra border/shadow shape below-left" from the
 * owner's screenshot. `.td-checkbox` (cart-shopify.js) never covered these
 * — its tag list is billing/terms/newsletter fields only.
 *
 * Fixed by giving them the same explicitly-drawn control `.td-checkbox`
 * uses: appearance:none, own border/background, and a rotated-border tick.
 * Applies to BOTH the Select-all and the per-row boxes so they match.
 * ========================================================================= */
.woocommerce-order-received .td-dl-form input[type="checkbox"],
.woocommerce-order-received .td-dl-table input[type="checkbox"] {
	appearance: none !important;
	-webkit-appearance: none !important;
	width: 20px !important;
	height: 20px !important;
	min-width: 20px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1.5px solid rgba(255, 255, 255, .38) !important;
	border-radius: 5px !important;
	background: rgba(255, 255, 255, .06) !important;
	box-shadow: none !important;
	outline: none;
	position: relative !important;
	display: inline-block !important;
	vertical-align: middle;
	flex: 0 0 auto;
	cursor: pointer;
	transition: background .12s ease, border-color .12s ease;
}
.woocommerce-order-received .td-dl-form input[type="checkbox"]:hover,
.woocommerce-order-received .td-dl-table input[type="checkbox"]:hover { border-color: rgba(255, 255, 255, .7) !important; }
.woocommerce-order-received .td-dl-form input[type="checkbox"]:checked,
.woocommerce-order-received .td-dl-table input[type="checkbox"]:checked {
	background: #fee100 !important;
	border-color: #fee100 !important;
}
.woocommerce-order-received .td-dl-form input[type="checkbox"]:checked::before,
.woocommerce-order-received .td-dl-table input[type="checkbox"]:checked::before {
	content: '';
	position: absolute;
	left: 6px; top: 2px;
	width: 6px; height: 10px;
	border: solid #010002;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.woocommerce-order-received .td-dl-form input[type="checkbox"]:focus-visible,
.woocommerce-order-received .td-dl-table input[type="checkbox"]:focus-visible {
	outline: 2px solid #fee100;
	outline-offset: 2px;
}

/* ============ r25i (2026-08-27): thank-you page top spacing — item 3 ======
 * The order-received page uses page-template-template-empty and renders NO
 * site header at all (verified: no `header` element, no
 * .header-mobile__container). It still carries the
 * `woondershop-has-mobile-sticky-header` body class though, so
 * header-footer-shopify.css's `body.woondershop-has-mobile-sticky-header {
 * padding-top: 128px }` — which exists purely to clear the fixed mobile
 * header — reserved 128px of empty black above the 3Demon logo (measured:
 * logo top at 147px on a 390px viewport).
 *
 * Scoped to order-received only, so every other mobile page keeps its
 * header offset.
 * ========================================================================= */
@media (max-width: 991px) {
	body.woondershop-has-mobile-sticky-header.woocommerce-order-received { padding-top: 16px; }
	body.woondershop-has-mobile-sticky-header.woocommerce-order-received.admin-bar { padding-top: 16px; }
	.woocommerce-order-received .woocommerce-order { padding-top: 12px; }
}

/* ============ r25j (2026-08-27): bare checkbox + bare thumbnail ==========
 * Owner: "Stačí checkbox samotný" — just the checkbox, no frame around it,
 * and the thumbnail must be only the rounded image.
 *
 * The drawn control itself was already correct (20px, 5px radius, no
 * shadow/outline). What painted the extra rim was the GROUP ROW's per-cell
 * tint, `tr.td-dl-group td { background: rgba(255,255,255,.045) !important }`.
 * On desktop those cells are contiguous so they read as one row band, but on
 * mobile the r25e flex layout makes each td a separate item, so each painted
 * its own sharp rectangle. Measured at 390px:
 *   td.td-dl-check  22x24 at (26,71) behind the 20x20 checkbox at (27,74)
 *                   -> peeks 3px above / 1px left = the phantom second rim
 *   td.td-dl-thumb  56x43 sharp-cornered behind the 8px-rounded 56x42 image
 *                   -> the sharp rectangle behind the thumbnail
 *
 * Removing the cell tint below 560px leaves the checkbox and the rounded
 * thumbnail sitting directly on the card background, with the row's own
 * border-top still separating groups. Desktop is deliberately untouched.
 * ======================================================================== */
@media (max-width: 560px) {
	.woocommerce-order-received .td-dl-table tr.td-dl-group td,
	.woocommerce-order-received .td-dl-table tr.td-dl-group td.td-dl-check,
	.woocommerce-order-received .td-dl-table tr.td-dl-group td.td-dl-thumb,
	.woocommerce-order-received .td-dl-table tr.td-dl-group td.td-dl-name {
		background: transparent !important;
		background-image: none !important;
		border: 0 !important;
		box-shadow: none !important;
	}
	/* nothing but the control itself */
	.woocommerce-order-received .td-dl-form input[type="checkbox"],
	.woocommerce-order-received .td-dl-table input[type="checkbox"] {
		box-shadow: none !important;
		outline: none !important;
	}
	/* only the rounded image, no cell decoration */
	.woocommerce-order-received .td-dl-img {
		border: 0 !important;
		box-shadow: none !important;
		background: transparent !important;
	}
}

/* ---- r25j addendum: stray cell hairlines on stacked mobile rows ----------
 * Scanning the FILE rows turned up the mark that best matches the owner's
 * "extra rim offset below-left" of the checkbox: td.td-dl-check on a file
 * row is empty and aria-hidden, so as a mobile flex item it collapses to
 * 22 x 1 px — and the parent theme's generic `td { border-bottom: 1px }` is
 * the only thing left to paint, producing a short grey dash at (26,127),
 * directly below-left of the group row's checkbox at (27,74).
 * The same generic border also gave .td-dl-label and .td-dl-action their own
 * hairlines, so a single logical row drew three separate lines once stacked.
 * Cells lose their borders on mobile; the row carries one divider instead.
 * ------------------------------------------------------------------------ */
@media (max-width: 560px) {
	.woocommerce-order-received .td-dl-table tr.td-dl-file td { border: 0 !important; }
	.woocommerce-order-received .td-dl-table tr.td-dl-file td.td-dl-check { display: none !important; }
	.woocommerce-order-received .td-dl-table tr.td-dl-file { border-bottom: 1px solid rgba(255, 255, 255, .10); }
	.woocommerce-order-received .td-dl-table tr.td-dl-file:last-child { border-bottom: 0; }
}