/*  The account area — the small number of rules concept.css cannot supply.
 *
 *  Everything the account screens look like comes from concept.css, which is
 *  the design, copied in unchanged. This file does two things and nothing else:
 *
 *    1. it CANCELS a WooCommerce rule landing on an element the design also
 *       names, in the places where the WooCommerce class cannot come off the
 *       element because other code reads it — `woocommerce-MyAccount-navigation`
 *       (plugins, and this project's own e2e test), `form.register` and
 *       `form.lost_reset_password` (core's password-strength meter binds to
 *       them);
 *
 *    2. it gives the design's existing type scale to the two blocks that arrive
 *       from a WooCommerce hook rather than from a template, and so have no
 *       class concept.css has ever heard of.
 *
 *  A cancel sometimes has to RESTATE a concept.css declaration rather than just
 *  switch WooCommerce's off — `.f input` and `.woocommerce form .form-row
 *  .input-text` are two different selectors describing the same box, and the
 *  design's only wins if it is repeated at the weight WooCommerce chose. Where
 *  that happens below, every value is copied from concept.css and the line it
 *  came from is named. None of it is a new decision about how anything looks.
 *
 *  If you find yourself adding a rule here that draws a COMPONENT, stop: the
 *  class it should be drawing already exists in concept.css, and the fix is to
 *  make the template emit that class instead.
 */

/* ── the rail and the content column ──────────────────────────────────────
 *
 *  woocommerce-layout.css:
 *      .woocommerce-MyAccount-navigation { float:left; width:30% }
 *      .woocommerce-MyAccount-content    { float:right; width:68% }
 *
 *  concept.css never declares a width on `.acnav` or `.ac-body` — it sizes them
 *  with `.ac-grid{grid-template-columns:250px 1fr}` — so those two percentages
 *  won unopposed on the grid children. The rail rendered 75px wide (30% of
 *  250), which is a column of icons with one clipped letter beside each, and
 *  `.ac-card` then overflowed a 328px content track at 370px.
 */
.ac-grid > .acnav.woocommerce-MyAccount-navigation,
.ac-grid > .ac-body.woocommerce-MyAccount-content {
  float: none;
  width: auto;
  min-width: 0; /* a grid child's default min-width:auto is what lets a wide table push the track */
}

/* ── the notice icon, painted over the first word ─────────────────────────
 *
 *  woocommerce.css:
 *      .woocommerce-error::before, .woocommerce-info::before,
 *      .woocommerce-message::before {
 *          font-family:WooCommerce; content:"\e016"; display:inline-block;
 *          position:absolute; top:1em; left:1.5em }
 *
 *  Core reserves the room for that badge with its own `padding:1em 2em 1em 3.5em`
 *  on the box. style.css:913-920 restyles the box inside `.account-area` —
 *  `padding:14px 16px`, the design's radius and colours — and the icon, which is
 *  positioned against the box and not laid out by it, stayed exactly where it
 *  was. Measured on /my-account/edit-address/billing/: the text starts at x=424
 *  and the badge sits at x≈429-443, so every notice in the account area was
 *  rendered with a glyph stamped through its first letter — "P⊗one is a required
 *  field.", "A⊗dress changed successfully.".
 *
 *  Two ways out: reserve 63px of left padding as style.css:57-67 does for the
 *  cart's own notices, or take the icon away. The cart draws a real icon there —
 *  a wallet, a chart — that the design asks for. The concept's account screens
 *  have no notice component at all and nothing in them carries an icon, so the
 *  second is the one that matches the design, and it is the same thing
 *  style.css:124-125 already does under `.shop-main`.
 *
 *  Written at (0,2,1) so it outranks core's (0,1,1) wherever the notice lands —
 *  `.woocommerce-NoticeGroup` and a bare `<ul>` both pass through here.
 */
.account-area .woocommerce-message::before,
.account-area .woocommerce-info::before,
.account-area .woocommerce-error::before,
.acct .woocommerce-message::before,
.acct .woocommerce-info::before,
.acct .woocommerce-error::before {
  content: none;
}

/* ── the glyph on the order screen's phone and email lines ────────────────
 *
 *  woocommerce.css:
 *      .woocommerce-customer-details--phone,
 *      .woocommerce-customer-details--email { padding-left:1.5em }
 *      .woocommerce-customer-details--phone::before,
 *      .woocommerce-customer-details--email::before {
 *          font-family:WooCommerce; content:"\e037" / "\e02d";
 *          position:absolute; margin-left:-1.5em }
 *
 *  Same kind of thing as the notice badge above, one card further down the
 *  order screen: core hangs an icon-font glyph in front of the customer's
 *  email and phone. Measured on /my-account/view-order/59/ — computed
 *  `content` on the email span is a WooCommerce private-use codepoint, and it
 *  renders as an envelope beside "gold@demo.test".
 *
 *  account-order.html draws that pair as `PayPal` over a plain grey
 *  `<span class="muted">you@practice.com</span>`, with no icon anywhere in the
 *  card. The classes cannot come off the spans — they are core's own hooks and
 *  a plugin may be reading them — so the glyph is switched off instead, which
 *  is the same move, for the same reason, as the notice badge.
 *
 *  The 1.5em of left padding core reserves for the glyph goes with it.
 *  Measured: with only the `content` cancelled, the email still sat 21.75px in
 *  from the "Pay by card (demo)" line above it, so the card read as a hanging
 *  indent nothing in the design asks for.
 *
 *  Written at (0,3,0) so it outranks core's whichever way round the two
 *  stylesheets are enqueued.
 */
.account-area .woocommerce-customer-details .woocommerce-customer-details--phone,
.account-area .woocommerce-customer-details .woocommerce-customer-details--email {
  padding-left: 0;
}
.account-area .woocommerce-customer-details .woocommerce-customer-details--phone::before,
.account-area .woocommerce-customer-details .woocommerce-customer-details--email::before {
  content: none;
  margin: 0;
}

/* ── the button inside a notice ───────────────────────────────────────────
 *
 *  Found while checking the rule above. style.css:921 is
 *
 *      .account-area .woocommerce-message a,
 *      .account-area .woocommerce-info a { font-weight:600; color:var(--green-ink) }
 *
 *  which is the right colour for the link inside a sentence and reaches one
 *  element it should not: the CTA that WooCommerce puts inside the empty-orders
 *  notice, which orders.php draws as the design's `.btn`. concept.css:240-246
 *  gives `.btn` `background:var(--green-ink); color:#fff` at (0,1,0) and the
 *  rule above is (0,2,1), so on /my-account/orders/ with no orders the button
 *  rendered rgb(74,115,36) text on rgb(74,115,36) — "Browse products" was
 *  invisible, on the one control that screen exists to offer. Measured.
 *
 *  style.css belongs to another agent this round, so the colour is restated
 *  here for the button alone, at (0,3,1). Every other link in a notice keeps the
 *  green it is meant to have.
 */
.account-area .woocommerce-message a.btn,
.account-area .woocommerce-info a.btn,
.account-area .woocommerce-error a.btn {
  color: #fff;
}

/* ── the checkout's saved-address panel ───────────────────────────────────
 *
 *  inc/account.php prints the address book as a stack of the concept's own
 *  `.pick` rows (concept.css:1130-1141) — the same control the shipping methods
 *  are drawn with — so every pixel of the rows themselves is the design's.
 *
 *  The one thing the design cannot supply is the gap between the last row and
 *  the address fields underneath, because the concept has no element in this
 *  position. `.pick` carries `margin-bottom:10px`; this makes the panel as a
 *  whole sit off the fields by the 18px `.co-step-head` uses, so the spacing in
 *  that step stays the one rhythm. Nothing here draws a component.
 */
.rosen-addressbook {
  margin-bottom: 18px;
}
.rosen-addressbook p {
  margin: 0;
}

/* ── paid-order rewards, shared by the receipt and order details ─────────
 *
 * The component uses the account area's existing card, colour and progress
 * vocabulary. These rules only arrange the extra facts that do not exist in
 * the static concept: earned on this order, the post-payment wallet balance,
 * and the exact rolling-window shortfall to the next level.
 */
.rosen-order-rewards {
	position: relative;
	overflow: hidden;
	text-align: left;
	background: linear-gradient(148deg, #f7fbf0 0%, #eff7e4 62%, #e9f4d8 100%);
	border-color: #d7e8bf;
}

.rosen-order-rewards--thankyou {
	margin: 0 0 18px;
}

.rosen-order-rewards__head {
	display: flex;
	align-items: flex-start;
	gap: 13px;
}

.rosen-order-rewards__icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 13px;
	flex: none;
	color: var(--green-ink);
	background: rgba(255, 255, 255, .72);
	border: 1px solid rgba(74, 115, 36, .16);
}

.rosen-order-rewards__eyebrow {
	display: block;
	margin: 1px 0 4px;
	font: 700 11px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--green-ink);
}

.rosen-order-rewards__head h2 {
	margin: 0;
	font-size: clamp(20px, 2.4vw, 27px);
	line-height: 1.18;
	letter-spacing: -.018em;
}

.rosen-order-rewards__head p {
	margin: 7px 0 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--body);
}

.rosen-order-rewards__facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-top: 18px;
}

.rosen-order-rewards__facts > span {
	min-width: 0;
	padding: 12px 13px;
	border: 1px solid rgba(74, 115, 36, .14);
	border-radius: 11px;
	background: rgba(255, 255, 255, .64);
}

.rosen-order-rewards__facts small {
	display: block;
	margin-bottom: 3px;
	font-size: 11.5px;
	line-height: 1.3;
	color: var(--muted);
}

.rosen-order-rewards__facts strong {
	display: flex;
	align-items: center;
	gap: 7px;
	min-width: 0;
	font-size: 15.5px;
	line-height: 1.25;
	color: var(--ink);
}

.rosen-order-rewards__breakdown {
	margin-top: 16px;
	padding: 15px 16px;
	border: 1px solid #e7e7e7;
	border-radius: 10px;
	background: #fafafa;
}

.rosen-order-rewards__breakdown > strong {
	display: block;
	margin-bottom: 8px;
}

.rosen-order-rewards__breakdown ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rosen-order-rewards__breakdown li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 7px 0;
	border-top: 1px solid #ececec;
}

.rosen-order-rewards__breakdown p {
	margin: 9px 0 0;
	color: #3d4b59;
}

.rosen-order-rewards__facts strong i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex: none;
	background: var(--tier, #8a96a3);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--tier, #8a96a3) 16%, transparent);
}

.rosen-order-rewards__progress {
	margin-top: 18px;
	padding-top: 17px;
	border-top: 1px solid rgba(74, 115, 36, .16);
}

.rosen-order-rewards__goal {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 18px;
	flex-wrap: wrap;
}

.rosen-order-rewards__goal strong {
	font-size: 15px;
	color: var(--ink);
}

.rosen-order-rewards__goal span {
	font-size: 12.5px;
	color: var(--muted);
}

.rosen-order-rewards__track {
	height: 10px;
	margin: 10px 0 7px;
	overflow: hidden;
	border: 1px solid rgba(74, 115, 36, .16);
	border-radius: 999px;
	background: rgba(255, 255, 255, .78);
}

.rosen-order-rewards__track:focus-visible {
	outline: 2px solid var(--green-ink);
	outline-offset: 3px;
}

.rosen-order-rewards__track > span {
	display: block;
	height: 100%;
	min-width: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, #7fae4c, #4a7324);
}

.rosen-order-rewards__scale {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	font-size: 11.5px;
	line-height: 1.35;
	color: var(--muted);
}

.rosen-order-rewards__scale span:last-child {
	text-align: right;
}

.rosen-order-rewards__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 16px;
	font-size: 13.5px;
	font-weight: 650;
	color: var(--green-ink);
}

.rosen-order-rewards__link:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 620px) {
	.rosen-order-rewards__facts {
		grid-template-columns: 1fr;
	}

	.rosen-order-rewards__head h2 {
		font-size: 20px;
	}

	.rosen-order-rewards__goal {
		display: grid;
	}
}

/* ── the sign-in and register panels ──────────────────────────────────────
 *
 *  woocommerce.css:
 *      .woocommerce form.login, .woocommerce form.register {
 *          border:1px solid #cfc8d8; padding:20px; margin:2em 0;
 *          text-align:left; border-radius:5px }
 *
 *  concept.css's `.form` declares no border, so a second grey rectangle was
 *  drawn INSIDE each `.panel` around the fields — a border inside a border the
 *  design never has. `register` has to stay on the form: core's
 *  password-strength meter binds to `form.register #reg_password`, and
 *  `form.lost_reset_password` / `form.edit-account` are the same contract on
 *  the other two screens.
 */
.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.lost_reset_password,
.woocommerce form.edit-account {
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 0;
}

/* ── WooCommerce's own paragraphs inside the design's cards ───────────────
 *
 *  Two blocks arrive from hooks rather than from a template: the registration
 *  privacy notice (`woocommerce_register_form` → wc_registration_privacy_policy_text)
 *  and the password-strength hint. Both are required text that must not be
 *  removed; neither has a class concept.css knows. They are given the
 *  fineprint's measure so they read as part of the panel.
 */
.panel .woocommerce-privacy-policy-text p,
.panel .woocommerce-password-hint {
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
}

.panel .woocommerce-password-strength {
	margin: -6px 0 12px;
	font-size: 12.5px;
	font-weight: 600;
}

/* WooCommerce locks registration while its strength meter rates the password
   below Medium. Make that state visible: an unchanged green CTA looked live,
   so customers kept clicking a control that could not submit. */
.acct .woocommerce-form-register__submit:disabled {
	opacity: .55;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.acct .woocommerce-form-register__submit:disabled:hover,
.acct .woocommerce-form-register__submit:disabled:active,
.acct .woocommerce-form-register__submit:disabled:hover svg {
	transform: none;
	box-shadow: none;
}

/* ── registration feedback ──────────────────────────────────────────────
 * The server notice is a fallback when JavaScript is unavailable. With the
 * feedback script running it is mirrored into the registration panel, mapped
 * to its field and removed from this top slot.
 */
body.woocommerce-account:not(.logged-in) .woocommerce > .woocommerce-notices-wrapper:not(:empty) {
	max-width: 1180px;
	margin: 22px auto 0;
	padding: 0 20px;
}

body.woocommerce-account:not(.logged-in) .woocommerce > .woocommerce-notices-wrapper .woocommerce-error,
body.woocommerce-account:not(.logged-in) .woocommerce > .woocommerce-notices-wrapper .wc-block-components-notice-banner.is-error {
	margin: 0;
	padding: 14px 16px;
	border: 1px solid #f0cdc8;
	border-radius: 12px;
	background: #fdf4f3;
	color: #7f241d;
	list-style: none;
}

body.woocommerce-account:not(.logged-in) .woocommerce > .woocommerce-notices-wrapper .woocommerce-error::before,
body.woocommerce-account:not(.logged-in) .woocommerce > .woocommerce-notices-wrapper .wc-block-components-notice-banner.is-error::before {
	content: none;
}

body.woocommerce-account:not(.logged-in) .woocommerce > .woocommerce-notices-wrapper .wc-block-components-notice-banner.is-error svg {
	display: none;
}

.rosen-register-errors {
	margin: 0 0 4px;
	padding: 13px 15px;
	border: 1px solid #e6aaa4;
	border-radius: 11px;
	background: #fdf4f3;
	color: #7f241d;
}

.rosen-register-errors[hidden],
.rosen-field-error[hidden] {
	display: none;
}

.rosen-register-errors:focus {
	outline: 2px solid #a3261c;
	outline-offset: 3px;
}

.rosen-register-errors__title {
	margin: 0 0 5px;
	font-size: 14px;
	font-weight: 700;
	color: #6f1f19;
}

.rosen-register-errors ul {
	margin: 0;
	padding-left: 19px;
	font-size: 13.5px;
	line-height: 1.55;
}

.rosen-register-errors a {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.rosen-field-error {
	margin: 6px 0 0;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.45;
	color: #8e271f;
}

.rosen-field-error--consent,
.rosen-consent-note {
	margin: -6px 2px 2px;
}

.rosen-consent-note {
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--muted);
}

.acct form .form-row .input-text[aria-invalid="true"] {
	border-color: #b13a30;
	box-shadow: 0 0 0 3px rgba(177, 58, 48, .13);
}

.acct .check--block.has-error {
	outline: 2px solid #b13a30;
	outline-offset: 2px;
}

.rosen-password-rules .rosen-rule-icon {
	display: inline-grid;
	place-items: center;
	position: relative;
	width: 14px;
	height: 14px;
	border: 1.5px solid #98a3aa;
	border-radius: 50%;
	color: transparent;
	transition: color .16s, border-color .16s, background .16s;
}

.rosen-password-rules [data-state="valid"] {
	color: var(--green-ink);
}

.rosen-password-rules [data-state="valid"] .rosen-rule-icon {
	border-color: var(--green-ink);
	background: var(--green-ink);
}

.rosen-password-rules [data-state="valid"] .rosen-rule-icon::before {
	content: "";
	width: 6px;
	height: 3px;
	border-left: 1.5px solid #fff;
	border-bottom: 1.5px solid #fff;
	transform: translateY(-1px) rotate(-45deg);
}

.rosen-password-rules [data-state="invalid"] {
	color: #8e271f;
}

.rosen-password-rules [data-state="invalid"] .rosen-rule-icon {
	border-color: #b13a30;
	background: #fdf4f3;
}

.rosen-password-rules [data-state="invalid"] .rosen-rule-icon::before,
.rosen-password-rules [data-state="invalid"] .rosen-rule-icon::after {
	content: "";
	position: absolute;
	width: 7px;
	height: 1.5px;
	background: #b13a30;
	transform: rotate(45deg);
}

.rosen-password-rules [data-state="invalid"] .rosen-rule-icon::after {
	transform: rotate(-45deg);
}

/* ── a welcome credit the signed-in customer can still claim ─────────────
 *
 * This state has no static-concept equivalent: it exists only for an account
 * whose secure wallet record says the original opt-in is missing. Keep it in
 * the account vocabulary — the same soft-green wallet surface, one clear
 * action, and ordinary explanatory copy rather than an alert.
 */
.ac-welcome-claim {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 16px;
	background: linear-gradient(148deg, #f7fbf0 0%, #eff7e4 100%);
	border-color: #d7e8bf;
}

.ac-welcome-claim__icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	color: var(--green-ink);
	background: #fff;
	border: 1px solid #d7e8bf;
}

.ac-welcome-claim__copy h2 {
	margin: 0 0 5px;
	font-size: 18px;
	color: var(--ink);
}

.ac-welcome-claim__copy p {
	margin: 0;
	max-width: 68ch;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--body);
}

.rosen-welcome-claim-form {
	margin: 0;
}

.rosen-welcome-claim-form .btn {
	white-space: nowrap;
}

.ac-card--credit .rosen-welcome-claim-form {
	display: flex;
	justify-content: center;
}

@media (max-width: 820px) {
	.ac-welcome-claim {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.ac-welcome-claim .rosen-welcome-claim-form {
		grid-column: 1 / -1;
	}
}

@media (max-width: 520px) {
	.ac-welcome-claim {
		grid-template-columns: 1fr;
	}

	.ac-welcome-claim__icon {
		display: none;
	}

	.ac-welcome-claim .rosen-welcome-claim-form,
	.ac-welcome-claim .rosen-welcome-claim-form .btn,
	.ac-card--credit .rosen-welcome-claim-form .btn {
		width: 100%;
	}
}

/* ── the fields ───────────────────────────────────────────────────────────
 *
 *  woocommerce.css:
 *      .woocommerce form .form-row .input-text,
 *      .woocommerce form .form-row select        (0,3,1)
 *          { padding:.5em; border:var(--wc-form-border-width) solid
 *            var(--wc-form-border-color); border-radius:var(--wc-form-border-radius) }
 *      .woocommerce form .form-row .input-text:focus,
 *      .woocommerce form .form-row select:focus  (0,3,2) { border-color:currentColor }
 *
 *  concept.css:650 is `.f input{border:1px solid var(--line); border-radius:11px;
 *  padding:12px 14px}` at (0,1,1) and concept.css:656 `.f input:focus` at (0,2,1).
 *  Both lose, so every box on every account screen — sign in, register, reset,
 *  Account details, and both address forms — wore WooCommerce's near-black 1px /
 *  4px-radius / .5em box and focused to black instead of green.
 *
 *  The class cannot come off the element: `form-row` is what address-i18n.js
 *  sorts on and what the password-strength meter reads, and `input-text` is on
 *  every field WooCommerce draws for itself. So the design's own values are
 *  re-declared at a specificity that ties WooCommerce's, and win on source order
 *  — account.css is enqueued after woocommerce.css. This is the same cancel
 *  style.css already performs for the checkout under `.co-main`; the values
 *  below are copied from concept.css so the two surfaces cannot drift.
 *
 *  Every selector carries `form` for the same reason WooCommerce's does: without
 *  that element the selector is one step short and loses the tie.
 *
 *  And every one is written twice, because the account area has two roots. Behind
 *  a login my-account.php wraps everything in `.account-area`; signed out,
 *  form-login.php / form-lost-password.php / form-reset-password.php bring their
 *  own `<section class="section acct">` — the concept's own wrapper for those
 *  screens (concept.css:842) — and never pass through `.account-area` at all. A
 *  rule scoped to one of them silently misses half the fields the audit named.
 */
.account-area form .form-row,
.acct form .form-row {
  margin: 0;
  padding: 0; /* woocommerce.css adds 3px/6px on top of .form's own 16px gap */
}

.account-area form .form-row .input-text,
.acct form .form-row .input-text,
.account-area form .form-row select,
.acct form .form-row select,
.account-area form .form-row textarea,
.acct form .form-row textarea {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink);
  background-color: #fff;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 12px 14px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}

/* WooCommerce draws its own chevron into the select as a right-aligned
   background-image and reserves 3em for it. The box is the design's; the room
   for the arrow stays WooCommerce's, because the arrow is still theirs. */
.account-area form .form-row select,
.acct form .form-row select {
  padding-right: 3em;
}

.account-area form .form-row textarea,
.acct form .form-row textarea {
  min-height: 96px;
  resize: vertical;
}

.account-area form .form-row .input-text::placeholder,
.acct form .form-row .input-text::placeholder {
  color: #98a3aa;
}

.account-area form .form-row .input-text:focus,
.acct form .form-row .input-text:focus,
.account-area form .form-row select:focus,
.acct form .form-row select:focus,
.account-area form .form-row textarea:focus,
.acct form .form-row textarea:focus {
  outline: none;
  border-color: var(--green-ink);
  box-shadow: 0 0 0 4px rgba(140, 192, 84, .22);
}

/* `woocommerce_form_field()` wraps the control in a span. */
.account-area .woocommerce-input-wrapper,
.acct .woocommerce-input-wrapper {
  display: block;
}

/* The label and its asterisk. The design's `*` is `<abbr title="required">` in
   green; WooCommerce writes `<span class="required">` in `--wc-red`. Both are
   given the design's colour so the two spellings cannot look like two things. */
.account-area form .form-row label,
.acct form .form-row label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.account-area form .form-row label .required,
.acct form .form-row label .required,
.account-area form .form-row abbr,
.acct form .form-row abbr {
  color: var(--green-ink);
  text-decoration: none;
  border: 0;
}

/* ── the half-width pair ──────────────────────────────────────────────────
 *
 *  woocommerce-layout.css:
 *      .woocommerce form .form-row-first,
 *      .woocommerce form .form-row-last  (0,2,1) { width:47%; overflow:visible }
 *      ...form-row-first { float:left }   ...form-row-last { float:right }
 *
 *  The design's half is a column of `.form--grid`, and the column already IS
 *  half the card — 47% of that is a box with 230px of dead space beside it. The
 *  float is left over from a pre-grid layout and has nothing to do inside one.
 *
 *  This cannot be fixed by taking the classes off the address form: address-i18n.js
 *  puts them back (`field.addClass( fieldLocale.class.join(' ') )`) whenever the
 *  country changes.
 */
.account-area form .form-row-first,
.acct form .form-row-first,
.account-area form .form-row-last,
.acct form .form-row-last {
  float: none;
  width: auto;
}

/* ── the address form's rows ──────────────────────────────────────────────
 *
 *  Every other field on these screens is a `.f` div a template in this theme
 *  writes, so concept.css:646-648 lays it out directly. The two edit-address
 *  screens are the exception: their rows are `<p class="form-row">` built by
 *  `woocommerce_form_field()`, and the `f` / `f--half` on them arrives from a
 *  `woocommerce_form_field_args` filter in inc/commerce.php — a file the account
 *  work does not own.
 *
 *  So the same two concept.css declarations are restated here against the
 *  wrapper form-edit-address.php puts `.form.form--grid` on. Identical values,
 *  no second opinion about the layout: if that filter is ever re-narrowed to the
 *  checkout, this screen keeps its columns instead of collapsing.
 */
.account-area .woocommerce-address-fields__field-wrapper .form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  grid-column: 1 / -1;
}
.account-area .woocommerce-address-fields__field-wrapper .form-row-first,
.account-area .woocommerce-address-fields__field-wrapper .form-row-last {
  grid-column: auto;
}

/* select2 replaces the country and state <select> with a div it draws itself,
   so the rule above cannot reach it. Same box, so the two fields in a row are
   the same height. Copied from style.css's checkout block. */
.account-area .select2-container--default .select2-selection--single {
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
}
.account-area .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 44px;
  padding-left: 14px;
  color: var(--ink);
}
.account-area .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 44px;
}
.account-area .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--green-ink);
}

/* ══════════════════════════════════════════════════════════════════════════
   SAVED PAYMENT METHODS / DOWNLOADS

   WooCommerce ships these account endpoints as utility tables. They remain
   fully dynamic — including third-party columns and gateway-hosted fields —
   but use the same card rhythm as Orders and Addresses.
   ══════════════════════════════════════════════════════════════════════════ */

.rosen-payment-methods {
  display: grid;
  gap: 12px;
  margin: 0;
  border: 0;
  background: transparent;
}

.rosen-payment-method {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto auto;
  gap: 14px 18px;
  align-items: center;
  min-height: 96px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 8px 26px rgba(17, 21, 23, .035);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .rosen-payment-method:hover {
    transform: translateY(-2px);
    border-color: #cbd5c5;
    box-shadow: 0 14px 34px rgba(17, 21, 23, .07);
  }
}

.rosen-payment-method.default-payment-method {
  border-color: #cadcb7;
  background: linear-gradient(135deg, #fff 0%, #f7fbf1 100%);
}

.rosen-payment-method__icon,
.rosen-account-empty__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--green-soft);
  color: var(--green-ink);
}

.rosen-payment-method__body {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px 9px;
  min-width: 0;
}

.rosen-payment-method__body strong {
  grid-column: 1 / -1;
  font-size: 16px;
  font-weight: 650;
  color: var(--ink);
}

.rosen-payment-method__eyebrow {
  font-size: 10.5px;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted);
}

.rosen-payment-method__default {
  justify-self: start;
  padding: 3px 8px;
  border: 1px solid #cfe0bc;
  border-radius: 999px;
  background: #f4f9ed;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--green-ink);
}

.rosen-payment-method__expires {
  display: flex;
  flex-direction: column;
  min-width: 86px;
  padding-left: 18px;
  border-left: 1px solid var(--line);
}

.rosen-payment-method__expires span {
  font-size: 11px;
  color: var(--muted);
}

.rosen-payment-method__expires strong {
  margin-top: 2px;
  font-size: 14px;
  font-weight: 650;
  color: var(--ink);
}

.rosen-payment-method__actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
}

.rosen-payment-method__actions .button { margin: 0; }
.rosen-payment-method__actions .rosen-method-action--delete { color: #7c4444; }
.rosen-payment-method__actions .rosen-method-action--delete:hover { border-color: #d8b6b6; background: #fff8f8; }

.rosen-payment-method__meta {
  grid-column: 2 / -1;
  display: flex;
  gap: 8px 16px;
  flex-wrap: wrap;
  margin-top: -4px;
  font-size: 12px;
  color: var(--muted);
}

.rosen-payment-method__meta b { font-weight: 650; color: var(--body); }

.rosen-account-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 250px;
  padding: 34px;
  text-align: center;
  background: linear-gradient(145deg, #fff 0%, #f8faf8 100%);
}

.rosen-account-empty__icon { margin-bottom: 16px; width: 58px; height: 58px; }
.rosen-account-empty h2 { font-size: 20px; }
.rosen-account-empty p { max-width: 520px; margin: 8px auto 20px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.rosen-account-actions { display: flex; justify-content: flex-start; }
.rosen-account-actions .btn { gap: 9px; }

/* Add-payment keeps WooCommerce's #payment and list classes because its JS and
   every tokenising gateway address them. Only core's grey nested panel is
   removed. */
#add_payment_method #payment.woocommerce-Payment {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

#add_payment_method #payment .ac-card-head { margin-bottom: 18px; }
.rosen-secure-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 12px;
  font-weight: 650;
  color: var(--green-ink);
}

#add_payment_method #payment ul.rosen-payment-picks {
  display: grid;
  gap: 10px;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  list-style: none;
}

#add_payment_method #payment ul.rosen-payment-picks > li {
  margin: 0;
  padding: 0;
  border: 0;
}

#add_payment_method .pick {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  width: 100%;
  margin: 0;
}

#add_payment_method .pick > span { min-width: 0; }
#add_payment_method .pick small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--muted); }
#add_payment_method .rosen-gateway-icon { display: flex; align-items: center; justify-content: flex-end; }
#add_payment_method .rosen-gateway-icon img { max-width: 94px; max-height: 25px; width: auto; }

#add_payment_method .payment_box {
  margin: 10px 0 18px 30px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--wash);
  font-size: 13.5px;
  color: var(--body);
}

#add_payment_method .payment_box p:last-child { margin-bottom: 0; }
#add_payment_method .rosen-add-payment-method__submit { display: flex; justify-content: flex-end; }
#add_payment_method .rosen-add-payment-method__submit .btn { display: inline-flex; width: auto; gap: 9px; margin: 0; }

/* If WooCommerce ever enables digital files, its core downloads table lands in
   this card and stays readable without another redesign. */
.rosen-downloads { overflow: hidden; }
.rosen-downloads .woocommerce-table,
.rosen-downloads table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
}
.rosen-downloads th,
.rosen-downloads td { padding: 13px 12px; border-top: 1px solid var(--line); text-align: left; }
.rosen-downloads thead th { padding-top: 0; border-top: 0; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rosen-downloads .download-file a { white-space: nowrap; }

@media (max-width: 760px) {
  .rosen-payment-method {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    padding: 16px;
    gap: 12px;
  }
  .rosen-payment-method__icon { width: 44px; height: 44px; border-radius: 12px; }
  .rosen-payment-method__expires { grid-column: 2; padding-left: 0; border-left: 0; }
  .rosen-payment-method__actions { grid-column: 2 / -1; justify-content: flex-start; padding-top: 12px; border-top: 1px solid var(--line); }
  .rosen-payment-method__meta { grid-column: 2 / -1; }
}

@media (max-width: 520px) {
  .rosen-account-empty { min-height: 220px; padding: 28px 18px; }
  #add_payment_method #payment.woocommerce-Payment { padding: 17px; }
  #add_payment_method .pick { grid-template-columns: auto minmax(0, 1fr); }
  #add_payment_method .rosen-gateway-icon { grid-column: 2; justify-content: flex-start; margin-top: 7px; }
  #add_payment_method .payment_box { margin-left: 0; }
  #add_payment_method .rosen-add-payment-method__submit,
  #add_payment_method .rosen-add-payment-method__submit .btn { width: 100%; }
  #add_payment_method .rosen-add-payment-method__submit .btn { justify-content: center; }
  .rosen-secure-label { width: 100%; margin-left: 0; }
}