/**
 * My Account — all styling for the account area (woocommerce/myaccount/*.php
 * overrides). Scoped to body.woocommerce-account (WooCommerce's own
 * body_class() addition on every My Account endpoint — see wc_body_class()
 * core-side) and loaded conditionally (functions.php, is_account_page()),
 * same pattern as cart-page.css/checkout-page.css. Two distinct sections in
 * this file, since they're two very different screens:
 *
 *   1. Logged-out (login/register + the lost/reset-password flow) — a
 *      full-bleed split-screen (photo + solid-accent-red panel). See
 *      .wow-account-split below.
 *   2. Logged-in dashboard shell (sidebar nav + the Dashboard landing
 *      screen) — a normal contained page, NOT the split treatment. See
 *      .wow-account-dashboard further down.
 *
 * Orders/Addresses/Account details (reached via the sidebar from #2) still
 * render with WooCommerce's own unstyled default markup (woocommerce_
 * enqueue_styles is emptied sitewide, see functions.php) — a natural next
 * pass. Payment methods was removed from the account menu entirely
 * (functions.php), so it never reaches this stylesheet. Wishlist (also
 * added via functions.php, endpoint content in woocommerce/myaccount/
 * form-wishlist.php) IS styled here — see the block near the end of this
 * file — since it reuses the sitewide .wow-wishlist-hero__share*/.wow-
 * archive-grid rules from style.css and just needs a couple of scoped
 * overrides to sit correctly inside the account content column.
 */

body.woocommerce-account .wow-account-split,
body.woocommerce-account .wow-account-split * {
	box-sizing: border-box;
}

/* Standard WP convention for visually-hidden-but-accessible text — not
   defined anywhere sitewide yet (style.css has no copy of it), so it's
   defined here rather than left silently broken. Used on this page's own
   <label>s (placeholder-only fields, see form-login.php) and on the
   "Required"/etc. <span class="screen-reader-text"> core already renders
   inside them. */
.wow-account-split .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* No bottom space under the split on this template — .wow-page's own
   padding-bottom: 48px (style.css, shared by every page using this
   template) is only reset here, scoped to this page. */
body.woocommerce-account .wow-page {
	padding-bottom: 0;
}

/* WooCommerce's own core stylesheet (assets/css/woocommerce-blocktheme.css,
   NOT covered by the woocommerce_enqueue_styles removal in functions.php —
   that filter only drops the general/layout/smallscreen files, this one
   loads independently) ships a rule that was silently capping this exact
   element: ".woocommerce-account main .woocommerce{max-width:1000px}". That
   rule is what kept this section boxed in even after making
   .wow-account-split itself full-bleed — .woocommerce is its immediate
   parent, so a max-width there caps everything inside it regardless of what
   the child tries to do. Neutralized here with higher selector specificity
   (redundant with source-order alone, since this file loads after
   WooCommerce's, but specificity makes it win either way). */
body.woocommerce-account main.wow-page .woocommerce {
	max-width: none;
	margin: 0;
	padding: 0;
}

/* ── Split container — full-bleed, breaks out of .wow-page's 1270px width
   regardless of nesting, same trick as .wow-reviews-hero in style.css. No
   margin, no radius, no shadow: sits flush edge-to-edge against the header
   above and whatever follows below. */
.wow-account-split {
	display: grid;
	grid-template-columns: 60% 40%;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	min-height: 620px;
}

@media (max-width: 900px) {
	.wow-account-split {
		grid-template-columns: 1fr;
		min-height: 0;
	}
}

/* ── Left — photo, no overlay. A photo standing on its own doesn't need a
   dark scrim; only add one back here if text ever moves onto the image
   again. ─────────────────────────────────────────────────────────────── */
.wow-account-split__image {
	background-color: #0a0a0a;
	background-image: url('https://wheelsonwalls.shop/wp-content/uploads/2024/01/supercars-bg.jpg');
	background-size: cover;
	background-position: center 58%;
	background-repeat: no-repeat;
	min-height: 320px;
}

@media (max-width: 900px) {
	.wow-account-split__image {
		min-height: 260px;
	}
}

/* Lost/reset-password flow (woocommerce/myaccount/form-lost-password.php,
   lost-password-confirmation.php, form-reset-password.php) reuses this same
   split scaffold with its own photo instead of the login screen's
   supercars-bg.jpg. */
.wow-account-split__image--lost {
	background-image: url('https://wheelsonwalls.shop/wp-content/uploads/2024/10/BG-POST-TIM.jpg');
}

/* ── Right — flat solid accent-red panel, white content. Direct children
   (head/notices/tabs/panels) are each capped at 400px and auto-centered —
   no extra wrapper div needed in form-login.php, this just centers
   whatever sits directly inside the panel. ───────────────────────────── */
.wow-account-split__panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 56px 48px;
	background-color: var(--wp--preset--color--accent);
	color: #fff;
}

.wow-account-split__panel > * {
	width: 100%;
	max-width: 400px;
}

@media (max-width: 900px) {
	.wow-account-split__panel {
		padding: 44px 32px 52px;
	}
}

@media (max-width: 480px) {
	.wow-account-split__panel {
		padding: 36px 24px 44px;
	}
}

.wow-account-card__head {
	margin: 0 0 26px;
}

.wow-account-card__title {
	margin: 0 0 10px;
	font-family: var(--wp--preset--font-family--josefin);
	font-size: clamp(24px, 3vw, 30px);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #fff;
}

.wow-account-card__subtitle {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.8);
}

.wow-account-card__note {
	margin: 0 0 16px;
	font-size: 12px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.75);
}

/* ── Notices (login/register errors, "please log in to checkout" redirect
   message, password-reset confirmation — printed via
   woocommerce_output_all_notices on the woocommerce_before_customer_login_
   form hook, see form-login.php). Sits above the tabs so an error is
   visible no matter which tab it belongs to. Flat white-on-red, no
   transparency games. ────────────────────────────────────────────────── */
.wow-account-card__notices:empty {
	display: none;
}

.wow-account-card__notices .woocommerce-error,
.wow-account-card__notices .woocommerce-message,
.wow-account-card__notices .woocommerce-info,
.wow-account-card__notices .woocommerce-NoticeGroup {
	list-style: none;
	margin: 0 0 22px;
	padding: 14px 16px;
	border-radius: 10px;
	background-color: var(--wp--preset--color--black);
	color: #fff;
	font-size: 12.5px;
	line-height: 1.6;
}

.wow-account-card__notices .woocommerce-error li[data-id] a,
.wow-account-card__notices a.wc-forward {
	color: #fff;
	font-weight: 700;
	text-decoration: underline;
}

/* ── Tabs — white track/active pill against the red panel; same
   white-pops-on-red logic as the submit button below. ───────────────── */
.wow-account-tabs {
	display: flex;
	gap: 4px;
	padding: 4px;
	margin: 0 0 26px;
	background-color: rgba(255, 255, 255, 0.18);
	border-radius: 999px;
}

.wow-account-tabs__btn {
	flex: 1 1 0;
	padding: 12px 14px;
	border: none;
	border-radius: 999px;
	background-color: transparent;
	font-family: var(--wp--preset--font-family--josefin);
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: rgba(255, 255, 255, 0.8);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.wow-account-tabs__btn.is-active {
	background-color: #fff;
	color: var(--wp--preset--color--accent);
}

.wow-account-tabs__btn:not(.is-active):hover {
	color: #fff;
}

/* ── Panels ────────────────────────────────────────────────────────────── */
.wow-account-panel[hidden] {
	display: none;
}

/* ── Form rows — placeholder-only, no visible label (see form-login.php:
   the <label> is kept for accessibility but hidden via .screen-reader-text
   above; the placeholder= attribute carries the same core-translated
   string). Flat white fill, no blur. ─────────────────────────────────── */
.wow-account-split__panel .form-row {
	margin: 0 0 14px;
}

.wow-account-split__panel .form-row .required {
	display: none;
}

.wow-account-split__panel .form-row input.input-text {
	width: 100%;
	padding: 15px 16px;
	border: none;
	border-radius: 10px;
	background-color: #fff;
	font-family: var(--wp--preset--font-family--josefin);
	font-size: 14px;
	color: var(--wp--preset--color--black);
	height: auto;
	transition: box-shadow 0.2s ease;
}

.wow-account-split__panel .form-row input.input-text::placeholder {
	color: #9a9a9a;
}

/* ── Password show/hide toggle ────────────────────────────────────────────
   WooCommerce's own JS (assets/js/frontend/woocommerce.min.js) adds the
   ".password-input" class to the password field's <p class="form-row">
   (for position:relative anchoring) and appends a
   <button class="show-password-input">, no markup of ours involved — see
   form-login.php, nothing there needed to change. Its default icon styling
   lives in WooCommerce's own woocommerce-layout.css, which is NOT loaded
   (woocommerce_enqueue_styles is emptied sitewide, see functions.php), so
   the button rendered with no icon at all ("a tiny button, nothing inside")
   until now. Restyled from scratch here — plain CSS background-image
   eye/eye-off icons, matching the stroke-icon language already used
   elsewhere in this theme's own SVGs (wow_search_toggle_button,
   wow_account_icon, etc. in functions.php: 24x24 viewBox, stroke-width 2,
   round line caps) rather than reproducing WooCommerce's own icon. The JS
   toggles both the input's type attribute and a "display-password" class on
   the button itself when the password is currently shown — swapped to the
   "eye-off" icon for that state. */
.wow-account-split__panel .password-input {
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
}

.wow-account-split__panel .password-input input.input-text {
	padding-right: 46px;
}

.wow-account-split__panel .show-password-input {
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	padding: 0;
	margin: 0;
	border: 0;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767676' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

.wow-account-split__panel .show-password-input:hover {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

.wow-account-split__panel .show-password-input.display-password {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767676' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.94 10.94 0 0 1 12 20c-7 0-11-8-11-8a21.6 21.6 0 0 1 5.06-6.06M9.9 4.24A10.4 10.4 0 0 1 12 4c7 0 11 8 11 8a21.6 21.6 0 0 1-2.16 3.19m-6.72-1.06a3 3 0 1 1-4.24-4.25'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
}

.wow-account-split__panel .show-password-input.display-password:hover {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.94 10.94 0 0 1 12 20c-7 0-11-8-11-8a21.6 21.6 0 0 1 5.06-6.06M9.9 4.24A10.4 10.4 0 0 1 12 4c7 0 11 8 11 8a21.6 21.6 0 0 1-2.16 3.19m-6.72-1.06a3 3 0 1 1-4.24-4.25'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
}

.wow-account-split__panel .form-row input.input-text:focus {
	outline: none;
	box-shadow: 0 0 0 2px var(--wp--preset--color--black);
}

/* ── Remember me + submit + lost password ─────────────────────────────── */
.wow-account-card__actions {
	display: flex;
	align-items: center;
	margin: 2px 0 18px;
}

.wow-account-split__panel .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 12.5px;
	font-weight: 400;
	text-transform: none;
	color: rgba(255, 255, 255, 0.85);
	cursor: pointer;
}

.wow-account-split__panel .woocommerce-form__input-checkbox {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--wp--preset--color--black);
	cursor: pointer;
}

/* White button on the red panel, flips to black on hover — mirrors the
   active-tab treatment (white pill) so the two share one visual rule. */
.wow-account-split__panel .button {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	padding: 15px;
	border: none;
	border-radius: 10px;
	background-color: var(--wp--preset--color--black);
	color: #fff;
	font-family: var(--wp--preset--font-family--josefin);
	font-size: 12.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.wow-account-split__panel .button:hover {
	background-color: #fff;
	color: var(--wp--preset--color--accent);
}

.woocommerce-LostPassword {
	margin: 14px 0 0;
	font-size: 12px;
	text-align: center;
}

.woocommerce-LostPassword a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: underline;
}

.woocommerce-LostPassword a:hover {
	color: #fff;
}

/* "Back to Login" — form-lost-password.php, lost-password-confirmation.php,
   form-reset-password.php. Same treatment as .woocommerce-LostPassword
   above (they never appear together on the same screen, so no conflict). */
.wow-account-back {
	margin: 18px 0 0;
	font-size: 12px;
	text-align: center;
}

.wow-account-back a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: underline;
}

.wow-account-back a:hover {
	color: #fff;
}

/* "Need a Trade Partner account?" note — form-login.php only, sits below
   both the login and register panels (a plain mailto: link, not a form
   field). */
.wow-account-trade-note {
	margin: 22px 0 0;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	font-size: 11.5px;
	line-height: 1.6;
	text-align: center;
	color: rgba(255, 255, 255, 0.6);
}

.wow-account-trade-note a {
	color: #fff;
	font-weight: 700;
	text-decoration: underline;
}

/* ── Registration anti-spam honeypot (functions.php,
   woocommerce_register_form_start hook — see the long comment there) —
   pulled off-screen rather than display:none, since some bots specifically
   skip display:none fields; aria-hidden + tabindex="-1" keep it out of the
   tab order and away from screen readers too, so no real visitor — sighted
   or not — can ever reach or see it. ─────────────────────────────────── */
.wow-account-honeypot {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ── Register panel — privacy policy text, if enabled under WooCommerce →
   Settings → Accounts & Privacy (woocommerce_register_form hook,
   core-rendered, untouched — this only restyles its default classes). ──── */
.wow-account-split__panel .woocommerce-privacy-policy-text {
	margin: 0 0 16px;
	font-size: 11.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.7);
}

.wow-account-split__panel .woocommerce-privacy-policy-text a {
	color: #fff;
	text-decoration: underline;
}

/**
 * ── Logged-in dashboard ───────────────────────────────────────────────────
 * (woocommerce/myaccount/my-account.php + navigation.php + dashboard.php
 * overrides.) Deliberately NOT the split/full-bleed treatment above — that
 * belongs to the logged-out auth screens only. This is a normal contained
 * page, sitting inside .wow-page's own 1270px width, same as About/Contact.
 * Sidebar nav + content in a two-column grid; cards/icons are new, but the
 * underlying WooCommerce structure (menu items, endpoints, active state)
 * is entirely core's own — see navigation.php/dashboard.php for what did
 * and didn't change.
 *
 * Only the shell (nav) + Dashboard landing screen are covered here —
 * Orders/Addresses/Payment methods/Account details still render with
 * WooCommerce's own unstyled default markup when visited from the nav; a
 * natural next pass.
 */

body.woocommerce-account .wow-account-dashboard,
body.woocommerce-account .wow-account-dashboard * {
	box-sizing: border-box;
}

.wow-account-dashboard {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 48px;
	align-items: start;
	max-width: 1180px;
	margin: 0 auto;
	padding: 64px 32px 120px;
}

@media (max-width: 860px) {
	.wow-account-dashboard {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 40px 20px 80px;
	}
}

/* ── Sidebar navigation ───────────────────────────────────────────────── */
.wow-account-nav {
	position: sticky;
	top: 24px;
}

@media (max-width: 860px) {
	.wow-account-nav {
		position: static;
	}
}

.wow-account-nav__list {
	list-style: none;
	margin: 0;
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	background-color: var(--wp--preset--color--accent);
	border-radius: 16px;
}

.wow-account-nav__link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-radius: 10px;
	font-family: var(--wp--preset--font-family--josefin);
	font-size: 12.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: rgba(255, 255, 255, 0.92);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.wow-account-nav__link::before {
	content: "";
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.wow-account-nav__link:hover {
	background-color: rgba(255, 255, 255, 0.14);
}

.wow-account-nav__item.is-active .wow-account-nav__link {
	background-color: var(--wp--preset--color--black);
	color: #fff;
}

/* Per-item icons — keyed off the --{endpoint} modifier class core's own
   wc_get_account_menu_item_classes() already outputs on the <li> (see
   navigation.php). Now that the whole list sits on a solid accent-red
   background (was white), a single white icon already has full contrast
   in every state — default, hover, and the black is-active pill — so the
   old grey-default/white-active two-variant setup collapsed down to one
   SVG per endpoint here. */
.wow-account-nav__item.woocommerce-MyAccount-navigation-link--dashboard .wow-account-nav__link::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E");
}

.wow-account-nav__item.woocommerce-MyAccount-navigation-link--orders .wow-account-nav__link::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8l-9-5-9 5 9 5 9-5z'/%3E%3Cpath d='M3 8v8l9 5 9-5V8'/%3E%3Cpath d='M12 13v8'/%3E%3C/svg%3E");
}

.wow-account-nav__item.woocommerce-MyAccount-navigation-link--wishlist .wow-account-nav__link::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
}

.wow-account-nav__item.woocommerce-MyAccount-navigation-link--edit-address .wow-account-nav__link::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 6-9 12-9 12s-9-6-9-12a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

.wow-account-nav__item.woocommerce-MyAccount-navigation-link--edit-account .wow-account-nav__link::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

/* Log out — used to be accent-red-on-white to stand out from the rest of
   the list; now that accent-red IS the list's own background, that
   treatment would make it disappear entirely, so it falls back to the
   same white text/icon as every other item, set apart only by the divider
   above it and a darkening (rather than lightening) hover, since a
   redirect-triggering action reads better as "recede" than "highlight"
   here. */
.wow-account-nav__item.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 8px;
	padding-top: 10px;
	border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.wow-account-nav__item.woocommerce-MyAccount-navigation-link--customer-logout .wow-account-nav__link:hover {
	background-color: rgba(0, 0, 0, 0.16);
}

.wow-account-nav__item.woocommerce-MyAccount-navigation-link--customer-logout .wow-account-nav__link::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
}

/* ── Content — welcome header ─────────────────────────────────────────── */
.wow-account-dashboard__content {
	min-width: 0;
}

.wow-dashboard-welcome {
	margin: 0 0 36px;
}

.wow-dashboard-welcome__title {
	margin: 0 0 8px;
	font-family: var(--wp--preset--font-family--josefin);
	font-size: clamp(26px, 3.4vw, 38px);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--wp--preset--color--black);
}

.wow-dashboard-welcome__subtitle {
	margin: 0;
	font-size: 13.5px;
	color: var(--wp--preset--color--grey);
}

.wow-dashboard-welcome__subtitle a {
	color: var(--wp--preset--color--text);
	text-decoration: underline;
}

.wow-dashboard-welcome__subtitle a:hover {
	color: var(--wp--preset--color--accent);
}

/* ── Content — quick-action card grid ─────────────────────────────────── */
.wow-dashboard-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 20px;
}

.wow-dashboard-card {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 24px;
	background-color: #fff;
	border: 1px solid #ece7e0;
	border-radius: 16px;
	text-decoration: none;
	transition: border-color 0.2s ease;
}

.wow-dashboard-card:hover {
	border-color: var(--wp--preset--color--black);
}

.wow-dashboard-card__icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--black);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
}

.wow-dashboard-card__icon--orders {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8l-9-5-9 5 9 5 9-5z'/%3E%3Cpath d='M3 8v8l9 5 9-5V8'/%3E%3Cpath d='M12 13v8'/%3E%3C/svg%3E");
}

.wow-dashboard-card__icon--address {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 6-9 12-9 12s-9-6-9-12a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

.wow-dashboard-card__icon--wishlist {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
}

.wow-dashboard-card__icon--account {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

.wow-dashboard-card__body {
	flex: 1;
	min-width: 0;
}

.wow-dashboard-card__title {
	display: block;
	margin: 0 0 6px;
	font-family: var(--wp--preset--font-family--josefin);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: var(--wp--preset--color--black);
}

.wow-dashboard-card__desc {
	display: block;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--wp--preset--color--grey);
}

/* ── Wishlist tab content (woocommerce/myaccount/form-wishlist.php) ──────
   Reuses the sitewide .wow-wishlist-hero__share* (share-by-email form) and
   .wow-archive-grid/.wow-wishlist-grid-wrap/.wow-wishlist-empty (product
   grid) rules from style.css as-is — same markup, same element IDs, so
   assets/js/wishlist.js's existing heart-toggle/remove/share handlers work
   unchanged. Those rules were authored for the full-bleed red hero band on
   the standalone /wishlist/ page though, so a few colors/spacing need
   scoped overrides here to read correctly on this page's plain white
   content column instead. */
.wow-account-dashboard__content .wow-wishlist-hero__share {
	margin: 0 0 40px;
}

.wow-account-dashboard__content .wow-wishlist-hero__share-label {
	color: var(--wp--preset--color--grey);
}

.wow-account-dashboard__content .wow-wishlist-hero__share-row {
	max-width: 420px;
	margin: 0;
}

.wow-account-dashboard__content .wow-wishlist-hero__share-message.is-success {
	color: var(--wp--preset--color--black);
}

/* The standalone page's grid wrapper adds its own max-width/centering/
   padding for when it sits directly under the full-bleed hero — redundant
   (and wrong) once nested inside the account content column, which already
   has its own width/padding from .wow-account-dashboard. */
.wow-account-dashboard__content .wow-wishlist-grid-wrap {
	max-width: none;
	margin: 0;
	padding: 0;
}

.wow-account-dashboard__content .wow-wishlist-empty {
	padding: 40px 20px;
}