/*
 * Shop Viva Hub — Checkout & My Account polish
 * Loaded only on checkout (including the post-purchase order-received
 * page) and My Account pages. Written mobile-first with fluid type via
 * clamp(), so text and spacing scale smoothly across phone/tablet/desktop
 * instead of jumping at fixed breakpoints.
 */

/* Design-system variable aliases. The theme's existing tokens (defined in
   main.css) already drive all colors/spacing/radii site-wide; these
   aliases just expose them under the naming convention used in this
   file's own rules below, so the two names always stay in sync — there
   is only ever one true source of values (main.css :root). */
:root {
	--site-max-width: var(--svh-max-width);
	--spacing-unit: 0.5rem;
	--border-radius: var(--svh-radius-sm);
	--card-radius: var(--svh-radius);
	--text-color: var(--svh-ink);
	--muted-color: var(--svh-muted);
	--border-color: var(--svh-border);
	--primary-color: var(--svh-brand);
	--primary-hover: var(--svh-brand-light);
	--surface-color: var(--svh-surface);
}

/* Plain text links on checkout/account pages (order links, "view"
   links, etc.) sometimes inherit a white/visited-link color from
   elsewhere, making them briefly invisible after being clicked. Force a
   consistent dark blue, bold, for every link state. Actual buttons
   (.button, .svh-btn, gradient CTAs) use class selectors, which are more
   specific than this plain `a` selector and so are unaffected — their
   white text stays exactly as designed. */
.svh-checkout-page a:not(.button):not(.svh-btn):not(.edit),
.svh-account-page a:not(.button):not(.svh-btn):not(.edit) {
	color: var(--svh-brand) !important;
	font-weight: 700 !important;
}
.svh-checkout-page a:not(.button):not(.svh-btn):not(.edit):visited,
.svh-checkout-page a:not(.button):not(.svh-btn):not(.edit):hover,
.svh-checkout-page a:not(.button):not(.svh-btn):not(.edit):active,
.svh-checkout-page a:not(.button):not(.svh-btn):not(.edit):focus,
.svh-account-page a:not(.button):not(.svh-btn):not(.edit):visited,
.svh-account-page a:not(.button):not(.svh-btn):not(.edit):hover,
.svh-account-page a:not(.button):not(.svh-btn):not(.edit):active,
.svh-account-page a:not(.button):not(.svh-btn):not(.edit):focus {
	color: var(--svh-brand) !important;
}

/* ---------- Shared page shell ---------- */
.svh-checkout-page .svh-shop-wrapper,
.svh-account-page .svh-shop-wrapper {
	max-width: 1100px !important;
	padding-top: clamp(1.5rem, 4vw, 3rem) !important;
	padding-bottom: clamp(2rem, 6vw, 4rem) !important;
}

.svh-checkout-page h1.entry-title,
.svh-checkout-page .woocommerce-checkout h1,
.svh-account-page h1.entry-title {
	font-size: clamp(1.5rem, 3.2vw, 2.1rem) !important;
	font-weight: 800 !important;
	color: var(--svh-brand) !important;
	margin: 0 0 clamp(1rem, 3vw, 1.75rem) !important;
	line-height: 1.25 !important;
}

/* Notices (errors, "please fill X", success messages) — consistent card
   treatment instead of the raw WooCommerce list styling, which is what
   usually looks "broken" on narrow screens. */
.svh-checkout-page ul.woocommerce-error,
.svh-checkout-page ul.woocommerce-message,
.svh-checkout-page ul.woocommerce-info,
.svh-account-page ul.woocommerce-error,
.svh-account-page ul.woocommerce-message,
.svh-account-page ul.woocommerce-info {
	list-style: none !important;
	margin: 0 0 1.5rem !important;
	padding: 1rem 1.25rem !important;
	background: var(--svh-surface) !important;
	border: 1px solid var(--svh-border) !important;
	border-left: 4px solid var(--svh-brand) !important;
	border-radius: var(--svh-radius-sm) !important;
	font-size: 0.92rem !important;
	line-height: 1.5 !important;
}
.svh-checkout-page ul.woocommerce-error { border-left-color: #dc2626 !important; }
.svh-checkout-page ul.woocommerce-message { border-left-color: #16a34a !important; }

/* ---------- Checkout layout ---------- */
/* WooCommerce's checkout markup is two columns (#customer_details +
   #order_review) sitting inside form.checkout — force a clean single
   column on mobile/tablet, two columns only once there's real room. */
.woocommerce-checkout form.checkout {
	display: block !important;
	max-width: 100% !important;
}
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review,
.woocommerce-checkout #payment {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	box-sizing: border-box !important;
}
.woocommerce-checkout #customer_details { margin-bottom: clamp(1.5rem, 4vw, 2.5rem) !important; }

@media (min-width: 960px) {
	.woocommerce-checkout form.checkout {
		display: grid !important;
		grid-template-columns: 1.15fr 0.85fr !important;
		gap: clamp(2rem, 4vw, 3rem) !important;
		align-items: start !important;
	}
	.woocommerce-checkout #customer_details { margin-bottom: 0 !important; grid-column: 1; }
	.woocommerce-checkout #order_review_heading,
	.woocommerce-checkout #order_review,
	.woocommerce-checkout #payment {
		grid-column: 2;
		position: sticky;
		top: 1.5rem;
	}
}

/* Billing/shipping field grid — two columns on wider screens, always a
   single column on phones so labels/inputs never get squeezed. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
	display: grid !important;
	grid-template-columns: 1fr !important;
	gap: 0 !important;
}
@media (min-width: 640px) {
	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
	.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
		grid-template-columns: 1fr 1fr !important;
		column-gap: 1.25rem !important;
	}
	.woocommerce-checkout .form-row-first,
	.woocommerce-checkout .form-row-last { width: auto !important; float: none !important; }
	.woocommerce-checkout #billing_address_1_field,
	.woocommerce-checkout #billing_address_2_field,
	.woocommerce-checkout #billing_city_field,
	.woocommerce-checkout #billing_email_field,
	.woocommerce-checkout #billing_phone_field {
		grid-column: 1 / -1 !important;
	}
}

.woocommerce-checkout .form-row {
	width: 100% !important;
	float: none !important;
	margin: 0 0 1.1rem !important;
	padding: 0 !important;
}
.woocommerce-checkout .form-row label {
	display: block !important;
	font-size: 0.85rem !important;
	font-weight: 600 !important;
	color: var(--svh-ink) !important;
	margin-bottom: 0.4rem !important;
}
.woocommerce-checkout .form-row .required {
	color: #dc2626 !important;
	text-decoration: none !important;
}
.woocommerce-checkout .form-row input[type="text"],
.woocommerce-checkout .form-row input[type="email"],
.woocommerce-checkout .form-row input[type="tel"],
.woocommerce-checkout .form-row input[type="password"],
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	border: 1px solid var(--svh-border) !important;
	border-radius: var(--svh-radius-sm) !important;
	padding: 0.8rem 1rem !important;
	font-size: 0.95rem !important;
	background: var(--svh-surface) !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus {
	border-color: var(--svh-accent) !important;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
	outline: none !important;
}
.woocommerce-checkout .select2-container { width: 100% !important; max-width: 100% !important; }
.woocommerce-checkout .select2-container .select2-selection--single {
	height: auto !important;
	padding: 0.55rem 0.5rem !important;
	border: 1px solid var(--svh-border) !important;
	border-radius: var(--svh-radius-sm) !important;
}

/* Order review table — never let a wide table force horizontal scroll on
   the page itself; scroll only inside the table's own container. */
.woocommerce-checkout-review-order-table {
	width: 100% !important;
	max-width: 100% !important;
	border-collapse: collapse !important;
	font-size: 0.9rem !important;
}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
	padding: 0.7rem 0.25rem !important;
	border-bottom: 1px solid var(--svh-border) !important;
	word-break: break-word !important;
}
#order_review, #payment {
	background: var(--svh-surface) !important;
	border: 1px solid var(--svh-border) !important;
	border-radius: var(--svh-radius) !important;
	padding: clamp(1.1rem, 3vw, 1.75rem) !important;
	overflow-x: auto !important;
}
#order_review_heading {
	font-size: 1.1rem !important;
	font-weight: 700 !important;
	color: var(--svh-brand) !important;
	margin: 0 0 1rem !important;
}

/* Payment method list (Razorpay etc.) */
/* Payment method section heading — WooCommerce doesn't print one by
   default, so it's added via the woocommerce_review_order_before_payment
   hook in inc/woocommerce-setup.php; this just styles it consistently
   with the other checkout section headings. */
.svh-checkout-section-heading {
	font-size: 1rem !important;
	font-weight: 700 !important;
	color: var(--svh-brand) !important;
	margin: 1.5rem 0 0.75rem !important;
	padding-top: 1.25rem !important;
	border-top: 1px solid var(--svh-border) !important;
}
#order_review .svh-checkout-section-heading:first-child {
	margin-top: 0 !important;
	padding-top: 0 !important;
	border-top: none !important;
}

ul.wc_payment_methods {
	list-style: none !important;
	margin: 1rem 0 0 !important;
	padding: 0 !important;
}
ul.wc_payment_methods li.wc_payment_method {
	border: 1px solid var(--svh-border) !important;
	border-radius: var(--svh-radius-sm) !important;
	padding: 0.9rem 1rem !important;
	margin-bottom: 0.7rem !important;
	background: var(--svh-bg) !important;
}
ul.wc_payment_methods li.wc_payment_method label { font-weight: 600 !important; }
ul.wc_payment_methods .payment_box {
	margin-top: 0.75rem !important;
	padding: 0.9rem !important;
	background: var(--svh-surface) !important;
	border-radius: var(--svh-radius-sm) !important;
	font-size: 0.88rem !important;
	color: var(--svh-muted) !important;
}

#place_order,
.woocommerce-checkout button#place_order {
	width: 100% !important;
	background: var(--svh-gradient-cta) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 999px !important;
	padding: 1rem 1.5rem !important;
	font-weight: 700 !important;
	font-size: clamp(0.95rem, 2vw, 1.05rem) !important;
	box-shadow: var(--svh-shadow-glow) !important;
	margin-top: 1.25rem !important;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.2s ease !important;
}
#place_order:hover { transform: translateY(-1px); box-shadow: 0 14px 34px -10px rgba(37, 99, 235, 0.6) !important; }

/* ---------- My Account shell (menu + content) ---------- */
.woocommerce-account .woocommerce-MyAccount-navigation {
	width: 100% !important;
	float: none !important;
	background: var(--svh-surface) !important;
	border: 1px solid var(--svh-border) !important;
	border-radius: var(--svh-radius) !important;
	padding: 0.6rem !important;
	margin-bottom: 1.5rem !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 0.35rem !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li { margin: 0 !important; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
	display: block !important;
	padding: 0.55rem 0.9rem !important;
	border-radius: 999px !important;
	font-weight: 600 !important;
	font-size: 0.88rem !important;
	color: var(--svh-ink) !important;
	background: transparent !important;
	white-space: nowrap;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
	background: var(--svh-gradient-cta) !important;
	color: #ffffff !important;
	box-shadow: var(--svh-shadow-glow) !important;
}
.woocommerce-account .woocommerce-MyAccount-content {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
	background: var(--svh-surface) !important;
	border: 1px solid var(--svh-border) !important;
	border-radius: var(--svh-radius) !important;
	padding: clamp(1.1rem, 3vw, 2rem) !important;
	overflow-x: auto !important;
}

@media (min-width: 860px) {
	.woocommerce-account .woocommerce-MyAccount-navigation { max-width: 220px; }
}

/* ---------- Orders table ---------- */
.woocommerce-orders-table {
	width: 100% !important;
	border-collapse: collapse !important;
	font-size: 0.88rem !important;
}
.woocommerce-orders-table th { text-align: left !important; padding: 0.75rem 0.5rem !important; color: var(--svh-muted) !important; font-weight: 600 !important; border-bottom: 2px solid var(--svh-border) !important; }
.woocommerce-orders-table td { padding: 0.85rem 0.5rem !important; border-bottom: 1px solid var(--svh-border) !important; }
.woocommerce-orders-table .button {
	background: var(--svh-brand) !important;
	color: #fff !important;
	border-radius: 999px !important;
	padding: 0.45rem 0.9rem !important;
	font-size: 0.78rem !important;
	font-weight: 600 !important;
	white-space: nowrap;
}

@media (max-width: 700px) {
	/* Collapse the orders table into stacked cards instead of a squeezed,
	   horizontally-scrolling table on phones. */
	.woocommerce-orders-table thead { display: none !important; }
	.woocommerce-orders-table, .woocommerce-orders-table tbody, .woocommerce-orders-table tr, .woocommerce-orders-table td {
		display: block !important;
		width: 100% !important;
	}
	.woocommerce-orders-table tr {
		border: 1px solid var(--svh-border) !important;
		border-radius: var(--svh-radius-sm) !important;
		margin-bottom: 1rem !important;
		padding: 0.5rem 0.9rem !important;
	}
	.woocommerce-orders-table td {
		border-bottom: none !important;
		padding: 0.5rem 0 !important;
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
		gap: 1rem !important;
	}
	.woocommerce-orders-table td::before {
		content: attr(data-title) !important;
		font-weight: 600 !important;
		color: var(--svh-muted) !important;
		font-size: 0.78rem !important;
		flex-shrink: 0;
	}
}

/* ---------- Downloads (the key "post-purchase" page) ----------
 * Real WooCommerce markup: table.woocommerce-table.woocommerce-table--
 * order-downloads, with td classes download-product / download-remaining
 * / download-expires / download-file, and the button itself carries
 * class woocommerce-MyAccount-downloads-file.
 *
 * This uses CSS Grid (not a real table layout) at every screen size, one
 * product per row, with the product-name column set to `minmax(0, 1fr)`
 * and every other column sized to `auto`. That combination is what
 * guarantees the row can never force a scrollbar: the product name
 * column is allowed to shrink and wrap normally, while the short columns
 * (remaining/expires/download) simply take only the space their content
 * needs — so the four columns always add up to exactly the container's
 * width, at any screen size, with no fixed percentages fighting content.
 */
.woocommerce-table--order-downloads,
.woocommerce-table--order-downloads thead,
.woocommerce-table--order-downloads tbody {
	display: block !important;
	width: 100% !important;
}
.woocommerce-table--order-downloads thead tr {
	display: none !important; /* column labels are repeated per-row instead, via ::before on mobile and a light label row on desktop below */
}
.woocommerce-table--order-downloads tbody tr {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto auto auto !important;
	align-items: center !important;
	column-gap: clamp(0.6rem, 2vw, 1.5rem) !important;
	width: 100% !important;
	background: linear-gradient(135deg, #f5f1fb 0%, #ece4f9 45%, #e7defa 100%) !important;
	border: 1px solid #e2d6f5 !important;
	border-radius: var(--svh-radius-sm) !important;
	padding: 1rem 1.1rem !important;
	margin-bottom: 0.85rem !important;
	transition: box-shadow 0.2s ease, transform 0.15s ease !important;
}
.woocommerce-table--order-downloads tbody tr:hover {
	box-shadow: 0 10px 26px -12px rgba(124, 58, 237, 0.28) !important;
	transform: translateY(-1px);
}
.woocommerce-table--order-downloads tbody td {
	display: block !important;
	padding: 0 !important;
	border: none !important;
	min-width: 0 !important;
}
.woocommerce-table--order-downloads tbody td.download-product {
	font-weight: 700 !important;
	color: var(--svh-ink) !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}
.woocommerce-table--order-downloads tbody td.download-remaining,
.woocommerce-table--order-downloads tbody td.download-expires {
	color: var(--svh-muted) !important;
	font-size: 0.85rem !important;
	white-space: nowrap !important;
	text-align: right !important;
}
.woocommerce-table--order-downloads a.woocommerce-MyAccount-downloads-file {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: #764edd !important;
	color: #fff !important;
	border-radius: 999px !important;
	padding: 0.5rem 1.15rem !important;
	font-weight: 700 !important;
	font-size: 0.8rem !important;
	line-height: 1.2 !important;
	white-space: nowrap !important;
	box-shadow: 0 8px 20px -8px rgba(118, 78, 221, 0.45) !important;
	transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}
.woocommerce-table--order-downloads a.woocommerce-MyAccount-downloads-file:hover {
	background: #5f3dc4 !important;
	transform: translateY(-1px);
	box-shadow: 0 12px 26px -8px rgba(95, 61, 196, 0.55) !important;
}

/* On narrow phones, use two separate grid areas for the meta info
   (remaining / expires) so they sit side by side on their own row,
   rather than sharing one area — two different elements can never share
   a single named grid-area without rendering directly on top of each
   other, which was the cause of the overlapping text bug here. */
@media (max-width: 480px) {
	.woocommerce-table--order-downloads tbody tr {
		grid-template-columns: 1fr 1fr !important;
		grid-template-areas:
			"name name"
			"remaining expires"
			"button button" !important;
		row-gap: 0.5rem !important;
	}
	.woocommerce-table--order-downloads td.download-product {
		grid-area: name;
		white-space: normal !important;
		overflow: visible !important;
		text-overflow: clip !important;
		font-size: 1rem !important;
	}
	.woocommerce-table--order-downloads td.download-remaining {
		grid-area: remaining;
		text-align: left !important;
	}
	.woocommerce-table--order-downloads td.download-expires {
		grid-area: expires;
		text-align: right !important;
	}
	.woocommerce-table--order-downloads td.download-remaining::before,
	.woocommerce-table--order-downloads td.download-expires::before {
		content: attr(data-title) ": ";
		font-weight: 600;
		color: var(--svh-ink);
	}
	.woocommerce-table--order-downloads td.download-file {
		grid-area: button;
	}
	.woocommerce-table--order-downloads a.woocommerce-MyAccount-downloads-file {
		width: 100% !important;
	}
}

/* Custom "Your Downloads" cards on the order-received page (added via
   the woocommerce_thankyou hook — see inc/woocommerce-setup.php). These
   use their own class names, independent of the My Account table above,
   since they're rendered as cards rather than a table. */
.svh-thankyou-downloads { margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.svh-thankyou-downloads-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.85rem;
	margin-top: 1rem;
}
@media (min-width: 640px) {
	.svh-thankyou-downloads-grid { grid-template-columns: 1fr 1fr; }
}
.svh-download-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	background: var(--svh-surface);
	border: 1px solid var(--svh-border);
	border-radius: var(--svh-radius-sm);
	padding: 1rem 1.1rem;
}
.svh-download-card-name {
	font-weight: 700;
	color: var(--svh-ink);
	word-break: break-word;
	min-width: 0;
	flex: 1 1 160px;
}
.svh-download-card a.button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: #764edd !important;
	color: #fff !important;
	border-radius: 999px !important;
	padding: 0.55rem 1.25rem !important;
	font-weight: 700 !important;
	font-size: 0.82rem !important;
	white-space: nowrap !important;
	box-shadow: 0 8px 20px -8px rgba(118, 78, 221, 0.45) !important;
	flex-shrink: 0;
	transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}
.svh-download-card a.button:hover {
	background: #5f3dc4 !important;
	transform: translateY(-1px);
}

/* Empty-state messaging (no orders / no downloads yet) */
.woocommerce-account .woocommerce-info {
	list-style: none !important;
	display: block !important;
	background: var(--svh-bg) !important;
	border: 1px dashed var(--svh-border) !important;
	border-radius: var(--svh-radius) !important;
	padding: clamp(1.5rem, 5vw, 2.5rem) !important;
	text-align: center !important;
	color: var(--svh-muted) !important;
}
.woocommerce-account .woocommerce-info a.button {
	display: inline-block !important;
	margin-top: 1rem !important;
	background: var(--svh-gradient-cta) !important;
	color: #fff !important;
	border-radius: 999px !important;
	padding: 0.65rem 1.4rem !important;
	font-weight: 700 !important;
}

/* Addresses page — WooCommerce renders Billing/Shipping as two blocks
   inside .woocommerce-Addresses; turn them into clean side-by-side cards
   on wider screens, stacked on mobile. */
.woocommerce-Addresses {
	display: grid !important;
	grid-template-columns: 1fr !important;
	gap: 1.25rem !important;
}
@media (min-width: 700px) {
	.woocommerce-Addresses { grid-template-columns: 1fr 1fr !important; }
}
.woocommerce-Address {
	background: var(--svh-bg) !important;
	border: 1px solid var(--svh-border) !important;
	border-radius: var(--svh-radius) !important;
	padding: 1.25rem !important;
}
.woocommerce-Address-title {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 0.75rem !important;
	margin: 0 0 0.75rem !important;
}
.woocommerce-Address-title h2 {
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	color: var(--svh-brand) !important;
	margin: 0 !important;
}
.woocommerce-Address-title a.edit {
	font-size: 0.82rem !important;
	font-weight: 700 !important;
	color: #fff !important;
	background: var(--svh-gradient-cta) !important;
	border-radius: 999px !important;
	padding: 0.4rem 0.9rem !important;
	white-space: nowrap;
}
.woocommerce-Address address { font-style: normal !important; line-height: 1.6 !important; color: var(--svh-ink) !important; word-break: break-word !important; }

/* ---------- Order-received / thank-you page ---------- */
.svh-thankyou-hero {
	text-align: center;
	background: var(--svh-surface);
	border: 1px solid var(--svh-border);
	border-radius: var(--svh-radius);
	padding: clamp(1.75rem, 5vw, 3rem) clamp(1.25rem, 4vw, 2rem);
	margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.svh-thankyou-hero-icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--svh-gradient-cta);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1rem;
	font-size: 1.6rem;
	box-shadow: var(--svh-shadow-glow);
}
.svh-thankyou-hero h1,
.svh-thankyou-hero h2 {
	font-size: clamp(1.4rem, 3vw, 1.9rem) !important;
	font-weight: 800 !important;
	color: var(--svh-brand) !important;
	margin: 0 0 0.5rem !important;
}
.svh-thankyou-hero p {
	color: var(--svh-muted);
	margin: 0;
	font-size: 0.95rem;
}
.svh-thankyou-section-title {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--svh-brand);
	margin: 0 0 0.25rem;
}
.svh-thankyou-section-subtitle {
	color: var(--svh-muted);
	font-size: 0.88rem;
	margin: 0 0 0.25rem;
}
.svh-thankyou-help {
	margin-top: clamp(1.5rem, 4vw, 2.5rem);
	background: var(--svh-bg);
	border: 1px dashed var(--svh-border);
	border-radius: var(--svh-radius);
	padding: clamp(1.25rem, 3vw, 1.75rem);
	text-align: center;
}
.svh-thankyou-help a.button {
	display: inline-block;
	margin-top: 0.75rem;
	background: var(--svh-gradient-cta);
	color: #fff !important;
	border-radius: 999px;
	padding: 0.6rem 1.4rem;
	font-weight: 700;
	font-size: 0.88rem;
}

/* WooCommerce's default order-details table on this page gets the same
   card treatment as the checkout order review, for visual consistency. */
.woocommerce-order-details, .woocommerce-customer-details {
	background: var(--svh-surface) !important;
	border: 1px solid var(--svh-border) !important;
	border-radius: var(--svh-radius) !important;
	padding: clamp(1.1rem, 3vw, 1.75rem) !important;
	margin-bottom: clamp(1.25rem, 3vw, 2rem) !important;
	overflow-x: auto !important;
}
.woocommerce-order-details table.shop_table,
.woocommerce-table.shop_table {
	width: 100% !important;
	border-collapse: collapse !important;
	font-size: 0.9rem !important;
}
.woocommerce-order-details table.shop_table th,
.woocommerce-order-details table.shop_table td,
.woocommerce-table.shop_table th,
.woocommerce-table.shop_table td {
	padding: 0.65rem 0.5rem !important;
	border-bottom: 1px solid var(--svh-border) !important;
	word-break: break-word !important;
}

/* Account details / edit-account form */
.woocommerce-EditAccountForm .form-row,
.woocommerce-ResetPassword .form-row,
.woocommerce-form-login .form-row,
.woocommerce-form-register .form-row {
	margin: 0 0 1.1rem !important;
}
.woocommerce-EditAccountForm input[type="text"],
.woocommerce-EditAccountForm input[type="email"],
.woocommerce-EditAccountForm input[type="password"],
.woocommerce-ResetPassword input,
.woocommerce-form-login input,
.woocommerce-form-register input {
	width: 100% !important;
	box-sizing: border-box !important;
	border: 1px solid var(--svh-border) !important;
	border-radius: var(--svh-radius-sm) !important;
	padding: 0.8rem 1rem !important;
}
.woocommerce-EditAccountForm button,
.woocommerce-ResetPassword button,
.woocommerce-form-login button,
.woocommerce-form-register button {
	background: var(--svh-gradient-cta) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 999px !important;
	padding: 0.85rem 1.6rem !important;
	font-weight: 700 !important;
	box-shadow: var(--svh-shadow-glow) !important;
}