/*
Theme Name: SR Minimal
Theme URI: https://superrishi.com/
Author: Super Rishi
Description: The minimal superrishi.com — the plans and a newsletter signup, and nothing else. Carries no licence or subscription code: that lives in the sr-licensing mu-plugin and must stay there.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sr-minimal
Tags: minimal, accessibility-ready
*/

/* ---------------------------------------------------------------------------
   SCOPING RULE FOR THIS FILE — read before adding anything.

   /my-account/license-and-subscription/ is rendered by the sr-licensing
   mu-plugin, which enqueues its own Bootstrap and its own licence stylesheets
   at wp_enqueue_scripts priority 11. This file goes out at priority 10, so the
   mu-plugin's rules print AFTER these and win any specificity tie.

   That protects the licence page from ties. It does NOT protect it from rules
   the mu-plugin has no opinion about. So: no bare element selectors that
   affect layout or spacing of content this theme did not author. Typography
   and colour on :root and body are deliberate and shared; everything
   structural is scoped to a .sr- class. A bare `table { }` rule here would
   restyle the licence tables, and nothing would fail to warn us.
--------------------------------------------------------------------------- */

:root {
	--sr-ink: #16181d;
	--sr-ink-soft: #4a4f5a;
	--sr-rule: #d9dde3;
	--sr-bg: #ffffff;
	--sr-bg-soft: #f6f7f9;
	--sr-accent: #0b5cd5; /* 7.0:1 on white */
	--sr-accent-ink: #ffffff;
	--sr-ok: #10633a; /* 6.4:1 on white */
	--sr-warn: #8a5300; /* 5.2:1 on white */
	--sr-err: #b3261e; /* 5.9:1 on white */
	--sr-measure: 68ch;
	--sr-gap: 1.5rem;
	--sr-radius: 8px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--sr-bg);
	color: var(--sr-ink);
	font: 400 clamp(1rem, 0.96rem + 0.2vw, 1.0625rem) / 1.6 system-ui, -apple-system,
		"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

/* Focus is never removed, only restyled. Keyboard navigability is a priority,
   not a nicety, and the default ring is invisible on the accent colour. */
:focus-visible {
	outline: 3px solid var(--sr-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

.sr-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 0.75rem 1rem;
	background: var(--sr-ink);
	color: #fff;
	text-decoration: none;
}

.sr-skip-link:focus {
	left: 0;
}

.sr-wrap {
	/* Compact column, owner-preferred (2026-09-06): the content is sparse and
	   should read like the old site's tight centered box. */
	width: min(60rem, 100% - 2.5rem);
	margin-inline: auto;
}

/* --- Header ------------------------------------------------------------- */

.sr-header {
	background: var(--sr-bg);
	padding-top: 0.75rem;
}

/* The old superrishi.com framing (owner, 2026-09-06): the thick dark bar sits
   directly above the logo + menu at CONTAINER width — not across the whole
   window — with the thin rule closing the header at the same width. */
.sr-header .sr-header__inner {
	border-top: 3px solid var(--sr-ink);
	border-bottom: 1px solid var(--sr-rule);
}

.sr-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1rem;
}

.sr-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--sr-ink);
	text-decoration: none;
}

/* The SR mark inherits the brand colour (paths use currentColor), so it follows
   the ink token everywhere the wordmark does. */
.sr-brand__mark {
	width: 1.9em;
	height: 1.9em;
	flex-shrink: 0;
}

.sr-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sr-nav a {
	color: var(--sr-ink-soft);
	text-decoration: none;
	font-size: 0.9375rem;
}

.sr-nav a:hover,
.sr-nav a:focus-visible,
.sr-nav [aria-current="page"] {
	color: var(--sr-accent);
	text-decoration: underline;
}

/* --- Generic page content ------------------------------------------------ */

.sr-main {
	padding-block: clamp(2rem, 1rem + 4vw, 4rem);
}

.sr-page__title {
	font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0 0 1rem;
}

.sr-prose {
	max-width: var(--sr-measure);
}

.sr-prose a {
	color: var(--sr-accent);
}

/* --- The product ---------------------------------------------------------
   template-parts/product.php. Deliberately quiet: this section exists to tell
   a visitor arriving from a stale /plugin/ link that they are in the right
   place and then hand them to the plans. It is not allowed to compete with
   them, so it gets no card, no border and no background — type and space only.
   ------------------------------------------------------------------------- */

.sr-product {
	padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) 0;
}

.sr-product__title {
	font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0 0 1rem;
	max-width: var(--sr-measure);
}

.sr-product__lede {
	font-size: 1.125rem;
	max-width: var(--sr-measure);
	margin: 0 0 0.75rem;
}

.sr-product__detail,
.sr-product__contact {
	color: var(--sr-ink-soft);
	max-width: var(--sr-measure);
	margin: 0 0 0.75rem;
}

.sr-product__cta {
	margin: 1.25rem 0 0.75rem;
}

.sr-footer__contact a,
.sr-product__contact a {
	color: var(--sr-accent);
}

/* --- FAQ screenshots ------------------------------------------------------ */

.sr-prose .sr-faq__shot {
	margin: 1rem 0 1.75rem;
}

.sr-prose .sr-faq__shot img {
	display: block;
	max-width: 100%;
	height: auto;
	border: 1px solid var(--sr-rule);
	border-radius: var(--sr-radius);
}

/* --- Store pages: full column, centred ------------------------------------ */

/* The cart/checkout blocks and the account area live inside the page-template
   prose column, whose 68ch cap squeezed them into a narrow left-hugging strip
   (owner's 2026-09-06 screenshots). Store surfaces get the full wrap; the
   blocks then centre themselves at a comfortable width. */
.woocommerce-cart .sr-prose,
.woocommerce-checkout .sr-prose,
.woocommerce-account .sr-prose {
	max-width: none;
}

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	max-width: 64rem;
	margin-inline: auto;
}

/* Logged-out My Account: the Login / Register pair sits centred, not spread
   across the whole wrap. */
.woocommerce-account .col2-set {
	max-width: 52rem;
	margin-inline: auto;
}

/* --- WooCommerce notices (classic pages) --------------------------------- */

/* Woo core floats a "View cart" button inside each notice and clears nothing,
   so a queued batch renders as the diagonal button-stack the owner screenshotted
   on My Account (2026-09-05). Flex per notice; floats neutralised. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error li,
ul.woocommerce-error {
	list-style: none;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	margin: 0 0 0.75rem;
	padding: 0;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	padding: 0.75rem 1rem;
	border-left: 3px solid var(--sr-accent);
	border-radius: var(--sr-radius);
	background: var(--sr-bg-soft);
}

.woocommerce-error li {
	border-left-color: var(--sr-err);
	margin: 0 0 0.5rem;
}

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	float: none;
	order: 1;
	margin-left: auto;
}

/* --- Logged-out My Account: Login / Register side by side ----------------- */

/* Same disease, same cure as the account grid above: Woo's clearfix pseudos
   become grid items and its floated 48%-wide columns fight the layout. */
.woocommerce-account .col2-set {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	gap: var(--sr-gap);
	align-items: start;
}

.woocommerce-account .col2-set::before,
.woocommerce-account .col2-set::after {
	content: none;
}

.woocommerce-account .col2-set .col-1,
.woocommerce-account .col2-set .col-2 {
	float: none;
	width: auto;
	max-width: none;
}

/* --- The plans ----------------------------------------------------------- */

.sr-plans {
	padding-block: clamp(2rem, 1rem + 4vw, 4rem);
}

.sr-plans__intro {
	max-width: var(--sr-measure);
	margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.sr-plans__lede {
	font-size: 1.125rem;
	color: var(--sr-ink-soft);
	margin: 0;
}

/* auto-fit, so a fourth tier needs a content row and not a template change.
   Nothing in this file counts the tiers. */
.sr-plans__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--sr-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sr-plan {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.5rem;
	border: 1px solid var(--sr-rule);
	border-radius: var(--sr-radius);
	background: var(--sr-bg);
}

.sr-plan__name {
	margin: 0;
	font-size: 1.125rem;
	letter-spacing: -0.01em;
}

.sr-plan__allowance {
	margin: 0;
	color: var(--sr-ink-soft);
}

.sr-plan__price {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 0.35rem;
	flex-wrap: wrap;
}

.sr-plan__amount {
	font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.05;
}

.sr-plan__period {
	color: var(--sr-ink-soft);
	font-size: 0.9375rem;
}

.sr-plan__terms {
	margin: 0;
	color: var(--sr-ink-soft);
	font-size: 0.9375rem;
}

.sr-plan__terms > :first-child {
	margin-top: 0;
}

.sr-plan__terms > :last-child {
	margin-bottom: 0;
}

.sr-plan__renewal {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--sr-ink-soft);
}

.sr-plan__cta {
	margin-top: auto;
	align-self: start;
}

/* --- Free vs Premium comparison (owner-ordered third section) ------------- */

.sr-compare {
	padding-block: clamp(2rem, 1rem + 4vw, 4rem);
	border-top: 1px solid var(--sr-rule);
}

.sr-compare .sr-plans__lede {
	max-width: var(--sr-measure);
	margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

/* The table scrolls inside its own region on narrow screens; the page never
   scrolls sideways. The tabindex/role pair on the wrapper is what makes the
   scroll reachable by keyboard. */
.sr-compare__scroll {
	overflow-x: auto;
}

.sr-compare__table {
	width: 100%;
	min-width: 36rem;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.sr-compare__table th,
.sr-compare__table td {
	padding: 0.65rem 1rem;
	border-bottom: 1px solid var(--sr-rule);
	text-align: left;
	vertical-align: top;
}

.sr-compare__table thead th {
	border-bottom-width: 2px;
}

.sr-compare__table tbody th {
	font-weight: 400;
	color: var(--sr-ink);
}

.sr-compare__table thead th:not(:first-child),
.sr-compare__table td {
	width: 22%;
}

.sr-compare__yes {
	font-weight: 600;
}

.sr-compare__no {
	color: var(--sr-ink-soft);
}

.sr-compare__note {
	margin: 1.25rem 0 0;
	color: var(--sr-ink-soft);
	font-size: 0.9375rem;
}

/* A provisional term must be unmistakable as provisional. If this ever reads
   as ordinary emphasis it has failed at its only job: a plausible-looking
   number is indistinguishable from a decided one, and gets quoted back at us. */
.sr-provisional {
	display: inline-block;
	padding: 0.15em 0.5em;
	border: 1px dashed var(--sr-warn);
	border-radius: 4px;
	background: #fff8ec;
	color: var(--sr-warn);
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.sr-btn {
	display: inline-block;
	padding: 0.7rem 1.25rem;
	border: 1px solid var(--sr-accent);
	border-radius: var(--sr-radius);
	background: var(--sr-accent);
	color: var(--sr-accent-ink);
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.sr-btn:hover {
	background: #094aa9;
	border-color: #094aa9;
}

.sr-btn[disabled],
.sr-btn[aria-disabled="true"] {
	opacity: 0.65;
	cursor: not-allowed;
}

/* --- Newsletter ---------------------------------------------------------- */

.sr-newsletter {
	padding-block: clamp(2rem, 1rem + 4vw, 4rem);
	border-top: 1px solid var(--sr-rule);
	background: var(--sr-bg-soft);
}

.sr-newsletter__inner {
	max-width: var(--sr-measure);
}

.sr-newsletter__title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);
	letter-spacing: -0.01em;
}

.sr-newsletter__lede {
	margin: 0 0 1.25rem;
	color: var(--sr-ink-soft);
}

/* First + last name side by side, stacking when the column gets narrow. */
.sr-form__names {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.sr-form__names .sr-form__input {
	width: 100%;
}

.sr-form__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: flex-start;
}

.sr-form__field {
	flex: 1 1 18rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.sr-form__label {
	font-size: 0.9375rem;
	font-weight: 600;
}

.sr-form__controls {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: stretch;
}

.sr-form__controls .sr-form__input {
	flex: 1 1 14rem;
	width: auto;
}

.sr-form__input {
	padding: 0.7rem 0.85rem;
	border: 1px solid #9aa1ac;
	border-radius: var(--sr-radius);
	background: #fff;
	color: var(--sr-ink);
	font: inherit;
	width: 100%;
}

.sr-form__input[aria-invalid="true"] {
	border-color: var(--sr-err);
	border-width: 2px;
}

.sr-form__hint {
	font-size: 0.875rem;
	color: var(--sr-ink-soft);
	margin: 0;
}

/* Honeypot. Kept out of the accessibility tree AND off screen — display:none
   is skipped by some autofill, and a visible-but-transparent field gets read
   out by a screen reader and then fails the human who filled it in. */
.sr-form__trap {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Every state is one element, coloured by a data attribute, so the states are
   mutually exclusive by construction rather than by remembering to clear the
   others. */
.sr-form__status {
	margin: 1rem 0 0;
	padding: 0.75rem 1rem;
	border-radius: var(--sr-radius);
	border-left: 4px solid var(--sr-rule);
	background: #fff;
	font-size: 0.9375rem;
}

.sr-form__status:empty {
	display: none;
}

.sr-form__status[data-state="success"] {
	border-left-color: var(--sr-ok);
	color: var(--sr-ok);
}

.sr-form__status[data-state="already"] {
	border-left-color: var(--sr-accent);
	color: var(--sr-accent);
}

.sr-form__status[data-state="empty"],
.sr-form__status[data-state="invalid"],
.sr-form__status[data-state="error"] {
	border-left-color: var(--sr-err);
	color: var(--sr-err);
}

.sr-form__status[data-state="submitting"] {
	border-left-color: var(--sr-warn);
	color: var(--sr-warn);
}

/* --- Footer -------------------------------------------------------------- */

.sr-footer {
	/* Thick separation above the footer, matching the old site's framing. */
	border-top: 3px solid var(--sr-ink);
	padding-block: 2rem;
	font-size: 0.9375rem;
	color: var(--sr-ink-soft);
}

.sr-footer__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.5rem;
	align-items: center;
	justify-content: center;
}

/* Bottom line: © on the left, social profiles on the right (old-site layout). */
.sr-footer__base {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	margin-top: 1.5rem;
}

.sr-social {
	display: flex;
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sr-social a {
	display: inline-flex;
	color: var(--sr-ink-soft);
}

.sr-social a:hover,
.sr-social a:focus-visible {
	color: var(--sr-ink);
}

.sr-social svg {
	width: 20px;
	height: 20px;
}

.sr-footer ul {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sr-footer a {
	color: var(--sr-ink-soft);
}

.sr-footer a:hover,
.sr-footer a:focus-visible {
	color: var(--sr-accent);
}

.sr-screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   THE ACCOUNT AREA — the shell only (Phase 4a).

   ⛔ READ THE SCOPING RULE AT THE TOP OF THIS FILE FIRST, THEN THIS.

   This section styles the FRAME the account pages sit in: the navigation
   list, the two-column arrangement, and the width of the content well. It
   must not style what is INSIDE the content well, because on
   /my-account/license-and-subscription/ that content is the licence markup —
   authored by the sr-licensing mu-plugin, styled by the mu-plugin's own
   sheets, and explicitly not this theme's to restyle. "I own the frame; the
   licence engineer owns what renders inside it" is the split in SUPA-8 §4a,
   and this comment is where it becomes a CSS rule.

   The practical test for anything added below: does the selector match an
   element the MU-PLUGIN emitted? If it can, it does not belong here. That is
   why there is not one descendant selector under
   .woocommerce-MyAccount-content — only rules on the container itself.

   Priority 10 vs the mu-plugin's 11 protects us from ties, NOT from rules the
   mu-plugin has no opinion about. A `.woocommerce-MyAccount-content table {}`
   here would restyle the licence tables and nothing would fail to warn us.
--------------------------------------------------------------------------- */

/*
 * The nav and the content well are SIBLINGS inside the shortcode's own
 * `<div class="woocommerce">` wrapper (woocommerce/templates/myaccount/
 * my-account.php: the navigation action, then .woocommerce-MyAccount-content).
 * So the grid belongs on that wrapper — not on .sr-main, which is two levels up
 * and has a single <article> child.
 *
 * Scoped by the `.woocommerce-account` body class because `.woocommerce` is
 * also on the cart, the checkout and the shop.
 */
.woocommerce-account .woocommerce {
	display: grid;
	gap: var(--sr-gap);
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 48rem) {
	/* Logged-in only: the sidebar-plus-content shell belongs to the account
	   nav. Logged OUT the same wrapper holds the Login/Register columns, and
	   the two-track template crammed them into the 16rem sidebar track (the
	   owner's screenshot, 2026-09-05) — they stay on the single full-width
	   track instead. */
	.logged-in.woocommerce-account .woocommerce {
		grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
	}
}

/*
 * WooCommerce core still lays this pair out with floats: a clearfix on the
 * wrapper (`.woocommerce::before/::after { content:" "; display:table }`) plus
 * float + percentage widths on the nav and the content well. Inside our grid
 * the floats are ignored — but the clearfix pseudos are REAL boxes and become
 * grid items: ::before silently occupies row 1 / column 1, shunting the nav
 * into column 2 and the content into row 2. And the percentage widths then
 * resolve against whichever track a child happens to land in. So: remove the
 * pseudos from the account grid, return the children's widths to their tracks,
 * and pin each child to its own column so placement never depends on what
 * else WooCommerce prints into the wrapper (e.g. a notices div).
 */
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after {
	content: none;
}

.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce > .woocommerce-MyAccount-content {
	float: none;
	width: auto;
}

@media (min-width: 48rem) {
	.woocommerce-account .woocommerce > .woocommerce-notices-wrapper {
		grid-column: 1 / -1;
	}

	.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation {
		grid-column: 1;
	}

	.woocommerce-account .woocommerce > .woocommerce-MyAccount-content {
		grid-column: 2;
	}
}

.woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--sr-rule);
	border-radius: var(--sr-radius);
	background: var(--sr-bg-soft);
	overflow: hidden;
}

.woocommerce-MyAccount-navigation li + li {
	border-top: 1px solid var(--sr-rule);
}

.woocommerce-MyAccount-navigation a {
	display: block;
	padding: 0.75rem 1rem;
	color: var(--sr-ink);
	text-decoration: none;
}

.woocommerce-MyAccount-navigation a:hover,
.woocommerce-MyAccount-navigation a:focus-visible {
	background: var(--sr-bg);
	color: var(--sr-accent);
	text-decoration: underline;
}

/*
 * The current page is marked for sighted users with weight and a rule, and
 * announced to assistive technology by WooCommerce's own `is-active` class
 * being mirrored into aria-current by the template. Colour is not the only
 * signal — a 3px rule carries it when colour is unavailable.
 */
.woocommerce-MyAccount-navigation .is-active > a {
	font-weight: 600;
	box-shadow: inset 3px 0 0 var(--sr-accent);
	background: var(--sr-bg);
}

/*
 * The content well. `min-width: 0` is load-bearing: a grid item defaults to
 * min-content width, and the licence page contains wide tables that would
 * otherwise blow the column out rather than scroll inside it.
 */
.woocommerce-MyAccount-content {
	min-width: 0;
}

/*
 * The logged-out gate. Scoped to `.woocommerce-form-login`, WooCommerce's own
 * class for this one form, rather than to inputs under `.woocommerce-account`.
 *
 * ⛔ That distinction is the whole safety argument. The licence page also
 * contains a form — the site-release action in licence-sites-page.php — so a
 * rule like `.woocommerce-account input {}` would restyle the mu-plugin's
 * controls. The login form is markup a logged-IN customer never sees, so it
 * cannot collide with the licence endpoint by construction.
 */
.woocommerce-form-login {
	max-width: 26rem;
	border: 1px solid var(--sr-rule);
	border-radius: var(--sr-radius);
	padding: 1.25rem;
	background: var(--sr-bg-soft);
}

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

.woocommerce-form-login label {
	display: block;
	margin-bottom: 0.25rem;
	font-weight: 600;
}

.woocommerce-form-login input[type="text"],
.woocommerce-form-login input[type="password"] {
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--sr-rule);
	border-radius: var(--sr-radius);
	background: var(--sr-bg);
	color: var(--sr-ink);
	font: inherit;
}

/* ---------------------------------------------------------------------------
   THE RENEWAL ROUTE (Phase 4c) — /my-account/renew/.

   Theme markup, authored here, so this section may style its own descendants.
--------------------------------------------------------------------------- */

.sr-renew__title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
	line-height: 1.25;
}

.sr-renew__terms {
	margin: 0 0 var(--sr-gap);
	max-width: var(--sr-measure);
	color: var(--sr-ink-soft);
}

.sr-renew__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--sr-gap);
}

.sr-renew__plan {
	border: 1px solid var(--sr-rule);
	border-radius: var(--sr-radius);
	background: var(--sr-bg);
	padding: 1.25rem;
}

.sr-renew__plan-name {
	margin: 0 0 0.5rem;
	font-size: 1.125rem;
}

.sr-renew__dates {
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
	color: var(--sr-ink-soft);
}

.sr-renew__dates li + li {
	margin-top: 0.25rem;
}

.sr-renew__unavailable {
	margin: 0;
	color: var(--sr-warn);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}