/**
 * account.css — the customer's half of the shop.
 *
 * Four surfaces, one stylesheet, because they share their entire vocabulary:
 *
 *   1. THE AUTH SCREEN  — login / register, lost and reset password.
 *   2. THE ACCOUNT SHELL — greeting, navigation rail, content column.
 *   3. THE ENDPOINTS    — dashboard stats, order cards, addresses, details.
 *   4. THE WISHLIST TAB — the catalogue grid, inside the account.
 *
 * THE FIELD AND THE BUTTON ARE DECLARED ONCE AND USED EVERYWHERE, and that is
 * the reason these are not four files. WooCommerce renders account forms,
 * checkout forms and the password reset through different templates with
 * overlapping class names; a `.bedi-field` that exists in two stylesheets would
 * be a `.bedi-field` that eventually looks different on the checkout.
 *
 * SPECIFICITY NOTE, because this file fights woocommerce.css in three places:
 * core styles `.woocommerce form .form-row input.input-text` at (0,3,2) and
 * `.woocommerce #respond input#submit`, `.woocommerce a.button`,
 * `.woocommerce button.button` at (0,2,1)/(0,2,2). Every rule below that
 * touches an input or a button therefore carries enough weight to win outright
 * rather than relying on load order — see the comments at each one.
 *
 * @package Bedi\Theme
 */

/* =========================================================================
 * WHY EVERY RULE BELOW IS SCOPED TWICE
 *
 * `.bedi-woo` is printed by Woo::open_wrapper() on
 * `woocommerce_before_main_content` — a hook that fires on the shop, archives
 * and the product page, and NEVER on /my-account/, which is a shortcode page
 * rendered by page.php. So every field and button rule in this stylesheet,
 * scoped under `.bedi-woo` alone, was dead code on the exact screens this
 * stylesheet exists for: the saved-address form rendered with WooCommerce's
 * own input styling, and the account buttons with core's.
 *
 * Measured rather than assumed: `.bedi-woo` matches 0 elements on
 * /my-account/, 1 on /shop/. `.woocommerce` — WooCommerce's own shortcode
 * wrapper — matches 1 on both. So each rule now names both, which fixes the
 * account screens without changing anything on the shop, and costs nothing in
 * specificity because either way it is a single class.
 *
 * (An earlier pass here concluded the opposite from `grep -c 'bedi-woo'` on
 * the page source. That counted the stylesheet HANDLE in a <link> tag, not an
 * element. Hence the measurement above.)
 * ====================================================================== */

/* =========================================================================
 * 1. THE FIELD
 * ====================================================================== */

.bedi-field {
	display: block;
	margin: 0 0 var(--bedi-space-4);
}

.bedi-field__label {
	color: var(--bedi-ink);
	display: block;
	font-size: var(--bedi-text-sm);
	font-weight: var(--bedi-weight-medium);
	margin-block-end: 6px;
}

/*
 * The asterisk is decoration; `.screen-reader-text` beside it carries the
 * meaning. Colouring it with --bedi-danger would make every required field on
 * the page read as an error state.
 *
 * (0,3,1) BECAUSE CORE IS AT (0,3,1) TOO. WooCommerce ships
 * `.woocommerce form .form-row .required { color: red; ... }`, and the first
 * version of this rule was `.bedi-field__label .required` at (0,2,0) — which
 * lost outright anywhere the form sat inside a `.woocommerce` wrapper, so the
 * asterisks that were supposed to be quiet grey punctuation came out red and
 * every required field on the account screens read as a validation error
 * before anything had been typed.
 *
 * Matching (0,3,1) is enough because this file is enqueued with bedi-woo as a
 * declared dependency and therefore always loads after it — but the
 * `.woocommerce` variant is listed explicitly rather than relying on that,
 * since `.bedi-auth` and `.bedi-woo` are the two wrappers these forms actually
 * render inside.
 */
.bedi-field__label .required,
.woocommerce .bedi-field__label .required,
.bedi-woo .bedi-field__label .required,
.bedi-auth .bedi-field__label .required,
.bedi-authmodal .bedi-field__label .required {
	color: var(--bedi-ink-muted);
	text-decoration: none;
}

/*
 * .bedi-authmodal IS LISTED BESIDE .bedi-auth ON EVERY INPUT RULE BELOW, AND
 * LEAVING IT OFF IS WHAT MADE THE SIGN-IN DIALOG LOOK BROKEN.
 *
 * The field rules are scoped to an ancestor — .bedi-woo, .woocommerce or
 * .bedi-auth — so that they can out-weigh WooCommerce's own
 * `.woocommerce form .form-row input.input-text`. The modal's root is
 * .bedi-authmodal, which is none of those, so not one of them matched inside
 * it: every input in the dialog rendered at the browser default, 2px inset
 * border, 2px padding, no radius, 26px tall. Beside the phone shell — which is
 * styled, because .bedi-otp__phone is unscoped — that read as a bordered box
 * with a second, smaller bordered box inside it and empty space left over.
 *
 * THE OBVIOUS FIX IS THE WRONG ONE. Putting class="bedi-auth" on the dialog
 * would match all of these in one edit, and would also match `.bedi-auth`
 * itself: display:grid, and above 62em a two-column split with a declared
 * height. That is the sign-in PAGE's composition, and it would be applied to a
 * dialog. This theme has already lost two rounds to exactly that — .bedi-panel
 * and .bedi-authmodal__panel — so the scope is widened per rule instead, and
 * only on the rules that style a control.
 */
.bedi-field__control {
	display: block;
	position: relative;
}

/*
 * (0,3,2): `.woocommerce form .form-row input.input-text` is core's strongest
 * input selector at the same weight, and this is declared later. Matching
 * rather than exceeding is deliberate — a rule at (0,4,x) here would have to be
 * matched again by every future override of it.
 */
.bedi-woo .bedi-field .bedi-field__input,
.woocommerce .bedi-field .bedi-field__input,
.bedi-auth .bedi-field .bedi-field__input,
.bedi-authmodal .bedi-field .bedi-field__input {
	appearance: none;
	background-color: var(--bedi-surface);
	block-size: 48px;
	border: var(--bedi-border-width) solid var(--bedi-rule);
	border-radius: var(--bedi-radius-lg);
	box-shadow: none;
	color: var(--bedi-ink);
	font-family: var(--bedi-font-body);
	font-size: var(--bedi-text-lg);
	inline-size: 100%;
	margin: 0;
	padding-inline: 14px;
	transition:
		border-color var(--bedi-dur-micro) var(--bedi-ease-out),
		box-shadow var(--bedi-dur-micro) var(--bedi-ease-out);
}
.bedi-woo .bedi-field .bedi-field__input:hover,
.woocommerce .bedi-field .bedi-field__input:hover,
.bedi-auth .bedi-field .bedi-field__input:hover,
.bedi-authmodal .bedi-field .bedi-field__input:hover {
	border-color: var(--bedi-rule-strong);
}

/*
 * A ring, not an outline, and the reason is the reveal button: it sits INSIDE
 * the control's box, so an outline at offset 0 would be drawn over it. A
 * box-shadow ring is painted under the field's own children.
 */
.bedi-woo .bedi-field .bedi-field__input:focus,
.woocommerce .bedi-field .bedi-field__input:focus,
.bedi-auth .bedi-field .bedi-field__input:focus,
.bedi-authmodal .bedi-field .bedi-field__input:focus {
	border-color: var(--bedi-accent);
	box-shadow: 0 0 0 3px rgba(45, 129, 255, 0.18);
	outline: none;
}

.bedi-field__input::placeholder {
	color: var(--bedi-rule-strong);
}

.bedi-field__hint {
	color: var(--bedi-ink-muted);
	display: block;
	font-size: var(--bedi-text-sm);
	margin-block-start: 6px;
}

.bedi-field__error {
	color: var(--bedi-danger);
	display: block;
	font-size: var(--bedi-text-sm);
	margin-block-start: 6px;
}

/* A field with a control inside it needs room for the control. */
.bedi-field__control--reveal .bedi-field__input {
	padding-inline-end: 46px;
}

/* :not([hidden]) for the same reason as .bedi-strength below: account.js
   renders this eye with `hidden` and unhides it once it has bound the toggle,
   and `display: grid` here was overriding the UA's [hidden] rule — so the
   button painted as a live control that did nothing until the script ran. */
.bedi-field__reveal:not([hidden]) {
	appearance: none;
	background: none;
	block-size: 36px;
	border: 0;
	border-radius: var(--bedi-radius-md);
	color: var(--bedi-ink-muted);
	cursor: pointer;
	display: grid;
	inline-size: 36px;
	inset-block-start: 50%;
	inset-inline-end: 6px;
	padding: 0;
	place-items: center;
	position: absolute;
	transform: translateY(-50%);
	transition: color var(--bedi-dur-micro) var(--bedi-ease-out);
}

.bedi-field__reveal:hover { color: var(--bedi-ink); }

.bedi-field__reveal:focus-visible {
	outline: 3px solid var(--bedi-accent);
	outline-offset: 0;
}

/* Both glyphs share one grid cell, so the swap costs no layout. */
.bedi-field__reveal svg { grid-area: 1 / 1; }
.bedi-field__reveal .bedi-field__eye-off { display: none; }
.bedi-field__reveal[aria-pressed="true"] .bedi-field__eye { display: none; }
.bedi-field__reveal[aria-pressed="true"] .bedi-field__eye-off { display: block; }

/* =========================================================================
 * 2. THE STRENGTH METER
 *
 * Advisory only. Nothing here blocks a submission — WordPress enforces its own
 * policy server-side, and a meter that refuses a form is a meter that has
 * started making security decisions in a browser the attacker controls.
 * ====================================================================== */

/* Same as above. The meter ships `hidden` and is revealed once there is a
   password to measure; `display: block` beat [hidden], so an empty grey bar sat
   under the password field permanently. */
.bedi-strength:not([hidden]) {
	display: block;
	margin-block-start: 8px;
}

.bedi-strength__track {
	background-color: var(--bedi-rule);
	block-size: 4px;
	border-radius: var(--bedi-radius-pill);
	display: block;
	overflow: hidden;
}

.bedi-strength__fill {
	background-color: var(--bedi-rule-strong);
	block-size: 100%;
	display: block;
	inline-size: 0;
	transition:
		background-color var(--bedi-dur) var(--bedi-ease-out),
		inline-size var(--bedi-dur) var(--bedi-ease-in);
}

.bedi-strength__text {
	color: var(--bedi-ink-muted);
	display: block;
	font-size: var(--bedi-text-sm);
	margin-block-start: 6px;
}

.bedi-strength[data-level="1"] .bedi-strength__fill { background-color: var(--bedi-danger); inline-size: 25%; }
.bedi-strength[data-level="2"] .bedi-strength__fill { background-color: #E8A33D;            inline-size: 50%; }
.bedi-strength[data-level="3"] .bedi-strength__fill { background-color: var(--bedi-accent);  inline-size: 75%; }
.bedi-strength[data-level="4"] .bedi-strength__fill { background-color: var(--bedi-ok);      inline-size: 100%; }

/* =========================================================================
 * 3. THE SWITCH
 *
 * The checkbox IS the control — it is visually hidden but present, focusable
 * and in the tab order, and the track/knob are drawn beside it. Replacing it
 * with a div and a click handler is how "remember me" stops working in a
 * password manager.
 * ====================================================================== */

.bedi-switch {
	align-items: center;
	column-gap: 10px;
	cursor: pointer;
	display: inline-flex;
	margin: 0;
}

.bedi-switch__input {
	block-size: 1px;
	clip-path: inset(50%);
	inline-size: 1px;
	margin: 0;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
}

.bedi-switch__track {
	background-color: var(--bedi-rule);
	block-size: 24px;
	border-radius: var(--bedi-radius-pill);
	display: block;
	flex: 0 0 auto;
	inline-size: 42px;
	padding: 3px;
	transition: background-color var(--bedi-dur) var(--bedi-ease-in);
}

.bedi-switch__knob {
	background-color: var(--bedi-surface);
	block-size: 18px;
	border-radius: var(--bedi-radius-round);
	box-shadow: 0 1px 3px rgba(37, 37, 49, 0.28);
	display: block;
	inline-size: 18px;
	transition: transform var(--bedi-dur) var(--bedi-ease-in);
}

.bedi-switch__input:checked + .bedi-switch__track { background-color: var(--bedi-accent); }
.bedi-switch__input:checked + .bedi-switch__track .bedi-switch__knob { transform: translateX(18px); }

.bedi-switch__input:focus-visible + .bedi-switch__track {
	outline: 3px solid var(--bedi-accent);
	outline-offset: 2px;
}

.bedi-switch__label {
	color: var(--bedi-ink);
	font-size: var(--bedi-text-sm);
}

/* =========================================================================
 * 4. THE BUTTON
 *
 * (0,3,2) on the WooCommerce surfaces — enough to beat core's
 * `.woocommerce button.button.alt` at (0,3,1) outright rather than on order.
 * ====================================================================== */

.bedi-btn {
	align-items: center;
	appearance: none;
	block-size: 48px;
	border: var(--bedi-border-width) solid transparent;
	border-radius: var(--bedi-radius-lg);
	column-gap: 8px;
	cursor: pointer;
	display: inline-flex;
	font-family: var(--bedi-font-display);
	font-size: var(--bedi-text-lg);
	font-weight: var(--bedi-weight-medium);
	justify-content: center;
	padding-inline: 22px;
	position: relative;
	text-align: center;
	text-decoration: none;
	transition:
		background-color var(--bedi-dur-micro) var(--bedi-ease-out),
		border-color var(--bedi-dur-micro) var(--bedi-ease-out),
		box-shadow var(--bedi-dur) var(--bedi-ease-out),
		color var(--bedi-dur-micro) var(--bedi-ease-out),
		transform var(--bedi-dur-micro) var(--bedi-ease-out);
}
.bedi-woo .bedi-btn.bedi-btn--primary,
.woocommerce .bedi-btn.bedi-btn--primary,
.bedi-auth .bedi-btn.bedi-btn--primary,
.bedi-authmodal .bedi-btn.bedi-btn--primary {
	background-color: var(--bedi-accent);
	border-color: transparent;
	color: var(--bedi-on-accent);
}
.bedi-woo .bedi-btn.bedi-btn--primary:hover,
.woocommerce .bedi-btn.bedi-btn--primary:hover,
.bedi-auth .bedi-btn.bedi-btn--primary:hover,
.bedi-authmodal .bedi-btn.bedi-btn--primary:hover,
.bedi-woo .bedi-btn.bedi-btn--primary:focus-visible,
.woocommerce .bedi-btn.bedi-btn--primary:focus-visible,
.bedi-auth .bedi-btn.bedi-btn--primary:focus-visible,
.bedi-authmodal .bedi-btn.bedi-btn--primary:focus-visible {
	background-color: var(--bedi-accent-strong);
	box-shadow: 0 10px 24px -14px rgba(45, 129, 255, 0.8);
	color: var(--bedi-on-accent);
	transform: translateY(-1px);
}
.bedi-woo .bedi-btn.bedi-btn--ghost,
.woocommerce .bedi-btn.bedi-btn--ghost,
.bedi-auth .bedi-btn.bedi-btn--ghost,
.bedi-authmodal .bedi-btn.bedi-btn--ghost {
	background-color: var(--bedi-surface);
	border-color: var(--bedi-rule);
	color: var(--bedi-ink);
}
.bedi-woo .bedi-btn.bedi-btn--ghost:hover,
.woocommerce .bedi-btn.bedi-btn--ghost:hover,
.bedi-auth .bedi-btn.bedi-btn--ghost:hover,
.bedi-authmodal .bedi-btn.bedi-btn--ghost:hover {
	border-color: var(--bedi-navy);
	color: var(--bedi-navy);
}

.bedi-btn:active { transform: translateY(0) scale(0.985); }

.bedi-btn--primary:focus-visible { outline: 3px solid var(--bedi-navy); outline-offset: 3px; }
.bedi-btn--ghost:focus-visible   { outline: 3px solid var(--bedi-accent); outline-offset: 2px; }

.bedi-btn--sm {
	block-size: 36px;
	font-size: var(--bedi-text-sm);
	padding-inline: 14px;
}

/* --- the in-button loader --- */

.bedi-btn__spinner { display: none; }

.bedi-btn.is-loading { pointer-events: none; }
.bedi-btn.is-loading .bedi-btn__label { visibility: hidden; }

/*
 * Absolutely centred rather than swapped into the flow, so the button's width
 * cannot change when the label is hidden. That is what stops the form jumping
 * at the exact moment the customer is waiting on it.
 */
.bedi-btn.is-loading .bedi-btn__spinner {
	align-items: center;
	column-gap: 5px;
	display: inline-flex;
	inset: 0;
	justify-content: center;
	position: absolute;
}

.bedi-btn__spinner span {
	animation: bedi-btn-dots 900ms var(--bedi-ease-out) infinite;
	background-color: currentColor;
	block-size: 5px;
	border-radius: var(--bedi-radius-round);
	inline-size: 5px;
}

.bedi-btn__spinner span:nth-child(2) { animation-delay: 120ms; }
.bedi-btn__spinner span:nth-child(3) { animation-delay: 240ms; }

@keyframes bedi-btn-dots {
	0%, 100% { opacity: 0.35; }
	50%      { opacity: 1; }
}

/* =========================================================================
 * 5. THE AUTH SCREEN
 * ====================================================================== */

/*
 * ONE PANEL, SPLIT — NOT TWO CARDS SIDE BY SIDE.
 *
 * The old screen was a tinted box of selling points next to a bordered form
 * box, separated by a gap: two objects competing for the same attention, each
 * with its own edge, and the reason it read as assembled rather than designed.
 *
 * Every reference worth copying does the same thing instead — lululemon,
 * Depop, Zillow, Origin, Deel, Klaviyo, Copilot — a SINGLE surface divided
 * down the middle, visual on one side, form on the other, no gap and no inner
 * borders. The split itself is the composition.
 *
 * `overflow: clip` rather than `hidden`: it keeps the corners honest without
 * creating a scroll container, which on a panel holding a focusable form
 * matters — a hidden ancestor will scroll itself when a field takes focus and
 * shift the whole panel by a few pixels.
 */
.bedi-auth {
	background-color: transparent;
	/*
	 * NO BORDER ON THE SECTION, AND NO RADIUS EITHER.
	 *
	 * The outer hairline made the whole screen one boxed object, so the dark
	 * visual half read as a panel inside a frame rather than as a thing in its
	 * own right. The client asked for the frame gone and the left column
	 * rounded on all four corners — which is only possible once the wrapper
	 * stops clipping it.
	 *
	 * `overflow` therefore goes too: it existed solely to round the halves
	 * against a shared edge that no longer exists.
	 */
	border: 0;
	display: grid;
	/*
	 * NO WIDTH CAP OF ITS OWN. It used to stop at 1040px while everything else
	 * on the site runs to the 1280px content width, so the sign-in screen sat
	 * visibly narrower than the header above it and the footer below it. The
	 * container already does the measuring; this just fills it.
	 */
	margin-inline: auto;
}

@media (min-width: 62em) {
	/*
	 * A DECLARED HEIGHT, not one the form happens to produce. Left to the
	 * content the panel was 411px — short enough that the visual column read as
	 * a strip beside a form rather than half of a composition. The two columns
	 * are exactly half each and the box is a fixed shape the form sits inside.
	 *
	 * `:not(--narrow)` IS LOAD-BEARING, and its absence was a real bug: the
	 * lost-password screen uses the same `.bedi-auth` block with only ONE child
	 * and no visual half. It inherited the two-column grid and was squeezed
	 * into 239px — half of its own 480px — with the text wrapping a word at a
	 * time and the submit button pushed out of the 560px box. A single-column
	 * screen must not be told to make room for a column that is not there.
	 */
	.bedi-auth:not(.bedi-auth--narrow) {
		grid-template-columns: 1fr 1fr;
		min-block-size: 560px;
	}
}

/*
 * The single-column screens — lost password, reset password — have no visual
 * half to balance, so they stay narrow and centred rather than stretching one
 * short form across the full measure.
 */
.bedi-auth--narrow { max-inline-size: 480px; }

/*
 * ORDERED BELOW THE FORM ON A PHONE. A customer who came to log in should
 * reach the form without scrolling past a sales pitch; above 62em the panel
 * sits beside it, where it costs nothing.
 */
/*
 * ORDERED BELOW THE FORM ON A PHONE. A customer who came to log in should
 * reach the form without scrolling past a sales pitch; above 62em the panel
 * sits beside it, where it costs nothing.
 *
 * THE VISUAL HALF IS DARK, and it is the only dark surface in the account
 * area. That is deliberate: it gives the split an obvious front and back, so
 * the eye lands on the white half where the work is. The artwork is a
 * Higgsfield render sized with `cover` and pinned to `center`, and it sits
 * UNDER a navy wash — the wash, not the render, is what guarantees the text
 * stays legible, so a slow image or a failed request changes nothing about
 * whether the words can be read.
 */
.bedi-auth__aside {
	order: 2;
	/* Its own object now: four rounded corners, not two clipped by a parent. */
	border-radius: var(--bedi-radius-2xl);
	background-color: var(--bedi-navy);
	background-image:
		linear-gradient(160deg, rgba(7, 0, 36, 0.72) 0%, rgba(7, 0, 36, 0.92) 100%),
		var(--bedi-auth-visual, url('../img/account/auth-visual.jpg'));
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	color: var(--bedi-surface);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--bedi-space-lg);
}

@media (min-width: 62em) {
	.bedi-auth__aside {
		order: 0;
		padding: var(--bedi-space-8);
	}
}

.bedi-auth__aside-title {
	color: var(--bedi-surface);
	font-family: var(--bedi-font-display);
	font-size: var(--bedi-text-2xl);
	font-weight: var(--bedi-weight-bold);
	margin: 0 0 8px;
}

.bedi-auth__aside-lead {
	/* Not --bedi-ink-muted: that grey was chosen against white and drops to
	   about 2:1 on navy. A tint of the surface colour keeps the hierarchy
	   without failing contrast. */
	color: rgba(255, 255, 255, 0.76);
	font-size: var(--bedi-text-lg);
	margin: 0 0 var(--bedi-space-5);
}

.bedi-auth__reasons {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0 0 var(--bedi-space-5);
	padding: 0;
	row-gap: var(--bedi-space-4);
}

.bedi-auth__reason {
	align-items: start;
	color: rgba(255, 255, 255, 0.92);
	column-gap: 12px;
	display: grid;
	font-size: var(--bedi-text-lg);
	grid-template-columns: 44px minmax(0, 1fr);
	line-height: 1.45;
}

/*
 * THE CHIP IS NOW A FRAME, NOT A BACKGROUND.
 *
 * With a stroked glyph the tinted square was what made it an object. The
 * renders carry their own navy, so a second tint behind them only showed as a
 * lighter rectangle peeking out at the corners. The fill goes; a hairline at
 * one tenth opacity keeps the edge defined against the panel, and `clip`
 * rounds the image itself.
 */
.bedi-auth__reason-icon {
	block-size: 44px;
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: var(--bedi-radius-lg);
	display: grid;
	inline-size: 44px;
	overflow: clip;
	place-items: center;
}

.bedi-auth__reason-icon img {
	block-size: 100%;
	display: block;
	inline-size: 100%;
	object-fit: cover;
}

.bedi-auth__aside-note {
	color: rgba(255, 255, 255, 0.62);
	font-size: var(--bedi-text-sm);
	margin: 0;
}

/* The one link in the dark half has to be legible on navy, and the brand blue
   is not — #2D81FF on #070024 is under 3:1. White with the underline it
   already carries does the job. */
.bedi-auth__aside-note a,
.bedi-auth__aside a {
	color: var(--bedi-surface);
}

/*
 * The form half carries NO border and NO radius of its own any more — the
 * panel around it owns both. Two nested rounded rectangles with two hairlines
 * is precisely the doubled chrome this redesign set out to remove.
 *
 * Centred vertically so a short form (login) and a tall one (register) both
 * sit against the middle of the visual beside them instead of riding up.
 */
.bedi-auth__card {
	/*
	 * The form column carries no surface of its own — the page behind it is
	 * already white, and a second white box on white was only ever visible as
	 * the border that has now gone.
	 *
	 * 480px is the measure the client asked for, centred in the half rather
	 * than filling it: a login form stretched across 470px of column puts the
	 * label at one end of the eye's travel and the field at the other.
	 */
	background-color: transparent;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-inline: auto;
	max-inline-size: 480px;
	inline-size: 100%;
	padding: var(--bedi-space-lg);
}

@media (min-width: 62em) {
	.bedi-auth__card {
		padding: var(--bedi-space-8);
	}
}

.bedi-auth__title {
	color: var(--bedi-ink);
	font-family: var(--bedi-font-display);
	font-size: var(--bedi-text-2xl);
	font-weight: var(--bedi-weight-bold);
	margin: 0 0 var(--bedi-space-5);
}

.bedi-auth__lead {
	color: var(--bedi-ink-muted);
	font-size: var(--bedi-text-lg);
	margin: 0 0 var(--bedi-space-5);
}

/* --- tabs --- */

.bedi-auth__tabs {
	border-block-end: var(--bedi-border-width) solid var(--bedi-rule);
	display: flex;
	margin-block-end: var(--bedi-space-5);
	position: relative;
}

.bedi-auth__tab {
	appearance: none;
	background: none;
	border: 0;
	color: var(--bedi-ink-muted);
	cursor: pointer;
	flex: 1 1 0;
	font-family: var(--bedi-font-display);
	font-size: var(--bedi-text-lg);
	font-weight: var(--bedi-weight-medium);
	padding: 0 0 14px;
	transition: color var(--bedi-dur-micro) var(--bedi-ease-out);
}

.bedi-auth__tab[aria-selected="true"] { color: var(--bedi-ink); }
.bedi-auth__tab:hover { color: var(--bedi-ink); }

.bedi-auth__tab:focus-visible {
	border-radius: var(--bedi-radius-md);
	outline: 3px solid var(--bedi-accent);
	outline-offset: -2px;
}

/*
 * ONE element that MOVES, not a border that cross-fades. Two borders fading
 * past each other reads as blinking; one line sliding reads as the same line
 * going somewhere, which is what a tab change actually is.
 *
 * --bedi-tabx is written by account.js from the selected tab's own offset, so
 * the line tracks a two-tab strip and a three-tab strip identically.
 */
.bedi-auth__tabline {
	background-color: var(--bedi-accent);
	block-size: 2px;
	border-radius: var(--bedi-radius-pill);
	inline-size: var(--bedi-tabw, 50%);
	inset-block-end: -1px;
	inset-inline-start: 0;
	position: absolute;
	transform: translateX(var(--bedi-tabx, 0));
	transition: transform var(--bedi-dur) var(--bedi-ease-in);
}

/*
 * THE CARD STOPS CHANGING SIZE WHEN THE TAB CHANGES.
 *
 * `[hidden] { display: none }` took the inactive panel out of layout, so the
 * card was only ever as tall as whichever form was showing — and login and
 * register are different heights, so every tab press resized the whole box and
 * shoved the panel beside it. That is the jump the client reported.
 *
 * Both panels now sit in ONE grid cell. The card is sized by the taller of the
 * two at all times, the inactive one is hidden with visibility rather than
 * removed, and nothing moves when the tabs change.
 *
 * `visibility: hidden` and not `opacity: 0`: an invisible panel must also be
 * unreachable, and opacity alone leaves its fields in the tab order and its
 * buttons clickable.
 */
.bedi-auth__panels {
	display: grid;
	grid-template-areas: 'authstack';
}

.bedi-auth__panel {
	grid-area: authstack;
	min-inline-size: 0;
}

.bedi-auth__panel[hidden] {
	/* Beats the UA's `[hidden] { display: none }` without leaving a gap. */
	display: block;
	pointer-events: none;
	visibility: hidden;
	/*
	 * OPACITY AS WELL, AND IT IS NOT BELT-AND-BRACES — it fixes a real leak.
	 *
	 * WooCommerce ships `.woocommerce form .form-row .required { visibility:
	 * visible; }` to stop themes hiding its required markers. Inside a panel
	 * hidden with `visibility`, that rule wins for that one span: a child may
	 * always turn visibility back ON. So the register form's red asterisk was
	 * painting straight through the hidden panel and landing on top of the
	 * method pill — measured at 6x17px over the pill's own box, which is the
	 * stray red mark that got reported.
	 *
	 * `opacity` cannot be escaped the same way: it applies to the subtree as a
	 * composited whole and no descendant can opt out of it. Visibility stays
	 * for assistive technology and the tab order; opacity guarantees nothing
	 * paints.
	 */
	opacity: 0;
}

.bedi-auth__panel.is-in {
	animation: bedi-auth-in 220ms var(--bedi-ease-in) 1;
}

@keyframes bedi-auth-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.bedi-auth__row {
	align-items: center;
	column-gap: var(--bedi-space-4);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-block-end: var(--bedi-space-5);
	row-gap: var(--bedi-space-2);
}

.bedi-auth__forgot,
.bedi-auth__back a {
	color: var(--bedi-accent);
	font-size: var(--bedi-text-sm);
	text-decoration: none;
}

.bedi-auth__forgot:hover,
.bedi-auth__back a:hover { text-decoration: underline; }

.bedi-auth__back {
	margin: var(--bedi-space-4) 0 0;
	text-align: center;
}

.bedi-auth .bedi-btn--primary,
.bedi-authmodal .bedi-btn--primary { inline-size: 100%; }

/* =========================================================================
 * 6. THE ACCOUNT SHELL
 * ====================================================================== */

.bedi-account {
	display: flex;
	flex-direction: column;
	gap: var(--bedi-space-md);
}

.bedi-account__head {
	align-items: center;
	column-gap: var(--bedi-space-4);
	display: flex;
}

.bedi-account__avatar {
	background-color: var(--bedi-bg-2);
	block-size: 52px;
	border-radius: var(--bedi-radius-round);
	color: var(--bedi-accent);
	display: grid;
	flex: 0 0 auto;
	inline-size: 52px;
	overflow: hidden;
	place-items: center;
	position: relative;
}

/*
 * The initial and the image share one cell. The initial shows through while
 * the avatar loads and stays visible behind a transparent one — which is why
 * the image is not absolutely positioned over it but simply stacked.
 */
.bedi-account__initial {
	font-family: var(--bedi-font-display);
	font-size: var(--bedi-text-xl);
	font-weight: var(--bedi-weight-bold);
	grid-area: 1 / 1;
}

.bedi-account__avatar-img {
	block-size: 100%;
	grid-area: 1 / 1;
	inline-size: 100%;
	object-fit: cover;
}

.bedi-account__who { min-inline-size: 0; }

.bedi-account__hello {
	color: var(--bedi-ink);
	display: block;
	font-family: var(--bedi-font-display);
	font-size: var(--bedi-text-2xl);
	font-weight: var(--bedi-weight-bold);
	line-height: 1.2;
	/* It is an <h1> now (my-account.php), so the UA's heading margins have to
	   be cleared — the header's own flex gap owns this spacing. */
	margin: 0;
	overflow-wrap: anywhere;
}

/*
 * THE GENERIC PAGE TITLE IS HIDDEN ON THIS SCREEN.
 *
 * page.php prints "ჩემი ანგარიში" above the dashboard, which duplicates the
 * greeting directly beneath it — the client asked whether that title was
 * needed. It is not, and it is removed rather than merely restyled.
 *
 * This is safe for structure only BECAUSE `.bedi-account__hello` is now the
 * page's real <h1>. Hiding a heading without providing another one would leave
 * the document with none.
 *
 * HENCE `.logged-in`, which is not decoration. `.woocommerce-account` is on the
 * body for the LOGGED-OUT login screen too, and that screen renders the login
 * form — not my-account.php, so no greeting and no replacement heading. Scoped
 * to the dashboard alone, the login page keeps its "ჩემი ანგარიში" title, which
 * there is the only thing naming the page.
 */
.woocommerce-account.logged-in .bedi-entry__header {
	display: none;
}

/*
 * THE SIGN-IN SCREEN'S TITLE GOES TOO — BUT ONLY TO THE EYE.
 *
 * "ჩემი ანგარიში" sat above a panel whose own heading already says
 * "ბედიშოპის ანგარიში", so the page named itself twice before asking for a
 * phone number. The client asked for it gone visually.
 *
 * VISUALLY, and not `display: none`, because this is the page's only <h1>
 * when nobody is signed in. Removing it outright would leave the document
 * headingless — bad for a screen reader moving by heading, and bad for the
 * search result that names this page. The clip-rect pattern is the same one
 * `.screen-reader-text` uses elsewhere in this theme.
 */
.woocommerce-account:not(.logged-in) .bedi-entry__title {
	block-size: 1px;
	clip-path: inset(50%);
	inline-size: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
}

/* The header wrapper collapses with it, so no gap is left behind. */
.woocommerce-account:not(.logged-in) .bedi-entry__header {
	margin: 0;
	padding: 0;
}

/*
 * AND A LITTLE AIR BACK.
 *
 * `.bedi-entry--singular` is a flex column whose `gap` used to separate the
 * page title from the dashboard. Hiding the title removes it from the flex
 * flow entirely, and the gap goes with it — so the avatar and greeting ended
 * up sitting straight under the site header with only the main element's own
 * 32px above them. This puts the same measure back as padding on the wrapper,
 * which is what the client asked for.
 */
.woocommerce-account.logged-in .bedi-account {
	padding-block-start: var(--bedi-space-4);
}

.bedi-account__email {
	color: var(--bedi-ink-muted);
	display: block;
	font-size: var(--bedi-text-sm);
	margin-block-start: 2px;
	overflow-wrap: anywhere;
}

.bedi-account__layout {
	display: grid;
	gap: var(--bedi-space-lg);
}

@media (min-width: 62em) {
	.bedi-account__layout {
		align-items: start;
		grid-template-columns: 260px minmax(0, 1fr);
	}

	/* The rail follows the customer down a long order list. Same offset as the
	   product rail, for the same sticky header. */
	.bedi-accnav {
		position: sticky;
		inset-block-start: var(--bedi-prod-rail-top, 112px);
	}
}

.bedi-account__content { min-inline-size: 0; }

.bedi-account__lead {
	color: var(--bedi-ink-muted);
	font-size: var(--bedi-text-lg);
	margin: 0 0 var(--bedi-space-5);
}

.bedi-account__section + .bedi-account__section { margin-block-start: var(--bedi-space-lg); }

.bedi-account__section-head {
	align-items: center;
	column-gap: var(--bedi-space-4);
	display: flex;
	justify-content: space-between;
	margin-block-end: var(--bedi-space-4);
}

.bedi-account__section-title {
	color: var(--bedi-ink);
	font-family: var(--bedi-font-display);
	font-size: var(--bedi-text-xl);
	font-weight: var(--bedi-weight-bold);
	margin: 0;
}

.bedi-account__count {
	color: var(--bedi-ink-muted);
	font-size: var(--bedi-text-sm);
	margin: 0;
}

.bedi-account__more {
	align-items: center;
	color: var(--bedi-accent);
	column-gap: 4px;
	display: inline-flex;
	font-size: var(--bedi-text-sm);
	text-decoration: none;
}

.bedi-account__more span { display: inline-flex; transition: transform var(--bedi-dur) var(--bedi-ease-in); }
.bedi-account__more:hover span { transform: translateX(3px); }

/* =========================================================================
 * 7. THE NAVIGATION
 * ====================================================================== */

/*
 * `.bedi-accnav ul` IS LOAD-BEARING, AND THE PADDING BELOW PROVES IT.
 *
 * base.css resets list chrome with `ul[class], ol[class] { margin: 0; padding: 0 }`
 * — an attribute selector and a type, which is (0,1,1). A bare
 * `.bedi-accnav__list` is (0,1,0) and loses to it outright, so every padding
 * this rule has ever declared was discarded and the rows sat flush against the
 * card's border and inside its 18px corner radius. It looked like a design
 * decision; it was a rule that parsed, matched and lost.
 *
 * (0,2,1) here, which beats the reset on specificity rather than on the
 * accident of which stylesheet is enqueued last.
 */
.bedi-accnav ul.bedi-accnav__list {
	background-color: var(--bedi-surface);
	border: var(--bedi-border-width) solid var(--bedi-rule);
	border-radius: var(--bedi-radius-xl);
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	/*
	 * 12px, up from 8px: at an 18px radius the old padding let the first and
	 * last rows crowd the card's own curve. Plus the 5px the client asked for
	 * on top — at 17px the active row's rounded highlight clears the card's
	 * border by enough to read as sitting inside it rather than against it,
	 * which is the whole reason this card has padding at all.
	 */
	padding: calc(var(--bedi-space-3) + 5px);
	row-gap: 2px;
}

.bedi-accnav__link {
	align-items: center;
	block-size: 44px;
	border-radius: var(--bedi-radius-lg);
	color: var(--bedi-ink);
	column-gap: 12px;
	display: flex;
	font-size: var(--bedi-text-lg);
	padding-inline: 12px;
	text-decoration: none;
	transition:
		background-color var(--bedi-dur-micro) var(--bedi-ease-out),
		color var(--bedi-dur-micro) var(--bedi-ease-out);
}

.bedi-accnav__link:hover { background-color: var(--bedi-surface-2); }

.bedi-accnav__icon {
	color: var(--bedi-ink-muted);
	display: inline-flex;
	flex: 0 0 auto;
	transition: color var(--bedi-dur-micro) var(--bedi-ease-out);
}

.bedi-accnav__label {
	min-inline-size: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bedi-accnav__count {
	background-color: var(--bedi-bg-2);
	border-radius: var(--bedi-radius-pill);
	color: var(--bedi-ink-muted);
	font-size: var(--bedi-text-xs);
	font-variant-numeric: tabular-nums;
	font-weight: var(--bedi-weight-medium);
	margin-inline-start: auto;
	padding: 2px 8px;
}

/*
 * The active row is a filled tint, not a left border. A border would sit
 * outside the 12px radius and produce a square edge against a rounded row,
 * which is the detail that makes a hand-built menu look unfinished.
 */
.woocommerce-MyAccount-navigation-link.is-active > .bedi-accnav__link,
.bedi-accnav__link[aria-current="page"] {
	background-color: var(--bedi-bg-2);
	color: var(--bedi-navy);
	font-weight: var(--bedi-weight-medium);
}

.woocommerce-MyAccount-navigation-link.is-active > .bedi-accnav__link .bedi-accnav__icon,
.bedi-accnav__link[aria-current="page"] .bedi-accnav__icon {
	color: var(--bedi-accent);
}

.bedi-accnav__link:focus-visible {
	outline: 3px solid var(--bedi-accent);
	outline-offset: -2px;
}

/* Log out is the one row that should not look like a destination. */
.woocommerce-MyAccount-navigation-link--customer-logout > .bedi-accnav__link {
	color: var(--bedi-ink-muted);
}

/* =========================================================================
 * 7b. THE PHONE ACCOUNT: TWO SCREENS, NOT ONE
 *
 * Above 48em nothing here applies and the account stays what it was — a rail
 * beside a panel. Below it the page behaves the way a phone account is expected
 * to: the root is a list of destinations, tapping one opens that section alone
 * under a back bar, and the back bar returns to the list.
 *
 * Which of the two is showing is decided in PHP and written onto the wrapper as
 * data-bedi-account-view, because `is_wc_endpoint_url()` is a server fact and
 * CSS has no way to ask it.
 * ====================================================================== */

/* Desktop never shows either of these; the phone block below turns them on. */
.bedi-account__back { display: none; }
.bedi-accnav__chev { display: none; }

@media (max-width: 47.9375em) {

	/*
	 * SCREEN ONE — the greeting and the list, and nothing else. The dashboard's
	 * own content (the stats, the recent order) is not hidden because it is
	 * unwanted; it is hidden because it is the thing that made this screen a
	 * long scroll with the list buried at the bottom of it.
	 */
	.bedi-account[data-bedi-account-view="dashboard"] .bedi-account__content {
		display: none;
	}

	/*
	 * SCREEN TWO — the section alone. The rail goes because it IS screen one,
	 * and the greeting goes because the back bar replaces it: "გამარჯობა, ანა"
	 * above "ვიშლისტი" says the less useful of the two things twice.
	 */
	.bedi-account[data-bedi-account-view="endpoint"] .bedi-accnav,
	.bedi-account[data-bedi-account-view="endpoint"] .bedi-account__head {
		display: none;
	}

	/*
	 * NO MARGIN UNDER THIS, AND THAT IS THE FIX FOR THE GAP.
	 *
	 * .bedi-account is a flex column with `gap: --bedi-space-md`, so the space
	 * after this bar was already paid for; the margin added a second one and
	 * the title floated in the middle of nothing. The padding below is what the
	 * divider needs to sit off the text, not spacing in its own right.
	 *
	 * The rule goes full bleed the same way the menu list does — a hairline
	 * that stops 20px short of both edges reads as an underlined paragraph
	 * rather than as the bottom of a title bar.
	 */
	.bedi-account__back {
		align-items: center;
		border-block-end: var(--bedi-border-width) solid var(--bedi-rule);
		column-gap: var(--bedi-space-2);
		display: flex;
		margin-inline: calc(var(--bedi-gutter) * -1);
		padding-block-end: var(--bedi-space-3);
		padding-inline: var(--bedi-gutter);
	}

	/*
	 * The whole column tightens. --bedi-space-md between a title bar, a count
	 * and a grid is desktop spacing on a 375px screen, and it was the other
	 * half of "too big gaps in the header".
	 */
	.bedi-account,
	.bedi-account__layout {
		gap: var(--bedi-space-4);
	}

	.bedi-account__section-head {
		margin-block-end: var(--bedi-space-3);
	}

	/*
	 * NO AIR ABOVE THE BACK BAR.
	 *
	 * `.woocommerce-account.logged-in .bedi-account` carries
	 * `padding-block-start: --bedi-space-4`, added to replace the flex gap that
	 * disappeared with the hidden page title. That is right for the dashboard,
	 * where the avatar would otherwise sit straight under the site header. On
	 * an endpoint the first thing in the column is a title bar, and a title bar
	 * floating 16px below the chrome on top of main's own 32px reads as a
	 * mistake.
	 *
	 * (0,4,0) against that rule's (0,3,0), so it wins on specificity — the two
	 * live in the same file and source order alone would be luck.
	 */
	.woocommerce-account.logged-in .bedi-account[data-bedi-account-view="endpoint"] {
		padding-block-start: 0;
	}

	/*
	 * A 44px target pulled back by its own padding, so the arrow still lines up
	 * with the gutter the title below it uses. An icon button that is only as
	 * big as its icon is the single most missed tap target on a phone.
	 */
	.bedi-account__back-link {
		align-items: center;
		color: var(--bedi-ink);
		display: flex;
		flex: none;
		justify-content: center;
		margin-inline-start: -10px;
		min-block-size: 44px;
		min-inline-size: 44px;
		text-decoration: none;
	}

	.bedi-account__back-title {
		font-size: var(--bedi-text-xl);
		font-weight: var(--bedi-weight-bold);
		margin: 0;
		min-inline-size: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/*
	 * THE LIST GOES FULL BLEED AND LOSES ITS CARD.
	 *
	 * A rounded bordered card with 12px of padding is right for a 260px rail
	 * sitting beside a panel. As the whole screen it is a box drawn around the
	 * only thing on it, inset from both edges for no reason — so the border and
	 * the radius come off, the negative margin takes it to the glass, and the
	 * rows get the gutter back as their own padding.
	 */
	/* Same specificity problem, same answer — this one wants 0, but it has to
	   win to set the margin beside it. */
	.bedi-accnav ul.bedi-accnav__list {
		border-inline: 0;
		border-radius: 0;
		margin-inline: calc(var(--bedi-gutter) * -1);
		padding: 0;
		row-gap: 0;
	}

	.bedi-accnav__link {
		block-size: auto;
		border-block-end: var(--bedi-border-width) solid var(--bedi-rule);
		border-radius: 0;
		column-gap: var(--bedi-space-3);
		min-block-size: 56px;
		padding-inline: var(--bedi-gutter);
	}

	.bedi-accnav__item:last-child .bedi-accnav__link {
		border-block-end: 0;
	}

	/*
	 * The label takes the slack, which puts the count and the chevron hard
	 * against the right edge without either needing an auto margin — the count
	 * is on one row out of twelve, and a rule that depends on whether it is
	 * there breaks the eleven where it is not.
	 */
	.bedi-accnav__label {
		flex: 1 1 auto;
	}

	.bedi-accnav__chev {
		color: var(--bedi-ink-muted);
		display: inline-flex;
		flex: none;
	}

	/*
	 * The selected row is a destination here, not a current tab: this list is
	 * only ever seen when nothing on it is open. Left as-is, the dashboard row
	 * sat permanently highlighted on the one screen where it means nothing.
	 */
	.bedi-account[data-bedi-account-view="dashboard"] .bedi-accnav__link[aria-current="page"] {
		background-color: transparent;
		color: var(--bedi-ink);
	}
}

/* =========================================================================
 * 8. THE DASHBOARD STATS
 * ====================================================================== */

.bedi-stats {
	display: grid;
	gap: var(--bedi-space-3);
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	list-style: none;
	margin: 0 0 var(--bedi-space-lg);
	padding: 0;
}

.bedi-stat__inner {
	background-color: var(--bedi-bg-2);
	border-radius: var(--bedi-radius-xl);
	color: inherit;
	display: block;
	padding: var(--bedi-space-5);
	text-decoration: none;
	transition:
		box-shadow var(--bedi-dur) var(--bedi-ease-out),
		transform var(--bedi-dur-micro) var(--bedi-ease-out);
}

/* Only the ones that ARE links get a hover. */
a.bedi-stat__inner:hover {
	box-shadow: 0 10px 24px -18px rgba(37, 37, 49, 0.5);
	transform: translateY(-2px);
}

a.bedi-stat__inner:focus-visible {
	outline: 3px solid var(--bedi-accent);
	outline-offset: 2px;
}

.bedi-stat__value {
	color: var(--bedi-ink);
	display: block;
	font-family: var(--bedi-font-display);
	font-size: var(--bedi-text-3xl);
	font-weight: var(--bedi-weight-bold);
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.bedi-stat__label {
	align-items: center;
	color: var(--bedi-ink-muted);
	column-gap: 6px;
	display: flex;
	font-size: var(--bedi-text-sm);
	margin-block-start: 6px;
}

.bedi-stat__dot {
	background-color: var(--bedi-accent);
	block-size: 6px;
	border-radius: var(--bedi-radius-round);
	flex: 0 0 auto;
	inline-size: 6px;
}

/* =========================================================================
 * 9. ORDER CARDS
 * ====================================================================== */

.bedi-orders {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
	row-gap: var(--bedi-space-3);
}

.bedi-order {
	background-color: var(--bedi-surface);
	border: var(--bedi-border-width) solid var(--bedi-rule);
	border-radius: var(--bedi-radius-xl);
	display: grid;
	gap: var(--bedi-space-4);
	padding: var(--bedi-space-5);
	transition: border-color var(--bedi-dur-micro) var(--bedi-ease-out);
}

.bedi-order:hover { border-color: var(--bedi-rule-strong); }

.bedi-order__head {
	align-items: center;
	column-gap: var(--bedi-space-3);
	display: flex;
	justify-content: space-between;
}

/*
 * EACH STATUS HAS ITS OWN TINT AND ITS OWN TEXT. Status is the one thing on
 * this card that has to survive greyscale, so the dot is never the only
 * difference.
 */
.bedi-order__status {
	align-items: center;
	background-color: var(--bedi-surface-2);
	border-radius: var(--bedi-radius-pill);
	color: var(--bedi-ink);
	column-gap: 6px;
	display: inline-flex;
	font-size: var(--bedi-text-sm);
	font-weight: var(--bedi-weight-medium);
	padding: 5px 12px 5px 8px;
}

.bedi-order__status-dot {
	background-color: var(--bedi-rule-strong);
	block-size: 7px;
	border-radius: var(--bedi-radius-round);
	flex: 0 0 auto;
	inline-size: 7px;
}

.bedi-order--processing .bedi-order__status-dot,
.bedi-order--pending .bedi-order__status-dot { background-color: var(--bedi-accent); }
.bedi-order--completed .bedi-order__status-dot { background-color: var(--bedi-ok); }
.bedi-order--cancelled .bedi-order__status-dot,
.bedi-order--failed .bedi-order__status-dot { background-color: var(--bedi-danger); }
.bedi-order--on-hold .bedi-order__status-dot { background-color: #E8A33D; }

.bedi-order__no {
	color: var(--bedi-ink-muted);
	font-size: var(--bedi-text-sm);
	font-variant-numeric: tabular-nums;
}

.bedi-order__thumbs {
	display: flex;
	gap: 8px;
}

.bedi-order__thumb {
	background-color: var(--bedi-surface-2);
	block-size: 48px;
	border: var(--bedi-border-width) solid var(--bedi-rule);
	border-radius: var(--bedi-radius-lg);
	display: grid;
	flex: 0 0 auto;
	inline-size: 48px;
	overflow: hidden;
	place-items: center;
}

.bedi-order__thumb img {
	block-size: 100%;
	inline-size: 100%;
	/* contain, never cover: these are product photographs on white and a
	   cropped one is unrecognisable at 48px. */
	object-fit: contain;
}

.bedi-order__thumb--more {
	color: var(--bedi-ink-muted);
	font-size: var(--bedi-text-sm);
	font-weight: var(--bedi-weight-medium);
}

.bedi-order__meta {
	column-gap: var(--bedi-space-5);
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	row-gap: var(--bedi-space-2);
}

.bedi-order__metarow dt {
	color: var(--bedi-ink-muted);
	font-size: var(--bedi-text-sm);
}

.bedi-order__metarow dd {
	color: var(--bedi-ink);
	font-size: var(--bedi-text-lg);
	font-weight: var(--bedi-weight-medium);
	margin: 2px 0 0;
}

.bedi-order__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bedi-space-2);
}

.bedi-order__actions .bedi-btn { block-size: 40px; font-size: var(--bedi-text-sm); padding-inline: 18px; }

/* =========================================================================
 * 10. ADDRESSES, PANELS, PAGER
 * ====================================================================== */

.bedi-addresses {
	display: grid;
	gap: var(--bedi-space-4);
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.bedi-addr {
	background-color: var(--bedi-surface);
	border: var(--bedi-border-width) solid var(--bedi-rule);
	border-radius: var(--bedi-radius-xl);
	display: flex;
	flex-direction: column;
	padding: var(--bedi-space-5);
	row-gap: var(--bedi-space-4);
}

/*
 * AN EMPTY SLOT IS AN "ADD" TILE, NOT A FADED CARD.
 *
 * A tinted box with a solid border reads as a card whose contents failed to
 * load. The references all say the same thing about a slot with nothing in it
 * — adidas most plainly: a dashed outline and a plus. Dashed means "this is a
 * place for something", which is what an unset address actually is.
 *
 * The filled card keeps its solid hairline, so the two states are told apart
 * by the shape of the border rather than by a wash of colour that also has to
 * carry meaning elsewhere.
 */
.bedi-addr--empty {
	background-color: transparent;
	border-style: dashed;
	border-color: var(--bedi-rule-strong);
}

.bedi-addr--empty .bedi-addr__icon {
	background-color: var(--bedi-surface-2);
	color: var(--bedi-ink-muted);
}

/* The action sits at its own width rather than filling the card. */
.bedi-addr__edit {
	align-self: flex-start;
}

.bedi-addr__head {
	align-items: center;
	column-gap: 10px;
	display: flex;
}

.bedi-addr__icon {
	background-color: var(--bedi-bg-2);
	block-size: 34px;
	border-radius: var(--bedi-radius-lg);
	color: var(--bedi-navy);
	display: grid;
	flex: 0 0 auto;
	inline-size: 34px;
	place-items: center;
}

.bedi-addr__title {
	color: var(--bedi-ink);
	font-family: var(--bedi-font-display);
	font-size: var(--bedi-text-lg);
	font-weight: var(--bedi-weight-bold);
	margin: 0;
}

.bedi-addr__body {
	color: var(--bedi-ink);
	font-size: var(--bedi-text-lg);
	font-style: normal;
	line-height: 1.6;
	margin: 0;
	/* Push the button to the bottom so two cards of different lengths still
	   line their actions up. */
	margin-block-end: auto;
}

.bedi-addr__empty {
	color: var(--bedi-ink-muted);
	font-size: var(--bedi-text-lg);
	margin: 0 0 auto;
}

.bedi-addr__edit { align-self: start; }

/*
 * RENAMED FROM .bedi-panel, AND THE OLD NAME MADE THIS FORM INVISIBLE.
 *
 * header.css:1845 uses `.bedi-panel` for the header's category mega-panel and
 * gives it `opacity: 0; visibility: hidden` — its CLOSED state, revealed by
 * `.is-open`. The account card reused the same class name and declared neither
 * property, so at equal specificity there was nothing to override: the header's
 * hidden state simply carried over.
 *
 * The result was the "ანგარიშის მონაცემები is empty" report. The form was
 * rendering in full the whole time — 185 lines of it — at zero opacity behind
 * `visibility: hidden`.
 *
 * Renamed rather than patched with an opacity reset, because the real defect is
 * two unrelated components sharing one name: a reset would have fixed today's
 * symptom and left the collision in place for the next property either side
 * decides to declare.
 */
.bedi-acc-panel {
	background-color: var(--bedi-surface);
	border: var(--bedi-border-width) solid var(--bedi-rule);
	border-radius: var(--bedi-radius-xl);
	margin: 0 0 var(--bedi-space-4);
	padding: var(--bedi-space-5);
}

/* A <fieldset> carries browser defaults that no reset reliably removes. */
fieldset.bedi-acc-panel { min-inline-size: 0; }

.bedi-acc-panel__title {
	color: var(--bedi-ink);
	font-family: var(--bedi-font-display);
	font-size: var(--bedi-text-xl);
	font-weight: var(--bedi-weight-bold);
	margin: 0 0 var(--bedi-space-4);
	padding: 0;
}

.bedi-acc-panel__note {
	color: var(--bedi-ink-muted);
	font-size: var(--bedi-text-sm);
	margin: -8px 0 var(--bedi-space-4);
}

.bedi-form__grid {
	display: grid;
	gap: 0 var(--bedi-space-4);
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.bedi-form__submit { margin-block-start: var(--bedi-space-4); }

.bedi-pager {
	align-items: center;
	column-gap: var(--bedi-space-4);
	display: flex;
	justify-content: center;
	margin-block-start: var(--bedi-space-5);
}

.bedi-pager__count {
	color: var(--bedi-ink-muted);
	font-size: var(--bedi-text-sm);
	font-variant-numeric: tabular-nums;
}

/* =========================================================================
 * 11. THE WISHLIST TAB
 * ====================================================================== */

/*
 * THE COLUMNS ARE STATED HERE NOW.
 *
 * This used to defer to WooCommerce's `columns-3`, on the reasoning that core
 * writes that class and therefore owns the grid. Core's grid is float-based and
 * lives in a stylesheet this theme does not load, so nothing owned it: the
 * saved products rendered one per row at every width, and a phone showed a
 * single 335px card per screen of a twelve-item list.
 *
 * Two on a phone, three from 48em — which is what `columns-3` was asking for
 * and never got.
 */
/*
 * AND THE SELECTOR HAS TO CARRY `.woocommerce ul.products` TO MEAN ANYTHING.
 *
 * woo.css already owns this element:
 *
 *   .woocommerce ul.products, .woocommerce-page ul.products {
 *       display: grid; grid-template-columns: repeat(1, minmax(0, 1fr));
 *   }
 *
 * with 2 at 30rem, 3 at 48rem and 4 at 64rem. That is (0,2,1). Written as a
 * bare `.bedi-wishlist-page__grid` this rule is (0,1,0) and loses outright —
 * `display: grid` appeared to work only because woo.css was already setting it,
 * and the columns silently stayed on core's phone default of ONE. Which is
 * exactly what the saved list looked like.
 *
 * (0,3,1) here, so it wins on specificity rather than on file order.
 */
.woocommerce ul.products.bedi-wishlist-page__grid,
.woocommerce-page ul.products.bedi-wishlist-page__grid {
	display: grid;
	gap: var(--bedi-space-4);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 48em) {
	.woocommerce ul.products.bedi-wishlist-page__grid,
	.woocommerce-page ul.products.bedi-wishlist-page__grid {
		gap: var(--bedi-space-5);
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/*
 * FOUR FROM 64em, WHICH IS WHERE THERE IS ROOM FOR FOUR.
 *
 * Not from 48em: below 64em the rail is already beside this column, so the
 * grid has about 700px to give four tiles — 160px each, which is narrower than
 * the archive's own phone tile. The ladder is 2 / 3 / 4, and each step happens
 * where the previous one starts looking sparse rather than at a round number.
 */
@media (min-width: 64em) {
	.woocommerce ul.products.bedi-wishlist-page__grid,
	.woocommerce-page ul.products.bedi-wishlist-page__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.bedi-wishlist-page__empty[hidden] { display: none; }

/* =========================================================================
 * 12. REDUCED MOTION
 * ====================================================================== */

@media (prefers-reduced-motion: reduce) {
	.bedi-field__input,
	.bedi-field__reveal,
	.bedi-strength__fill,
	.bedi-switch__track,
	.bedi-switch__knob,
	.bedi-btn,
	.bedi-auth__tab,
	.bedi-auth__tabline,
	.bedi-accnav__link,
	.bedi-accnav__icon,
	.bedi-stat__inner,
	.bedi-order,
	.bedi-account__more span {
		transition-duration: 1ms !important;
	}

	.bedi-btn:hover,
	.bedi-btn:active,
	a.bedi-stat__inner:hover,
	.bedi-account__more:hover span {
		transform: none !important;
	}

	.bedi-btn__spinner span,
	.bedi-auth__panel.is-in {
		animation: none !important;
	}

	/* The knob still has to move or the switch has no state. */
	.bedi-switch__input:checked + .bedi-switch__track .bedi-switch__knob {
		transform: translateX(18px) !important;
	}
}

/* =========================================================================
 * 13. FORCED COLOURS
 * ====================================================================== */

@media (forced-colors: active) {
	.bedi-auth__card,
	.bedi-auth__aside,
	.bedi-accnav__list,
	.bedi-stat__inner,
	.bedi-order,
	.bedi-addr,
	.bedi-acc-panel,
	.bedi-order__thumb,
	.bedi-order__status,
	.bedi-accnav__count,
	.bedi-switch__track,
	.bedi-btn {
		border: 1px solid ButtonText;
	}

	.bedi-accnav__link[aria-current="page"],
	.woocommerce-MyAccount-navigation-link.is-active > .bedi-accnav__link {
		border: 2px solid Highlight;
	}

	/* The status dot's fill is discarded and the tints go with it; a border is
	   what keeps four states four. */
	.bedi-order__status-dot,
	.bedi-stat__dot {
		border: 1px solid ButtonText;
	}
}

/* =========================================================================
 * PROSE UNDERLINES STOP AT THE APP SURFACE
 *
 * base.css:957 underlines every link inside `.bedi-entry__content`, and that
 * rule is right: #2D81FF on white is 3.68:1, so for a link sitting in a
 * sentence the underline is what carries the affordance, not the colour.
 *
 * But /my-account/ is an ordinary WordPress page, so the WHOLE dashboard
 * renders inside that wrapper — and every nav item, every stat card and the
 * log-out link came out underlined. None of those are prose links; they are
 * navigation, and they already read as pressable from their position, their
 * icon and their hover fill.
 *
 * Scoped to the two classes together, (0,2,1), so it beats the base rule on
 * specificity rather than on load order. base.css says component stylesheets
 * opt their own links out; this is that opt-out.
 * ====================================================================== */

.bedi-entry__content .bedi-account a {
	text-decoration: none;
}

/* =========================================================================
 * THE SAVED-ADDRESS FORM
 *
 * The rows are WooCommerce's — woocommerce_form_field() emits
 * `<p class="form-row …"><label><span class="woocommerce-input-wrapper">` —
 * and the template merges this theme's classes into them rather than
 * hand-writing the markup, so validation and the country/state wiring survive.
 * What is left for CSS is to teach that markup the account's own field
 * component, and to lay the rows out two-up.
 * ====================================================================== */

/* Core's control wrapper IS `.bedi-field__control`; it just has core's name. */
.bedi-woo .bedi-field .woocommerce-input-wrapper,
.woocommerce .bedi-field .woocommerce-input-wrapper {
	display: block;
	position: relative;
}

.bedi-addrform {
	display: flex;
	flex-direction: column;
	gap: var(--bedi-space-3);
	max-inline-size: 640px;
}

.bedi-addrform__back {
	align-items: center;
	align-self: flex-start;
	border-radius: var(--bedi-radius-md);
	color: var(--bedi-ink-muted);
	column-gap: 6px;
	display: flex;
	font-size: var(--bedi-text-sm);
	margin-inline: -6px;
	padding: 6px;
	text-decoration: none;
	transition:
		background-color var(--bedi-dur-micro) var(--bedi-ease-out),
		color var(--bedi-dur-micro) var(--bedi-ease-out);
}

.bedi-addrform__back:hover {
	background-color: var(--bedi-surface-2);
	color: var(--bedi-navy);
}

.bedi-addrform__back-icon {
	align-items: center;
	display: inline-flex;
	flex: 0 0 auto;
}

.bedi-addrform__title {
	color: var(--bedi-ink);
	font-family: var(--bedi-font-display);
	font-size: var(--bedi-text-2xl);
	font-weight: var(--bedi-weight-bold);
	line-height: 1.2;
	margin: 0;
}

.bedi-addrform__lead {
	color: var(--bedi-ink-muted);
	font-size: var(--bedi-text-sm);
	margin: 0 0 var(--bedi-space-2);
}

/*
 * TWO UP, AND THE ROWS DECIDE FOR THEMSELVES.
 *
 * WooCommerce already tells us how wide each field wants to be —
 * `form-row-first`, `form-row-last`, `form-row-wide` — so the grid reads those
 * rather than the template hard-coding a column per key. A plugin that adds a
 * field gets placed correctly without this file knowing it exists.
 */
.bedi-addrform__grid {
	display: grid;
	column-gap: var(--bedi-space-4);
	grid-template-columns: 1fr 1fr;
}

.bedi-addrform__grid > .form-row-wide,
.bedi-addrform__grid > .bedi-field:not(.form-row-first):not(.form-row-last) {
	grid-column: 1 / -1;
}

@media (max-width: 34em) {
	.bedi-addrform__grid {
		grid-template-columns: 1fr;
	}

	.bedi-addrform__grid > .bedi-field {
		grid-column: 1 / -1;
	}
}

/*
 * THE COUNTRY IS A FACT, NOT A CHOICE.
 *
 * The shop sells into Georgia alone, so WooCommerce renders this row as a
 * `<strong>` plus a hidden input instead of a select. Left unstyled it was a
 * stray bold word floating where every other row has a bordered control, so it
 * is given the field's shape and the muted ink that says "read-only" — the
 * same treatment the reference set uses for a locked country row.
 */
.bedi-woo .bedi-field .woocommerce-input-wrapper > strong,
.woocommerce .bedi-field .woocommerce-input-wrapper > strong {
	align-items: center;
	background-color: var(--bedi-surface-2);
	block-size: 48px;
	border: var(--bedi-border-width) solid var(--bedi-rule);
	border-radius: var(--bedi-radius-lg);
	color: var(--bedi-ink-muted);
	display: flex;
	font-size: var(--bedi-text-lg);
	font-weight: var(--bedi-weight-regular, 400);
	padding-inline: 14px;
}

.bedi-addrform__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--bedi-space-3);
	margin-block-start: var(--bedi-space-2);
}

/* =========================================================================
 * CORE'S OWN FORM CHROME, REMOVED — AND THE FIELDS WON BACK
 *
 * Two separate collisions, both found by measuring the rendered page rather
 * than reading the cascade:
 *
 * 1. WooCommerce draws its own box around the login and register forms —
 *    `.woocommerce form.login { border: 1px solid; padding: 20px;
 *    border-radius: 5px; }`. Inside the new split panel that was a third
 *    rounded rectangle nested in the second, at a 5px radius that is not even
 *    on this theme's ladder.
 *
 * 2. The inputs were rendering at a 4px radius with a dark hairline — core's,
 *    not ours. `.bedi-woo .bedi-field .bedi-field__input` is (0,3,2) and so is
 *    core's `.woocommerce form .form-row input.input-text`; a tie is settled
 *    by load order, and core's stylesheet is not reliably first. The earlier
 *    comment here assumed it was. It is not.
 *
 * So the field rules are restated at (0,4,0) — four classes, no elements,
 * which beats (0,3,2) outright on the class count and stops depending on
 * enqueue order. `.bedi-form` and `.bedi-addrform` are the two wrappers that
 * exist on every account form, so they are what supplies the fourth class.
 * ====================================================================== */

.bedi-auth .woocommerce-form,
.bedi-authmodal .woocommerce-form,
.bedi-auth form.login,
.bedi-authmodal form.login,
.bedi-auth form.register,
.bedi-authmodal form.register {
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
}
.bedi-auth .bedi-form .bedi-field .bedi-field__input,
.bedi-authmodal .bedi-form .bedi-field .bedi-field__input,
.bedi-woo .bedi-form .bedi-field .bedi-field__input,
.woocommerce .bedi-form .bedi-field .bedi-field__input,
.bedi-woo .bedi-addrform .bedi-field .bedi-field__input,
.woocommerce .bedi-addrform .bedi-field .bedi-field__input {
	appearance: none;
	background-color: var(--bedi-surface);
	block-size: 48px;
	border: var(--bedi-border-width) solid var(--bedi-rule);
	border-radius: var(--bedi-radius-lg);
	box-shadow: none;
	color: var(--bedi-ink);
	font-family: var(--bedi-font-body);
	font-size: var(--bedi-text-lg);
	inline-size: 100%;
	margin: 0;
	padding-inline: 14px;
	transition:
		border-color var(--bedi-dur-micro) var(--bedi-ease-out),
		box-shadow var(--bedi-dur-micro) var(--bedi-ease-out);
}
.bedi-auth .bedi-form .bedi-field .bedi-field__input:hover,
.bedi-authmodal .bedi-form .bedi-field .bedi-field__input:hover,
.bedi-woo .bedi-form .bedi-field .bedi-field__input:hover,
.woocommerce .bedi-form .bedi-field .bedi-field__input:hover,
.bedi-woo .bedi-addrform .bedi-field .bedi-field__input:hover,
.woocommerce .bedi-addrform .bedi-field .bedi-field__input:hover {
	border-color: var(--bedi-rule-strong);
}
.bedi-auth .bedi-form .bedi-field .bedi-field__input:focus,
.bedi-authmodal .bedi-form .bedi-field .bedi-field__input:focus,
.bedi-woo .bedi-form .bedi-field .bedi-field__input:focus,
.woocommerce .bedi-form .bedi-field .bedi-field__input:focus,
.bedi-woo .bedi-addrform .bedi-field .bedi-field__input:focus,
.woocommerce .bedi-addrform .bedi-field .bedi-field__input:focus {
	border-color: var(--bedi-accent);
	box-shadow: 0 0 0 3px rgba(45, 129, 255, 0.18);
	outline: none;
}
/* A <textarea> is taller than the 48px control height by nature. */
.bedi-auth .bedi-form .bedi-field textarea.bedi-field__input,
.bedi-authmodal .bedi-form .bedi-field textarea.bedi-field__input,
.bedi-woo .bedi-form .bedi-field textarea.bedi-field__input,
.woocommerce .bedi-form .bedi-field textarea.bedi-field__input,
.bedi-woo .bedi-addrform .bedi-field textarea.bedi-field__input,
.woocommerce .bedi-addrform .bedi-field textarea.bedi-field__input {
	block-size: auto;
	min-block-size: 96px;
	padding-block: 12px;
}

/* =========================================================================
 * SMS SIGN-IN
 * ====================================================================== */

.bedi-otp__step {
	display: flex;
	flex-direction: column;
	gap: var(--bedi-space-4);
}

.bedi-otp__step[hidden] { display: none; }

/* --- the welcome step ---------------------------------------------------- */

.bedi-otp__welcome-lede {
	margin-block-end: var(--bedi-space-5);
}

/*
 * The skip is a real control, sized and placed like one. A greyed-out word in
 * the corner is a skip the designer did not want anybody to use, and this step
 * is genuinely optional — the account already exists and works without it.
 */
.bedi-otp__skip {
	display: block;
	inline-size: 100%;
	margin-block-start: var(--bedi-space-3);
	padding-block: var(--bedi-space-3);
	text-align: center;
}

/*
 * The line under the send button explaining that this one number both signs in
 * and registers. Quiet — it answers a question rather than making a claim.
 */
.bedi-otp__note {
	color: var(--bedi-ink-muted);
	font-size: var(--bedi-text-sm);
	line-height: 1.5;
	margin: var(--bedi-space-4) 0 0;
	text-align: center;
}

/*
 * THE DIAL CODE IS PART OF THE FIELD, NOT A CONTROL BESIDE IT.
 *
 * The checkout's version is a button because there the country can change.
 * Here it cannot — the shop sells into Georgia alone — so it is a <span> that
 * shares the field's border and sits behind a divider. Nothing about it invites
 * a press, which is the whole point: a disabled-looking button is a worse lie
 * than a label.
 */
.bedi-otp__phone {
	align-items: stretch;
	background-color: var(--bedi-surface);
	border: var(--bedi-border-width) solid var(--bedi-rule);
	border-radius: var(--bedi-radius-lg);
	display: flex;
	overflow: clip;
	transition:
		border-color var(--bedi-dur-micro) var(--bedi-ease-out),
		box-shadow var(--bedi-dur-micro) var(--bedi-ease-out);
}

.bedi-otp__phone:focus-within {
	border-color: var(--bedi-accent);
	box-shadow: 0 0 0 3px rgba(45, 129, 255, 0.18);
}

.bedi-otp__dial {
	align-items: center;
	background-color: var(--bedi-surface-2);
	border-inline-end: var(--bedi-border-width) solid var(--bedi-rule);
	color: var(--bedi-ink);
	column-gap: 8px;
	display: flex;
	flex: 0 0 auto;
	font-size: var(--bedi-text-lg);
	padding-inline: 12px;
}

.bedi-otp__flag {
	block-size: 22px;
	border-radius: var(--bedi-radius-round);
	display: block;
	inline-size: 22px;
}

.bedi-otp__dial-code { font-variant-numeric: tabular-nums; }

/*
 * The input inside the shell carries no border of its own — the shell has it.
 * (0,4,0) to match the field rules above, for the same load-order reason.
 */
.bedi-auth .bedi-form .bedi-field .bedi-otp__number,
.bedi-authmodal .bedi-form .bedi-field .bedi-otp__number,
.bedi-auth .bedi-otp .bedi-field .bedi-otp__number,
.bedi-authmodal .bedi-otp .bedi-field .bedi-otp__number {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	flex: 1 1 auto;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
	min-inline-size: 0;
}

.bedi-auth .bedi-otp .bedi-field .bedi-otp__number:focus,
.bedi-authmodal .bedi-otp .bedi-field .bedi-otp__number:focus {
	border: 0;
	box-shadow: none;
	outline: none;
}

/* --- the code boxes --- */

.bedi-otp__sent {
	color: var(--bedi-ink-muted);
	font-size: var(--bedi-text-sm);
	margin: 0;
}

.bedi-otp__sentto {
	color: var(--bedi-ink);
	white-space: nowrap;
}

.bedi-otp__code {
	display: flex;
	gap: var(--bedi-space-2);
	justify-content: center;
}

/*
 * THE BOXES SHARE THE ROW RATHER THAN EACH CLAIMING 56px.
 *
 * Six fixed 56px boxes plus their gaps come to 376px, which does not fit the
 * form column on a narrow phone — the row would overflow the card. They flex
 * instead, from a floor of 40px up to 56px, so six fit where there is room and
 * shrink where there is not. `min-inline-size: 0` is what lets a flex item go
 * below its content width at all.
 */
.bedi-otp__digit {
	appearance: none;
	background-color: var(--bedi-surface);
	block-size: 56px;
	border: var(--bedi-border-width) solid var(--bedi-rule);
	border-radius: var(--bedi-radius-lg);
	color: var(--bedi-ink);
	flex: 1 1 0;
	font-family: var(--bedi-font-display);
	font-size: var(--bedi-text-2xl);
	font-variant-numeric: tabular-nums;
	max-inline-size: 56px;
	min-inline-size: 0;
	text-align: center;
	transition:
		border-color var(--bedi-dur-micro) var(--bedi-ease-out),
		box-shadow var(--bedi-dur-micro) var(--bedi-ease-out);
}

.bedi-otp__digit:focus {
	border-color: var(--bedi-accent);
	box-shadow: 0 0 0 3px rgba(45, 129, 255, 0.18);
	outline: none;
}

.bedi-otp__foot {
	align-items: center;
	display: flex;
	gap: var(--bedi-space-4);
	justify-content: space-between;
}

.bedi-otp__link {
	appearance: none;
	background: none;
	border: 0;
	color: var(--bedi-link-brand, var(--bedi-accent));
	cursor: pointer;
	font-family: inherit;
	font-size: var(--bedi-text-sm);
	padding: 4px 0;
	text-decoration: underline;
}

.bedi-otp__link[disabled] {
	color: var(--bedi-ink-muted);
	cursor: default;
	text-decoration: none;
}

.bedi-otp__timer { font-variant-numeric: tabular-nums; }

/* --- consent --- */

.bedi-otp__consent {
	align-items: start;
	column-gap: 10px;
	cursor: pointer;
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	font-size: var(--bedi-text-sm);
	line-height: 1.45;
}

.bedi-otp__check {
	accent-color: var(--bedi-accent);
	block-size: 20px;
	inline-size: 20px;
	margin: 0;
}

/* --- errors --- */

.bedi-otp__error {
	color: var(--bedi-danger);
	font-size: var(--bedi-text-sm);
	margin: 0;
}

.bedi-otp__error[hidden] { display: none; }

/* --- the divider between SMS and the e-mail form --- */

.bedi-auth__or {
	align-items: center;
	color: var(--bedi-ink-muted);
	display: grid;
	column-gap: var(--bedi-space-3);
	font-size: var(--bedi-text-sm);
	grid-template-columns: 1fr auto 1fr;
	margin-block: var(--bedi-space-5);
}

.bedi-auth__or::before,
.bedi-auth__or::after {
	background-color: var(--bedi-rule);
	block-size: 1px;
	content: "";
	display: block;
}

@media (max-width: 26em) {
	.bedi-otp__digit {
		block-size: 52px;
		font-size: var(--bedi-text-xl);
	}

	.bedi-otp__code { gap: 6px; }
}

/* =========================================================================
 * METHOD PILLS — phone or password
 *
 * A segmented control rather than a second row of tabs, because these are not
 * peers of "login / register": they are two ways of doing the one thing the
 * tab above already named. Giving them the same treatment as the tabs would
 * make four things on screen look equally important.
 * ====================================================================== */

.bedi-auth__methods {
	background-color: var(--bedi-surface-2);
	border-radius: var(--bedi-radius-lg);
	display: grid;
	gap: 4px;
	grid-auto-columns: 1fr;
	grid-auto-flow: column;
	margin-block-end: var(--bedi-space-5);
	padding: 4px;
}

.bedi-auth__method {
	appearance: none;
	background: none;
	border: 0;
	border-radius: var(--bedi-radius-md);
	color: var(--bedi-ink-muted);
	cursor: pointer;
	font-family: var(--bedi-font-display);
	font-size: var(--bedi-text-sm);
	font-weight: var(--bedi-weight-medium);
	min-block-size: 40px;
	padding-inline: var(--bedi-space-3);
	transition:
		background-color var(--bedi-dur-micro) var(--bedi-ease-out),
		color var(--bedi-dur-micro) var(--bedi-ease-out);
}

.bedi-auth__method:hover { color: var(--bedi-ink); }

.bedi-auth__method.is-active {
	background-color: var(--bedi-surface);
	box-shadow: 0 1px 2px rgba(37, 37, 49, 0.14);
	color: var(--bedi-navy);
}

.bedi-auth__method:focus-visible {
	outline: 3px solid var(--bedi-accent);
	outline-offset: -2px;
}

.bedi-auth__method-panel[hidden] { display: none; }

/* =========================================================================
 * 13. A SINGLE ORDER
 *
 * The thank-you page and My account > Orders > one order both render
 * woocommerce/order/order-details.php, so this styles both. The <table> core
 * shipped is gone; what is left is a list of line items, a totals block and
 * the address cards underneath.
 * ====================================================================== */

.bedi-order-head {
	background-color: var(--bedi-surface);
	border: var(--bedi-border-width) solid var(--bedi-rule);
	border-radius: var(--bedi-radius-xl);
	margin-block-end: var(--bedi-space-5);
	padding: var(--bedi-space-5);
}

.bedi-order-head__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bedi-space-3) var(--bedi-space-7);
}

.bedi-order-head__field { display: grid; gap: 2px; margin: 0; }

.bedi-order-head__label {
	color: var(--bedi-ink-muted);
	font-size: var(--bedi-text-xs);
}

.bedi-order-head__value {
	font-size: var(--bedi-text-base);
	font-weight: var(--bedi-weight-bold);
}

/*
 * The status is a chip, and its colour is the status. Amber for "we are
 * waiting on you", blue for "we are working on it", green for done, grey for
 * over — so the state is legible before the word is read.
 */
.bedi-order-head__status {
	background-color: var(--bedi-bg-2);
	border-radius: var(--bedi-radius-pill);
	color: var(--bedi-ink);
	font-size: var(--bedi-text-sm);
	font-weight: var(--bedi-weight-bold);
	justify-self: start;
	padding: 3px 12px;
}

.bedi-order-head__status[data-bedi-status="pending"],
.bedi-order-head__status[data-bedi-status="on-hold"] { background-color: #fff3d6; color: #6b4b00; }
.bedi-order-head__status[data-bedi-status="processing"] { background-color: #e4efff; color: #0b4da2; }
.bedi-order-head__status[data-bedi-status="completed"] { background-color: #e3f7ec; color: #14663f; }
.bedi-order-head__status[data-bedi-status="cancelled"],
.bedi-order-head__status[data-bedi-status="failed"],
.bedi-order-head__status[data-bedi-status="refunded"] { background-color: #f3f3f5; color: #5c5c68; }

.bedi-order-head__invoice {
	border-block-start: var(--bedi-border-width) solid var(--bedi-rule);
	margin-block-start: var(--bedi-space-5);
	padding-block-start: var(--bedi-space-5);
}

/* --- the items ---------------------------------------------------------- */

.bedi-order {
	background-color: var(--bedi-surface);
	border: var(--bedi-border-width) solid var(--bedi-rule);
	border-radius: var(--bedi-radius-xl);
	padding: var(--bedi-space-5);
}

.bedi-order__title,
.bedi-order__block-title {
	font-size: var(--bedi-text-lg);
	font-weight: var(--bedi-weight-bold);
	margin: 0 0 var(--bedi-space-4);
}

.bedi-order__items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bedi-order__item {
	align-items: center;
	border-block-end: var(--bedi-border-width) solid var(--bedi-rule);
	display: grid;
	gap: var(--bedi-space-4);
	grid-template-columns: 64px minmax(0, 1fr) auto;
	padding-block: var(--bedi-space-4);
}

.bedi-order__item:first-child { padding-block-start: 0; }
.bedi-order__item:last-child { border-block-end: 0; }

.bedi-order__thumb {
	background-color: var(--bedi-muted);
	border-radius: var(--bedi-radius-md);
	display: block;
	position: relative;
}

/* `contain`, for the same reason the checkout summary uses it: these are
   products shot to the edges on white, and cropping one to a square removes
   the part that identifies it. */
.bedi-order__thumb-img {
	aspect-ratio: 1;
	display: block;
	inline-size: 100%;
	object-fit: contain;
}

.bedi-order__qty-badge {
	background-color: var(--bedi-ink-muted);
	border-radius: var(--bedi-radius-pill);
	color: #FFFFFF;
	font-size: 11px;
	font-weight: var(--bedi-weight-bold);
	inset-block-start: -6px;
	inset-inline-end: -6px;
	line-height: 18px;
	min-inline-size: 18px;
	position: absolute;
	text-align: center;
}

.bedi-order__item-body { min-inline-size: 0; }

.bedi-order__item-name {
	font-size: var(--bedi-text-base);
	font-weight: var(--bedi-weight-medium);
	margin: 0;
}

.bedi-order__item-name a { color: var(--bedi-ink); text-decoration: none; }
.bedi-order__item-name a:hover { color: var(--bedi-accent-strong); }

.bedi-order__item-qty {
	color: var(--bedi-ink-muted);
	font-size: var(--bedi-text-sm);
	margin: 2px 0 0;
}

.bedi-order__item-total {
	font-size: var(--bedi-text-base);
	font-weight: var(--bedi-weight-bold);
	margin: 0;
	white-space: nowrap;
}

.bedi-order__note {
	background-color: var(--bedi-muted);
	border-radius: var(--bedi-radius-md);
	font-size: var(--bedi-text-sm);
	margin-block-end: var(--bedi-space-4);
	padding: var(--bedi-space-3) var(--bedi-space-4);
}

/* --- the totals --------------------------------------------------------- */

.bedi-order__totals {
	border-block-start: var(--bedi-border-width) solid var(--bedi-rule);
	display: grid;
	gap: var(--bedi-space-2);
	margin: var(--bedi-space-4) 0 0;
	padding-block-start: var(--bedi-space-4);
}

.bedi-order__total-row {
	display: flex;
	gap: var(--bedi-space-4);
	justify-content: space-between;
}

.bedi-order__total-row dt { color: var(--bedi-ink-muted); font-size: var(--bedi-text-sm); margin: 0; }
.bedi-order__total-row dd { font-weight: var(--bedi-weight-medium); margin: 0; text-align: end; }

.bedi-order__total-row.is-grand {
	border-block-start: var(--bedi-border-width) solid var(--bedi-rule);
	margin-block-start: var(--bedi-space-2);
	padding-block-start: var(--bedi-space-3);
}

.bedi-order__total-row.is-grand dt,
.bedi-order__total-row.is-grand dd {
	color: var(--bedi-ink);
	font-size: var(--bedi-text-lg);
	font-weight: var(--bedi-weight-bold);
}

.bedi-order__block { margin-block-start: var(--bedi-space-5); }
.bedi-order__block-body { margin: 0; }

/*
 * The address cards core prints after the table. They are its markup, not
 * ours, so these are the two class names it actually uses.
 */
.woocommerce-customer-details address {
	background-color: var(--bedi-muted);
	border: 0;
	border-radius: var(--bedi-radius-lg);
	font-style: normal;
	padding: var(--bedi-space-4);
}

.woocommerce-column__title {
	font-size: var(--bedi-text-lg);
	font-weight: var(--bedi-weight-bold);
	margin: var(--bedi-space-5) 0 var(--bedi-space-3);
}

/* <mark> defaults to a yellow highlighter, and core wraps order numbers,
   dates and statuses in it. Anywhere one survives in WooCommerce markup this
   theme has not overridden, it should read as text. */
.bedi-account mark,
.bedi-order mark,
.woocommerce-customer-details mark {
	background: none;
	color: inherit;
	font-weight: var(--bedi-weight-bold);
}

@media (max-width: 47.9375em) {
	.bedi-order,
	.bedi-order-head { padding: var(--bedi-space-4); }

	.bedi-order__item {
		gap: var(--bedi-space-3);
		grid-template-columns: 52px minmax(0, 1fr);
	}

	/* The price drops under the name rather than squeezing a third column into
	   295px — at that width the name would get about 120px of it. */
	.bedi-order__item-total {
		grid-column: 2;
		text-align: start;
	}
}

/* =========================================================================
 * 14. ONBOARDING — FOUR SCREENS AFTER REGISTRATION
 *
 * One ask per screen, a stated count, and a skip on every one. The panel is
 * the same .bedi-otp component the phone and code steps use, so only what is
 * new to these screens is declared here.
 * ====================================================================== */

.bedi-onb__progress {
	display: grid;
	gap: var(--bedi-space-2);
	margin-block-end: var(--bedi-space-4);
}

.bedi-onb__count {
	color: var(--bedi-ink-muted);
	font-size: var(--bedi-text-xs);
	font-variant-numeric: tabular-nums;
}

.bedi-onb__bar {
	background-color: var(--bedi-rule);
	block-size: 3px;
	border-radius: var(--bedi-radius-pill);
	display: block;
	overflow: hidden;
}

.bedi-onb__bar-fill {
	background-color: var(--bedi-accent);
	block-size: 100%;
	display: block;
	transition: inline-size var(--bedi-dur) var(--bedi-ease-out);
}

.bedi-onb__title {
	font-size: var(--bedi-text-xl);
	font-weight: var(--bedi-weight-bold);
	margin: 0 0 var(--bedi-space-2);
}

.bedi-onb__lede {
	color: var(--bedi-ink-muted);
	font-size: var(--bedi-text-sm);
	line-height: 1.5;
	margin: 0 0 var(--bedi-space-5);
}

/*
 * Back on the left, skip on the right — the skip is the one that ends the
 * flow, so it sits where the eye lands last rather than beside the primary
 * button where it competes with it.
 */
.bedi-onb__foot {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-block-start: var(--bedi-space-3);
}

/* With no back button on the first screen, the skip must still sit right. */
.bedi-onb__foot:not(:has(.bedi-onb__back)) {
	justify-content: flex-end;
}

.bedi-onb select.bedi-field__input {
	/* The native control keeps its own arrow; this only matches the text
	   fields it sits between. */
	appearance: auto;
	background-color: var(--bedi-surface);
}

@media (prefers-reduced-motion: reduce) {
	.bedi-onb__bar-fill { transition: none; }
}