/**
 * My Account — flat brand look, matching cart-checkout-shopify.css.
 * Covers: login/register (anonymous), account nav, dashboard, orders
 * table, downloads table, addresses, edit-account form.
 *
 * Root problem this fixes: the parent theme's global ".woocommerce .button"
 * rule is a glossy gold gradient pill (linear-gradient #fbde97 -> #f7c128,
 * 1px #ce9f19 border, inset highlight, 3px radius) — the "ugly glossy
 * yellow oval" buttons on My Account's Pay / View / Cancel / Details
 * actions. Scoped override below flattens every .button on account pages
 * to the site's flat black pill (yellow on hover), without touching the
 * shared .woocommerce .button rule other pages (shop archive, etc.) rely
 * on — out of scope here.
 *
 * Claude 2026-08-12.
 */

/* ============ page shell ============ */
body.woocommerce-account,
.woocommerce-account .boxed-container { background: #fff !important; }
.woocommerce-account .woocommerce {
	max-width: 1120px;
	margin: 0 auto;
	font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
	font-family: inherit;
	font-weight: 700;
}

/* Page-level H1 "My Account" (r13, 2026-08-20). Added above the login/register
 * columns and the logged-in dashboard so the account pages carry a real H1
 * (they previously started at the Woo <h2> "Login"/greeting). */
.td-account-title {
	font-family: inherit;
	font-weight: 800;
	font-size: 32px;
	line-height: 1.1;
	margin: 0 0 22px;
	color: #0c0c0c;
}
/* On the dashboard the large "Hey, {name}" greeting is the visual hero, so the
 * H1 sits above it as a compact page label rather than a second big title. */
.td-dash__h1 {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: .2px;
	margin: 0 0 14px;
	color: #55585c;
}

/* ============ flat buttons everywhere on account pages ============ */
.woocommerce-account .woocommerce .button,
.woocommerce-account .woocommerce a.button,
.woocommerce-account .woocommerce button.button,
.woocommerce-account .woocommerce input.button {
	display: inline-block;
	background: #0c0c0c !important;
	background-image: none !important;
	color: #fff !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 30px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	padding: 11px 22px !important;
	text-decoration: none !important;
	text-transform: none;
	transition: background .12s ease, color .12s ease;
	cursor: pointer;
}
.woocommerce-account .woocommerce .button:hover,
.woocommerce-account .woocommerce .button:focus,
.woocommerce-account .woocommerce a.button:hover,
.woocommerce-account .woocommerce button.button:hover {
	background: #fee100 !important;
	color: #0c0c0c !important;
	outline: none;
}
/* secondary / cancel action reads as an outline pill, not a second solid
 * black pill, so Pay/View vs Cancel stay visually distinct */
.woocommerce-account .woocommerce .button.cancel,
.woocommerce-account .woocommerce a.button.cancel {
	background: #fff !important;
	color: #0c0c0c !important;
	border: 1px solid #d9d9d9 !important;
}
.woocommerce-account .woocommerce .button.cancel:hover {
	background: #f4f4f4 !important;
	border-color: #bbb !important;
}
.woocommerce-account .woocommerce .button.disabled,
.woocommerce-account .woocommerce .button:disabled {
	opacity: .4;
	cursor: not-allowed;
}

/* ============ account nav (sidebar) — flat black/yellow, redesigned (2nd addendum, 2026-08-13) ============
 * Root cause of "buttons don't match our style / cramped / odd edge
 * shading": WooCommerce's real per-item selector is
 * `.woocommerce-MyAccount-navigation-link` (a "-link" class WooCommerce
 * adds to every <li>, not just the generic ".../-navigation li" this file
 * was targeting), and the parent theme's default styling for it — an old
 * white-card design — sets a 1px #e6e6e6 border on every item PLUS a 2px
 * #f39f39 (orange) border-left on the active one. The override below never
 * touched `border` at all, only background/color/padding, so those stray
 * light-grey outlines (and the orange active-state accent) were bleeding
 * through under our dark background this whole time — that's the "odd
 * shading of the edges" the owner flagged. Reset every surface to fully
 * flat here, on top of roomier spacing (was a cramped 2px gap / 11px 14px
 * padding) and one unambiguous brand-yellow active state. Item radius
 * (10px) intentionally matches the site's card scale (.td-card etc.)
 * rather than the 30px pill radius, which is reserved for standalone CTA
 * buttons, not a stacked list of nav rows. */
.woocommerce-account .woocommerce-MyAccount-navigation {
	background: #0c0c0c;
	border-radius: 14px;
	padding: 12px;
	margin-bottom: 24px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
	list-style: none;
	margin: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation li + li { margin-top: 4px; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	background: transparent !important;
	color: #cfcfcf !important;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 10px !important;
	padding: 14px 16px;             /* was 11px 14px — the "cramped" fix, and a ~44px tap target */
	transition: background .12s ease, color .12s ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation li a:focus {
	background: rgba(255, 255, 255, .1) !important;
	color: #fff !important;
	outline: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: #fee100 !important;
	color: #0c0c0c !important;
	font-weight: 700;
}
/* the parent theme's unconditional `.woocommerce-MyAccount-navigation
 * {float:left;width:20.3%}` was never overridden below 782px — on a real
 * phone that squeezes the nav to ~70-80px wide with float:left, so every
 * label ("Downloads", "Addresses"...) overflows the black pill sideways.
 * Found rendering the fixture at 390px while verifying the redesign above
 * (2nd addendum, 2026-08-13); stack it full-width instead. */
@media (max-width: 781px) {
	.woocommerce-account .woocommerce-MyAccount-navigation {
		width: 100%;
		float: none;
		margin-right: 0;
		box-sizing: border-box;
	}
}

@media (min-width: 782px) {
	.woocommerce-account .woocommerce-MyAccount-content,
	.woocommerce-account .woocommerce-MyAccount-navigation { box-sizing: border-box; }
	.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation { float: none; width: 240px; }
	.woocommerce-account .woocommerce > .woocommerce-MyAccount-content { float: none; width: calc(100% - 264px); }
	.woocommerce-account .woocommerce {
		display: flex;
		align-items: flex-start;
		gap: 24px;
	}
	.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation { flex: 0 0 240px; margin-bottom: 0; }
	.woocommerce-account .woocommerce > .woocommerce-MyAccount-content { flex: 1 1 auto; min-width: 0; }
}

/* ============ dashboard "Hello X" / notices ============ */
.woocommerce-account .woocommerce-MyAccount-content > p { color: #303236; font-size: 15px; line-height: 1.6; }
.woocommerce-account .woocommerce-MyAccount-content > p:first-child { margin-top: 0; }

/* ============ orders table ============ */
.woocommerce-account table.shop_table,
.woocommerce-account table.woocommerce-orders-table,
.woocommerce-account table.woocommerce-MyAccount-downloads {
	border: 1px solid #e5e5e5 !important;
	border-radius: 16px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	width: 100%;
	margin: 0 0 24px;
}
.woocommerce-account table.shop_table th,
.woocommerce-account table.shop_table td,
.woocommerce-account table.woocommerce-orders-table th,
.woocommerce-account table.woocommerce-orders-table td,
.woocommerce-account table.woocommerce-MyAccount-downloads th,
.woocommerce-account table.woocommerce-MyAccount-downloads td {
	border: 0 !important;
	border-bottom: 1px solid #eee !important;
	background: #fff !important;
	padding: 14px 16px;
	font-size: 14.5px;
	vertical-align: middle;
}
.woocommerce-account table.shop_table thead th,
.woocommerce-account table.woocommerce-orders-table thead th,
.woocommerce-account table.woocommerce-MyAccount-downloads thead th {
	font-weight: 700;
	font-size: 13px;
	color: #55585c;
	text-transform: uppercase;
	letter-spacing: .3px;
	background: #fafafa !important;
}
.woocommerce-account table.shop_table tbody tr:last-child td,
.woocommerce-account table.woocommerce-orders-table tbody tr:last-child td,
.woocommerce-account table.woocommerce-MyAccount-downloads tbody tr:last-child td {
	border-bottom: 0 !important;
}
.woocommerce-account .woocommerce-orders-table__cell-order-actions,
.woocommerce-account td.order-actions,
.woocommerce-account td.download-actions {
	white-space: nowrap;
}
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button,
.woocommerce-account td.order-actions .button,
.woocommerce-account td.download-actions .button {
	margin: 3px 4px 3px 0;
	padding: 9px 16px !important;
	font-size: 13px !important;
}
/* order status pill instead of plain text */
.woocommerce-account mark.order-status {
	display: inline-block;
	background: #f2f2f2;
	color: #303236;
	font-size: 12.5px;
	font-weight: 700;
	border-radius: 20px;
	padding: 5px 12px;
}
.woocommerce-account mark.order-status.status-completed { background: #e4f7e9; color: #1e7a37; }
.woocommerce-account mark.order-status.status-processing { background: #fff6d6; color: #8a6d00; }
.woocommerce-account mark.order-status.status-on-hold,
.woocommerce-account mark.order-status.status-failed,
.woocommerce-account mark.order-status.status-cancelled { background: #fbe6e4; color: #b42318; }

/* ============ addresses ============ */
.woocommerce-account .woocommerce-Addresses { display: flex; flex-wrap: wrap; gap: 20px; }
.woocommerce-account .woocommerce-Address {
	flex: 1 1 280px;
	border: 1px solid #e5e5e5;
	border-radius: 16px;
	padding: 20px 22px;
}
.woocommerce-account .woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.woocommerce-account .woocommerce-Address-title h3 { margin: 0; font-size: 16px; }
.woocommerce-account address { font-style: normal; color: #303236; line-height: 1.6; }

/* ============ forms: edit account, edit address, login, register ======= */
.woocommerce-account form .form-row { margin: 0 0 14px; }
.woocommerce-account form label {
	display: block;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 6px;
	color: #303236;
}
.woocommerce-account form .required { color: #b42318; text-decoration: none; }
.woocommerce-account form .input-text,
.woocommerce-account form select,
.woocommerce-account form textarea {
	width: 100%;
	border: 1px solid #d9d9d9 !important;
	border-radius: 10px !important;
	padding: 12px 14px !important;
	font-size: 15px !important;
	color: #1a1c1e;
	background: #fff;
	box-shadow: none !important;
	box-sizing: border-box;
}
.woocommerce-account form .input-text:focus,
.woocommerce-account form select:focus,
.woocommerce-account form textarea:focus { border-color: #000 !important; outline: none; }
.woocommerce-account form .woocommerce-form__label-for-checkbox {
	display: flex !important;
	align-items: center;
	gap: 8px;
	font-weight: 400;
	cursor: pointer;
}
.woocommerce-account form .woocommerce-form__input-checkbox { accent-color: #000; width: 16px; height: 16px; }

/* password show/hide toggle — WooCommerce core feature (button.show-password-
 * input), but the parent theme's compiled CSS predates it, so it renders as
 * a bare unstyled 16x6px <button> sitting under the field instead of an eye
 * icon overlaid inside it. Style it in plain CSS (no icon-font dependency). */
.woocommerce-account form .password-input {
	position: relative;
	display: block;
}
.woocommerce-account form .password-input .input-text { padding-right: 42px !important; }
.woocommerce-account form .show-password-input {
	position: absolute;
	top: 50%;
	right: 4px;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	cursor: pointer;
	opacity: .55;
}
.woocommerce-account form .show-password-input:hover { opacity: 1; }
.woocommerce-account form .show-password-input::after {
	content: '\1F441';
	font-size: 16px;
	line-height: 1;
}
.woocommerce-account form .show-password-input.display-password::after { opacity: .5; }

/* login / register two-column card */
#customer_login.col2-set,
.woocommerce-account #customer_login.col2-set {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin: 24px 0;
}
#customer_login.col2-set .col-1,
#customer_login.col2-set .col-2 {
	flex: 1 1 300px;
	border: 1px solid #e5e5e5;
	border-radius: 16px;
	padding: 24px 26px;
}
#customer_login.col2-set h2 { font-family: inherit; font-weight: 700; font-size: 19px; margin: 0 0 16px; }
#customer_login .woocommerce-LostPassword {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 14px 0 0;
	font-size: 14px;
}
/* fixed 2026-08-12: the #customer_login prefix never matched — this theme's
 * login form markup has no such wrapper id, so these two rules were dead
 * and the links fell back to the browser/WC default blue. Brand fix: near-
 * black on the white account-page surface, both pass AA on #fff. */
.woocommerce-LostPassword a { color: #0c0c0c; text-decoration: underline; text-underline-offset: 2px; }
.woocommerce-LostPassword .r_half a { color: #0c0c0c; font-weight: 700; text-decoration: none; }
/* the button + "Remember me" row is the one plain .form-row (no -wide
 * modifier) in the login form — target it structurally, no :has() needed */
#customer_login .woocommerce-form-login p.form-row {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
#customer_login label.woocommerce-form__label-for-checkbox.inline {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	font-weight: 400;
	margin: 0;
	cursor: pointer;
}

/* ============ mobile ============ */
@media (max-width: 480px) {
	.woocommerce-account table.shop_table,
	.woocommerce-account table.woocommerce-orders-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	#customer_login.col2-set { flex-direction: column; }
}

/* ============ dashboard cards (redesign, 2026-08-13) ============
 * Replaces the stock WooCommerce "Hello X, from your account dashboard you
 * can view your recent orders..." paragraph (woocommerce/myaccount/
 * dashboard.php override in the child theme) with a greeting + a flat
 * action-card grid. Downloads leads as the hero card — for a digital STL
 * shop it's the action that matters most, so it gets the brand-yellow
 * treatment; the other three stay white/flat like the rest of this file's
 * card language (16px radius, matching .td-card / the orders table). */
.td-dash__hello {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
}
.td-dash__greeting {
	margin: 0 0 6px;
	font-size: 30px;
	line-height: 1.1;
}
.td-dash__greeting span { color: #0c0c0c; }
.td-dash__subtitle { margin: 0 !important; color: #55585c !important; font-size: 15px; }
.td-dash__logout {
	flex: 0 0 auto;
	color: #0c0c0c;
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: nowrap;
	padding-top: 6px;
}
.td-dash__logout:hover { color: #55585c; }

.td-dash__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}
.td-dash__card {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 16px;
	padding: 20px;
	text-decoration: none !important;
	transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.td-dash__card:hover {
	transform: translateY(-2px);
	box-shadow: 4px 4px 3px 0 #ddd;
	border-color: #0c0c0c;
}
.td-dash__card:focus-visible { outline: 2px solid #0c0c0c; outline-offset: 2px; }
/* hero (Downloads): full width, brand-yellow surface, first in source order
 * so it's also first for keyboard/tab navigation */
.td-dash__card--hero {
	grid-column: 1 / -1;
	background: #fee100;
	border-color: #fee100;
	align-items: center;
}
.td-dash__card--hero:hover { border-color: #0c0c0c; box-shadow: 4px 4px 3px 0 rgba(12, 12, 12, .22); /* r12: neutral shadow - shadows can never be yellow */ }
.td-dash__card--hero .td-dash__icon { background: #0c0c0c; color: #fee100; }
.td-dash__icon {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: #f2f2f2;
	color: #0c0c0c;
}
.td-dash__icon svg { width: 22px; height: 22px; }
.td-dash__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.td-dash__label {
	font-family: 'Anton', 'Arial Narrow', sans-serif;
	font-weight: 400;
	letter-spacing: .3px;
	font-size: 19px;
	color: #0c0c0c;
}
.td-dash__desc { font-size: 13.5px; color: #55585c; line-height: 1.4; }
.td-dash__card--hero .td-dash__desc { color: #33330a; }
.td-dash__meta {
	margin-top: 4px;
	display: inline-block;
	width: fit-content;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .3px;
	background: #0c0c0c;
	color: #fee100;
	border-radius: 20px;
	padding: 3px 10px;
}
.td-dash__card--hero .td-dash__meta { background: #0c0c0c; color: #fee100; }
.td-dash__arrow {
	margin-left: auto;
	flex: 0 0 auto;
	font-size: 18px;
	color: #bbb;
	transition: transform .12s ease, color .12s ease;
	align-self: center;
}
.td-dash__card:hover .td-dash__arrow { color: #0c0c0c; transform: translateX(3px); }
.td-dash__card--hero .td-dash__arrow { color: #0c0c0c; opacity: .55; }
.td-dash__card--hero:hover .td-dash__arrow { opacity: 1; }

@media (max-width: 600px) {
	.td-dash__hello { flex-direction: column; gap: 6px; }
	.td-dash__greeting { font-size: 25px; }
	.td-dash__grid { grid-template-columns: 1fr; }
	.td-dash__card { padding: 16px; }
}

/* ============ r12 downloads-UX batch (2026-08-20) ============
 * My Account -> Downloads brought in line with the account design: the
 * grouped downloads table (product thumbnail + name once, files beneath,
 * per-file download counter - see woocommerce/order/order-downloads.php
 * override) and the restyled bulk toolbar (primary yellow "Download all"
 * first, then "Download selected", larger yellow-accent checkboxes).
 * Dark twin for the thank-you page lives in cart-checkout-shopify.css. */
.woocommerce-account .td-dl-toolbar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px 18px;
	margin: 0 0 16px;
}
.woocommerce-account .td-dl-download-all {
	background: #fee100 !important;
	color: #0c0c0c !important;
	border: 0 !important;
	border-radius: 30px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	padding: 12px 26px !important;
	cursor: pointer;
	transition: background .12s ease, color .12s ease;
}
.woocommerce-account .td-dl-download-all:hover { background: #0c0c0c !important; color: #fee100 !important; }
.woocommerce-account .td-dl-form #bulk_download_button {
	background: #fff !important;
	background-image: none !important;
	color: #0c0c0c !important;
	border: 1px solid #d9d9d9 !important;
	border-radius: 30px !important;
	box-shadow: none !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	padding: 10px 20px !important;
	cursor: pointer;
	transition: background .12s ease, color .12s ease, opacity .12s ease;
}
.woocommerce-account .td-dl-form #bulk_download_button:hover:not(:disabled) { background: #fee100 !important; border-color: #fee100 !important; }
.woocommerce-account .td-dl-form #bulk_download_button:disabled { opacity: .4; cursor: not-allowed; }
.woocommerce-account .td-dl-selectall {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #303236;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	user-select: none;
	margin: 0;
}
.woocommerce-account .td-dl-form input[type="checkbox"] {
	width: 20px;
	height: 20px;
	accent-color: #fee100;
	cursor: pointer;
	margin: 0;
}
.woocommerce-account .td-dl-form .info-zip { color: #8a6d00; font-weight: 600; font-size: 13.5px; }
.woocommerce-account .td-dl-form .info-zip.d-none { display: none; }

/* ---- grouped downloads table (light) ---- */
.woocommerce-account .td-dl-table td { vertical-align: middle; }
.woocommerce-account .td-dl-table tr.td-dl-group td {
	background: #fafafa !important;
	padding-top: 10px;
	padding-bottom: 10px;
}
.woocommerce-account .td-dl-table td.td-dl-check { width: 36px; text-align: center; padding-right: 0; }
.woocommerce-account .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-account .td-dl-img { width: 72px; height: 54px; max-width: none; object-fit: cover; border-radius: 8px; display: block; }
.woocommerce-account .td-dl-table td.td-dl-name { font-size: 15.5px; }
.woocommerce-account .td-dl-table td.td-dl-name a { color: #0c0c0c; font-weight: 700; text-decoration: none; }
.woocommerce-account .td-dl-table td.td-dl-name a:hover { text-decoration: underline; }
.woocommerce-account .td-dl-filecount { display: inline-block; margin-left: 10px; color: #999; font-size: 12.5px; }
.woocommerce-account .td-dl-table td.td-dl-indent { width: 88px; padding: 0; }
.woocommerce-account .td-dl-table td.td-dl-label { color: #303236; font-size: 14px; word-break: break-word; }
.woocommerce-account .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-account .td-dl-badge--new { color: #8a8a8a; border: 1px solid #e5e5e5; }
.woocommerce-account .td-dl-badge--done { color: #1e7a37; background: #e4f7e9; }
.woocommerce-account .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-account .td-dl-actionwrap {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: nowrap;
	gap: 6px 14px;
}
.woocommerce-account .td-dl-table td.td-dl-action .button { white-space: nowrap; }
.woocommerce-account .td-dl-table td.td-dl-action .button { padding: 9px 18px !important; font-size: 13px !important; }
@media (max-width: 640px) {
	.woocommerce-account .td-dl-table td.td-dl-thumb { width: 68px; }
	.woocommerce-account .td-dl-img { width: 56px; height: 42px; }
	.woocommerce-account .td-dl-table td.td-dl-indent { width: 20px; }
	.woocommerce-account .td-dl-badge { font-size: 10.5px; padding: 2px 7px; }
	.woocommerce-account .td-dl-actionwrap { gap: 6px 8px; flex-wrap: wrap; }
	.woocommerce-account .td-dl-table td.td-dl-action { width: auto; white-space: normal; padding-left: 8px; padding-right: 10px; }
	.woocommerce-account .td-dl-table td.td-dl-action .button { padding: 8px 12px !important; font-size: 12px !important; }
	.woocommerce-account .td-dl-table td.td-dl-check { padding-left: 10px; padding-right: 0; }
	.woocommerce-account .td-dl-table td.td-dl-thumb { padding: 10px 8px 10px 10px; }
	.woocommerce-account .td-dl-table td.td-dl-label { padding-left: 10px; padding-right: 10px; }
	.woocommerce-account .td-dl-table td.td-dl-name { padding-left: 10px; padding-right: 10px; }
	.woocommerce-account .td-dl-table td { padding: 10px 10px; }
}

/* ---- r21 (2026-08-24): live download-counter badges -----------------------
   td-downloads.js bumps .td-dl-badge the moment a Download button is clicked
   and then reconciles it with the server, so the number can change without a
   page load. .td-dl-badge--bump is added for ~1.4s whenever it actually moves
   (JS only adds it on a real change, so a reconcile that confirms the guess
   stays silent). Motion is a short scale + fading ring; prefers-reduced-motion
   drops both and leaves just the colour change. */
.woocommerce-account .td-dl-badge { transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.woocommerce-account .td-dl-badge--bump { animation: td-dl-badge-bump .9s ease; }
@keyframes td-dl-badge-bump {
	0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(30, 122, 55, .40); }
	20%  { transform: scale(1.11); box-shadow: 0 0 0 6px rgba(30, 122, 55, 0); }
	100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(30, 122, 55, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.woocommerce-account .td-dl-badge { transition: none; }
	.woocommerce-account .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-account .td-dl-table,
	.woocommerce-account .td-dl-table tbody { display: block; width: 100%; }
	.woocommerce-account .td-dl-table thead { display: none; }
	.woocommerce-account .td-dl-table tr {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		width: 100%;
		box-sizing: border-box;
	}
	.woocommerce-account .td-dl-table td {
		display: block;
		width: auto;
		border: 0;
	}

	/* product group row: [checkbox] [thumb] [name] */
	.woocommerce-account .td-dl-table tr.td-dl-group {
		gap: 10px;
		padding: 10px;
		border-top: 1px solid rgba(0, 0, 0, .10);
	}
	.woocommerce-account .td-dl-table tr.td-dl-group td { padding: 0 !important; }
	.woocommerce-account .td-dl-table tr.td-dl-group td.td-dl-check { flex: 0 0 auto; width: 22px; }
	.woocommerce-account .td-dl-table tr.td-dl-group td.td-dl-thumb { flex: 0 0 auto; width: 56px; }
	.woocommerce-account .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-account .td-dl-table tr.td-dl-file {
		gap: 8px 10px;
		padding: 10px 10px 14px;
	}
	.woocommerce-account .td-dl-table tr.td-dl-file td { padding: 0 !important; }
	.woocommerce-account .td-dl-table tr.td-dl-file td.td-dl-indent { display: none; }
	.woocommerce-account .td-dl-table tr.td-dl-file td.td-dl-check { flex: 0 0 auto; width: 22px; }
	.woocommerce-account .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-account .td-dl-table tr.td-dl-file td.td-dl-action {
		flex: 1 1 100%;
		width: auto;
		text-align: left;
		white-space: normal;
	}
	.woocommerce-account .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-account .td-dl-form input[type="checkbox"],
.woocommerce-account .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 #b9bcc2 !important;
	border-radius: 5px !important;
	background: #fff !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-account .td-dl-form input[type="checkbox"]:hover,
.woocommerce-account .td-dl-table input[type="checkbox"]:hover { border-color: #8a8d93 !important; }
.woocommerce-account .td-dl-form input[type="checkbox"]:checked,
.woocommerce-account .td-dl-table input[type="checkbox"]:checked {
	background: #fee100 !important;
	border-color: #fee100 !important;
}
.woocommerce-account .td-dl-form input[type="checkbox"]:checked::before,
.woocommerce-account .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-account .td-dl-form input[type="checkbox"]:focus-visible,
.woocommerce-account .td-dl-table input[type="checkbox"]:focus-visible {
	outline: 2px solid #fee100;
	outline-offset: 2px;
}

/* ============ 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: #fafafa !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-account .td-dl-table tr.td-dl-group td,
	.woocommerce-account .td-dl-table tr.td-dl-group td.td-dl-check,
	.woocommerce-account .td-dl-table tr.td-dl-group td.td-dl-thumb,
	.woocommerce-account .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-account .td-dl-form input[type="checkbox"],
	.woocommerce-account .td-dl-table input[type="checkbox"] {
		box-shadow: none !important;
		outline: none !important;
	}
	/* only the rounded image, no cell decoration */
	.woocommerce-account .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-account .td-dl-table tr.td-dl-file td { border: 0 !important; }
	.woocommerce-account .td-dl-table tr.td-dl-file td.td-dl-check { display: none !important; }
	.woocommerce-account .td-dl-table tr.td-dl-file { border-bottom: 1px solid rgba(0, 0, 0, .10); }
	.woocommerce-account .td-dl-table tr.td-dl-file:last-child { border-bottom: 0; }
}