/* =========================================================
   Ombelo — account.css   (build-guide 08 §1)
   My Account: sign in / register, sidebar, dashboard, downloads,
   orders, billing address, account details, view order.
   Loaded on is_account_page() only.
   ========================================================= */

/* ---------- Undoing core's float layout ----------
   woocommerce-layout.css floats the nav 30% left and the panel 68% right, and
   sizes .form-row-first / -last at 47% with floats. Every one of those wins
   over a grid child's implicit width, so they are switched off first — before
   anything here tries to lay the page out. */
.woocommerce-account .om-account__grid > .woocommerce-MyAccount-content,
.om-account__side .woocommerce-MyAccount-navigation {
	float: none;
	width: auto;
}
.woocommerce .om-form .form-row-first,
.woocommerce .om-form .form-row-last,
.woocommerce .om-form .form-row-wide {
	float: none;
	width: auto;
}
/* Core wraps login and register in a bordered grey box. The panels below are
   the box. */
.woocommerce .om-account form.login,
.woocommerce .om-account form.register {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
}

/* ---------- Page frame ---------- */
.om-account {
	padding-block: 40px 80px;
}
.om-account__head {
	margin-bottom: 26px;
}
.om-account__h {
	font-size: clamp(1.9rem, 3.4vw, 2.5rem);
	font-weight: 600;
	margin: 0 0 8px;
}
.om-account__sub {
	max-width: 62ch;
	margin: 0;
	color: var(--om-ink-60);
}
.om-account__grid {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	align-items: start;
	gap: 28px;
}

/* ---------- Sidebar ---------- */
.om-account__side {
	display: grid;
	gap: 14px;
	position: sticky;
	/* Clears the sticky header, which is 72px plus the promo bar. */
	top: 24px;
}
.om-acct-user {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
	background: var(--om-white);
	border: 1px solid var(--om-line);
	border-radius: var(--om-radius);
	box-shadow: var(--om-shadow);
}
.om-acct-user .om-avatar {
	flex: none;
	border-color: var(--om-white);
}
.om-acct-user__body {
	display: grid;
	min-width: 0;
}
.om-acct-user__hi {
	font-family: var(--om-display);
	font-size: 0.98rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	/* A long display name should truncate, not push the card wider. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.om-acct-user__mail {
	font-size: 0.8rem;
	color: var(--om-ink-40);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.om-account__side .woocommerce-MyAccount-navigation {
	padding: 8px;
	background: var(--om-white);
	border: 1px solid var(--om-line);
	border-radius: var(--om-radius);
	box-shadow: var(--om-shadow);
}
.om-account__side .woocommerce-MyAccount-navigation ul {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.om-account__side .woocommerce-MyAccount-navigation a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: var(--om-radius-sm);
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--om-ink);
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}
.om-account__side .woocommerce-MyAccount-navigation a:hover {
	background: var(--om-canvas);
}
.om-acct-nav__ico {
	display: inline-flex;
	flex: none;
	color: var(--om-ink-40);
	transition: color 0.15s ease;
}
.om-account__side .woocommerce-MyAccount-navigation a:hover .om-acct-nav__ico {
	color: var(--om-ink-60);
}
/* The star marks Downloads as the reason most people opened this page. */
.om-acct-nav__star {
	margin-left: auto;
	font-size: 0.72rem;
	line-height: 1;
	color: var(--om-amber);
}
.om-account__side .is-active > a {
	background: var(--om-indigo-wash);
	color: var(--om-indigo-deep);
	font-weight: 600;
}
.om-account__side .is-active > a .om-acct-nav__ico {
	color: var(--om-indigo);
}
.om-account__side .woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--om-ink-60);
}

.om-acct-help {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 15px 16px;
	background: var(--om-lav);
	border-radius: var(--om-radius);
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--om-ink-60);
}
.om-acct-help svg {
	flex: none;
	margin-top: 2px;
	color: var(--om-indigo-deep);
}
.om-acct-help a {
	font-weight: 600;
	color: var(--om-indigo-deep);
}

/* ---------- Content panel ---------- */
.om-account__grid > .woocommerce-MyAccount-content {
	padding: 28px;
	background: var(--om-white);
	border: 1px solid var(--om-line);
	border-radius: var(--om-radius);
	box-shadow: var(--om-shadow);
}
.om-account__grid > .woocommerce-MyAccount-content > :last-child {
	margin-bottom: 0;
}
/* The order-details pair already carries a card of its own. Inside the panel
   that reads as a box in a box, so it flattens. */
.woocommerce-MyAccount-content .om-dl,
.woocommerce-MyAccount-content .om-receipt {
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
}
.woocommerce-MyAccount-content .om-receipt {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--om-line);
}

/* ---------- Dashboard ---------- */
.om-dash__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.om-stat {
	display: grid;
	gap: 2px;
	padding: 18px 18px 20px;
	background: var(--om-pastel, var(--om-surface));
	border-radius: var(--om-radius);
}
.om-stat--lav { --om-pastel: var(--om-lav); }
.om-stat--mint { --om-pastel: var(--om-mint); }
.om-stat--cream { --om-pastel: var(--om-cream); }
.om-stat__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin-bottom: 8px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.72);
	color: var(--om-ink);
}
.om-stat__num {
	font-family: var(--om-display);
	font-size: 1.85rem;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.03em;
}
/* A date is longer than a count and should not set the tile's height. */
.om-stat__num--sm {
	font-size: 1.3rem;
	padding-block: 6px;
}
.om-stat__num .woocommerce-Price-amount {
	font-family: inherit;
}
.om-stat__lab {
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--om-ink-60);
}

.om-dash__block {
	margin-top: 36px;
}
.om-dash__h {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 16px;
	font-size: 1.15rem;
	font-weight: 600;
}
.om-dash__all {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: var(--om-body);
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--om-indigo-deep);
	text-decoration: none;
	white-space: nowrap;
}
.om-dash__all:hover {
	text-decoration: underline;
}
/* The panel is roughly 880px wide, so four across would be postage stamps. */
.om-account .om-products {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

/* ---------- Download cards ---------- */
.om-dl-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 18px;
}
.om-dlcard {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--om-canvas);
	border: 1px solid var(--om-line);
	border-radius: var(--om-radius);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.om-dlcard:hover {
	border-color: transparent;
	box-shadow: var(--om-shadow);
}
.om-dlcard__media {
	display: block;
	overflow: hidden;
	background: var(--om-pastel, var(--om-indigo-wash));
	aspect-ratio: 4 / 3;
}
.om-dlcard__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.om-dlcard__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 8px;
	padding: 14px 16px 16px;
}
.om-dlcard__name {
	font-size: 0.98rem;
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
}
.om-dlcard__name a {
	color: var(--om-ink);
	text-decoration: none;
}
.om-dlcard__name a:hover {
	color: var(--om-indigo-deep);
}
.om-dlcard__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}
.om-dlcard__file {
	font-family: var(--om-mono);
	font-size: 0.76rem;
	color: var(--om-ink-40);
	/* File names run long and must not stretch the grid column. */
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.om-dlcard__life {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
}
.om-dlcard__life .om-pill {
	background: var(--om-surface);
	color: var(--om-ink-60);
}
.om-dlcard__life .om-pill--mint {
	background: var(--om-mint);
	color: #1f6b52;
}
.om-dlcard__go {
	margin-top: auto;
	padding: 11px 18px;
	font-size: 0.92rem;
}

.om-dl-grid__note {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 18px 0 0;
	padding: 14px 16px;
	background: var(--om-indigo-wash);
	border-radius: var(--om-radius-sm);
	font-size: 0.87rem;
	line-height: 1.5;
	color: var(--om-ink-60);
}
.om-dl-grid__note svg {
	flex: none;
	margin-top: 2px;
	color: var(--om-indigo-deep);
}

/* ---------- Orders ---------- */
.om-orders {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	text-align: left;
}
.om-orders th,
.om-orders td {
	padding: 14px 12px;
	border: 0;
	border-bottom: 1px solid var(--om-line);
	vertical-align: middle;
	font-weight: 400;
}
.om-orders thead th {
	padding-block: 0 10px;
	font-family: var(--om-mono);
	font-size: 0.72rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--om-ink-40);
}
.om-orders th:first-child,
.om-orders td:first-child {
	padding-left: 0;
}
.om-orders th:last-child,
.om-orders td:last-child {
	padding-right: 0;
	text-align: right;
}
.om-orders tbody tr:last-child th,
.om-orders tbody tr:last-child td {
	border-bottom: 0;
}
.om-orders tbody tr:hover td,
.om-orders tbody tr:hover th {
	background: var(--om-canvas);
}
.om-orders__no {
	font-family: var(--om-mono);
	font-size: 0.92rem;
	font-weight: 500;
	color: var(--om-indigo-deep);
	text-decoration: none;
}
.om-orders__no:hover {
	text-decoration: underline;
}
.om-orders time {
	font-size: 0.92rem;
	color: var(--om-ink-60);
}
.om-orders__total {
	display: block;
	font-weight: 700;
	font-size: 0.98rem;
}
.om-orders__items {
	display: block;
	font-size: 0.8rem;
	color: var(--om-ink-40);
}
.om-orders__act {
	padding: 8px 14px;
	font-size: 0.85rem;
}
.om-orders__act + .om-orders__act {
	margin-left: 6px;
}
.om-orders__pager {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 22px;
}
.om-orders__pager :only-child {
	margin-left: auto;
}

/* Status chips. Mint reads "done", amber "in flight", blush "money went back". */
.om-status {
	display: inline-block;
	padding: 4px 11px;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
}
.om-status--mint {
	background: var(--om-mint);
	color: #1f6b52;
}
.om-status--amber {
	background: var(--om-cream);
	color: #8a5a12;
}
.om-status--blush {
	background: var(--om-blush);
	color: #9c2a4d;
}
.om-status--lav {
	background: var(--om-lav);
	color: var(--om-indigo-deep);
}
.om-status--grey {
	background: var(--om-surface);
	color: var(--om-ink-60);
}

/* ---------- Billing address ---------- */
.om-addr__intro {
	max-width: 62ch;
	margin: 0 0 20px;
	color: var(--om-ink-60);
	font-size: 0.95rem;
}
.om-addr {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 18px;
}
.om-addr__card {
	padding: 20px 22px 22px;
	background: var(--om-canvas);
	border: 1px solid var(--om-line);
	border-radius: var(--om-radius);
}
.om-addr__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 12px;
}
.om-addr__head h2 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 1.05rem;
	font-weight: 600;
}
.om-addr__ico {
	display: inline-flex;
	color: var(--om-indigo);
}
.om-addr__head .om-btn {
	padding: 8px 16px;
	font-size: 0.85rem;
	background: var(--om-white);
}
.om-addr address {
	margin: 0;
	font-style: normal;
	line-height: 1.7;
	color: var(--om-ink-60);
}
.om-addr__mail {
	display: block;
	font-family: var(--om-mono);
	font-size: 0.85rem;
	color: var(--om-ink-40);
}
.om-addr__empty {
	display: block;
	max-width: 40ch;
	font-size: 0.92rem;
	color: var(--om-ink-40);
}

/* ---------- Forms ----------
   Same field skin as the checkout, restated here rather than shared: the two
   stylesheets never load together, and cart-checkout.css scopes all of it
   under .om-co. */
.om-form {
	margin: 0;
}
.om-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 16px;
}
.om-form__grid > .form-row {
	grid-column: 1 / -1;
	margin: 0;
	padding: 0;
}
.om-form__grid > .form-row-first {
	grid-column: 1 / 2;
}
.om-form__grid > .form-row-last {
	grid-column: 2 / 3;
}
.om-form .form-row {
	margin: 0 0 14px;
	padding: 0;
}
.om-form label {
	display: block;
	margin: 0 0 6px;
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.01em;
	color: var(--om-ink-60);
}
.om-form abbr.required,
.om-form .required {
	color: var(--om-indigo);
	border: 0;
	text-decoration: none;
}
.om-form .woocommerce-input-wrapper {
	display: block;
	width: 100%;
}
.om-form .input-text,
.om-form select,
.om-form textarea {
	width: 100%;
	padding: 13px 15px;
	border: 1px solid var(--om-line);
	border-radius: 12px;
	background: var(--om-canvas);
	font-family: var(--om-body);
	font-size: 1rem;
	line-height: 1.4;
	color: var(--om-ink);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.om-form .input-text:focus,
.om-form select:focus,
.om-form textarea:focus {
	outline: none;
	background: var(--om-white);
	border-color: var(--om-indigo);
	box-shadow: 0 0 0 3px var(--om-indigo-wash);
}
.om-form .form-row.woocommerce-invalid .input-text,
.om-form .form-row.woocommerce-invalid select {
	border-color: #d4405f;
	background: #fdf2f4;
}
.om-form .form-row.woocommerce-invalid label {
	color: #b3244a;
}
.om-form__set {
	margin: 0;
	padding: 0;
	border: 0;
}
.om-form__set + .om-form__set {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--om-line);
}
.om-form__legend {
	padding: 0;
	margin: 0 0 4px;
	font-family: var(--om-display);
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}
.om-form__note {
	margin: 0 0 16px;
	font-size: 0.9rem;
	color: var(--om-ink-60);
}
.om-form__hint,
.om-form .description {
	display: block;
	margin-top: 7px;
	font-size: 0.83rem;
	line-height: 1.45;
	color: var(--om-ink-40);
}
.om-form__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	margin: 24px 0 0;
}
/* WooCommerce injects the strength meter after #password_1 as a plain div. */
.om-form .woocommerce-password-strength {
	margin-top: 8px;
	padding: 7px 12px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 600;
	text-align: left;
}
.om-form .woocommerce-password-hint {
	display: block;
	margin-top: 6px;
	font-size: 0.83rem;
	line-height: 1.45;
	color: var(--om-ink-40);
}

/* ---------- Sign in / register ---------- */
.om-account--auth .om-account__head {
	margin-bottom: 28px;
}
/* Both columns stretch: the register panel is always the taller of the two, and
   a short white card next to a tall pastel one reads as a mistake rather than a
   choice. The sign-in card is a flex column so its closing note can be pushed to
   the foot of whatever height it inherits. */
.om-auth {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
}
.om-auth--solo,
.om-account--solo .om-auth {
	grid-template-columns: minmax(0, 1fr);
	max-width: 30rem;
}
.om-auth__form {
	display: flex;
	flex-direction: column;
	padding: 30px;
	background: var(--om-white);
	border: 1px solid var(--om-line);
	border-radius: var(--om-radius);
	box-shadow: var(--om-shadow);
}
.om-auth__aside {
	margin: auto 0 0;
	padding-top: 24px;
	border-top: 1px solid var(--om-line);
	font-size: 0.85rem;
	line-height: 1.6;
	color: var(--om-ink-60);
}
.om-auth__new {
	padding: 30px;
	background: var(--om-lav);
	border-radius: var(--om-radius);
}
.om-auth__h {
	font-size: 1.35rem;
	font-weight: 600;
	margin: 0 0 6px;
}
.om-auth__lede {
	margin: 0 0 18px;
	font-size: 0.95rem;
	color: var(--om-ink-60);
}
/* The logo's scooped "O": an indigo ring with a bite taken out of it. */
.om-auth__mark {
	position: relative;
	display: block;
	width: 42px;
	height: 42px;
	margin-bottom: 18px;
	border: 7px solid var(--om-indigo);
	border-radius: 50%;
}
.om-auth__mark::after {
	content: "";
	position: absolute;
	right: -11px;
	bottom: -11px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--om-lav);
}
.om-auth__perks {
	display: grid;
	gap: 10px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}
.om-auth__perks li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.93rem;
	font-weight: 500;
}
.om-auth__perks svg {
	flex: none;
	color: var(--om-indigo-deep);
}
.om-auth__new .om-form .input-text {
	background: var(--om-white);
	border-color: rgba(87, 80, 253, 0.22);
}
.om-auth__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}
/* Beats `.woocommerce form .form-row label { line-height: 2 }` and core's
   block display, which would drop the text under the box. */
.woocommerce .om-account .form-row label.om-check,
.om-account .om-check {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 0.92rem;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0;
	color: var(--om-ink);
	cursor: pointer;
}
.om-account .om-check input[type="checkbox"] {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--om-indigo);
}
.om-auth__lost,
.om-auth__back {
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--om-indigo-deep);
	text-decoration: none;
}
.om-auth__lost:hover,
.om-auth__back:hover {
	text-decoration: underline;
}
.om-auth .om-form__actions {
	margin-top: 20px;
}
.om-auth .om-form__actions .om-btn {
	width: 100%;
}
/* The value strip is a full-bleed band inside .om-account, so the wrapper's
   bottom padding would leave a canvas gutter under it. The band brings its
   own breathing room instead. */
.om-account--auth {
	padding-bottom: 0;
}
.om-account--auth .om-value {
	margin-top: 72px;
}
/* The lost/reset-password screens carry no strip, so they keep the padding. */
.om-account--auth.om-account--solo {
	padding-bottom: 80px;
}

/* ---------- View order ---------- */
.om-vieworder__state {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 24px;
}
.om-vieworder__back {
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--om-indigo-deep);
	text-decoration: none;
}
.om-vieworder__back:hover {
	text-decoration: underline;
}
.om-notes {
	margin: 0 0 28px;
	padding: 18px 20px;
	background: var(--om-canvas);
	border-radius: var(--om-radius-sm);
}
.om-notes__h {
	margin: 0 0 12px;
	font-size: 1rem;
	font-weight: 600;
}
.om-notes__list {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.om-notes__when {
	margin: 0 0 2px;
	font-family: var(--om-mono);
	font-size: 0.74rem;
	letter-spacing: 0.04em;
	color: var(--om-ink-40);
}
.om-notes__body p {
	margin: 0;
	font-size: 0.93rem;
	line-height: 1.6;
	color: var(--om-ink-60);
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
	.om-account__grid {
		grid-template-columns: 224px minmax(0, 1fr);
		gap: 22px;
	}
	.om-account .om-products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	/* The sidebar stops being a sidebar: the user card sits above a pill rail
	   that scrolls sideways rather than stacking six rows deep. */
	.om-account__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}
	.om-account__side {
		position: static;
		gap: 12px;
	}
	/* Without this the rail never scrolls: nav is a grid item, its automatic
	   minimum size is the ul's min-content, and a column grid of max-content
	   tracks reports that as the full width of all six pills — so the track
	   grows and the whole page scrolls sideways instead. */
	.om-account__side .woocommerce-MyAccount-navigation {
		min-width: 0;
	}
	.om-account__side .woocommerce-MyAccount-navigation ul {
		grid-auto-flow: column;
		grid-auto-columns: max-content;
		gap: 6px;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.om-account__side .woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
		display: none;
	}
	.om-account__side .woocommerce-MyAccount-navigation a {
		white-space: nowrap;
	}
	.om-acct-nav__star {
		margin-left: 0;
	}
	.om-acct-help {
		display: none;
	}
	.om-auth {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 720px) {
	/* Five columns stop being readable, so every row becomes its own card and
	   each cell wears the label the <th> used to carry. */
	.om-orders,
	.om-orders tbody,
	.om-orders tr,
	.om-orders th,
	.om-orders td {
		display: block;
	}
	.om-orders thead {
		display: none;
	}
	.om-orders tbody tr {
		padding: 16px;
		margin-bottom: 12px;
		background: var(--om-canvas);
		border: 1px solid var(--om-line);
		border-radius: var(--om-radius-sm);
	}
	.om-orders tbody tr:hover td,
	.om-orders tbody tr:hover th {
		background: transparent;
	}
	.om-orders th,
	.om-orders td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		padding: 6px 0;
		border-bottom: 0;
		text-align: left;
	}
	.om-orders th::before,
	.om-orders td::before {
		content: attr(data-title);
		flex: none;
		font-family: var(--om-mono);
		font-size: 0.7rem;
		text-transform: uppercase;
		letter-spacing: 0.09em;
		color: var(--om-ink-40);
	}
	.om-orders td:last-child {
		display: block;
		padding-top: 12px;
		text-align: left;
	}
	.om-orders td:last-child::before {
		display: none;
	}
	.om-orders__act {
		width: 100%;
	}
	.om-orders__total,
	.om-orders__items {
		text-align: right;
	}
}

@media (max-width: 640px) {
	.om-account {
		padding-block: 28px 56px;
	}
	.om-account__grid > .woocommerce-MyAccount-content {
		padding: 20px;
	}
	.om-dash__stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	/* Three tiles into two columns leaves an orphan; it gets the full row. */
	.om-dash__stats .om-stat:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
	.om-auth__form,
	.om-auth__new {
		padding: 22px;
	}
	.om-form__grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.om-form__grid > .form-row-first,
	.om-form__grid > .form-row-last {
		grid-column: 1 / -1;
	}
	.om-account .om-products {
		grid-template-columns: minmax(0, 1fr);
	}
	.om-dl-grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.om-account .om-form__actions .om-btn {
		width: 100%;
	}
}

/* ==========================================================================
   Sign in / create account — the full-page split
   ==========================================================================

   Only /my-account/ signed out uses this. The lost-password and reset screens
   still use the .om-auth rules above, which is why those were left alone.

   No card and no page gutter: the screen is cut in two, edge to edge, and the
   seam falls where the fold does. Left half is the shop, right half is the
   account door.

   The left half speaks the homepage hero's language on purpose — the same
   lavender wash, the same format chips, the same Sora headline with one word in
   indigo, and the same product cards, rendered from the real
   template-parts/product-card.php rather than a lookalike. Those card styles
   live in main.css, which every page already loads, so the whole showroom costs
   this page nothing but markup. A stranger who arrived from the homepage should
   feel they are still in the same shop.

   Full bleed is the frame, not the measure: each half centres a narrow column
   of its own, because a line of text the width of half a 1440px screen is how a
   full-bleed layout ends up looking like an unstyled one.

   The tabs are two radio inputs and :checked sibling rules, no script. The
   hiding rule is written as `.om-signin__tabs ~ .om-signin__pane` rather than
   `.om-signin__pane` on its own for a reason: with registration switched off
   the tabs and the radios are not printed at all, and a bare rule would hide
   the sign-in form with nothing able to bring it back.
   ========================================================================== */

/* Full bleed: no shell gutter, no page padding above or below. */
.om-account--split {
	padding: 0;
}
.om-signin__bleed {
	width: 100%;
}

/*
 * How tall is "the rest of the screen".
 *
 * The promo bar and the header row are the only chrome above this, and
 * subtracting them is what puts the fold on the seam instead of an inch below
 * it. 108px is the figure .om-hero__inner already uses for the same two
 * elements. dvh so a phone's collapsing address bar does not reveal a strip of
 * footer; the vh line above it is the fallback for anything that has not
 * caught up.
 */
.om-signin {
	--om-chrome: 108px;
	/* The header alone, without the promo bar above it: 68px row + its rule.
	   It is what the sticky showroom hangs off, since the promo bar scrolls
	   away and the header does not. */
	--om-head: 69px;
	/* How far the white half rides over the lavender one. */
	--om-lap: clamp(28px, 3.6vw, 60px);

	display: grid;
	/* Not halves. Two equal columns, each centring its own block, read as one
	   layout mirrored down the middle — which is the thing that made this look
	   like a template. The showroom takes the bigger share and anchors its
	   content to the left edge; the form keeps the smaller one and stays
	   centred in it. Different widths, different alignments, one composition. */
	grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr);
	min-height: calc(100vh - var(--om-chrome));
	min-height: calc(100dvh - var(--om-chrome));
}

/* --------------- Left: the showroom --------------- */
.om-signin__story {
	position: relative;
	isolation: isolate;
	/* clip-path, not overflow:hidden, to keep the blobs inside the half. The two
	   do the same job here, but overflow:hidden would make this column a scroll
	   container and kill the sticky rule below it. */
	clip-path: inset(0);
	background:
		radial-gradient(900px 560px at 84% -10%, rgba(87, 80, 253, 0.1), transparent 60%),
		linear-gradient(170deg, #f2f0fd 0%, #eeecfb 52%, #f6f1ec 100%);

	/* Product cards hang a file-extension chip off their bottom-right corner and
	   ring it with the page colour to punch it out of the card edge. That ring
	   is --om-behind, which defaults to the canvas; here the surface is
	   lavender, so the ring has to be told. */
	--om-behind: #f0eefc;
}
/* Two soft pastel lights over the wash — the peach and mint the shop already
   uses, doing the job a flat tint cannot. */
.om-signin__blob {
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	filter: blur(90px);
	opacity: 0.55;
}
.om-signin__blob--a {
	top: -150px;
	right: -110px;
	width: 420px;
	height: 420px;
	background: var(--om-peach);
}
.om-signin__blob--b {
	bottom: -170px;
	left: -130px;
	width: 400px;
	height: 400px;
	/* Blush, not mint. Mint over lavender turns the bottom corner a muddy
	   grey-green; pink and peach both sit on the warm side of the wash and stay
	   pastel where they overlap it. */
	background: var(--om-blush);
}
/* The column inside the half. Centred, and capped well short of the half's
   width. */
/*
 * Sticky, and here is why.
 *
 * The two halves are one grid row, so the taller one sets the height — and the
 * Create account form is taller than a laptop screen. Left centred inside that
 * row, the showroom would start 200px down the page with the logo floating in
 * space, and scrolling to finish the form would leave it behind entirely.
 * Pinned under the header it stays put while the form moves, which is the whole
 * argument for putting the shop next to the form in the first place.
 *
 * Padding does the job an inner wrapper would, the same max() trick the right
 * half uses, because there is nothing to wrap around: these are the direct
 * children of the sticky box.
 */
.om-signin__storyin {
	position: sticky;
	top: var(--om-head);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(14px, 2.1vh, 22px);
	min-height: calc(100vh - var(--om-chrome));
	min-height: calc(100dvh - var(--om-chrome));
	padding-block: clamp(32px, 4.5vh, 56px);
	/* Asymmetric on purpose, and the right side is generous because the form
	   half's rounded edge overlaps into this column. */
	padding-inline: clamp(28px, 6vw, 104px) clamp(28px, 5vw, 88px);
}
.om-signin__storyin > * {
	max-width: 34rem;
}

.om-signin__logo {
	display: inline-flex;
	align-self: flex-start;
}
.om-signin__logo img {
	display: block;
	width: auto;
	height: 34px;
}

.om-signin__exts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}
/* Slightly stronger than the homepage's, because these sit on lavender rather
   than on the near-white canvas and the default wash would dissolve into it. */
.om-signin__exts .om-chip {
	background: rgba(255, 255, 255, 0.72);
	box-shadow: inset 0 0 0 1px rgba(87, 80, 253, 0.12);
}

.om-signin__hero {
	margin: 0;
	font-family: var(--om-display);
	font-size: clamp(1.9rem, 3vw, 2.85rem);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.032em;
}
.om-signin__hero em {
	font-style: normal;
	color: var(--om-indigo);
}

/* Two real product cards, side by side. */
.om-signin__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: 16px;
}
/* Dropped, not aligned. Two cards squared off at the top is a grid; one sitting
   lower is a shelf someone arranged. Margin rather than transform because
   .om-product uses transform for its hover lift and would cancel this. */
.om-signin__cards .om-product:nth-child(2) {
	margin-top: 26px;
}
/* At this width a third line of product name would push the price out of the
   half, so names get two lines and an ellipsis. Everywhere else on the site the
   cards are wider and this never engages. */
.om-signin__cards .om-product__name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* The three promises, as pills under the shelf rather than a bulleted list —
   the cards are the argument here, these are the footnote. */
.om-signin__perks {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.om-signin__perks li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 13px 7px 9px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.78);
	box-shadow: inset 0 0 0 1px var(--om-line);
	font-size: 0.83rem;
	font-weight: 600;
	color: var(--om-ink);
}
.om-signin__perkico {
	display: grid;
	place-items: center;
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--om-indigo-wash);
	color: var(--om-indigo-deep);
}

.om-signin__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	margin: 0;
	padding-top: clamp(12px, 1.8vh, 20px);
	border-top: 1px solid rgba(23, 22, 28, 0.1);
}
.om-signin__stats dt {
	font-family: var(--om-display);
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
}
.om-signin__stats dd {
	margin: 2px 0 0;
	font-size: 0.78rem;
	color: var(--om-ink-40);
}

/* --------------- Right: the door --------------- */
/*
 * The white half is the surface, not a card on it — top, right and bottom run
 * to the screen edges. Only the left edge is drawn, and it is drawn as a curve
 * riding over the lavender rather than as a rule between two panes. The indigo
 * breath from the hero sits low in the outside corner.
 *
 * The inline padding is doing the job an inner wrapper would — max() keeps the
 * form to a readable ~24rem however wide the half gets, and falls back to a
 * plain gutter once the half is narrower than that. A wrapper element would
 * have to sit between the tab radios and the panes, and those only find each
 * other as siblings.
 *
 * Every vertical gap below is a clamp on vh rather than a fixed pixel value,
 * for one reason: the Create account pane is the tallest thing this template
 * can render, and on a 768px-tall laptop a rhythm tuned for a 1080px screen
 * pushes its button under the fold. The gaps give way before the button does.
 */
.om-signin__panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	z-index: 1;
	padding-block: clamp(24px, 4.4vh, 60px);
	padding-inline: max(clamp(24px, 4vw, 64px), calc((100% - 24rem) / 2));

	/*
	 * The seam.
	 *
	 * Two flush halves meet on a hard vertical rule, and a hard vertical rule
	 * down the middle of a screen is the one thing this layout cannot survive:
	 * it reads as a table, and it makes both halves look like boxes that failed
	 * to become boxes. So the white half keeps its top, right and bottom edges
	 * against the screen — it is still the page, not a card — and curves on the
	 * left only, riding over the lavender with a soft shadow under it.
	 *
	 * The negative margin is what makes it an overlap rather than a notch: the
	 * column is widened by the same amount it is pulled left, so the form inside
	 * does not move.
	 */
	margin-left: calc(-1 * var(--om-lap));
	border-radius: var(--om-lap) 0 0 var(--om-lap);
	box-shadow: -30px 0 70px -34px rgba(23, 22, 28, 0.4);
	background:
		radial-gradient(680px 420px at 92% 106%, rgba(87, 80, 253, 0.07), transparent 62%),
		var(--om-white);
}
.om-signin__head {
	margin-bottom: clamp(12px, 2vh, 22px);
}
.om-signin__h {
	margin: 5px 0 7px;
	font-family: var(--om-display);
	font-size: clamp(1.55rem, 2.4vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.028em;
}
.om-signin__sub {
	margin: 0;
	font-size: 0.93rem;
	line-height: 1.6;
	color: var(--om-ink-60);
}

/* The radios are the tab state. Kept in the layout but invisible, rather than
   display:none, so they stay focusable and the arrow keys still work. */
.om-signin__sw {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}
.om-signin__tabs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px;
	padding: 4px;
	margin-bottom: clamp(13px, 2.2vh, 20px);
	background: var(--om-surface);
	border-radius: 999px;
}
.om-signin__tabs label {
	padding: 10px 12px;
	border-radius: 999px;
	text-align: center;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--om-ink-60);
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
#om-tab-in:checked ~ .om-signin__tabs label[for="om-tab-in"],
#om-tab-new:checked ~ .om-signin__tabs label[for="om-tab-new"] {
	background: var(--om-white);
	color: var(--om-ink);
	box-shadow: 0 1px 2px rgba(23, 22, 28, 0.1);
}
/* Keyboard users get the ring on the label, since the input itself is invisible. */
#om-tab-in:focus-visible ~ .om-signin__tabs label[for="om-tab-in"],
#om-tab-new:focus-visible ~ .om-signin__tabs label[for="om-tab-new"] {
	outline: 2px solid var(--om-indigo);
	outline-offset: 2px;
}
.om-signin__tabs ~ .om-signin__pane {
	display: none;
}
#om-tab-in:checked ~ .om-signin__pane--in,
#om-tab-new:checked ~ .om-signin__pane--new {
	display: block;
}

.om-signin__panel .om-gauth {
	margin-bottom: 2px;
}
.om-signin__panel .om-gauth__or {
	margin-top: clamp(12px, 2vh, 18px);
}
.om-signin__pane .om-form .form-row {
	margin-bottom: clamp(9px, 1.6vh, 14px);
}
.om-signin__panel .om-gauth__btn,
.om-signin__pane .om-form .input-text {
	padding-block: clamp(10px, 1.5vh, 13px);
}
/*
 * Woo prints the registration privacy notice at full body size, which makes the
 * longest paragraph on the screen the one nobody came here to read — and on a
 * 768px-tall laptop those four lines were exactly what pushed the Create
 * account button under the fold. Sized as the fine print it is.
 */
.om-signin__pane .woocommerce-privacy-policy-text p {
	margin: 0 0 clamp(12px, 1.9vh, 16px);
	font-size: 0.78rem;
	line-height: 1.55;
	color: var(--om-ink-40);
}
/* The one button on the screen that everything else is arranged around. A
   96px button floating at the left of a 24rem column reads as optional. */
.om-signin__pane .om-form__actions .om-btn {
	width: 100%;
}
.om-signin__pane .om-form__actions {
	margin-bottom: 0;
}
/* Sits under whichever form is open rather than pinned to the foot of the
   half — the content is vertically centred now, and a line of grey type
   stranded at the bottom of the screen would read as footer, not answer. */
.om-signin__foot {
	margin: clamp(16px, 2.6vh, 22px) 0 0;
	padding-top: clamp(14px, 2.4vh, 20px);
	border-top: 1px solid var(--om-line);
	font-size: 0.82rem;
	line-height: 1.6;
	color: var(--om-ink-40);
}

@media (prefers-reduced-motion: reduce) {
	.om-signin__cards .om-product:hover {
		transform: none;
	}
	.om-signin__cards .om-product:hover .om-product__media img {
		transform: none;
	}
}

/*
 * Short laptops.
 *
 * The Create account pane is the tallest thing this template renders — two
 * fields, a Google button, a rule, a privacy notice and the button — and on a
 * 768px screen the vh gaps above have already given everything they can. The
 * last thing to go is the subtitle, because the tabs directly under it say the
 * same thing in two words: the button matters more than the sentence
 * introducing it. Only on the split layout; stacked, the page scrolls anyway.
 */
@media (min-width: 901px) and (max-height: 820px) {
	.om-signin__sub {
		display: none;
	}
	.om-signin__h {
		margin-bottom: 0;
		font-size: 1.65rem;
	}

	/* The showroom has the same problem and the same answer. The counters go
	   first: the two real products above them are the better version of the
	   same argument, and a stats row sliced in half by the fold looks like a
	   page that failed to load rather than one that continues. */
	.om-signin__stats {
		display: none;
	}
	.om-signin__storyin {
		gap: 13px;
		padding-block: 20px;
	}
}

/* One column. The screen-height floor comes off with it: stacked, the two
   halves are as tall as they need to be and the page simply scrolls. */
@media (max-width: 900px) {
	.om-signin {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}
	/* On a phone the door comes first. Someone who opened this page from a
	   "sign in" link should not have to scroll past the sales pitch to reach
	   the form they asked for. */
	/* Stacked, the same overlap runs the other way: the form's bottom edge
	   curves down over the showroom. */
	.om-signin__panel {
		order: -1;
		margin-left: 0;
		margin-bottom: calc(-1 * var(--om-lap));
		padding-block: 40px calc(40px + var(--om-lap));
		border-radius: 0 0 var(--om-lap) var(--om-lap);
		box-shadow: 0 30px 70px -40px rgba(23, 22, 28, 0.4);
	}
	.om-signin__storyin > * {
		max-width: none;
	}
	/* Nothing to stick to in one column, and a half-screen of pinned showroom
	   over a scrolling form would be worse than useless on a phone. */
	/* Stacked, the showroom is a full-width band, so the peach light bleeding
	   140px past its right edge becomes 140px of sideways page scroll. On the
	   split it never could — that edge is mid-screen. clip-path cannot help
	   here: it clips the paint, not the scroll area. overflow is safe again
	   only because the sticky it would have broken is switched off below. */
	.om-signin__story {
		overflow: hidden;
	}
	.om-signin__storyin {
		position: static;
		min-height: 0;
		padding-block: 44px;
		padding-inline: clamp(24px, 6vw, 48px);
	}
}

@media (max-width: 640px) {
	.om-signin__panel {
		padding-block: 32px;
	}
	.om-signin__storyin {
		padding-block: 36px;
		padding-inline: 24px;
	}
	.om-signin__hero {
		font-size: 2rem;
	}
	.om-signin__cards {
		gap: 12px;
	}
	.om-signin__stats {
		gap: 18px;
	}
}