/**
 * Wholesale minimum — cart, mini-cart and checkout messaging.
 *
 * Colours are the site's own Elementor globals so this reads as part of the
 * store rather than a stock WooCommerce alert:
 *   Secondary #1F3864 · Accent #2F5496 · Text #1E293B · Border #CBD5E1
 *   error tint #FFF5F5 (the site's own "New Global Color")
 *
 * Everything is scoped to the #id or an oml- class so theme and Elementor
 * rules can't reach in and undo it.
 */

/* ==========================================================================
   GLOBAL HEADER — mobile/tablet navigation was completely unreachable
   ==========================================================================

   The header's Nav Menu widget (Elementor's own burger-menu widget, the ONE
   thing that opens navigation on phone/tablet) has "Hide on Tablet" AND
   "Hide on Mobile" both checked in its own Elementor responsive-visibility
   settings — on the exact two breakpoints where it is the only way to reach
   COA Vault / Shop / Wholesale / Our Story / Special Order / Contact. This is
   an Elementor widget setting, not a CSS bug we introduced, but it is global
   (one header template, every page) so it is fixed here rather than left for
   a future content edit that may or may not happen.

   Confirmed live in a real browser before writing this: removing exactly
   these three classes made the toggle visible, clickable, and produced the
   real dropdown with the real 6 menu items. Sticky-header setups duplicate
   this widget in the DOM, so the fix has to be a rule, not a one-off class
   strip — it renders twice, both need it.

   `elementor-invisible` is Elementor's own entrance-animation start-state; it
   never got removed because the widget was display:none when the animation
   observer looked for it. Scoped to this exact widget only, not the class in
   general, so a legitimate entrance animation elsewhere on the site is not
   touched.

   Reversible by deleting this block; nothing else about the header changed. */

header.elementor-location-header .elementor-widget-nav-menu.elementor-nav-menu--toggle.elementor-nav-menu--burger {
	visibility: visible !important;
	opacity: 1 !important;
}

@media ( max-width: 767px ) {
	header.elementor-location-header .elementor-widget-nav-menu.elementor-nav-menu--toggle.elementor-nav-menu--burger.elementor-hidden-mobile {
		display: flex !important;
	}
}

@media ( min-width: 768px ) and ( max-width: 1024px ) {
	header.elementor-location-header .elementor-widget-nav-menu.elementor-nav-menu--toggle.elementor-nav-menu--burger.elementor-hidden-tablet {
		display: flex !important;
	}
}

/*
 * Now that the burger toggle above actually renders, it revealed the design
 * underneath it: a solid accent-blue filled button (Elementor CSS var
 * --e-global-color-accent, deliberately set by whoever built the header) that
 * sits noticeably higher than the search/account/cart icons beside it, and
 * doesn't match their plain outline style. Nobody could see this clash before
 * — it had never actually been visible.
 *
 * The vertical offset is real, not a rounding error: measured against the
 * cart icon's own vertical center as the reference point (a correctly-placed
 * sibling), the toggle sits 21px too high. That number is empirical, tied to
 * this header's current content — if the icon row's own height or padding
 * changes later, re-measure rather than trust it blindly.
 *
 * The fix has to target `.elementor-menu-toggle` itself, not its widget
 * wrapper (`.elementor-element-5baba42`): Elementor's own JS drives a
 * transform on the wrapper for its entrance animation, and that wins over a
 * stylesheet transform on the same element regardless of !important. The
 * inner toggle carries no such competing transform, confirmed empirically —
 * a translateY there took effect immediately and cleanly, with the header's
 * own height unchanged (a margin-based nudge, tried first, grew the header
 * and shifted every other icon's position along with it — transform doesn't
 * participate in layout flow, so nothing else on the page moves).
 *
 * Recoloured to the icons' own navy (#1F3864) with no fill, matching the
 * plain-outline language of its neighbours instead of standing out as an
 * unrelated button. Confirmed in a real browser: dropdown still opens with
 * all 6 links, header height unchanged, no horizontal overflow introduced.
 *
 * Real regression, found and fixed the same day: this rule's own
 * `display: flex !important` carried no breakpoint guard, so it applied at
 * every width — including desktop, above Elementor's own 1024px cutoff,
 * where this widget is supposed to stay hidden in favour of the full inline
 * menu. Our unconditional override beat Elementor's own default desktop-hide
 * rule for this element, so the toggle rendered a second, redundant nav
 * control underneath the real desktop menu. Wrapped in the same max-width
 * this file already uses for "mobile or tablet" (1024px, matching line 51's
 * tablet upper bound) so it can only ever affect the two breakpoints where
 * this toggle is meant to exist at all.
 */
@media ( max-width: 1024px ) {
	header.elementor-location-header .elementor-menu-toggle {
		transform: translateY( 21px ) !important;
		background-color: transparent !important;
		border-radius: 0 !important;
		width: 26px !important;
		height: 26px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	header.elementor-location-header .elementor-menu-toggle svg {
		fill: #1F3864 !important;
		width: 24px !important;
		height: 24px !important;
	}
}

@media ( min-width: 1025px ) {
	header.elementor-location-header .elementor-menu-toggle {
		display: none !important;
	}
}

/* ---- checkout banner ---------------------------------------------------- */

#oml-wm-banner {
	margin: 0 0 24px;
	padding: 18px 20px;
	background: #FFF5F5;
	border: 1px solid #E2C9C9;
	border-left: 4px solid #1F3864;
	border-radius: 6px;
	box-shadow: 0 1px 2px rgba( 15, 23, 42, 0.06 );
	color: #1E293B;
	font-size: 15px;
	line-height: 1.55;
}

#oml-wm-banner .oml-wm-title {
	display: block;
	margin: 0 0 6px;
	color: #1F3864;
	font-size: 16px;
	font-weight: 650;
	letter-spacing: -0.01em;
}

#oml-wm-banner .oml-wm-text {
	display: block;
	margin: 0 0 14px;
	color: #1E293B;
}

#oml-wm-banner .oml-wm-btn {
	display: inline-block;
	padding: 10px 20px;
	background: #1F3864;
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	border-radius: 6px;
	transition: background 0.15s ease;
}

#oml-wm-banner .oml-wm-btn:hover,
#oml-wm-banner .oml-wm-btn:focus {
	background: #2F5496;
	color: #ffffff;
}

#oml-wm-banner .oml-wm-btn:focus-visible {
	outline: 2px solid #2F5496;
	outline-offset: 3px;
}

/* ---- blocked routes to checkout ----------------------------------------- */

.oml-wm-blocked {
	opacity: 0.45 !important;
	cursor: not-allowed !important;
}

/* WooCommerce's own vaguer message, hidden only once ours has rendered. */
.oml-wm-hidden {
	display: none !important;
}

/* ---- mini-cart notice ---------------------------------------------------- */

.oml-wm-mini {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 14px;
	padding: 12px 14px;
	background: #FFF5F5;
	border: 1px solid #E2C9C9;
	border-left: 3px solid #1F3864;
	border-radius: 6px;
	color: #1E293B;
	font-size: 13px;
	line-height: 1.5;
	text-align: left;
	/* The mini-cart footer is usually a flex column of buttons — make sure the
	   notice spans it rather than being squeezed into a button-sized box. */
	flex: 0 0 auto;
	align-self: stretch;
	order: -1;
}

.oml-wm-mini strong {
	display: block;
	margin: 0 0 3px;
	color: #1F3864;
	font-size: 13.5px;
	font-weight: 650;
	letter-spacing: -0.005em;
}

.oml-wm-mini .oml-wm-mini-text {
	display: block;
	color: #1E293B;
}

@media ( max-width: 600px ) {
	#oml-wm-banner {
		padding: 15px 16px;
		font-size: 14.5px;
	}
}

/* ==========================================================================
   MY ACCOUNT — SITE-WIDE CHROME
   Loaded on every My Account page (Dashboard, Orders, Addresses, Account
   details, Referrals), not only the referral tab — see
   OML_Referral_Dashboard::frontend_config(). The goal is one consistent
   account area using the site's own tokens, not a redesigned tab bolted onto
   an otherwise untouched WooCommerce shell. Layout stays exactly as
   WooCommerce ships it (nav on the side, content beside it); only spacing,
   type, colour and the table/button treatment are touched.
   ========================================================================== */

:root {
	--oml-navy: #1F3864;
	--oml-blue: #2F5496;
	--oml-text: #1E293B;
	--oml-muted: #64748B;
	--oml-border: #D8E0EA;
	--oml-mist: #F6F9FC;
	--oml-ok: #15803D;
	--oml-ok-bg: #EAF6EE;
	--oml-hold: #B45309;
	--oml-hold-bg: #FDF3E3;
	--oml-bad: #B91C1C;
	--oml-bad-bg: #FCEBEB;
	--oml-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

/*
 * This page's Elementor "My Account" widget carries its own long-standing
 * tab styling (75px pill radius, 15px gaps between items, per-item divider
 * pseudo-elements) set in the widget's own Style panel, not by oml-core.
 * Those rules are scoped to that Elementor widget instance and win on
 * specificity over a plain class selector, so every property Elementor's
 * widget touches is re-set here with !important — the only reliable way to
 * get one consistent, flat account nav regardless of that widget's own
 * settings, without editing Elementor content directly.
 */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid var(--oml-border);
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-bottom: 1px solid var(--oml-border) !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
	border-bottom: 0 !important;
}

/* Elementor's own tab divider — replaced by the border-bottom above. */
.woocommerce-account .woocommerce-MyAccount-navigation li::after {
	display: none !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block !important;
	position: relative;
	padding: 13px 18px 13px 44px !important;
	background: #fff !important;
	color: var(--oml-text) !important;
	font-size: 14.5px !important;
	font-weight: 500 !important;
	text-decoration: none;
	border: 0 !important;
	border-radius: 0 !important;
	transition: background 0.12s ease, color 0.12s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: var(--oml-mist) !important;
	color: var(--oml-text) !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--oml-navy) !important;
	color: #fff !important;
	font-weight: 600 !important;
}

/*
 * The referral programme's nav row gets a permanent accent treatment — a
 * left accent bar and a custom animated gift mark, no badge — every visit,
 * for every user. (A "seen once, then plain" version of this existed
 * briefly and was removed entirely per feedback; there is no lingering
 * per-user state controlling this any more — no meta key, no gating class.)
 *
 * The rate badge ("10% + credit") was removed entirely per feedback —
 * simpler, and it removes the exact source of a real clipping bug from an
 * earlier round (see git history if that specific fix is ever needed again).
 * The label itself is now just "Give 10, Get 10" (no "— Referrals" suffix),
 * short enough that this row no longer has any wrap/overflow risk at all.
 */
.woocommerce-account .woocommerce-MyAccount-navigation-link--referrals a {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding-left: 15px !important;
	font-weight: 700 !important;
	white-space: nowrap !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--referrals:not(.is-active) a {
	background: linear-gradient( 135deg, rgba( 47, 84, 150, 0.09 ), rgba( 31, 56, 100, 0.03 ) ) !important;
	color: var(--oml-navy) !important;
	border-left: 3px solid var(--oml-blue) !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--referrals:not(.is-active) a:hover {
	background: linear-gradient( 135deg, rgba( 47, 84, 150, 0.16 ), rgba( 31, 56, 100, 0.07 ) ) !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--referrals.is-active a {
	background: linear-gradient( 135deg, var(--oml-navy), #16294a ) !important;
	color: #fff !important;
	border-left: 3px solid var(--oml-blue) !important;
}

/*
 * The gift mark, as a CSS background-image rather than the 🎁 emoji — per
 * feedback, a custom animated icon reads as brand-built, not a stock emoji.
 * No circular background (removed per feedback — the original blue-gradient
 * circle disappeared against this row's own navy .is-active background,
 * blue-on-blue). Two color variants instead, one per real background this
 * row ever sits on: navy glyph on the light tint (:not(.is-active)), white
 * glyph on the solid navy (.is-active) — the exact same real files
 * (assets/icons/gift-navy.svg / gift-white.svg) OML_Icons::gift_icon_html()
 * serves via <img src> for the homepage banner.
 *
 * Switched from a hand-encoded data: URI to these real file paths — the
 * data: URI decoded and validated as byte-correct, well-formed SVG (checked
 * directly), and the served CSS matched the source byte-for-byte, but the
 * icon still didn't render in a real browser, incognito included, so
 * something about that specific technique wasn't behaving as expected here.
 * Rather than keep debugging an unverifiable theory blind, switched to the
 * simplest possible technique — an ordinary background-image file
 * reference, identical in kind to how every other icon in this stylesheet
 * already works. Relative to this file's own location (assets/frontend.css)
 * so it resolves correctly on both live and staging without hardcoding a
 * domain.
 */
/*
 * !important throughout: a later, more generic rule now also targets every
 * nav row's ::before (for every OTHER row's icon) and, being a broader
 * selector matched against more elements, can win the specificity math on
 * shared properties despite reading as "more generic". Making this row's own
 * declaration unconditional removes any dependency on how that math resolves.
 */
.woocommerce-account .woocommerce-MyAccount-navigation-link--referrals a::before {
	content: "" !important;
	display: block !important;
	flex-shrink: 0;
	width: 20px !important;
	height: 20px !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	position: absolute !important;
	left: 14px !important;
	top: 50% !important;
	transform: translateY( -50% ) !important;
}

/*
 * Taken out of flex flow entirely and positioned absolutely instead —
 * found via direct devtools inspection that the icon was rendering (the
 * file-reference fix worked) but collapsing to invisible as a flex item in
 * this row. Absolute positioning removes it from that flex sizing
 * calculation altogether, so it can't be squeezed away regardless of what's
 * happening with the row's other flex items. The <a> needs its own
 * position: relative to anchor it and enough left padding to leave room for
 * an icon that no longer takes up flex space of its own.
 */
li.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--referrals a {
	padding-left: 40px !important;
	position: relative;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--referrals:not(.is-active) a::before {
	background-image: url("icons/gift-navy.svg") !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--referrals.is-active a::before {
	background-image: url("icons/gift-white.svg") !important;
}

/*
 * Every other nav row gets the same treatment the referral row already had —
 * an icon reads as a modern account nav, a plain text list reads as a
 * generic WooCommerce default. Same absolute-positioning technique as the
 * referral icon above (it's the one already proven to survive this row's
 * own flex sizing), same two-file navy/white pattern per row. Logout has
 * only one real background it ever sits on, so it gets one file.
 */
.woocommerce-account .woocommerce-MyAccount-navigation li a::before {
	content: "";
	display: block;
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY( -50% );
	width: 20px;
	height: 20px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--dashboard:not(.is-active) a::before {
	background-image: url("icons/dashboard-navy.svg");
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--dashboard.is-active a::before {
	background-image: url("icons/dashboard-white.svg");
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--orders:not(.is-active) a::before {
	background-image: url("icons/orders-navy.svg");
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--orders.is-active a::before {
	background-image: url("icons/orders-white.svg");
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--downloads:not(.is-active) a::before {
	background-image: url("icons/downloads-navy.svg");
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--downloads.is-active a::before {
	background-image: url("icons/downloads-white.svg");
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-address:not(.is-active) a::before {
	background-image: url("icons/address-navy.svg");
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-address.is-active a::before {
	background-image: url("icons/address-white.svg");
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-account:not(.is-active) a::before {
	background-image: url("icons/account-navy.svg");
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-account.is-active a::before {
	background-image: url("icons/account-white.svg");
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a::before {
	background-image: url("icons/logout-navy.svg");
}

@media ( max-width: 760px ) {
	/* The pill-row layout has no room for an icon alongside the label on any
	   row; keep only the accent tint and bold weight on the referral row so
	   it still reads as distinct without crowding a horizontally-scrolling
	   strip. */
	.woocommerce-account .woocommerce-MyAccount-navigation-link--referrals:not(.is-active) a {
		border-left: 0 !important;
	}

	/*
	 * !important: the referral row's own icon rule was just made
	 * unconditional (!important) to fix it losing a specificity fight on
	 * desktop, and that same !important now also beats THIS rule at mobile
	 * widths -- the icon was showing again on the mobile pill, with no room
	 * for it, overlapping the label. This has to be at least as forceful.
	 */
	.woocommerce-account .woocommerce-MyAccount-navigation li a::before {
		content: none !important;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation li a {
		padding-left: 18px !important;
	}

	/*
	 * The referral row keeps its icon on mobile after all -- the actual ask
	 * was to fix the overlap, not remove it. The overlap's real cause: the
	 * generic 18px reset directly above ties in specificity with this row's
	 * own 40px icon-clearance padding (li.class.class a, same (0,2,2) weight)
	 * and, being declared later, was winning -- so the icon (14-34px) sat on
	 * top of text starting at 18px. Both declarations below match that same
	 * specificity and come later still, so they win in turn: icon restored,
	 * and its own padding restored right alongside it rather than left to
	 * fall back to the 18px meant for icon-less rows.
	 */
	li.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--referrals a::before {
		content: "" !important;
	}

	li.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--referrals a {
		padding-left: 38px !important;
	}
}

/*
 * Elementor's own "My Account" widget sets its own Roboto/#69727d default
 * theme (widget-woocommerce-my-account.min.css) on every tab it recognises
 * as a stock WooCommerce endpoint (dashboard/orders/downloads/addresses/
 * account details), giving every tab except our custom Referrals page (which
 * carries its own real design, entirely oml-core's) a generic, off-brand
 * look — a real, verifiable inconsistency, not a broken layout. The
 * referrals endpoint isn't one Elementor recognises, so it never gets this
 * treatment anyway (confirmed: its tab wrapper class resolves to
 * "e-my-account-tab__" with no known-endpoint suffix) — no exclusion needed,
 * only the five real endpoints below are targeted.
 */
.elementor-widget-woocommerce-my-account {
	font-family: inherit !important;
	color: var(--oml-text) !important;
}

.elementor-widget-woocommerce-my-account .e-my-account-tab__dashboard .woocommerce-MyAccount-content-wrapper,
.elementor-widget-woocommerce-my-account .e-my-account-tab__orders .woocommerce-MyAccount-content-wrapper,
.elementor-widget-woocommerce-my-account .e-my-account-tab__downloads .woocommerce-MyAccount-content-wrapper,
.elementor-widget-woocommerce-my-account .e-my-account-tab__edit-address .woocommerce-MyAccount-content-wrapper,
.elementor-widget-woocommerce-my-account .e-my-account-tab__edit-account .woocommerce-MyAccount-content-wrapper {
	border: 1px solid var(--oml-border) !important;
	border-radius: 12px !important;
	background: #fff !important;
	box-shadow: 0 1px 2px rgba( 15, 30, 60, 0.04 ) !important;
	padding: 24px !important;
}

.woocommerce-account .woocommerce-MyAccount-content > h2:first-child,
.woocommerce-account .woocommerce-MyAccount-content > h3:first-child {
	margin-top: 0;
	color: var(--oml-navy);
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
	border-radius: 10px;
	overflow: hidden;
	border-collapse: separate;
	border-spacing: 0;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table th {
	background: var(--oml-mist);
	color: var(--oml-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table th,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--oml-border);
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table tr:last-child td {
	border-bottom: none;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button,
.woocommerce-account .woocommerce-MyAccount-content .button {
	background: var(--oml-blue);
	border-radius: 999px;
	color: #fff;
	font-weight: 600;
	transition: box-shadow 0.12s ease;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button:hover,
.woocommerce-account .woocommerce-MyAccount-content .button:hover {
	background: var(--oml-navy);
	color: #fff;
	box-shadow: 0 4px 14px -4px rgba(47, 84, 150, 0.5);
}

.woocommerce-account .woocommerce-MyAccount-content mark.order-status {
	background: var(--oml-ok-bg);
	color: var(--oml-ok);
	border-radius: 999px;
	font-weight: 600;
}

/*
 * Real screenshot, Orders tab: WooCommerce's own account notices ("Confirm
 * your email address to check for past orders...") rendered as an oversized,
 * unstyled button sitting awkwardly beside wrapping text — nothing in this
 * file targeted .woocommerce-info specifically before now. !important
 * throughout for the same reason the button rule above doesn't reach this:
 * this exact element sits outside every context that rule or Elementor's own
 * widget CSS accounts for, so nothing here can be assumed safe without it.
 */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 10px 20px !important;
	margin: 0 0 20px !important;
	padding: 14px 18px !important;
	background: var(--oml-mist) !important;
	border: 1px solid var(--oml-border) !important;
	border-top: 3px solid var(--oml-blue) !important;
	border-radius: 10px !important;
	color: var(--oml-text) !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	list-style: none !important;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info::before,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message::before,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error::before {
	display: none !important;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info a.button,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message a.button,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error a.button {
	order: 2 !important;
	flex-shrink: 0 !important;
	background: var(--oml-navy) !important;
	color: #fff !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	padding: 9px 18px !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	white-space: nowrap !important;
	text-decoration: none !important;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info a.button:hover,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message a.button:hover,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error a.button:hover {
	background: var(--oml-blue) !important;
	color: #fff !important;
}

@media ( max-width: 480px ) {
	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info,
	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message,
	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error {
		flex-direction: column !important;
		align-items: flex-start !important;
	}
}

/*
 * Real screenshot, Orders tab on a real phone: WooCommerce's own
 * shop_table_responsive stacking (each <td> as its own row, labelled via
 * data-title) had no grouping at all -- every field from every order ran
 * together with no visual boundary between one order and the next. Each
 * order becomes its own bordered card instead, the same card language used
 * everywhere else on this page.
 */
@media ( max-width: 760px ) {
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive,
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive tbody {
		display: block !important;
		width: 100% !important;
	}

	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive thead {
		display: none !important;
	}

	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive tr {
		display: block !important;
		margin-bottom: 14px !important;
		padding: 6px 16px !important;
		background: #fff !important;
		border: 1px solid var(--oml-border) !important;
		border-radius: 12px !important;
	}

	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive tr:last-child {
		margin-bottom: 0 !important;
	}

	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive td {
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
		gap: 12px !important;
		padding: 8px 0 !important;
		border-top: 1px solid var(--oml-border) !important;
		border-bottom: 0 !important;
		text-align: right !important;
	}

	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive td:first-child {
		border-top: 0 !important;
	}

	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive td::before {
		content: attr( data-title ) !important;
		flex-shrink: 0 !important;
		color: var(--oml-muted) !important;
		font-size: 11px !important;
		font-weight: 700 !important;
		letter-spacing: 0.04em !important;
		text-transform: uppercase !important;
	}

	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive .button {
		padding: 8px 16px !important;
		font-size: 13px !important;
	}
}

/* ==========================================================================
   REFERRAL DASHBOARD — the "My Referrals" tab specifically
   ========================================================================== */

.oml-referral-dashboard {
	color: var(--oml-text);
}

.oml-referral-eyebrow {
	margin: 0;
	color: var(--oml-blue);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/*
 * Eyebrow heading and the conditional "Redeem Credit" CTA share one row —
 * the button is level with the heading, pinned to the far right, per
 * feedback. Only rendered by PHP at all when the user has a positive
 * available balance (OML_Referral_Dashboard::render()), so no empty-state
 * handling is needed here.
 */
.oml-referral-eyebrow-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 20px;
}

.oml-use-credit-cta {
	flex-shrink: 0;
	padding: 9px 20px !important;
	font-size: 13px !important;
	color: #fff !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	white-space: nowrap;
}

.oml-use-credit-cta:hover,
.oml-use-credit-cta:focus,
.oml-use-credit-cta:visited {
	background: var(--oml-navy) !important;
	color: #fff !important;
	text-decoration: none !important;
	box-shadow: none !important;
	border: 0 !important;
}

/*
 * Smooth in-page scroll for the Redeem Credit link's #oml-credit-wallet
 * anchor. `html` can never be a descendant of a class on <body> (it's
 * <body>'s own ancestor), so this has to be a plain, unscoped rule on the
 * root element — the only place a browser looks for scroll-behavior when
 * scrolling the actual page viewport. Site-wide rather than account-page
 * only, but smooth anchor scrolling is a reasonable default anywhere.
 */
html {
	scroll-behavior: smooth;
}

@media ( prefers-reduced-motion: reduce ) {
	html {
		scroll-behavior: auto;
	}
}

/* One light status card: Researcher #, tier + progress, wallet at a glance.
   Deliberately NOT a dark hero band — same white/near-white surface as
   every other card on this site, with navy used only for emphasis, so the
   page still reads as part of the same store, not a separate dark product. */
.oml-status-strip {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 28px;
	align-items: center;
	margin-bottom: 20px;
	padding: 22px 26px;
	background: #fff;
	border: 1px solid var(--oml-border);
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(15, 30, 60, 0.04);
}

.oml-status-eyebrow {
	display: block;
	margin-bottom: 3px;
	color: var(--oml-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.oml-status-researcher {
	padding-right: 28px;
	border-right: 1px solid var(--oml-border);
	text-align: center;
}

.oml-status-researcher strong {
	font-family: var(--oml-mono);
	font-size: 26px;
	font-weight: 600;
	color: var(--oml-navy);
}

.oml-status-tier {
	min-width: 0;
}

.oml-status-tier-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 14px;
	margin-bottom: 9px;
}

/*
 * This row used to let the name+rate text shrink to fit beside the "N more
 * to..." label, which meant the flex box itself never wrapped — instead the
 * text INSIDE .oml-status-tier-name wrapped mid-phrase, stranding a single
 * orphan word ("discount") alone on its own line while the next-tier label
 * stayed pinned on line one. A min-width stops the name from shrinking past
 * the point it fits its own text on one line; once both pieces genuinely
 * can't share a row, flex-wrap now moves next-tier down as a whole label
 * instead of splitting a word.
 */
.oml-status-tier-name {
	min-width: 260px;
	font-size: 17px;
	font-weight: 600;
	color: var(--oml-navy);
}

.oml-status-tier-rate {
	margin-left: 8px;
	color: var(--oml-muted);
	font-size: 13px;
	font-weight: 400;
	white-space: nowrap;
}

.oml-status-tier-next {
	flex-shrink: 0;
	color: var(--oml-muted);
	font-size: 13px;
	white-space: nowrap;
}

.oml-status-track {
	height: 8px;
	overflow: hidden;
	background: var(--oml-mist);
	border-radius: 999px;
}

.oml-status-track span {
	display: block;
	height: 100%;
	background: var(--oml-blue);
	border-radius: inherit;
}

.oml-status-wallet {
	display: flex;
	gap: 22px;
	padding-left: 28px;
	border-left: 1px solid var(--oml-border);
}

.oml-status-figure {
	text-align: right;
}

.oml-status-figure strong {
	display: block;
	font-family: var(--oml-mono);
	font-size: 20px;
	font-weight: 600;
	color: var(--oml-navy);
}

.oml-status-figure .woocommerce-Price-amount {
	white-space: nowrap;
}

/* ---- share card ---- */

.oml-card {
	box-sizing: border-box;
	background: #fff;
	border: 1px solid var(--oml-border);
	border-radius: 12px;
	padding: 22px 24px;
	margin-bottom: 20px;
}

.oml-card h3 {
	margin: 0 0 6px !important;
	padding: 0 !important;
	line-height: 1.3 !important;
	color: var(--oml-navy);
}

.oml-card-lede {
	margin: 0 0 14px !important;
	padding: 0 !important;
	color: var(--oml-muted);
	font-size: 14px;
	line-height: 1.5;
}

.oml-referral-zone {
	margin-bottom: 0;
}

.oml-referral-share-body {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 24px;
	align-items: center;
}

.oml-referral-link-row {
	display: flex;
	gap: 8px;
}

.oml-referral-link-row input {
	box-sizing: border-box;
	flex: 1 1 auto;
	min-width: 0;
	padding: 11px 14px;
	font-family: var(--oml-mono);
	font-size: 13.5px;
	border: 1px solid var(--oml-border);
	border-radius: 8px;
	background: var(--oml-mist);
}

.oml-referral-code,
.oml-copy-status {
	margin: 8px 0 0;
	font-size: 13px;
}

.oml-copy-status {
	min-height: 1.4em;
	color: var(--oml-blue);
}

.oml-referral-qr-card {
	flex: 0 0 auto;
	text-align: center;
}

.oml-referral-qr {
	box-sizing: border-box;
	width: 148px;
	height: 148px;
	margin: 0 auto 10px;
	padding: 16px;
	background: #fff;
	border: 1px solid var(--oml-border);
	border-radius: 10px;
}

.oml-referral-qr canvas {
	display: block;
	max-width: 100%;
	height: auto;
}

.oml-referral-qr-card small {
	display: block;
	margin-top: 7px;
	color: var(--oml-muted);
}

.oml-referral-pending {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	color: var(--oml-muted);
	font-size: 14px;
	line-height: 1.55;
}

.oml-referral-pending svg {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	color: var(--oml-border);
}

/* ---- people you referred ---- */

.oml-referred-ledger-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.oml-referred-ledger-head h3 {
	margin: 0;
}

.oml-referred-count {
	font-family: var(--oml-mono);
	font-size: 12.5px;
	color: var(--oml-muted);
}

.oml-referred-empty {
	margin: 0;
	padding: 10px 0;
	color: var(--oml-muted);
	font-size: 14px;
}

.oml-table-scroll {
	overflow-x: auto;
}

table.oml-referred-table {
	width: 100%;
	min-width: 480px;
	border-collapse: collapse;
	font-size: 13.5px;
}

table.oml-referred-table th {
	text-align: left;
	padding: 0 12px 10px;
	color: var(--oml-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--oml-border);
}

table.oml-referred-table td {
	padding: 13px 12px;
	border-bottom: 1px solid var(--oml-border);
	vertical-align: middle;
}

table.oml-referred-table tr:last-child td {
	border-bottom: none;
}

.oml-who {
	display: flex;
	align-items: center;
	gap: 10px;
}

.oml-avatar {
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--oml-mist);
	color: var(--oml-navy);
	border-radius: 50%;
	font-size: 12px;
	font-weight: 700;
}

.oml-who-name {
	display: block;
	font-weight: 500;
}

.oml-who-date {
	display: block;
	color: var(--oml-muted);
	font-size: 12px;
}

.oml-align-right {
	text-align: right;
}

.oml-money {
	font-family: var(--oml-mono);
	white-space: nowrap;
}

.oml-money-sub {
	display: block;
	margin-top: 2px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
	font-size: 11.5px;
	color: var(--oml-muted);
}

.oml-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px 4px 8px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
}

.oml-chip::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.oml-chip--ok { background: var(--oml-ok-bg); color: var(--oml-ok); }
.oml-chip--hold { background: var(--oml-hold-bg); color: var(--oml-hold); }
.oml-chip--bad { background: var(--oml-bad-bg); color: var(--oml-bad); }
.oml-chip--neutral { background: var(--oml-mist); color: var(--oml-muted); }

/*
 * Addendum §2.2 — always present directly beneath the link/QR, never
 * removed from the markup, but compacted 21 Aug so only the one required
 * sentence is loud by default. <details>/<summary> keeps the FTC/hashtag
 * and no-health-claims text in the actual page source at all times — a
 * compliance read of the source finds every required word whether or not
 * a visitor ever clicks "Details" — while visually it reads as one quiet
 * branded line instead of a four-paragraph warning box.
 */
.oml-referral-disclosure {
	margin: 0 0 20px;
	background: #fff;
	border: 1px solid var(--oml-border);
	border-radius: 10px;
	overflow: hidden;
}

.oml-referral-disclosure summary {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	list-style: none;
	color: var(--oml-text);
	font-size: 12.5px;
	line-height: 1.5;
	cursor: pointer;
	transition: background 0.12s ease;
}

.oml-referral-disclosure summary:hover {
	background: var(--oml-mist);
}

.oml-referral-disclosure summary::-webkit-details-marker {
	display: none;
}

.oml-referral-disclosure-icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	background: var(--oml-navy);
	border-radius: 50%;
	color: #fff;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 11px;
	font-weight: 700;
	font-style: italic;
}

.oml-referral-disclosure-line {
	flex: 1 1 auto;
	min-width: 0;
}

.oml-referral-disclosure-more {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 4px;
	color: var(--oml-blue);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.oml-referral-disclosure-more::after {
	content: "\25BE";
	font-size: 10px;
	transition: transform 0.15s ease;
}

.oml-referral-disclosure[open] .oml-referral-disclosure-more::after {
	transform: rotate( 180deg );
}

.oml-referral-disclosure-body {
	padding: 0 16px 14px 44px;
	color: var(--oml-muted);
	font-size: 12px;
}

.oml-referral-disclosure-body p {
	margin: 6px 0 0;
	line-height: 1.55;
}

.oml-referral-disclosure-body p:first-child {
	margin-top: 0;
	padding-top: 10px;
	border-top: 1px solid var(--oml-border);
}

.oml-referral-disclosure-body a {
	color: var(--oml-blue);
	font-weight: 600;
}

.oml-terms-pending {
	font-style: italic;
}

/* ---- credit wallet (rendered by OML_Credit_Redemption, own hook) ----
   Markup untouched; restyled here only, to match the surrounding cards. */

.oml-credit-wallet {
	box-sizing: border-box;
	background: #fff;
	border: 1px solid var(--oml-border);
	border-radius: 12px;
	padding: 22px 24px;
	color: var(--oml-text);
}

.oml-credit-wallet-heading {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 18px;
}

.oml-credit-wallet-heading h3 {
	margin: 0;
	color: var(--oml-navy);
}

.oml-credit-wallet-eyebrow {
	margin: 0 0 4px;
	color: var(--oml-blue);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.oml-credit-wallet-summary {
	display: flex;
	gap: 22px;
	margin: 0;
	color: var(--oml-muted);
	font-size: 13px;
	text-align: right;
}

.oml-credit-wallet-summary span,
.oml-credit-wallet-summary strong {
	display: block;
}

.oml-credit-wallet-summary strong {
	font-family: var(--oml-mono);
	color: var(--oml-navy);
	font-size: 19px;
}

.oml-credit-wallet .woocommerce-Price-amount {
	white-space: nowrap;
}

.oml-credit-wallet form {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	margin: 14px 0 4px;
}

.oml-credit-wallet form label {
	flex: 1 1 auto;
}

.oml-credit-wallet form input[type="number"] {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin-top: 6px;
	padding: 9px 12px;
	border: 1px solid var(--oml-border);
	border-radius: 8px;
}

.oml-credit-limit {
	margin-top: 6px;
	color: var(--oml-muted);
}

/* A negative wallet position. Visible and explained, never rendered as
   "$-40.00 available" — see OML_Credit_Redemption::render_wallet(). */
.oml-credit-owed {
	margin: 12px 0 0;
	padding: 10px 12px;
	border: 1px solid #E7C08A;
	border-left-width: 4px;
	border-radius: 8px;
	background: #FDF6EC;
	color: #6B4A12;
	font-size: 14px;
	line-height: 1.5;
}

/* Credit earned but held by a programme rule — informational, not a warning:
   the customer has done nothing wrong and the money is still theirs. */
.oml-credit-held {
	margin: 12px 0 0;
	padding: 10px 12px;
	border: 1px solid var(--oml-border);
	border-left: 4px solid var(--oml-blue);
	border-radius: 8px;
	background: var(--oml-mist);
	color: var(--oml-text);
	font-size: 14px;
	line-height: 1.5;
}

.oml-credit-wallet table {
	width: 100%;
	margin-top: 10px;
	border-collapse: collapse;
}

.oml-credit-wallet table th {
	text-align: left;
	padding: 0 10px 8px;
	color: var(--oml-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--oml-border);
}

.oml-credit-wallet table td {
	padding: 10px;
	border-bottom: 1px solid var(--oml-border);
	font-size: 13px;
}

.oml-credit-wallet table tr:last-child td {
	border-bottom: none;
}

.oml-referral-discount-note {
	display: inline-block;
	max-width: 190px;
	color: var(--oml-blue);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
}

@media ( max-width: 760px ) {
	.woocommerce-account .woocommerce-MyAccount-navigation {
		float: none !important;
		width: 100% !important;
		margin-bottom: 24px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/*
	 * !important on display/width here for the same reason the li rule below
	 * needed it: Elementor's own widget CSS sets a competing, non-!important
	 * `display` and `width` on this exact selector for its "vertical tabs"
	 * layout, and without !important its rule can win depending on stylesheet
	 * load order — confirmed the li case actually does, on a real phone.
	 */
	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		display: flex !important;
		gap: 8px !important;
		width: max-content !important;
		margin: 0 !important;
		padding: 0 0 6px !important;
		border: none;
		background: none;
	}

	/*
	 * Real bug, found from a real phone screenshot: Elementor's own widget
	 * CSS (widget-woocommerce-my-account.min.css, built for its "vertical
	 * tabs" layout) sets `.woocommerce-MyAccount-navigation ul li { width:
	 * 100% }` with no !important. `flex: 0 0 auto` alone doesn't beat that —
	 * flex-basis:auto defers to the item's own `width`, so each pill
	 * stretched to the full scroll-strip width instead of sizing to its own
	 * label. One giant full-width pill per swipe is what a phone actually
	 * showed — not a cosmetic pill, a real "scrolling reveals nothing usable"
	 * bug. `width: auto` here is the fix; nothing else in this rule was
	 * wrong.
	 */
	.woocommerce-account .woocommerce-MyAccount-navigation li {
		flex: 0 0 auto;
		width: auto !important;
		margin: 0 !important;
		border: 1px solid var(--oml-border) !important;
		border-radius: 999px !important;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation li a {
		min-width: 0;
		padding: 10px 16px !important;
		white-space: nowrap;
		border-radius: inherit !important;
	}

	/*
	 * This file has two separate @media(max-width:760px) blocks touching
	 * `li a` padding at identical (0,2,2) specificity; whichever is later in
	 * the file wins the property. This is later than the referral icon's own
	 * 38px reservation earlier in the file, so without repeating it here the
	 * plain 16px above wins again and the overlap comes right back.
	 */
	li.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--referrals a {
		padding-left: 38px !important;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
		border-radius: inherit !important;
	}

	.woocommerce-account .woocommerce-MyAccount-content {
		float: none;
		width: 100%;
	}

	.oml-status-strip {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	/*
	 * The desktop rule gives this a 260px min-width so the tier name never
	 * wraps mid-phrase beside the "N more to..." label on a wide row. On the
	 * single-column mobile layout that same 260px can be wider than the
	 * viewport itself (a 320-360px phone with the card's own padding), which
	 * forces the whole status card to overflow horizontally instead of
	 * wrapping — real content pushed off-screen rather than a cosmetic
	 * wrap issue. Mobile has no competing label on the same line once the
	 * row is stacked, so it's safe to let it size to its own text.
	 */
	.oml-status-tier-name {
		min-width: 0;
	}

	.oml-status-researcher {
		padding-right: 0;
		border-right: none;
		text-align: left;
	}

	.oml-status-wallet {
		padding-left: 0;
		border-left: none;
		justify-content: space-between;
		flex-wrap: wrap;
		row-gap: 12px;
	}

	.oml-status-figure {
		text-align: left;
	}

	.oml-referral-share-body {
		grid-template-columns: 1fr;
	}

	.oml-referral-qr-card {
		align-self: center;
	}

	.oml-credit-wallet form {
		align-items: stretch;
		flex-direction: column;
	}

	.oml-credit-wallet-heading,
	.oml-credit-wallet-summary {
		align-items: flex-start;
		flex-direction: column;
		gap: 8px;
		text-align: left;
	}

	.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
	}
}

@media ( max-width: 430px ) {
	.oml-referral-link-row {
		flex-direction: column;
	}
}

/* ==========================================================================
   REFERRAL POPUP — shown once to a fresh referral visitor, ahead of the
   site's own Age & Research Verification popup. Own overlay, not a reuse of
   that popup's markup: it's a real Elementor Pro popup we don't own the
   source of, so styling here is fully independent and can't drift if that
   popup's own design changes.

   The theme's own base `button { border: 1px solid #cc3366 }` reset was
   bleeding through the first version of this (confirmed directly: computed
   border on our own button was rgb(204,51,102), a color never set here) —
   every property that reset could touch is pinned explicitly with
   !important below, not just re-declared, so it can never resurface.
   ========================================================================== */

.oml-ref-popup-overlay {
	position: fixed;
	inset: 0;
	z-index: 10000; /* checked directly, not guessed: Elementor's own popup modal computes to 9999 */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(7, 10, 18, 0.8);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-sizing: border-box;
	animation: oml-ref-popup-fade 0.25s ease both;
}

.oml-ref-popup {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 440px;
	padding: 44px 36px 32px;
	background: #fff;
	border-radius: 20px;
	box-shadow:
		0 40px 80px -16px rgba(8, 11, 18, 0.55),
		0 0 0 1px rgba(255, 255, 255, 0.06) inset;
	text-align: center;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
	animation: oml-ref-popup-rise 0.32s cubic-bezier(.2, .8, .2, 1) both;
}

@media ( prefers-reduced-motion: reduce ) {
	.oml-ref-popup-overlay,
	.oml-ref-popup {
		animation: none;
	}
}

@keyframes oml-ref-popup-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes oml-ref-popup-rise {
	from { opacity: 0; transform: translateY(14px) scale(0.97); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

/*
 * Kept top-level rather than nested inside the mobile @media block below.
 * Nesting is valid CSS, but confirmed directly it did not behave reliably
 * here: the transform stuck at its "from" value (translateY(28px)) and
 * never resolved to translateY(0), leaving the card permanently offset and
 * overflowing the viewport bottom. Moving it out fixed it outright.
 */
@keyframes oml-ref-popup-rise-mobile {
	from { opacity: 0; transform: translateY(28px); }
	to { opacity: 1; transform: translateY(0); }
}

/*
 * The theme's own global `button` reset kept bleeding through this popup one
 * property at a time — first a border color, then (found again on this
 * pass) padding, width, display and font-weight all still resolved to the
 * theme's values rather than the ones declared here, confirmed directly via
 * getComputedStyle each time rather than assumed fixed. Rather than keep
 * finding one more leaking property per round, every property a generic
 * `button` selector could plausibly set is pinned with !important below,
 * across every rule in this block.
 */
.oml-ref-popup-close {
	position: absolute !important;
	top: 14px !important;
	right: 14px !important;
	width: 30px !important;
	min-width: 30px !important;
	height: 30px !important;
	min-height: 30px !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: var(--oml-mist) !important;
	color: var(--oml-muted) !important;
	border: 0 !important;
	border-radius: 50% !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.oml-ref-popup-close:hover,
.oml-ref-popup-close:focus-visible {
	background: var(--oml-border) !important;
	color: var(--oml-navy) !important;
	outline: none;
}

/* The badge is purely decorative — a visual anchor, not a second copy of the
   required text — so the two lines below it stay exactly the words specified. */
.oml-ref-popup-badge {
	width: 60px;
	height: 60px;
	margin: 0 auto 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(145deg, var(--oml-blue), var(--oml-navy));
	border-radius: 50%;
	box-shadow: 0 10px 24px -8px rgba(47, 84, 150, 0.55);
	color: #fff;
	font-family: var(--oml-mono);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.oml-ref-popup-eyebrow {
	display: inline-block;
	margin: 0 0 14px;
	padding: 6px 16px;
	background: var(--oml-mist);
	border-radius: 999px;
	color: var(--oml-navy);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.4;
}

.oml-ref-popup-headline {
	margin: 0 0 14px;
	color: var(--oml-navy);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.32;
}

.oml-ref-popup-body {
	margin: 0 0 26px;
	color: var(--oml-text);
	font-size: 15.5px;
	line-height: 1.6;
}

.oml-ref-popup-actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.oml-ref-popup-btn {
	box-sizing: border-box !important;
	display: block !important;
	width: 100% !important;
	min-width: 0 !important;
	height: auto !important;
	margin: 0 !important;
	padding: 15px 20px !important;
	border: 0 !important;
	border-radius: 999px !important;
	font-family: inherit !important;
	font-size: 15.5px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	text-align: center !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, color 0.15s ease;
}

.oml-ref-popup-btn:focus-visible {
	outline: 2px solid var(--oml-blue) !important;
	outline-offset: 2px;
}

.oml-ref-popup-btn--primary {
	background: linear-gradient(120deg, var(--oml-blue), var(--oml-navy)) !important;
	color: #fff !important;
	box-shadow: 0 12px 28px -10px rgba(47, 84, 150, 0.65);
}

.oml-ref-popup-btn--primary:hover {
	box-shadow: 0 16px 32px -8px rgba(31, 56, 100, 0.7);
	transform: translateY(-1px);
}

.oml-ref-popup-btn--secondary {
	background: #fff !important;
	color: var(--oml-navy) !important;
	box-shadow: inset 0 0 0 1.5px var(--oml-border);
}

.oml-ref-popup-btn--secondary:hover {
	background: var(--oml-mist) !important;
	box-shadow: inset 0 0 0 1.5px var(--oml-blue);
}

.oml-ref-popup-note {
	margin: 22px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--oml-border);
	color: var(--oml-muted);
	font-size: 12.5px;
	line-height: 1.5;
}

/* ---- tablet ---- */
@media ( min-width: 431px ) and ( max-width: 900px ) {
	.oml-ref-popup {
		max-width: 400px;
	}
}

/* ---- mobile ---- */
@media ( max-width: 430px ) {
	.oml-ref-popup-overlay {
		padding: 16px;
		align-items: flex-end;
	}

	.oml-ref-popup {
		/* On a short device (or with the on-screen keyboard eating space) this
		   content can genuinely be taller than the viewport — confirmed
		   directly: at 375x812 it overflowed the bottom edge by 12px, cutting
		   into the footer note. Cap the height and let the CARD scroll
		   internally rather than clip, so nothing is ever unreachable. */
		max-height: calc(100vh - 32px);
		overflow-y: auto;
		padding: 36px 24px 24px;
		border-radius: 20px 20px 16px 16px;
		animation-name: oml-ref-popup-rise-mobile;
	}

	.oml-ref-popup-badge {
		width: 48px;
		height: 48px;
		margin-bottom: 14px;
		font-size: 16px;
	}

	.oml-ref-popup-eyebrow {
		margin-bottom: 10px;
	}

	.oml-ref-popup-headline {
		margin-bottom: 10px;
		font-size: 20px;
	}

	.oml-ref-popup-body {
		margin-bottom: 20px;
		font-size: 14.5px;
	}

	.oml-ref-popup-note {
		margin-top: 16px;
		padding-top: 14px;
	}
}

/* ==========================================================================
   FULFILLMENT STATUS — In Stock / Special Order
   ==========================================================================

   Palette is deliberately NOT stock Tailwind/shadcn emerald+amber — pulled
   from this site's own Elementor kit instead: same tonal depth as the
   brand's own Secondary/Ink colours (dark, desaturated, not neon), on a tint
   as pale as the kit's own "Paper" (#FAFAFA). Small rounded-rectangle tag,
   not a full pill — pills on this site mean "button, click me" (Add to
   Cart, nav pills); a status tag needs to read as information, not a CTA.
   No gradient, no shadow, no glow — matches the site's flat, editorial,
   lab-report tone everywhere else (COA spec table, purity/batch labels).
   ========================================================================== */

/*
 * Once a size is selected, WooCommerce's default variation form prints a
 * whole block of content that is either redundant with something already
 * on the page or just noise here: its own smaller price line (the top
 * price widget is the live display now instead, see findOwnPriceWidget in
 * frontend.js), a second copy of the variation description (the same text
 * already sits in the product's own Description tab further down), and a
 * "Size: 10mg" / "Clear" pairing next to the swatches that only repeats
 * what the swatch's own selected label already says. `found_variation` still
 * receives the full variation data object regardless of whether this DOM
 * block is visible, so hiding it here does not affect the top-widget price
 * swap above or anything else reading that event.
 *
 * `!important` here is load-bearing, not stylistic — a plain `display:none`
 * did not hold. WooCommerce's own variation-form script actively calls
 * `.show()`/`.slideDown()` on these exact elements the moment a variation
 * is found, which sets `display` as an inline style via JS. An inline style
 * always wins over an ordinary external rule regardless of selector
 * specificity — the specificity-based fix that worked for the Elementor kit
 * button collision does not apply here, since this fight is CSS-vs-inline-
 * style, not CSS-vs-CSS. `!important` in an external stylesheet is the one
 * thing that still beats a plain inline style.
 */
.woocommerce-variation.single_variation,
.woo-selected-variation-item-name,
a.reset_variations {
	display: none !important;
}

/*
 * The price element (`p.price`, and the plain `.price` span WooCommerce uses
 * inside a variation's summary) becomes the flex line the badge lives on,
 * rather than the badge being an inline child that wraps independently of
 * the price text. That independent wrapping is what produced the stacked,
 * uneven look on GHK-Cu's real page (price / badge / a third "ships in"
 * line, three rows on a narrow summary column) — real feedback, from a real
 * screenshot, not a guess. One flex row now, wraps as a unit if the
 * container is too narrow, consistent gap instead of a hardcoded margin.
 *
 * `inline-flex`, not `flex` — a real regression, caught from another real
 * screenshot: plain `flex` makes `.price` a block-level box, and a block box
 * inside an otherwise-inline swatch row (woo-variation-swatches' own
 * "%image% - %variation% - %price%" label, meant to read as one line) forces
 * a line break right before it, which is exactly the "image / -10mg-" on one
 * row and "radio / $77.00" stranded on the row below that the screenshot
 * showed. `inline-flex` keeps every property this rule needs (gap, wrap,
 * centred alignment) while still participating in the surrounding inline
 * flow instead of breaking it.
 */
.price {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	row-gap: 4px;
}

.oml-fulfillment-badge {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 9px 3px 7px;
	border-radius: 5px;
	font-family: inherit;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	white-space: nowrap;
	vertical-align: middle;
	cursor: default;
}

.oml-fulfillment-badge__dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	flex: 0 0 auto;
}

.oml-fulfillment-badge--stock {
	color: #1F4D33;
	background: #EAF2ED;
	border: 1px solid rgba(31, 77, 51, 0.18);
}
.oml-fulfillment-badge--stock .oml-fulfillment-badge__dot {
	background: #1F4D33;
}

.oml-fulfillment-badge--special {
	color: #7A4A12;
	background: #FBF1E4;
	border: 1px solid rgba(122, 74, 18, 0.18);
}
.oml-fulfillment-badge--special .oml-fulfillment-badge__dot {
	background: #7A4A12;
}

/*
 * The attribute label ("Size") above the swatches is redundant once every
 * option already shows its own value as text -- the swatch row for "10mg"
 * already says 10mg. Generic to any attribute name, not only pa_size, since
 * every variable product on this site uses the same swatch pattern.
 *
 * `!important`: real feedback showed it still visible after a plain
 * `display:none` deploy that was confirmed present in the served CSS --
 * same class of conflict as the Clear link / item-name value, an inline
 * style set by the swatches plugin's own init script beating an ordinary
 * external rule regardless of specificity.
 */
.variations th.label {
	display: none !important;
}

/*
 * Swatch-row badge, mixed-size products only (the all-special-order case
 * has no badge here at all, see append_badge_to_price()). Real feedback:
 * cramped against the price text with no breathing room. A touch smaller
 * and a proper left margin instead of relying on the row's own wrapping.
 */
.variable-item-radio-value-wrapper .oml-fulfillment-badge {
	margin-left: 8px;
	font-size: 9.5px;
	padding: 2px 6px 2px 5px;
}

/* Shop/category/homepage grid cards — a touch smaller, same flex-row parent. */
.products li.product .oml-fulfillment-badge,
.elementor-loop-container .oml-fulfillment-badge {
	font-size: 10px;
	padding: 2px 7px 2px 6px;
}

/*
 * Tooltip — replaces the old separate "Ships in 2–3 weeks" paragraph, which
 * only ever appeared for a variable product's selected variation and never
 * for a simple product, an inconsistency rather than a real difference.
 * Hover *or* focus (tabindex="0" on the badge) so it's reachable by
 * keyboard, not just a mouse. CSS-only, no JS, no layout shift underneath —
 * the badge's own footprint never changes size.
 */
.oml-fulfillment-badge__tooltip {
	position: absolute;
	bottom: calc(100% + 7px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	padding: 6px 10px;
	border-radius: 5px;
	background: #0F172A;
	color: #FFFFFF;
	font-size: 11px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: normal;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, transform 0.15s ease;
	z-index: 20;
}
.oml-fulfillment-badge__tooltip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: #0F172A;
}
.oml-fulfillment-badge:hover .oml-fulfillment-badge__tooltip,
.oml-fulfillment-badge:focus-visible .oml-fulfillment-badge__tooltip {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

/* Size selector grouping — In Stock first, Special Order below a divider. */
.oml-fulfillment-size-group-label {
	display: block;
	width: 100%;
	margin: 14px 0 6px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #64748B;
}
.oml-fulfillment-size-group-label:first-of-type {
	margin-top: 0;
}
.oml-fulfillment-size-group-label--special {
	padding-top: 12px;
	border-top: 1px solid #CBD5E1;
}

/*
 * Cart / checkout split-shipment note. Filled box with its own border was
 * real feedback — reads as a warning callout, heavier than a one-line
 * shipping note deserves, and boxes-with-borders in a tight sidebar is
 * exactly the generic "AI disclaimer strip" look already avoided once for
 * the popup's own aside line. Same quiet treatment here for consistency:
 * a hairline rule, no fill, no border-radius/border, muted grey text.
 */
.oml-fulfillment-cart-note td {
	padding: 10px 0 0 !important;
	border-top: 1px solid #E2E8F0;
}
.oml-fulfillment-cart-note__text {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: #64748B;
}

/* Mini-cart (AJAX flyout) version — same note, no table row to sit in. Real
   gap: a screenshot of the flyout with two special-order items in it showed
   nothing here at all, only the cart page and checkout had this. */
.oml-fulfillment-cart-note--mini {
	margin: 0 0 12px;
	padding-top: 10px;
	border-top: 1px solid #E2E8F0;
	font-size: 12px;
	line-height: 1.5;
	color: #64748B;
}

/*
 * Per-item badge, above the product name — mini-cart drawer, cart page
 * table, and checkout review table all share this markup
 * (woocommerce_cart_item_name), `.cart_item` is the one class genuinely
 * common to all three (confirmed from the real drawer's actual rendered
 * HTML, not WooCommerce's default class names guessed at first).
 *
 * The real mini-cart widget (pro-elements' menu-cart) lays each row out on
 * a fixed two-row CSS grid — name row, price row, sharing one column next
 * to the thumbnail (`.elementor-menu-cart__product { display:grid;
 * grid-template-rows: auto auto; }`, read directly from that plugin's own
 * CSS). A badge competing on the same line as the name, or added as a third
 * line, breaks that two-row assumption — real feedback described this as
 * "alignment, spacing, things floating to a new row," which was this, not
 * a separate polish issue. `display:block` with a small bottom margin
 * keeps the badge inside the name row's own space rather than growing it
 * unpredictably.
 */
.cart_item .oml-fulfillment-cart-item-badge,
.shop_table .oml-fulfillment-cart-item-badge {
	display: block;
	margin-bottom: 4px;
}
.cart_item .oml-fulfillment-badge,
.shop_table .oml-fulfillment-badge {
	font-size: 10px;
	padding: 2px 7px 2px 6px;
}
.cart_item .product-name,
.cart_item .elementor-menu-cart__product-name {
	min-width: 0;
}
.cart_item .product-name > a,
.cart_item .elementor-menu-cart__product-name > a {
	display: inline-block;
	max-width: 100%;
}

/*
 * Shop-page category filter list treats "Special Order" as if it were a
 * subject-matter category (same list as "Metabolic Research", "Longevity
 * Research"...). First pass distinguished it with a dot; asked directly to
 * remove the entry instead — the underlying category, the archive URL, and
 * the filter behaviour for every other term all stay exactly as they are,
 * only this one clickable list entry goes. Hidden here immediately (before
 * frontend.js even runs) so there is no flash of the button before the
 * matching DOM removal in frontend.js takes it out entirely.
 */
[data-filter="special-order"] {
	display: none !important;
}

/*
 * One-time "this ships in 2-3 weeks" confirmation modal on add-to-cart.
 * Redesigned from real feedback on the first version: the button had a
 * stray magenta ring around it (an unstyled browser default focus outline,
 * not a design choice — fixed explicitly below), and floating a small
 * button in the bottom-right corner of a short, single-action dialog read
 * as an afterthought. A text link was considered and rejected on purpose:
 * the entire point of this dialog is that the wait time actually gets
 * registered, and a plain link is exactly the kind of control people
 * reflexively click past without reading — the opposite of what it is for.
 * Full-width button instead, which also settles "left or centered" — a
 * button spanning the dialog has no alignment question left to answer, and
 * it is the pattern this exact kind of single-CTA, low-friction confirm
 * already uses elsewhere (Notion, Linear-style "got it" dialogs). Text
 * stays left-aligned: two lines of body copy reads faster ragged-left than
 * centered. Everything pulled in slightly tighter throughout for a calmer,
 * more considered feel rather than a bigger visual event than the message
 * warrants.
 */
/*
 * Darker overlay + a backdrop blur — the flat 50% tint read as subtle on a
 * real page (real screenshot). Text inside stays left-aligned deliberately,
 * not centered: the body is two to three lines, and ragged-left reads
 * faster than centered for a real paragraph, centering only helps a single
 * short line. The blur does more of the "make this the obvious thing to
 * look at" work instead — same job the darker tint does, but reads as more
 * considered/premium than only pushing the tint darker (the pattern behind
 * this exact card, badge and button already, e.g. Stripe/Linear/Vercel
 * modals) rather than a heavier flat scrim.
 */
.oml-fulfillment-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(15, 23, 42, 0.62);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}
.oml-fulfillment-modal {
	width: 100%;
	max-width: 394px;
	position: relative;
	padding: 24px 24px 20px;
	background: #FFFFFF;
	border-radius: 12px;
	box-shadow: 0 16px 48px rgba(15, 23, 42, 0.18);
}
/*
 * `.oml-fulfillment-modal-overlay <selector>` throughout this file — not
 * `!important` — is the actual fix for Elementor's kit defaults
 * (`.elementor-kit-6 button` etc., see the note further down). One class
 * plus one element (Elementor's shape) has specificity (0,1,1); two classes
 * (ours, since the overlay is always the real ancestor of everything this
 * feature renders) is (0,2,0), which already outranks it — no `!important`
 * needed anywhere below, and every new element in this feature is safe by
 * construction as long as it stays nested under the overlay, not just the
 * two buttons that happened to trigger this.
 */
.oml-fulfillment-modal-overlay .oml-fulfillment-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: #94A3B8;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.oml-fulfillment-modal-overlay .oml-fulfillment-modal__close:hover {
	background: #F1F5F9;
	color: #0F172A;
}
.oml-fulfillment-modal-overlay .oml-fulfillment-modal__close:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(47, 84, 150, 0.35);
}
.oml-fulfillment-modal-overlay .oml-fulfillment-modal__close svg {
	width: 14px;
	height: 14px;
}
.oml-fulfillment-modal__badge {
	margin-bottom: 12px;
	padding-right: 24px;
}
.oml-fulfillment-modal__title {
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: #0D0D0D;
}
.oml-fulfillment-modal__body {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.5;
	color: #1E293B;
}
.oml-fulfillment-modal__body strong {
	color: #0D0D0D;
	font-weight: 600;
}

/*
 * The in-stock-items note reads as an aside, not a warning — a thin top
 * rule and a step down in size/colour is enough to say "related, but
 * secondary" without a boxed, icon-and-border "Note:" callout. That boxed
 * treatment is the generic pattern to avoid here (explicitly asked for
 * something that doesn't read as an AI-generated disclaimer strip); a
 * quiet aside under a hairline reads like something a person actually
 * wrote as an afterthought, which is what this sentence actually is.
 */
.oml-fulfillment-modal__aside {
	margin: 0 0 18px;
	padding-top: 12px;
	border-top: 1px solid #E2E8F0;
	font-size: 12.5px;
	line-height: 1.5;
	color: #64748B;
}
/*
 * Real cause, found from a real DevTools screenshot rather than guessed:
 * Elementor stamps `elementor-kit-{id}` on <body> globally, so its own
 * default button style — `.elementor-kit-6 button { border-radius: 50px;
 * padding: 16px 30px; … }` — matches literally any <button> on the page,
 * this one included, since it is a descendant of <body> even though it is
 * appended by JS outside Elementor's normal markup. That selector's
 * specificity (class + element, 0-1-1) beat this rule's original single
 * class (0-1-0), so it silently won on padding/border-radius regardless of
 * what this file set them to — the "still too big" button and the ring
 * were the *same* root cause, not two separate bugs.
 *
 * First fix was `!important` on every property, which works but has to be
 * remembered on every future property and every new element — asked
 * directly for a version that doesn't. `.oml-fulfillment-modal-overlay`
 * (the real, permanent ancestor of every element this feature renders) is
 * prefixed onto the selector instead: two classes (0-2-0) already outranks
 * Elementor's class+element (0-1-1) on its own, so ordinary specificity
 * wins cleanly and no property needs `!important` to hold the line.
 */
.oml-fulfillment-modal-overlay .oml-fulfillment-modal__confirm {
	display: inline-block;
	width: auto;
	padding: 8px 18px;
	border: none;
	border-radius: 7px;
	background: var(--e-global-color-accent, #2F5496);
	color: #FFFFFF;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease;
	outline: none;
	box-shadow: none;
}
.oml-fulfillment-modal-overlay .oml-fulfillment-modal__confirm:hover {
	background: var(--e-global-color-secondary, #1F3864);
}
.oml-fulfillment-modal-overlay .oml-fulfillment-modal__confirm:focus-visible {
	box-shadow: 0 0 0 3px rgba(47, 84, 150, 0.35);
}