/* ==========================================================================
   «Мій акаунт» (WooCommerce) restyled to the RenderMe design — full working
   width, glass sidebar + content, our inputs/buttons/tables, styled login +
   register + Google (Nextend) buttons. Everything scoped under
   .woocommerce-account so it never leaks to other pages. Tokens only.
   ========================================================================== */

/* ---- Layout: sidebar (float) + content on the full working width. Float is
   used rather than grid because the .woocommerce wrapper can hold extra
   siblings (notices etc.) that broke a 2-column grid. ---- */
.woocommerce-account .woocommerce {
	max-width: var(--container-max);
	margin-inline: auto;
	padding: var(--space-16) var(--container-pad);
}
.woocommerce-account .woocommerce::after { content: ""; display: block; clear: both; }
.woocommerce-account .woocommerce-MyAccount-navigation { float: left; width: 260px; margin: 0; }
.woocommerce-account .woocommerce-MyAccount-content { float: none; width: auto; margin-left: calc(260px + var(--space-6)); }
@media (max-width: 900px) {
	.woocommerce-account .woocommerce { padding: var(--space-8) 16px; }
	.woocommerce-account .woocommerce-MyAccount-navigation { float: none; width: auto; margin-bottom: var(--space-4); }
	.woocommerce-account .woocommerce-MyAccount-content { margin-left: 0; }
}

/* ---- Sidebar navigation ---- */
.woocommerce-account .woocommerce-MyAccount-navigation {
	background: rgba(255, 255, 255, 0.045);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 10px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 12px 14px;
	border-radius: var(--radius-sm);
	color: var(--color-text-muted);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var(--color-bg-elevated-hover); color: var(--color-text); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--gradient-brand-btn);
	color: #fff;
	box-shadow: var(--shadow-brand), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

/* ---- Content panel ---- */
.woocommerce-account .woocommerce-MyAccount-content {
	background: rgba(255, 255, 255, 0.045);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-6);
	color: var(--color-text);
	min-width: 0;
}
.woocommerce-account .woocommerce-MyAccount-content p { color: var(--color-text-muted); }
.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.woocommerce-button) { color: var(--color-text); text-decoration: underline; text-underline-offset: 2px; }
.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.woocommerce-button):hover { color: var(--color-text-muted); }
.woocommerce-account .woocommerce-MyAccount-content mark { background: transparent; color: var(--color-text); font-weight: 700; }

/* ---- Tables (orders / downloads) ---- */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table,
.woocommerce-account table.woocommerce-orders-table,
.woocommerce-account table.woocommerce-table--order-downloads {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	overflow: hidden;
	font-size: 14px;
}
.woocommerce-account .shop_table thead th {
	background: var(--color-bg-elevated);
	color: var(--color-text-muted);
	font-weight: 700;
	text-align: left;
	padding: 12px 14px;
	border-bottom: 1px solid var(--color-border);
}
.woocommerce-account .shop_table td {
	padding: 12px 14px;
	border-top: 1px solid var(--color-border);
	color: var(--color-text);
	background: transparent;
}
.woocommerce-account .shop_table tr:hover td { background: rgba(255, 255, 255, 0.03); }

/* ---- Buttons → our CTA ---- */
.woocommerce-account .button,
.woocommerce-account .woocommerce-button,
.woocommerce-account button[type="submit"],
.woocommerce-account input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 20px;
	border: none;
	border-radius: var(--radius-sm);
	background: var(--gradient-brand-btn);
	color: #fff !important;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	cursor: pointer;
	box-shadow: var(--shadow-brand), inset 0 1px 0 rgba(255, 255, 255, 0.16);
	transition: transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.woocommerce-account .button:hover,
.woocommerce-account .woocommerce-button:hover,
.woocommerce-account button[type="submit"]:hover,
.woocommerce-account input[type="submit"]:hover { transform: translateY(-1px); }
.woocommerce-account .button:focus,
.woocommerce-account button[type="submit"]:focus { outline: none; }

/* ---- Forms (login / register / edit-account) ---- */
.woocommerce-account .woocommerce-form-row label,
.woocommerce-account .form-row label { display: block; font-size: 12px; color: var(--color-text-muted); margin-bottom: 5px; }
.woocommerce-account .required,
.woocommerce-account abbr.required,
.woocommerce-account .form-row .required { color: var(--color-text-muted) !important; text-decoration: none !important; border: 0 !important; }
.woocommerce-account input.input-text,
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"],
.woocommerce-account input[type="tel"] {
	width: 100%;
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	color: var(--color-text);
	padding: 11px 12px;
	font: inherit;
	font-size: 14px;
}
.woocommerce-account input.input-text::placeholder { color: var(--color-text-faint); }
.woocommerce-account input.input-text:focus { outline: none; border-color: var(--color-magenta); }
.woocommerce-account .woocommerce-form-login__rememberme,
.woocommerce-account .woocommerce-form-register label.checkbox { color: var(--color-text-muted); font-size: 13px; }

/* Login / register cards centred like a real auth screen */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register,
.woocommerce-account .woocommerce-ResetPassword {
	max-width: 460px;
	margin: 0 auto;
	background: rgba(255, 255, 255, 0.045);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-6);
}
.woocommerce-account .u-columns.col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); max-width: 960px; margin-inline: auto; }
@media (max-width: 720px) { .woocommerce-account .u-columns.col2-set { grid-template-columns: 1fr; } }

/* ---- Google / social buttons (Nextend Social Login) ---- */
.woocommerce-account .nsl-container { margin: 16px 0 0; }
.woocommerce-account .nsl-container .nsl-button {
	border-radius: var(--radius-sm) !important;
	overflow: hidden;
	box-shadow: inset 0 0 0 1px var(--color-border-strong);
}
.woocommerce-account .nsl-container-buttons { gap: 10px; }
/* a subtle "or" divider between password and social */
.woocommerce-account .rm-or {
	display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--color-text-faint); font-size: 12px;
}
.woocommerce-account .rm-or::before,
.woocommerce-account .rm-or::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }

/* ---- Notices restyled (same as checkout — one clean box, no overlap icon) ---- */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error {
	position: relative; list-style: none; margin: 0 0 16px; padding: 14px 16px; border-radius: var(--radius-sm);
	background: rgba(255, 255, 255, 0.04); border: 1px solid var(--color-border-strong); color: var(--color-text); font-size: 14px; line-height: 1.45;
}
.woocommerce-account .woocommerce-error { background: rgba(192, 41, 139, 0.10); border-color: var(--color-magenta); }
.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-error::before { content: none !important; display: none !important; }
.woocommerce-account .woocommerce-message a.button { margin-left: 12px; }

/* ---- Dashboard intro ---- */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-MyAccount-content__title { font-family: var(--font-heading); }

/* ---- Dashboard welcome («Огляд») ---- */
.woocommerce-account .rm-acc-hello__title { font-family: var(--font-heading); font-size: 22px; margin: 0 0 8px; }
.woocommerce-account .rm-acc-hello__title span { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.woocommerce-account .rm-acc-hello__text { color: var(--color-text-muted); font-size: 14px; margin: 0; }

/* ---- Edit-account form: flex layout (no float gaps) + tidy password box ---- */
.woocommerce-account .woocommerce-EditAccountForm { display: flex; flex-wrap: wrap; gap: 14px 16px; }
.woocommerce-account .woocommerce-EditAccountForm > p,
.woocommerce-account .woocommerce-EditAccountForm > fieldset { flex: 1 1 100%; float: none; width: auto; margin: 0; }
.woocommerce-account .woocommerce-EditAccountForm > p.form-row-first,
.woocommerce-account .woocommerce-EditAccountForm > p.form-row-last { flex: 1 1 calc(50% - 8px); }
.woocommerce-account .woocommerce-EditAccountForm .clear { display: none; }
.woocommerce-account .woocommerce-EditAccountForm span.description,
.woocommerce-account .woocommerce-EditAccountForm em { color: var(--color-text-faint); font-size: 12px; font-style: normal; display: block; margin-top: 5px; }
.woocommerce-account .woocommerce-EditAccountForm fieldset {
	border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 18px;
}
.woocommerce-account .woocommerce-EditAccountForm fieldset legend {
	font-family: var(--font-heading); font-weight: 700; font-size: 15px; color: var(--color-text); padding: 0 6px; margin-bottom: 8px;
}
.woocommerce-account .woocommerce-EditAccountForm fieldset p { margin: 0 0 12px; }
.woocommerce-account .woocommerce-EditAccountForm fieldset p:last-child { margin-bottom: 0; }

/* password show/hide eye button */
.woocommerce-account .password-input { position: relative; display: block; }
.woocommerce-account .show-password-input { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); cursor: pointer; }
.woocommerce-account .show-password-input::after { color: var(--color-text-muted); }

/* ---- Notices never stretch to a flex row height or take a fixed height ---- */
/* Compact flex row (text + optional button), so a notice is only as tall as its
   content — it was stretching to a huge empty box. */
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-message {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	flex: 0 0 100%;
	align-self: flex-start;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	border-top-width: 1px; /* neutralise woo.css's 3px top border */
}
.woocommerce-account .woocommerce-message .button,
.woocommerce-account .woocommerce-info .button,
.woocommerce-account .woocommerce-error .button { float: none !important; margin: 0 !important; flex: 0 0 auto; }

/* ---- Avatar (edit-account + dashboard) ---- */
.woocommerce-account .rm-avatar-row { display: flex; align-items: center; gap: 16px; flex: 1 1 100%; }
.woocommerce-account .rm-avatar-preview img,
.woocommerce-account .rm-acc-hello__avatar img {
	width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
	border: 1px solid var(--color-border-strong); display: block;
}
.woocommerce-account .rm-avatar-field { flex: 1; min-width: 0; }
.woocommerce-account .rm-avatar-input { color: var(--color-text-muted); font-size: 13px; }
.woocommerce-account .rm-avatar-input::file-selector-button {
	margin-right: 12px; padding: 8px 14px; border: none; border-radius: var(--radius-sm);
	background: var(--color-bg-elevated); box-shadow: inset 0 0 0 1px var(--color-border-strong);
	color: var(--color-text); font-weight: 700; font-size: 12px; cursor: pointer;
}
.woocommerce-account .rm-avatar-input::file-selector-button:hover { background: var(--color-bg-elevated-hover); }

.woocommerce-account .rm-acc-hello { display: flex; align-items: center; gap: 16px; }
.woocommerce-account .rm-acc-hello__avatar img { width: 64px; height: 64px; }

/* ---- Avatar: 110 preview + preset library ---- */
.woocommerce-account .rm-avatar-preview img { width: 110px; height: 110px; }
.woocommerce-account .rm-avatar-presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.woocommerce-account .rm-avatar-opt {
	position: relative; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; cursor: pointer;
	box-shadow: inset 0 0 0 1px var(--color-border-strong); transition: box-shadow .2s, transform .2s;
}
.woocommerce-account .rm-avatar-opt:hover { transform: translateY(-1px); }
.woocommerce-account .rm-avatar-opt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.woocommerce-account .rm-avatar-opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.woocommerce-account .rm-avatar-opt.is-on,
.woocommerce-account .rm-avatar-opt:has(input:checked) { box-shadow: 0 0 0 2px var(--color-magenta); }

/* ---- Avatars: square with rounded corners (like the language chip), not round ---- */
.woocommerce-account .rm-avatar-preview img { border-radius: 14px; }
.woocommerce-account .rm-acc-hello__avatar img { border-radius: 12px; }
.woocommerce-account .rm-avatar-opt { width: 52px; height: 52px; border-radius: 10px; }
.woocommerce-account .rm-avatar-presets {
	max-width: 520px; max-height: 232px; overflow-y: auto; padding: 6px;
	border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-elevated);
}

/* ---- Avatar picker panel (button → 2-row scrollable grid) ---- */
.woocommerce-account .rm-avatar-row { align-items: center; }
.woocommerce-account .rm-avatar-change {
	display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border: none; cursor: pointer;
	background: var(--color-bg-elevated); box-shadow: inset 0 0 0 1px var(--color-border-strong);
	border-radius: var(--radius-sm); color: var(--color-text); font: inherit; font-weight: 700; font-size: 13px;
	transition: background var(--duration-fast) var(--ease-standard);
}
.woocommerce-account .rm-avatar-change:hover { background: var(--color-bg-elevated-hover); }
.woocommerce-account .rm-avatar-picker {
	position: relative; margin-top: 12px; width: 100%;
	background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-md);
	padding: 14px 44px 14px 14px;
}
.woocommerce-account .rm-avatar-grid {
	display: grid; grid-template-columns: repeat(auto-fill, 56px); gap: 10px; justify-content: start;
	max-height: 152px; overflow-y: auto; padding-right: 4px;
}
.woocommerce-account .rm-avatar-grid .rm-avatar-opt { width: 56px; height: 56px; }
.woocommerce-account .rm-avatar-close {
	position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; border: none; cursor: pointer;
	background: var(--color-bg-elevated); box-shadow: inset 0 0 0 1px var(--color-border-strong);
	color: var(--color-text-muted); font-size: 18px; line-height: 1;
}
.woocommerce-account .rm-avatar-close:hover { color: var(--color-text); }

/* ---- «Збережено» note next to the Save button ---- */
.woocommerce-account .rm-save-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.woocommerce-account .rm-saved-note { color: var(--color-text-muted); font-size: 13px; }
.woocommerce-account .rm-saved-note::before { content: "✓ "; color: var(--color-magenta); font-weight: 700; }

/* ===== Fixes: button hover keeps gradient, eye white, no autofill blue ===== */
.woocommerce-account .button:hover,
.woocommerce-account .woocommerce-button:hover,
.woocommerce-account button[type="submit"]:hover,
.woocommerce-account input[type="submit"]:hover {
	background: var(--gradient-brand-btn) !important;
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 14px 32px rgba(192, 41, 139, .36), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.woocommerce-account .show-password-input,
.woocommerce-account .hide-password-input { color: var(--color-text) !important; }
.woocommerce-account .show-password-input::after,
.woocommerce-account .hide-password-input::after { color: var(--color-text); }
.woocommerce-account input:-webkit-autofill,
.woocommerce-account input:-webkit-autofill:hover,
.woocommerce-account input:-webkit-autofill:focus,
.woocommerce-account input:-webkit-autofill:active,
.rm-checkout input:-webkit-autofill,
.rm-checkout input:-webkit-autofill:hover,
.rm-checkout input:-webkit-autofill:focus,
.rm-checkout input:-webkit-autofill:active {
	-webkit-text-fill-color: var(--color-text) !important;
	/* SOLID dark mask — a translucent one let Chrome's autofill blue show through */
	-webkit-box-shadow: 0 0 0 1000px #15141a inset !important;
	box-shadow: 0 0 0 1000px #15141a inset !important;
	caret-color: var(--color-text);
	border: 1px solid var(--color-border-strong) !important;
	transition: background-color 100000s ease-in-out 0s;
}

/* ===== Avatar block: label top-left, image left, button on image's top edge,
   picker slides open full-width (~3 rows) with a close × top-right ===== */
.woocommerce-account .woocommerce-EditAccountForm > .rm-avatar-block { flex: 1 1 100%; }
.woocommerce-account .rm-avatar-block { display: block; margin: 0; }
.woocommerce-account .rm-avatar-label { display: block; font-size: 12px; color: var(--color-text-muted); margin-bottom: 8px; }
.woocommerce-account .rm-avatar-head { display: flex; align-items: flex-start; gap: 16px; }
.woocommerce-account .rm-avatar-head .rm-avatar-preview { flex: 0 0 auto; }
.woocommerce-account .rm-avatar-picker {
	width: 100%; max-height: 0; opacity: 0; overflow: hidden; margin-top: 0; padding: 0; border: 0;
	background: var(--color-bg-elevated); border-radius: var(--radius-md);
	transition: max-height .35s var(--ease-standard), opacity .3s var(--ease-standard),
		margin-top .35s var(--ease-standard), padding .35s var(--ease-standard);
}
.woocommerce-account .rm-avatar-picker.is-open {
	max-height: 340px; opacity: 1; margin-top: 14px; padding: 12px 14px 14px;
	border: 1px solid var(--color-border);
}
.woocommerce-account .rm-avatar-close {
	display: block; margin: 0 0 8px auto; width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer;
	background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-border-strong);
	color: var(--color-text-muted); font-size: 18px; line-height: 1;
}
.woocommerce-account .rm-avatar-close:hover { color: var(--color-text); }
.woocommerce-account .rm-avatar-grid {
	display: grid; grid-template-columns: repeat(auto-fill, 56px); gap: 10px; justify-content: start;
	max-height: 208px; overflow-y: auto; padding-right: 4px;
}

.woocommerce-account .rm-avatar-close { position: static; top: auto; right: auto; }

/* ===== Magic-link login form ===== */
.woocommerce-account .rm-magic { max-width: 460px; margin: 16px auto 0; }
.woocommerce-account .rm-magic-form {
	background: rgba(255, 255, 255, 0.045); border: 1px solid var(--color-border);
	border-radius: var(--radius-md); padding: var(--space-6);
}
.woocommerce-account .rm-magic-form label { display: block; font-size: 12px; color: var(--color-text-muted); margin-bottom: 6px; }
.woocommerce-account .rm-magic-row { display: flex; gap: 10px; align-items: stretch; }
.woocommerce-account .rm-magic-row input { flex: 1; min-width: 0; }
.woocommerce-account .rm-magic-row .button { flex: 0 0 auto; white-space: nowrap; }

/* ===== Gifts received (recipient dashboard) ===== */
.woocommerce-account .rm-acc-gifts { margin-top: 20px; border-top: 1px solid var(--color-border); padding-top: 16px; }
.woocommerce-account .rm-acc-gifts__title { font-family: var(--font-heading); font-size: 16px; margin: 0 0 10px; }
.woocommerce-account .rm-acc-gifts ul { margin: 0 0 8px; padding-left: 18px; color: var(--color-text-muted); font-size: 14px; }
.woocommerce-account .rm-acc-gifts ul strong { color: var(--color-text); }
.woocommerce-account .rm-acc-gifts__hint { color: var(--color-text-faint); font-size: 12px; margin: 0; }

/* ===== Gift note on the buyer's order ===== */
.woocommerce .rm-order-gift {
	background: rgba(192, 41, 139, 0.10); border: 1px solid var(--color-magenta); border-radius: var(--radius-sm);
	padding: 12px 14px; color: var(--color-text); font-size: 14px; margin-top: 16px;
}

/* ==========================================================================
   Single-page account (my-account.php): greeting header, tab pills, reserved
   message area, and switchable panels. Overlays the older nav/content styles
   (which are simply unused now — no sidebar is rendered).
   ========================================================================== */
.rm-acc { display: block; }

.rm-acc__head {
	display: flex; align-items: center; gap: 18px;
	background: rgba(255, 255, 255, 0.045); border: 1px solid var(--color-border);
	border-radius: var(--radius-md); padding: 20px 24px; margin-bottom: 20px;
}
.rm-acc__avatar img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; border: 1px solid var(--color-border-strong); display: block; }
.rm-acc__hello { flex: 1; min-width: 0; }
.rm-acc__title { font-family: var(--font-heading); font-size: 22px; margin: 0 0 6px; }
.rm-acc__title span { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rm-acc__text { color: var(--color-text-muted); font-size: 14px; margin: 0; }
.rm-acc__logout {
	flex: 0 0 auto; align-self: flex-start; display: inline-flex; align-items: center; height: 40px; padding: 0 18px;
	border-radius: var(--radius-sm); background: var(--color-bg-elevated); box-shadow: inset 0 0 0 1px var(--color-border-strong);
	color: var(--color-text); font-weight: 700; font-size: 13px; text-decoration: none; transition: background .2s, color .2s;
}
.rm-acc__logout:hover { background: rgba(192, 41, 139, 0.14); color: var(--color-text); }

.rm-acc__bar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
.rm-acc__tabs { display: flex; gap: 10px; flex-wrap: wrap; }
.rm-acc__tab {
	height: 44px; padding: 0 20px; border: none; border-radius: var(--radius-sm); cursor: pointer;
	background: var(--color-bg-elevated); box-shadow: inset 0 0 0 1px var(--color-border-strong);
	color: var(--color-text-muted); font: inherit; font-weight: 700; font-size: 14px;
	transition: background .3s, color .3s, box-shadow .3s;
}
.rm-acc__tab:hover { background: var(--color-bg-elevated-hover); color: var(--color-text); }
.rm-acc__tab.is-active { background: var(--gradient-brand-btn); color: #fff; box-shadow: var(--shadow-brand), inset 0 1px 0 rgba(255, 255, 255, 0.16); }

.rm-acc__msg { flex: 1; min-width: 200px; min-height: 26px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rm-acc__msg-item { font-size: 13px; padding: 6px 12px; border-radius: var(--radius-sm); }
.rm-acc__msg-item.is-error { color: #fff; background: rgba(192, 41, 139, 0.16); box-shadow: inset 0 0 0 1px var(--color-magenta); }
.rm-acc__msg-item.is-ok { color: var(--color-text-muted); }
.rm-acc__msg-item.is-ok::before { content: "✓ "; color: var(--color-magenta); font-weight: 700; }

.rm-acc__panel {
	display: none; background: rgba(255, 255, 255, 0.045); border: 1px solid var(--color-border);
	border-radius: var(--radius-md); padding: var(--space-6);
}
.rm-acc__panel.is-active { display: block; }
.rm-acc__panel > p:first-child { margin-top: 0; }
.rm-acc__panel a:not(.button):not(.woocommerce-button) { color: var(--color-text); text-decoration: underline; text-underline-offset: 2px; }
.rm-acc__panel a:not(.button):not(.woocommerce-button):hover { color: var(--color-text-muted); }

/* «Перегляд» / order-action button centred in its cell */
.rm-acc__panel .woocommerce-orders-table__cell-order-actions { text-align: center; }
.rm-acc__panel .woocommerce-orders-table__cell-order-actions .button { margin-inline: auto; }

/* Country select (account «Особисті дані») */
.rm-country-select {
	width: 100%; background: var(--color-bg-elevated); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
	color: var(--color-text); padding: 11px 40px 11px 12px; font: inherit; font-size: 14px; cursor: pointer;
	appearance: none; -webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f6f1e8' stroke-opacity='0.6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 14px center;
}
.rm-country-select:focus { outline: none; border-color: var(--color-magenta); }

@media (max-width: 700px) {
	.rm-acc__head { flex-wrap: wrap; }
	.rm-acc__logout { order: 3; }
	.rm-acc__msg { width: 100%; flex-basis: 100%; }
}

/* ===== Refinements ===== */

/* 1) Orders table — centre every cell */
.rm-acc__panel table.shop_table th,
.rm-acc__panel table.shop_table td,
.rm-acc__panel table.woocommerce-orders-table th,
.rm-acc__panel table.woocommerce-orders-table td { text-align: center; }
.rm-acc__panel table.shop_table th:first-child,
.rm-acc__panel table.shop_table td:first-child { text-align: center; }

/* back link on the view-order sub-page */
.rm-acc__back { display: inline-block; margin-bottom: 16px; color: var(--color-text-muted); text-decoration: none; font-weight: 700; font-size: 14px; }
.rm-acc__back:hover { color: var(--color-text); }

/* 7) «Вийти» hover — magenta outline only, no fill change */
.rm-acc__logout:hover { background: var(--color-bg-elevated); box-shadow: inset 0 0 0 1px var(--color-magenta); color: var(--color-text); }

/* 6) Password strength → subtle text, not a pink bar */
.woocommerce-account .woocommerce-password-strength {
	background: transparent !important; border: 0 !important; border-radius: 0 !important;
	color: var(--color-text-muted) !important; padding: 6px 0 0 !important; font-size: 12px; font-weight: 600; text-align: left;
}
.woocommerce-account .woocommerce-password-strength.short,
.woocommerce-account .woocommerce-password-strength.bad { color: var(--color-magenta) !important; }
.woocommerce-account .woocommerce-password-strength.good { color: #d1a54a !important; }
.woocommerce-account .woocommerce-password-strength.strong { color: #5fbf6a !important; }
.woocommerce-account .woocommerce-password-hint { color: var(--color-text-faint) !important; font-size: 12px; }

/* 5) Avatar picker — close × floats at the top-right, above the grid (like the
   portfolio video close); more room, nothing clipped */
.woocommerce-account .rm-avatar-pickerwrap { position: relative; }
.woocommerce-account .rm-avatar-block:not(.is-picker-open) .rm-avatar-close { display: none; }
.woocommerce-account .rm-avatar-close {
	position: absolute; top: -14px; right: 6px; z-index: 3; margin: 0;
	width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
	background: var(--color-bg); box-shadow: 0 0 0 1px var(--color-border-strong), 0 6px 18px rgba(0, 0, 0, .5);
	color: var(--color-text); font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.woocommerce-account .rm-avatar-close:hover { color: var(--color-magenta); }
.woocommerce-account .rm-avatar-block .rm-avatar-picker {
	max-height: 0; opacity: 0; overflow: hidden; margin-top: 0; padding: 0; border: 0;
	transition: max-height .35s var(--ease-standard), opacity .3s var(--ease-standard), margin-top .35s var(--ease-standard), padding .35s var(--ease-standard);
}
.woocommerce-account .rm-avatar-block.is-picker-open .rm-avatar-picker {
	max-height: 300px; opacity: 1; margin-top: 14px; padding: 14px; border: 1px solid var(--color-border);
}
.woocommerce-account .rm-avatar-picker .rm-avatar-grid {
	display: grid; grid-template-columns: repeat(auto-fill, 56px); gap: 12px; justify-content: start;
	max-height: 208px; overflow-y: auto; padding: 2px 12px 2px 2px; scrollbar-gutter: stable;
}

/* 4) Country dropdown — dark, opens downward, alphabetised */
.woocommerce-account .rm-drop { position: relative; }
.woocommerce-account .rm-drop__btn {
	width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
	background: var(--color-bg-elevated); box-shadow: inset 0 0 0 1px var(--color-border-strong); border: none;
	border-radius: var(--radius-sm); color: var(--color-text); padding: 11px 14px; font: inherit; font-size: 14px; cursor: pointer; text-align: left;
}
.woocommerce-account .rm-drop__btn:focus { outline: none; }
.woocommerce-account .rm-drop.is-open .rm-drop__btn { box-shadow: inset 0 0 0 1px var(--color-magenta); }
.woocommerce-account .rm-drop__ic { width: 16px; height: 16px; color: var(--color-text-muted); flex-shrink: 0; transition: transform .25s; }
.woocommerce-account .rm-drop.is-open .rm-drop__ic { transform: rotate(180deg); }
.woocommerce-account .rm-drop__list {
	position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; margin: 0; padding: 6px; list-style: none;
	background: #0d0b12; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
	box-shadow: 0 16px 40px rgba(0, 0, 0, .5); max-height: 260px; overflow: auto;
}
.woocommerce-account .rm-drop__opt { padding: 10px 12px; border-radius: 6px; font-size: 14px; color: var(--color-text-muted); cursor: pointer; }
.woocommerce-account .rm-drop__opt:hover { background: var(--color-bg-elevated-hover); color: var(--color-text); }
.woocommerce-account .rm-drop__opt.on { color: var(--color-text); background: rgba(192, 41, 139, .14); }

/* ==========================================================================
   v0.47.2 — order view integrated + closable, avatar picker no-scroll,
   no row hover, centred login. Appended last so these win.
   ========================================================================== */

/* 2) Orders table — no row highlight on hover (click the №/button instead) */
.rm-acc__panel table.shop_table tr:hover td,
.rm-acc__panel table.woocommerce-orders-table tr:hover td { background: transparent; }
/* the order number + action button stay the only affordances */
.rm-acc__panel .woocommerce-orders-table__cell-order-number a:hover { color: var(--color-magenta); }

/* 3a) Kill the yellow <mark> highlights anywhere in the cabinet */
.rm-acc mark, .rm-acc__panel mark { background: transparent !important; color: inherit !important; font-weight: 700; }

/* 3d) Order opens INSIDE the cabinet as a closable panel */
.rm-acc__panel--sub { position: relative; padding-right: 56px; }
.rm-acc__close {
	position: absolute; top: 14px; right: 14px; z-index: 4;
	width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	background: var(--color-bg); box-shadow: 0 0 0 1px var(--color-border-strong), 0 6px 18px rgba(0,0,0,.5);
	color: var(--color-text); font-size: 22px; line-height: 1; text-decoration: none; transition: color .2s, box-shadow .2s;
}
.rm-acc__close:hover { color: var(--color-magenta); box-shadow: 0 0 0 1px var(--color-magenta), 0 6px 18px rgba(0,0,0,.5); }

/* 3) Custom order card (view-order.php) */
.rm-order { color: var(--color-text); }
.rm-order__meta { color: var(--color-text-muted); font-size: 14px; margin: 0 0 20px; }
.rm-order__status { color: var(--color-text); font-weight: 700; }
.rm-order__list { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.rm-order__row {
	display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 16px;
	padding: 14px 18px; border-top: 1px solid var(--color-border);
}
.rm-order__row:first-child { border-top: 0; }
.rm-order__thumb {
	width: 64px; height: 40px; border-radius: 8px; background-color: var(--color-bg-elevated);
	background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px var(--color-border-strong); flex: 0 0 auto;
}
.rm-order__name { font-size: 15px; font-weight: 600; }
.rm-order__cat { color: var(--color-text-muted); font-weight: 400; font-size: 13px; margin-left: 4px; }
.rm-order__desc { display: block; margin-top: 4px; color: var(--color-text-muted); font-weight: 400; font-size: 13px; line-height: 1.5; }
.rm-order__price { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.rm-order__total {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-border); font-size: 16px; font-weight: 700;
}
@media (max-width: 560px) {
	.rm-order__row { grid-template-columns: 48px 1fr; grid-template-areas: "thumb name" "thumb price"; row-gap: 4px; }
	.rm-order__thumb { grid-area: thumb; width: 48px; height: 30px; }
	.rm-order__name { grid-area: name; }
	.rm-order__price { grid-area: price; text-align: left; }
}

/* 1) Avatar picker — fits ~3 rows with NO inner scrollbar, × lifted clear above */
.woocommerce-account .rm-avatar-block .rm-avatar-picker { margin-top: 0 !important; }
.woocommerce-account .rm-avatar-block.is-picker-open .rm-avatar-picker {
	max-height: 340px; opacity: 1; padding: 16px; border: 1px solid var(--color-border);
}
.woocommerce-account .rm-avatar-picker .rm-avatar-grid {
	max-height: none; overflow: visible; padding: 0; scrollbar-gutter: auto;
}
.woocommerce-account .rm-avatar-pickerwrap { position: relative; }
.woocommerce-account .rm-avatar-block.is-picker-open .rm-avatar-pickerwrap { padding-top: 0; margin-top: 0; }
.woocommerce-account .rm-avatar-close {
	position: absolute; top: -2px; right: 2px; z-index: 4;
	width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
	background: var(--color-bg); box-shadow: 0 0 0 1px var(--color-border-strong), 0 6px 18px rgba(0,0,0,.5);
	color: var(--color-text); font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.woocommerce-account .rm-avatar-close:hover { color: var(--color-magenta); }

/* 5) «Особисті дані» — country sits in the 2×2 grid; its dark drop is full-width */
.woocommerce-account .woocommerce-EditAccountForm > p.form-row-first,
.woocommerce-account .woocommerce-EditAccountForm > p.form-row-last { flex: 1 1 calc(50% - 8px); }
.woocommerce-account .woocommerce-EditAccountForm .rm-drop { width: 100%; }

/* 6) Login page (logged-out) — one centred column */
.woocommerce-account:not(.logged-in) .woocommerce { max-width: 500px; margin-inline: auto; }
.woocommerce-account:not(.logged-in) .woocommerce > h2,
.woocommerce-account:not(.logged-in) .woocommerce .woocommerce-form-login,
.woocommerce-account:not(.logged-in) .woocommerce .rm-magic { margin-inline: auto; width: 100%; }
.woocommerce-account:not(.logged-in) .woocommerce .rm-magic { max-width: 100%; }
.woocommerce-account:not(.logged-in) .woocommerce .rm-or { max-width: 500px; margin-inline: auto; }

/* ==========================================================================
   v0.47.3 — sub-page tabs as links, square close, clickable products,
   «Інші товари» button, Downloads redesign, country 2×2 fix, avatar block
   (button under image, panel to the right, no jump). Appended last.
   ========================================================================== */

/* 1) Tabs render as <a> on the order sub-page — keep them looking like tabs */
.rm-acc__tab { display: inline-flex; align-items: center; text-decoration: none; }

/* 2) Close × — square with rounded corners (our style), no underline */
.rm-acc__close {
	border-radius: var(--radius-sm); text-decoration: none !important;
	width: 40px; height: 40px;
}

/* 3) Clickable product (thumb + name) in the order + downloads */
.rm-order__thumb { display: block; text-decoration: none; }
.rm-order__link, .rm-dl__link { color: var(--color-text); text-decoration: none !important; font-weight: 600; }
.rm-order__link:hover, .rm-dl__link:hover { color: var(--color-magenta); }
a.rm-order__thumb:hover, a.rm-dl__thumb:hover { box-shadow: inset 0 0 0 1px var(--color-magenta); }

/* 4) «Інші товари» — right-aligned under the table, with spacing */
.rm-order__foot, .rm-dl__foot { display: flex; justify-content: flex-end; margin-top: 22px; }

/* 5) Downloads — one row per file: thumb | name(+cat) | Download + copy icon */
.rm-dl { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.rm-dl__row {
	display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 16px;
	padding: 14px 18px; border-top: 1px solid var(--color-border);
}
.rm-dl__row:first-child { border-top: 0; }
.rm-dl__thumb {
	width: 64px; height: 40px; border-radius: 8px; background-color: var(--color-bg-elevated);
	background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px var(--color-border-strong);
}
.rm-dl__name { font-size: 15px; }
.rm-dl__cat { color: var(--color-text-muted); font-size: 13px; }
.rm-dl__act { display: inline-flex; align-items: center; gap: 10px; }
.rm-dl__copy {
	position: relative; width: 40px; height: 40px; flex: 0 0 auto; border: none; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm);
	background: var(--color-bg-elevated); box-shadow: inset 0 0 0 1px var(--color-border-strong);
	color: var(--color-text-muted); transition: color .2s, box-shadow .2s;
}
.rm-dl__copy svg { width: 18px; height: 18px; }
.rm-dl__copy:hover { color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-border-strong-2, var(--color-magenta)); }
.rm-dl__copy.is-copied { color: #5fbf6a; box-shadow: inset 0 0 0 1px #5fbf6a; }
.rm-dl__copy.is-copied::after {
	content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	background: var(--color-bg-elevated); border-radius: var(--radius-sm); font-size: 16px;
}
.rm-dl__empty { text-align: center; padding: 30px 16px; }
.rm-dl__empty p { color: var(--color-text-muted); margin: 0 0 16px; }
@media (max-width: 560px) {
	.rm-dl__row { grid-template-columns: 48px 1fr; grid-template-areas: "thumb name" "act act"; row-gap: 10px; }
	.rm-dl__thumb { grid-area: thumb; width: 48px; height: 30px; }
	.rm-dl__name { grid-area: name; }
	.rm-dl__act { grid-area: act; }
	.rm-dl__go { flex: 1; }
}

/* 6) Country row is a <div> now (a <div> inside a <p> is invalid HTML and broke
   out to full width) — give it the same 50% flex slot as the other fields */
.woocommerce-account .woocommerce-EditAccountForm > .rm-country-row {
	flex: 1 1 calc(50% - 8px); margin: 0; float: none; width: auto; min-width: 0;
}

/* 7+8) Avatar block: image left, «Змінити» (avatar-width) under it, picker opens
   to the RIGHT filling the block; no height animation → avatars don't jump */
.woocommerce-account .rm-avatar-layout { display: flex; align-items: stretch; gap: 16px; }
.woocommerce-account .rm-avatar-col { flex: 0 0 110px; width: 110px; }
.woocommerce-account .rm-avatar-preview img { width: 110px; height: 110px; border-radius: 14px; display: block; }
.woocommerce-account .rm-avatar-change {
	width: 110px; height: 36px; margin-top: 10px; padding: 0; justify-content: center; text-align: center;
	display: inline-flex; align-items: center; border: none; cursor: pointer; border-radius: var(--radius-sm);
	background: var(--color-bg-elevated); box-shadow: inset 0 0 0 1px var(--color-border-strong);
	color: var(--color-text); font: inherit; font-weight: 700; font-size: 13px;
	transition: background var(--duration-fast) var(--ease-standard);
}
.woocommerce-account .rm-avatar-change:hover { background: var(--color-bg-elevated-hover); }

.woocommerce-account .rm-avatar-pickerwrap { position: relative; flex: 1 1 auto; min-width: 0; align-self: stretch; }
/* the panel fills the wrap; fade only (no max-height animation) so nothing reflows */
.woocommerce-account .rm-avatar-block .rm-avatar-picker {
	position: absolute; inset: 0; max-height: none; margin-top: 0; overflow: hidden;
	opacity: 0; visibility: hidden; padding: 0; border: 0;
	background: var(--color-bg-elevated); border-radius: var(--radius-md);
	transition: opacity .25s var(--ease-standard), visibility 0s linear .25s;
}
.woocommerce-account .rm-avatar-block.is-picker-open .rm-avatar-picker {
	opacity: 1; visibility: visible; padding: 12px; border: 1px solid var(--color-border);
	transition: opacity .25s var(--ease-standard), visibility 0s;
}
.woocommerce-account .rm-avatar-picker .rm-avatar-grid {
	display: grid; grid-template-columns: repeat(auto-fill, 46px); gap: 8px; justify-content: start;
	height: 100%; max-height: none; overflow-y: auto; padding-right: 4px;
	opacity: 0; transition: opacity .2s var(--ease-standard) .12s; /* appear AFTER the panel */
}
.woocommerce-account .rm-avatar-block.is-picker-open .rm-avatar-grid { opacity: 1; }
.woocommerce-account .rm-avatar-picker .rm-avatar-opt { width: 46px; height: 46px; border-radius: 10px; }
/* close × — square rounded, floats above the panel's top-right (like the portfolio video close) */
.woocommerce-account .rm-avatar-close {
	position: absolute; top: -14px; right: -8px; z-index: 5; display: none;
	width: 34px; height: 34px; border-radius: var(--radius-sm); border: none; cursor: pointer;
	background: var(--color-bg); box-shadow: 0 0 0 1px var(--color-border-strong), 0 6px 18px rgba(0,0,0,.5);
	color: var(--color-text); font-size: 20px; line-height: 1; align-items: center; justify-content: center;
}
.woocommerce-account .rm-avatar-block.is-picker-open .rm-avatar-close { display: flex; }
.woocommerce-account .rm-avatar-close:hover { color: var(--color-magenta); }

@media (max-width: 560px) {
	.woocommerce-account .rm-avatar-layout { flex-direction: column; }
	.woocommerce-account .rm-avatar-pickerwrap { width: 100%; min-height: 180px; }
}

/* neutralise older is-open offsets on the (now absolute) avatar panel */
.woocommerce-account .rm-avatar-block.is-picker-open .rm-avatar-picker { margin: 0; max-height: none; }

/* ==========================================================================
   v0.47.4 — «Інші товари» below the panel, avatar panel = image height with ×
   above, password field outline + full-size message box, smooth close.
   ========================================================================== */

/* 1) «Інші товари» sits BELOW the whole panel, right-aligned */
.rm-acc__foot { display: flex; justify-content: flex-end; margin-top: 20px; }

/* 2) Avatar panel = the image's height (not the whole column), × above the block */
.woocommerce-account .rm-avatar-layout { align-items: flex-start; }
.woocommerce-account .rm-avatar-pickerwrap { align-self: flex-start; height: 110px; }
.woocommerce-account .rm-avatar-close { top: -16px; right: -6px; }
@media (max-width: 560px) {
	.woocommerce-account .rm-avatar-pickerwrap { height: 180px; }
}

/* 3a) Invalid password field — magenta outline so it's clear what the message means */
.woocommerce-account input.input-text.is-invalid {
	border-color: var(--color-magenta) !important; box-shadow: 0 0 0 1px var(--color-magenta);
}
/* 3b) Message box — full height of the tabs (44px) and full width to the end */
.rm-acc__msg { align-self: stretch; min-height: 44px; }
.rm-acc__msg-item {
	flex: 1; width: 100%; min-height: 44px; box-sizing: border-box;
	display: flex; align-items: center; padding: 0 16px;
}
.rm-acc__msg-item.is-error {
	color: var(--color-text); background: rgba(192, 41, 139, 0.12); box-shadow: inset 0 0 0 1px var(--color-magenta);
}

/* 4) Closing is instant-fade (no lingering avatars → no jump); the delayed
   reveal is applied only while OPENING */
.woocommerce-account .rm-avatar-picker .rm-avatar-grid { transition: opacity .18s var(--ease-standard); }
.woocommerce-account .rm-avatar-block.is-picker-open .rm-avatar-grid { transition: opacity .2s var(--ease-standard) .12s; }

/* ==========================================================================
   v0.47.5 — Save button right, no stray text-caret, avatars fit image-height
   without a scrollbar, «Написати» row for purchased-but-missing files.
   ========================================================================== */

/* 2) «Зберегти зміни» aligned to the right */
.woocommerce-account .rm-save-row { justify-content: flex-end; }

/* 1) No text caret / selection when clicking empty spots in the avatar block */
.woocommerce-account .rm-avatar-block { user-select: none; -webkit-user-select: none; }
.woocommerce-account .rm-avatar-pickerwrap { cursor: default; }
.woocommerce-account .rm-avatar-block:not(.is-picker-open) .rm-avatar-picker { pointer-events: none; }

/* 3) Panel is exactly the image height and all avatars fit — no scrollbar */
.woocommerce-account .rm-avatar-block.is-picker-open .rm-avatar-picker { padding: 11px; max-height: 110px; }
.woocommerce-account .rm-avatar-picker .rm-avatar-grid {
	grid-template-columns: repeat(auto-fill, 38px); gap: 8px; height: 100%; overflow-y: auto;
}
.woocommerce-account .rm-avatar-picker .rm-avatar-opt { width: 38px; height: 38px; border-radius: 9px; }

/* 5) Purchased-but-missing file: note + «Написати» (opens the quick form) */
.rm-dl__miss,
.rm-order__miss { display: block; margin-top: 3px; color: var(--color-magenta); font-size: 12px; font-weight: 600; }
.rm-dl__report {
	background: var(--color-bg-elevated) !important; box-shadow: inset 0 0 0 1px var(--color-border-strong) !important;
	color: var(--color-text) !important;
}
.rm-dl__report:hover { box-shadow: inset 0 0 0 1px var(--color-magenta) !important; }

/* ==========================================================================
   v0.47.6 — avatar panel height = image + «Змінити» button, deleted-product row.
   ========================================================================== */

/* 4) Panel spans the whole left column (avatar + button) height */
.woocommerce-account .rm-avatar-pickerwrap { align-self: stretch; height: auto; }
.woocommerce-account .rm-avatar-block.is-picker-open .rm-avatar-picker { max-height: none; }
.woocommerce-account .rm-avatar-picker .rm-avatar-opt { width: 44px; height: 44px; border-radius: 10px; }
.woocommerce-account .rm-avatar-picker .rm-avatar-grid { grid-template-columns: repeat(auto-fill, 44px); }

/* deleted product row — dimmed, no action */
.rm-dl__row.is-gone .rm-dl__thumb { opacity: .4; }
.rm-dl__row.is-gone .rm-dl__name { color: var(--color-text-muted); }

/* ==========================================================================
   v0.47.7 — AUTHORITATIVE avatar picker (higher specificity via .rm-avatar-block
   in every chain, so it beats all earlier fragments) + login page harmony.
   Structure: .rm-avatar-layout > (.rm-avatar-col[img 110 + btn 36 (+10 gap)]) +
   (.rm-avatar-pickerwrap 156 tall). Panel fills the column exactly; × floats above.
   ========================================================================== */

.woocommerce-account .rm-avatar-block .rm-avatar-layout { display: flex; align-items: flex-start; gap: 16px; }
.woocommerce-account .rm-avatar-block .rm-avatar-col { flex: 0 0 110px; width: 110px; }
.woocommerce-account .rm-avatar-block .rm-avatar-preview img { width: 110px; height: 110px; border-radius: 14px; display: block; }
.woocommerce-account .rm-avatar-block .rm-avatar-change { width: 110px; height: 36px; margin-top: 10px; padding: 0; justify-content: center; }

/* pickerwrap = the column's full height (110 image + 10 gap + 36 button = 156) */
.woocommerce-account .rm-avatar-block .rm-avatar-pickerwrap {
	position: relative; flex: 1 1 auto; min-width: 0; align-self: flex-start; height: 156px;
}
.woocommerce-account .rm-avatar-block .rm-avatar-picker {
	position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: auto; max-height: none;
	margin: 0; padding: 0; border: 0; overflow: hidden; border-radius: var(--radius-md);
	background: var(--color-bg-elevated); opacity: 0; visibility: hidden;
	transition: opacity .25s var(--ease-standard), visibility 0s linear .25s;
}
.woocommerce-account .rm-avatar-block.is-picker-open .rm-avatar-picker {
	opacity: 1; visibility: visible; border: 1px solid var(--color-border);
	transition: opacity .25s var(--ease-standard), visibility 0s;
}
/* grid is inset 12px inside the panel, so padding never changes the panel height */
.woocommerce-account .rm-avatar-block .rm-avatar-grid {
	position: absolute; inset: 12px; display: grid; grid-template-columns: repeat(auto-fill, 44px);
	gap: 8px; justify-content: start; align-content: start; overflow-y: auto;
	height: auto; max-height: none; padding: 0;
	opacity: 0; transition: opacity .18s var(--ease-standard);
}
.woocommerce-account .rm-avatar-block.is-picker-open .rm-avatar-grid { opacity: 1; transition: opacity .2s var(--ease-standard) .12s; }
.woocommerce-account .rm-avatar-block .rm-avatar-opt { width: 44px; height: 44px; border-radius: 10px; }

/* × sits fully ABOVE the panel's top-right corner (square, rounded — our style) */
.woocommerce-account .rm-avatar-block .rm-avatar-close {
	position: absolute; top: -40px; right: 0; z-index: 6; display: none;
	width: 32px; height: 32px; border-radius: var(--radius-sm); border: none; cursor: pointer;
	background: var(--color-bg); box-shadow: 0 0 0 1px var(--color-border-strong), 0 6px 18px rgba(0, 0, 0, .5);
	color: var(--color-text); font-size: 20px; line-height: 1; align-items: center; justify-content: center;
}
.woocommerce-account .rm-avatar-block.is-picker-open .rm-avatar-close { display: flex; }
.woocommerce-account .rm-avatar-block .rm-avatar-close:hover { color: var(--color-magenta); }

@media (max-width: 560px) {
	.woocommerce-account .rm-avatar-block .rm-avatar-layout { flex-direction: column; }
	.woocommerce-account .rm-avatar-block .rm-avatar-pickerwrap { width: 100%; height: 200px; }
}

/* -------- Login page: one harmonious centred column -------- */
.woocommerce-account:not(.logged-in) .woocommerce { max-width: 460px; margin-inline: auto; }
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .rm-magic-form {
	width: 100%; max-width: 100%; margin: 0; border-radius: var(--radius-md);
	padding: var(--space-6); background: rgba(255, 255, 255, 0.045); border: 1px solid var(--color-border);
}
.woocommerce-account .rm-magic { max-width: 100%; margin: 0; }
.woocommerce-account:not(.logged-in) .rm-or { max-width: 100%; margin: 18px 0; }
/* «Увійти» button to the right, «Запам'ятати мене» stays on the left — via order +
   margin so it works whatever order WooCommerce prints the two in */
.woocommerce-account .woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) {
	display: flex; align-items: center; gap: 12px; margin-bottom: 4px;
}
.woocommerce-account .woocommerce-form-login .woocommerce-form-login__rememberme { order: 1; margin: 0; }
.woocommerce-account .woocommerce-form-login .woocommerce-form-login__submit { order: 2; margin-left: auto; }

/* ==========================================================================
   v0.47.8 — kill the orange focus ring on notices (base.css :focus-visible is
   orange); guarantee both auth cards share the exact same rounded corners.
   ========================================================================== */

/* Notices already have their own border → drop the focus ring entirely (no
   border-on-border). base.css's orange :focus-visible ring is what showed. */
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-error:focus,
.woocommerce-account .woocommerce-error:focus-visible,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-message:focus,
.woocommerce-account .woocommerce-message:focus-visible,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-info:focus,
.woocommerce-account .woocommerce-info:focus-visible {
	outline: none !important;
}
/* and the top accent border woo.css puts on notices → magenta, not orange/red */
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info { border-top-color: var(--color-magenta) !important; }

/* Both login + magic cards: identical, clearly rounded corners */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .rm-magic-form,
.woocommerce-account form.login { border-radius: 16px !important; }

/* ==========================================================================
   v0.47.9 — no text-caret anywhere in the cabinet, deleted-product placeholder,
   avatar grid balanced (2 rows, bigger), wider + tidier login page.
   ========================================================================== */

/* 5) No stray text-caret / selection on cabinet chrome; keep it for inputs */
.rm-acc { cursor: default; user-select: none; -webkit-user-select: none; }
.rm-acc input, .rm-acc textarea, .rm-acc [contenteditable] { cursor: auto; user-select: text; -webkit-user-select: text; }

/* 7) Deleted product → a clear "no image" placeholder thumb */
.rm-dl__thumb.is-gone, .rm-order__thumb.is-gone {
	background-color: var(--color-bg);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6f1e8' stroke-opacity='0.45' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: center; background-size: 22px;
}

/* 8) Avatar grid: 20 columns → exactly 2 rows for 40 avatars, bigger, vertically
   centred so it sits balanced top-to-bottom in the panel */
.woocommerce-account .rm-avatar-block .rm-avatar-grid {
	grid-template-columns: repeat(20, 1fr); gap: 10px; align-content: center;
}
.woocommerce-account .rm-avatar-block .rm-avatar-opt { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 10px; }

/* ---- Login page tidy-up ---- */
/* 2) wider cards so the email input doesn't look cramped next to its button */
.woocommerce-account:not(.logged-in) .woocommerce { max-width: 540px; }
/* 3) «Запам'ятати мене» — a touch larger, checkbox + text centred together */
.woocommerce-account .woocommerce-form-login__rememberme {
	display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--color-text-muted); line-height: 1;
}
.woocommerce-account .woocommerce-form-login__rememberme input { width: 16px; height: 16px; margin: 0; accent-color: var(--color-magenta); }
/* 4) «Втратили свій пароль» — centred, smaller, muted */
.woocommerce-account .woocommerce-form-login .lost_password,
.woocommerce-account .woocommerce-LostPassword { text-align: center; margin: 10px 0 0; }
.woocommerce-account .woocommerce-form-login .lost_password a,
.woocommerce-account .woocommerce-LostPassword a { color: var(--color-text-faint); font-size: 12px; font-weight: 500; text-decoration: none; }
.woocommerce-account .woocommerce-form-login .lost_password a:hover,
.woocommerce-account .woocommerce-LostPassword a:hover { color: var(--color-text-muted); }

/* deleted product in the order view — dim the name too */
.rm-order__row.is-gone .rm-order__name { color: var(--color-text-muted); }

/* ==========================================================================
   v0.48.4 — Google (Nextend) social button rendered by the theme in the login
   area, in our style, above the «Вхід по пошті» block.
   ========================================================================== */
.woocommerce-account .rm-social { max-width: 100%; margin: 18px auto 0; text-align: center; }
.woocommerce-account .rm-social__label { color: var(--color-text-faint); font-size: 12px; margin-bottom: 10px; }
.woocommerce-account .rm-social .nsl-container { margin: 0; }
.woocommerce-account .rm-social .nsl-container .nsl-button { justify-content: center; }

/* ==========================================================================
   v0.48.5 — Auth screen redesign: a single dark card (logo → text → email →
   password → «Увійти» → Google → links) on the contacts-page background.
   Login/register toggle via js/account.js.
   ========================================================================== */

/* hide the breadcrumb band on the logged-out auth screen (card carries the logo) */
.woocommerce-account:not(.logged-in) .page-header { display: none; }

/* full-bleed background, card centred */
.woocommerce-account:not(.logged-in) .woocommerce { max-width: none; margin: 0; padding: 0; }
.rm-auth {
	width: 100vw; margin-left: calc(50% - 50vw); min-height: 70vh;
	display: flex; align-items: center; justify-content: center; padding: 56px 16px;
	background-color: #0b0b0e;
	background-image: radial-gradient(circle at 10% 8%, rgba(91, 42, 134, 0.14), transparent 32%),
		radial-gradient(circle at 92% 12%, rgba(255, 122, 26, 0.08), transparent 30%);
}
.rm-auth__card {
	width: 100%; max-width: 430px; text-align: center;
	background: rgba(255, 255, 255, 0.045); border: 1px solid var(--color-border);
	border-radius: 20px; padding: 38px 34px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.rm-auth__logo { display: inline-block; margin: 0 0 18px; }
.rm-auth__logo img { height: 30px; width: auto; display: block; }
.rm-auth__lead { color: var(--color-text-muted); font-size: 14px; line-height: 1.5; margin: 0 0 24px; }

/* the form itself is NOT a card here (the wrapper is) */
.rm-auth .woocommerce-form-login,
.rm-auth .woocommerce-form-register {
	max-width: none; margin: 0; padding: 0; background: none; border: 0; border-radius: 0;
}
.rm-auth__form { text-align: left; display: flex; flex-direction: column; gap: 14px; }
.rm-auth__row { margin: 0; }
.rm-auth__row label { display: block; font-size: 12px; color: var(--color-text-muted); margin-bottom: 6px; }
.rm-auth__submit { width: 100%; margin-top: 6px; }

.rm-auth__social { margin-top: 12px; }
.rm-auth__social .nsl-container { margin: 0; }
.rm-auth__social .nsl-container .nsl-button { width: 100%; justify-content: center; }

.rm-auth__links { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.rm-auth__link { background: none; border: 0; padding: 0; color: var(--color-text-muted); font: inherit; font-size: 13px; cursor: pointer; text-decoration: none; }
.rm-auth__link:hover { color: var(--color-magenta); }

.rm-auth__view { display: none; }
.rm-auth__view.is-active { display: block; }

/* WooCommerce notices centred above the card */
.woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper .woocommerce-info {
	max-width: 430px; margin: 16px auto 0;
}

/* ==========================================================================
   v0.48.6 — auth card refinements: tighter vertical space, bigger logo/lead,
   borderless inputs with a required *, magenta-outline-only validation.
   ========================================================================== */

/* 1) less empty space top/bottom (no forced tall min-height) */
.rm-auth { min-height: 0; padding: 36px 16px 48px; }

/* 2) logo 1.5× + slightly larger lead */
.rm-auth__logo img { height: 45px; }
.rm-auth__lead { font-size: 15px; }

/* 3) borderless inputs + required asterisk in the label */
.rm-auth .input-text {
	border: none !important; box-shadow: none;
	background: var(--color-bg-elevated); padding: 12px 14px;
}
.rm-auth .input-text:focus { box-shadow: inset 0 0 0 1px var(--color-magenta); }
.rm-auth__req { color: var(--color-magenta); }

/* 4) invalid = magenta outline ONLY (WooCommerce error text/blocks hidden) */
.rm-auth .input-text.is-invalid { box-shadow: inset 0 0 0 1px var(--color-magenta) !important; }
.woocommerce-account:not(.logged-in) .woocommerce-error,
.woocommerce-account:not(.logged-in) .woocommerce-NoticeGroup,
.woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper .woocommerce-error { display: none !important; }

/* 5) link only on the action word, not the whole sentence */
.rm-auth__note { color: var(--color-text-muted); font-size: 13px; }
.rm-auth__note .rm-auth__link { display: inline; font-size: 13px; color: var(--color-magenta); }
.rm-auth__note .rm-auth__link:hover { color: var(--color-text); }

/* ==========================================================================
   v0.48.7 — auth screen: fills the viewport (centred, no scroll), card + fields
   coloured like the /contacts/ form, no inner/Google borders, white * and links,
   title/back-link/bottom-logo for the register + lost-password views.
   ========================================================================== */

/* 2) fill the working area, centre, small bottom padding, no forced scroll */
.rm-auth { min-height: calc(100vh - 92px); padding: 48px 16px 28px; }

/* card + fields coloured like the contacts form */
.rm-auth__card { background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: 20px; }
.rm-auth .input-text {
	border: none !important; border-radius: var(--radius-sm); padding: 12px 14px;
	background: rgba(255, 255, 255, 0.03) !important;
	box-shadow: inset 0 0 0 1px var(--color-border);
}
.rm-auth .input-text:focus { box-shadow: inset 0 0 0 1px var(--color-border-strong); }
.rm-auth .input-text.is-invalid { box-shadow: inset 0 0 0 1px var(--color-magenta) !important; }

/* 3) the form itself is NOT a bordered block — free the fields to full width */
.rm-auth__form { border: 0 !important; background: none !important; padding: 0 !important; margin: 0; }

/* 4) required asterisks white */
.rm-auth__req { color: #fff; }

/* 5) Google button: full width, NO border, small gap under «Увійти» */
.rm-auth__social { margin-top: 10px; }
.rm-auth__social .nsl-container,
.rm-auth__social .nsl-container-buttons { margin: 0; }
.rm-auth__social .nsl-button {
	width: 100% !important; box-shadow: none !important; border: 0 !important; justify-content: center;
}

/* 5b) links white (register word + forgot password), hover magenta */
.rm-auth__link,
.rm-auth__note .rm-auth__link { color: var(--color-text); }
.rm-auth__link:hover,
.rm-auth__note .rm-auth__link:hover { color: var(--color-magenta); }
.rm-auth__note { color: var(--color-text-muted); }

/* 6+7) title / subtitle / back-link / bottom logo for register + lost-password */
.rm-auth__title { font-family: var(--font-heading); font-size: 26px; line-height: 1.15; margin: 0 0 8px; }
.rm-auth__back {
	display: inline-block; margin: 18px 0 0; background: none; border: 0; padding: 0; cursor: pointer;
	color: var(--color-text); font: inherit; font-weight: 700; font-size: 13px; text-decoration: none;
}
.rm-auth__back:hover { color: var(--color-magenta); }
.rm-auth__logo--bottom { display: block; margin: 16px auto 0; }
.rm-auth__logo--bottom img { height: 26px; margin: 0 auto; }

/* ==========================================================================
   v0.48.8 — tighter vertical space, Google raised + grey border, no text-caret,
   register redesign (name fields + consent + fine print), centred titles.
   ========================================================================== */

/* 1) remove the big empty space top/bottom — hug the card with modest padding */
.rm-auth { min-height: 0; padding: 40px 16px; user-select: none; -webkit-user-select: none; cursor: default; }
.rm-auth .input-text, .rm-auth textarea { user-select: text; -webkit-user-select: text; cursor: auto; }

/* 2) raise the Google button (small gap under «Увійти») */
.rm-auth__social { margin-top: 6px; }
.rm-auth__social .nsl-container, .rm-auth__social .nsl-container-buttons { margin: 0 !important; }

/* 3) Google button: grey border like the input fields */
.rm-auth__social .nsl-button { box-shadow: inset 0 0 0 1px var(--color-border) !important; }

/* 5) register/login note links — white, NO colour change on hover */
.rm-auth__note .rm-auth__link:hover { color: var(--color-text); }

/* 6) register card: centred title, consent row, fine print */
.rm-auth__title { text-align: center; }
.rm-auth__consent {
	display: flex; gap: 10px; align-items: flex-start; text-align: left; cursor: pointer;
	font-size: 12px; line-height: 1.45; color: var(--color-text-muted); margin: 2px 0 0;
}
.rm-auth__consent input { flex: 0 0 auto; width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--color-magenta); }
.rm-auth__consent a { color: var(--color-text); text-decoration: underline; text-underline-offset: 2px; }
.rm-auth__consent a:hover { color: var(--color-text); }
.rm-auth__consent.is-invalid { color: var(--color-magenta); }
.rm-auth__consent.is-invalid input { box-shadow: 0 0 0 2px var(--color-magenta); border-radius: 4px; }
.rm-auth__fine { text-align: left; font-size: 11px; line-height: 1.5; color: var(--color-text-faint); margin: 0; }

/* forgot-password refinements: more room before «Назад», logo 1.2× */
.rm-auth__back { margin-top: 24px; }
.rm-auth__logo--bottom img { height: 31px; }

/* ==========================================================================
   v0.48.9 — background fills the viewport (card near top, ~2× top space),
   Google = same size as «Увійти» and flush, gradient title, name fields inline.
   ========================================================================== */

/* 1) fill the working area; card sits near the top with generous top space */
.rm-auth {
	min-height: calc(100vh - var(--header-height)); align-items: flex-start;
	padding: 80px 16px 48px;
}

/* 1) Google button — identical width+height to «Увійти», almost flush under it */
.rm-auth__social { margin-top: 4px; }
.rm-auth__social .nsl-button {
	width: 100% !important; height: 44px !important; min-height: 44px !important; border-radius: var(--radius-sm) !important;
}

/* 2) title as a brand gradient */
.rm-auth__title {
	background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* 2) first name + last name on one line */
.rm-auth__row2 { display: flex; gap: 12px; }
.rm-auth__row2 > .rm-auth__row { flex: 1 1 0; min-width: 0; margin: 0; }
@media (max-width: 420px) { .rm-auth__row2 { flex-direction: column; gap: 14px; } }

/* ==========================================================================
   v0.48.10 — spacing copied from the /contacts/ section (symmetric --space-16,
   hug content, no forced viewport height); Google button truly full-width;
   smaller personal-data note.
   ========================================================================== */

/* match the contacts section exactly: symmetric padding, hug content */
body.woocommerce-account:not(.logged-in) { background-color: #0b0b0e; }
.rm-auth {
	min-height: 0; align-items: center;
	padding-top: var(--space-16); padding-bottom: var(--space-16);
}

/* 1) Google button = full width (Nextend's .nsl-container-buttons is inline-grid,
   which was collapsing it to ~145px) + almost flush under «Увійти» */
.rm-auth__social { margin-top: 2px; }
.rm-auth__social,
.rm-auth__social .nsl-container { width: 100% !important; display: block !important; }
.rm-auth__social .nsl-container-buttons {
	display: grid !important; grid-template-columns: 1fr !important; width: 100% !important; margin: 0 !important;
}
.rm-auth__social .nsl-button { width: 100% !important; max-width: none !important; }

/* 3) personal-data note — smaller */
.rm-auth__fine { font-size: 10px; line-height: 1.5; color: var(--color-text-faint); }

/* v0.48.11 — Google button: keep the logo next to the label (Nextend makes the
   label flex:1 and centres its text, which pushed the logo to the far left),
   and un-bold the «Login with Google» text. */
.rm-auth__social .nsl-button-label-container {
	flex: 0 0 auto !important; width: auto !important; text-align: left !important; font-weight: 400 !important;
}

/* v0.48.12 — the real gap between «Увійти» and Google was the WooCommerce form's
   margin-bottom: 32px (the buttons live in different parents, so my earlier
   .rm-auth__social margins never affected it). Kill it → clean 8px gap.
   Google button matched to the reference (logo 24, 8px gap, Inter 600 14px,
   centred) but kept in OUR colours + a hover state. */
.rm-auth .rm-auth__form { margin: 0 !important; }
.rm-auth__social { margin-top: 8px; }

.rm-auth__social .nsl-button {
	background: var(--color-bg-elevated) !important;
	box-shadow: inset 0 0 0 1px var(--color-border) !important;
	transition: background .2s var(--ease-standard), box-shadow .2s var(--ease-standard);
}
.rm-auth__social .nsl-button:hover {
	background: var(--color-bg-elevated-hover) !important;
	box-shadow: inset 0 0 0 1px var(--color-border-strong) !important;
}
.rm-auth__social .nsl-button-label-container {
	color: var(--color-text) !important;
	font-family: var(--font-body) !important; font-weight: 600 !important; font-size: 14px !important;
}
.rm-auth__social .nsl-button-svg-container svg { width: 24px !important; height: 24px !important; }

/* v0.48.14 — register card: keep only the consent checkbox. Hide WooCommerce's
   own privacy blurb (only inside the auth card — checkout keeps its own). */
.rm-auth .woocommerce-privacy-policy-text { display: none !important; }

/* v0.48.15 — auth screens: show status messages (e.g. «Password reset email
   sent») as PLAIN centred text over the form — no plate/box. Field-validation
   errors stay hidden (the magenta outline handles those). */
.woocommerce-account:not(.logged-in) .woocommerce-message,
.woocommerce-account:not(.logged-in) .woocommerce-info {
	display: block !important; background: none !important; border: none !important; box-shadow: none !important;
	padding: 0 !important; margin: 0 auto 18px !important; max-width: 430px; min-height: 0 !important;
	text-align: center; color: var(--color-text); font-size: 14px; line-height: 1.5;
}
.woocommerce-account:not(.logged-in) .woocommerce-message::before,
.woocommerce-account:not(.logged-in) .woocommerce-info::before { content: none !important; display: none !important; }
.woocommerce-account:not(.logged-in) .woocommerce-message .button { display: none !important; }

/* v0.48.16 — auth messages: plain text, card-width, smooth fade-in (no plate),
   shown on the SAME page. Applies to lost-password confirmation, registration
   and login messages. Field-empty validation still uses the magenta outline. */
@keyframes rmAuthFade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.woocommerce-account:not(.logged-in) .woocommerce-message,
.woocommerce-account:not(.logged-in) .woocommerce-info,
.woocommerce-account:not(.logged-in) .woocommerce-error,
.rm-auth__notice {
	display: block !important; background: none !important; border: none !important; box-shadow: none !important; outline: none !important;
	padding: 0 !important; min-height: 0 !important;
	text-align: center; color: var(--color-text); font-size: 14px; line-height: 1.5;
	animation: rmAuthFade .4s var(--ease-standard);
}
/* WC notices sit ABOVE the card → constrain to card width, centred */
.woocommerce-account:not(.logged-in) .woocommerce-message,
.woocommerce-account:not(.logged-in) .woocommerce-info,
.woocommerce-account:not(.logged-in) .woocommerce-error {
	max-width: 430px !important; margin: 0 auto 18px !important;
}
/* .rm-auth__notice is INSIDE the card → full card width, above the form */
.rm-auth__notice { max-width: 100%; margin: 0 0 16px; }
.woocommerce-account:not(.logged-in) .woocommerce-error { color: var(--color-magenta) !important; }
.woocommerce-account:not(.logged-in) .woocommerce-message::before,
.woocommerce-account:not(.logged-in) .woocommerce-info::before,
.woocommerce-account:not(.logged-in) .woocommerce-error::before { content: none !important; display: none !important; }
.woocommerce-account:not(.logged-in) .woocommerce-message .button { display: none !important; }

/* v0.48.17 — password eye toggle on every password field */
.rm-pw { position: relative; display: block; }
.rm-pw input { padding-right: 44px !important; }
.rm-pw__eye {
	position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
	width: 30px; height: 30px; padding: 0; border: 0; cursor: pointer; background: none;
	display: flex; align-items: center; justify-content: center;
	color: var(--color-text-muted); transition: color .2s var(--ease-standard);
}
.rm-pw__eye:hover { color: var(--color-text); }
.rm-pw__eye svg { width: 18px; height: 18px; }

/* v0.48.18 — one eye only: hide WooCommerce's own .show-password-input (the dark
   dashicon one) on the auth card + edit-account, keep our light SVG eye. */
.rm-auth .show-password-input,
.rm-auth .hide-password-input,
.woocommerce-EditAccountForm .show-password-input,
.woocommerce-EditAccountForm .hide-password-input { display: none !important; }
/* our eye stays light on every screen */
.rm-pw__eye { color: var(--color-text-muted) !important; }
.rm-pw__eye:hover { color: var(--color-text) !important; }

/* v0.48.25 — hide WooCommerce's password-strength meter + «at least 12 chars»
   hint (we don't enforce strength), and hide Nextend's «Hold On» redirect
   overlay on Google sign-in. */
.rm-auth .woocommerce-password-strength,
.rm-auth .woocommerce-password-hint,
.woocommerce-EditAccountForm .woocommerce-password-strength,
.woocommerce-EditAccountForm .woocommerce-password-hint { display: none !important; }

.nsl-redirect-overlay,
.nsl-redirect-overlay-container { display: none !important; }

/* ==========================================================================
   v0.48.26 — MOBILE cabinet (≤640px): greeting stacks, tabs wrap, orders table
   becomes stacked cards, downloads/order rows stack, edit-account single column.
   ========================================================================== */
@media (max-width: 640px) {
	.woocommerce-account .woocommerce { padding: 20px 14px; }

	/* greeting header: avatar + text stacked, logout on its own line */
	.rm-acc__head { flex-wrap: wrap; gap: 12px; padding: 16px; }
	.rm-acc__avatar img { width: 52px; height: 52px; }
	.rm-acc__hello { flex: 1 1 auto; min-width: 0; }
	.rm-acc__title { font-size: 18px; }
	.rm-acc__text { font-size: 13px; }
	.rm-acc__logout { order: 3; width: 100%; justify-content: center; height: 42px; }

	/* tabs: full-width wrap, message below */
	.rm-acc__bar { flex-direction: column; align-items: stretch; gap: 12px; }
	.rm-acc__tabs { gap: 8px; }
	.rm-acc__tab { flex: 1 1 auto; padding: 0 12px; height: 42px; font-size: 13px; }
	.rm-acc__msg { width: 100%; min-height: 0; }

	.rm-acc__panel { padding: 16px; }
	.rm-acc__panel--sub { padding: 16px; }
	.rm-acc__close { top: 10px; right: 10px; }
	.rm-acc__foot .button, .rm-acc__foot { width: 100%; }
	.rm-acc__foot .button { width: 100%; }

	/* orders table → stacked cards (WC cells carry data-title) */
	.rm-acc__panel table.woocommerce-orders-table,
	.rm-acc__panel table.shop_table { border: 0; }
	.rm-acc__panel .woocommerce-orders-table thead,
	.rm-acc__panel .shop_table thead { display: none; }
	.rm-acc__panel .woocommerce-orders-table tr,
	.rm-acc__panel .shop_table tbody tr {
		display: block; margin-bottom: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden;
	}
	.rm-acc__panel .woocommerce-orders-table td,
	.rm-acc__panel .shop_table tbody td {
		display: flex; justify-content: space-between; align-items: center; gap: 12px;
		text-align: right !important; border: 0; border-top: 1px solid var(--color-border); padding: 11px 14px;
	}
	.rm-acc__panel .woocommerce-orders-table tr td:first-child,
	.rm-acc__panel .shop_table tbody tr td:first-child { border-top: 0; }
	.rm-acc__panel .woocommerce-orders-table td::before,
	.rm-acc__panel .shop_table tbody td::before {
		content: attr(data-title); font-weight: 700; color: var(--color-text-muted); text-align: left; font-size: 12px;
	}
	.rm-acc__panel .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions { justify-content: flex-end; }
	.rm-acc__panel .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions::before { display: none; }
	.rm-acc__panel .woocommerce-orders-table td .button { width: 100%; }

	/* downloads + order rows stack (thumb left, text/action below) */
	.rm-dl__row { grid-template-columns: 48px 1fr; grid-template-areas: "thumb name" "act act"; row-gap: 10px; }
	.rm-dl__thumb { grid-area: thumb; }
	.rm-dl__name { grid-area: name; }
	.rm-dl__act { grid-area: act; }
	.rm-dl__go { flex: 1; }
	.rm-dl__foot .button { width: 100%; }

	/* edit-account: single column */
	.woocommerce-account .woocommerce-EditAccountForm > p.form-row-first,
	.woocommerce-account .woocommerce-EditAccountForm > p.form-row-last,
	.woocommerce-account .woocommerce-EditAccountForm > .rm-country-row { flex: 1 1 100%; }
	.woocommerce-account .rm-save-row { justify-content: stretch; }
	.woocommerce-account .rm-save-row .button { width: 100%; }
}

/* ==========================================================================
   v0.48.27 — mobile refinements: order-view × clearance, Downloads as big
   image cards, avatar picker opens to the RIGHT (4-up, scrollable).
   ========================================================================== */

/* 1) keep the order meta line clear of the top-right × */
.rm-order__meta { padding-right: 44px; }

@media (max-width: 640px) {
	/* 2) Downloads: big product image, name under it, then buttons */
	.rm-dl { border: 0 !important; }
	.rm-dl__row {
		display: flex !important; flex-direction: column; align-items: stretch; gap: 10px;
		border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 14px; margin-bottom: 12px;
		grid-template-columns: none; grid-template-areas: none;
	}
	.rm-dl__thumb { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 10px; }
	.rm-dl__name { text-align: center; font-size: 15px; }
	.rm-dl__act { justify-content: center; }
	.rm-dl__go { flex: 1; }

	/* 3) avatar picker opens to the RIGHT (not below), 4 per row, scrollable */
	.woocommerce-account .rm-avatar-block .rm-avatar-layout { flex-direction: row; }
	.woocommerce-account .rm-avatar-block .rm-avatar-pickerwrap { width: auto; height: 156px; min-height: 0; align-self: flex-start; }
	.woocommerce-account .rm-avatar-block .rm-avatar-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; overflow-y: auto; }
	.woocommerce-account .rm-avatar-block .rm-avatar-opt { width: 100%; height: auto; aspect-ratio: 1 / 1; }
}

/* v0.48.28 — FIX avatar picker: items were stretching (grid align-items:stretch)
   → overlap + no scroll. Force square, keep them from stretching, adaptive count
   per row, real vertical scroll. */
.woocommerce-account .rm-avatar-block .rm-avatar-grid { align-items: start; align-content: start; }

@media (max-width: 640px) {
	.woocommerce-account .rm-avatar-block .rm-avatar-grid {
		position: absolute; inset: 12px;
		display: grid !important;
		grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)) !important;
		grid-auto-rows: min-content; align-content: start; align-items: start;
		gap: 8px; overflow-y: auto; -webkit-overflow-scrolling: touch;
	}
	.woocommerce-account .rm-avatar-block .rm-avatar-opt {
		width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; align-self: start;
	}
}

/* v0.48.29 — avatars ALWAYS a fixed size (~48px), reflow to fit the width, and
   scroll vertically when they don't fit. No more shrinking on narrow widths
   (the old repeat(20,1fr) / minmax(…,1fr) let them stretch/shrink). */
.woocommerce-account .rm-avatar-block .rm-avatar-grid {
	grid-template-columns: repeat(auto-fill, 48px) !important;
	justify-content: space-between;
	align-content: start; align-items: start;
	gap: 10px 8px; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.woocommerce-account .rm-avatar-block .rm-avatar-opt {
	width: 48px !important; height: 48px !important; aspect-ratio: auto !important; border-radius: 10px;
}

/* v0.48.30 — a touch more breathing room above the avatar grid (+5px top) */
.woocommerce-account .rm-avatar-block .rm-avatar-grid { inset: 17px 12px 12px 12px; }

/* «Оплату отримано» note ABOVE the login card (shown when an order-received
   guest is sent here with ?rm_paid=1). .rm-auth centres its card with flexbox,
   so switch it to a column and stack the note on top. */
.rm-auth.is-paid { flex-direction: column; }
.rm-paid-note {
	max-width: 460px;
	margin: 0 auto var(--space-6);
	text-align: center;
}
.rm-paid-note__badge {
	width: 66px; height: 66px; margin: 0 auto var(--space-4); border-radius: 50%;
	background: var(--gradient-brand-btn); display: grid; place-items: center;
	box-shadow: var(--shadow-brand), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.rm-paid-note__badge svg { width: 30px; height: 30px; }
.rm-paid-note__title {
	margin: 0 0 var(--space-2); font-family: var(--font-heading);
	font-size: clamp(1.3rem, 2.4vw, 1.7rem); color: var(--color-text);
}
.rm-paid-note__sub { margin: 0; color: var(--color-text-muted); line-height: 1.6; }