/**
 * D LUNAFAM — Header
 * ------------------------------------------------------------------
 * Restyles OceanWP's existing header markup (confirmed from the live
 * rendered page, not guessed): #site-header > #site-header-inner >
 * #site-logo + #site-navigation-wrap > nav#site-navigation > one flat
 * <ul id="menu-main-menu"> containing every nav link, the search widget,
 * wishlist, and cart as sibling <li> items, each link rendered as an
 * icon + text pair. No menu structure/content is changed — OceanWP's
 * menu, search, wishlist, and cart functionality are untouched; this is
 * presentation only.
 *
 * Neutralizes two rules from the legacy Additional CSS that are actively
 * fighting this design (documented, not deleted — see Phase 2.5 report):
 *   #site-header,#masthead { background: <gold gradient>; border-bottom:
 *     3px solid rgba(212,160,42,...) }
 *   #site-navigation-wrap .main-navigation ul li a:hover { background:
 *     linear-gradient(gold, red) }
 * Both are overridden here via higher-specificity selectors, same
 * technique as the .onsale / wishlist-icon overrides elsewhere.
 */

#site-header,
#masthead {
	background: var(--mmsc-color-surface);
	border-bottom: 1px solid var(--mmsc-color-border);
}

/* 12px, not 24px, since the 60px D LUNAFAM logo (below) replaced the 37px
   text title: the header keeps its previous ~85px height. */
#site-header #site-header-inner {
	padding-top: var(--mmsc-space-3);
	padding-bottom: var(--mmsc-space-3);
}

/* ROOT CAUSE of both "header too tall" and "utility icons misaligned"
   (found via live computed-style inspection, not assumed): OceanWP
   vertically centers each menu-item link by setting line-height equal to
   the header's configured height (74px, from #site-header's
   data-height="74" — an inline/dynamic rule generated from the
   Customizer "Header Height" setting). That makes every menu <li><a>
   90px tall (74px line-height + this stylesheet's own 8px×2 padding —
   which turned out to be redundant on top of an already-centering
   mechanism, not complementary to it). FiboSearch's search icon, being a
   plugin widget rather than a menu item, was never given that
   line-height at all — normal line-height, ~19px tall — which is why it
   visually sat at a different vertical position than Wishlist/Account/
   Cart. Fix: stop relying on each element's own (inconsistent)
   line-height trick entirely, and instead flex-center the whole menu
   row uniformly — the one mechanism that works the same way for every
   child regardless of its markup origin. */
#menu-main-menu {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
}

#site-navigation-wrap .main-navigation > ul.main-menu > li > a,
.wcmenucart {
	line-height: 1.2;
}

/* #site-logo and #site-logo-inner both carry an explicit `height:74px`
   (the same data-height-driven mechanism as the nav-link line-height fix
   above), which alone accounted for most of the remaining header height
   after that fix — confirmed by measuring each header child individually
   rather than guessing which one was tallest.

   `display: flex` needs !important too, not just `height`: found via
   live inspection (simulating the mobile breakpoint's CSS, since this
   environment's viewport can't reach it directly) that OceanWP's own
   style.min.css sets `#site-logo { display: table }` at the same
   specificity, and wins the tie there — table's default top-alignment
   is exactly why the logo sat ~20px above the header's true center on
   mobile while the cart/hamburger/search icons (already flex-centered
   in their own wrapper) sat correctly in the middle. Desktop already
   resolved to flex either way, so this only changes the mobile case. */
#site-logo,
#site-logo-inner {
	height: auto !important;
	display: flex !important;
	align-items: center;
}

/* Logo / site identity — already text-based (see Phase 2.5 branding
   cleanup); this gives it more deliberate presence as the primary mark. */
/* Found via live inspection: OceanWP's own Customizer-generated inline
   CSS sets `#site-logo a.site-logo-text { line-height: 1.8 }` — 55.8px
   of line box around 31px text, with no visible effect on the text
   itself (still centered inside it) except padding the header taller
   than the target ~76-88px. This selector's specificity already beats
   that rule, so overriding just the line-height (not the font, size,
   weight, or color) tightens the header without touching the logo's
   own design. */
#site-logo .site-title.site-logo-text {
	font-family: var(--mmsc-font-heading);
	font-size: var(--mmsc-text-2xl);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.01em;
	color: var(--mmsc-color-text);
	transition: color var(--mmsc-transition-fast);
}

#site-logo .site-title.site-logo-text:hover {
	color: var(--mmsc-color-primary);
}

/* D LUNAFAM logo — the official full-colour lockup, set as the WordPress
   Custom Logo (OceanWP prints it via the_custom_logo()). Sized by height
   only so the artwork keeps its own proportions; OceanWP's Customizer
   `max-width: 100px` (ocean_logo_max_width) is lifted so the height, not
   that cap, decides the size. The header's vertical padding drops from 24
   to 12px so the 60px lockup leaves the desktop header at its previous
   ~85px height (see the #site-header-inner rule at the top). */
#site-header #site-logo #site-logo-inner a.custom-logo-link {
	display: block;
	line-height: 0;
}

#site-header #site-logo #site-logo-inner a img.custom-logo {
	display: block;
	width: auto;
	max-width: none;
	height: 60px;
}

/* Desktop: the lockup is taller than the 34px nav row, so the two floats
   no longer share a centre line. One flex row centres them; the nav keeps
   its right-hand position via margin-left: auto. */
/* Desktop layout: logo left · Home–Contact centred · Wishlist / Account /
   Search / Cart right. The nav links and the utility icons are one flat
   menu list, so the list fills the row and two auto margins (before Home,
   before Wishlist) push the link group into the middle. From 1100px the
   logo side is given the same width as the icon cluster, so the links sit
   in the true centre of the page, not just between logo and icons. */
@media (min-width: 960px) {
	#site-header #site-header-inner {
		display: flex;
		align-items: center;
	}

	#site-header #site-header-inner > #site-navigation-wrap {
		flex: 1 1 auto;
		min-width: 0;
		margin-left: 0;
	}

	#site-header #site-navigation-wrap #site-navigation,
	#site-header #site-navigation-wrap #menu-main-menu {
		width: 100%;
	}

	#site-header #menu-main-menu > #menu-item-262 {
		margin-left: auto;
	}

	#site-header #menu-main-menu > #menu-item-1290 {
		margin-left: auto;
	}
}

@media (min-width: 1100px) {
	#site-header #site-header-inner > #site-logo {
		flex: 0 0 var(--mmsc-header-side, 216px);
	}
}

/* Laptop widths (960–1199px): logo + nav only fit on one row without the
   legacy Additional CSS `#site-navigation { margin-left: 100px }` and
   OceanWP's 20px logo padding; the ≤1024px `position: absolute` logo rule
   above would otherwise lift the logo out of the row. Labels stay on one
   line (they wrapped to two at 1024px). */
@media (min-width: 960px) and (max-width: 1199px) {
	#site-header #site-header-inner > #site-logo {
		position: static;
		transform: none;
		padding-right: 0;
	}

	#site-header #site-navigation-wrap #site-navigation {
		margin-left: 0;
	}

	#site-navigation-wrap .main-navigation > ul.main-menu > li > a {
		white-space: nowrap;
	}
}

@media (min-width: 960px) and (max-width: 1100px) {
	#site-header #site-logo #site-logo-inner a img.custom-logo {
		height: 52px;
	}
}

/* 960–1023px: link padding 11px → 6px so the row fits beside the logo. */
@media (min-width: 960px) and (max-width: 1023px) {
	#site-navigation-wrap .main-navigation > ul.main-menu > li > a {
		padding-left: 6px;
		padding-right: 6px;
	}
}

/* Primary nav links: restored as an icon+label pair (reversing the prior
   pass's text-only treatment). Ocean Extra's own "Menu Item Icons"
   feature already assigns a semantically-correct, thin Simple Line Icon
   to each item — confirmed via wp_postmeta (oe-icons meta), not guessed:
   Home=icon-home, About Us=icon-info, Shop=icon-basket-loaded,
   Contact=icon-envelope, Blog=icon-note, Manufacturing=icon-settings —
   so this reuses that existing icon system rather than adding a new
   one. `color: inherit` keeps the icon tied to the link's own color
   (including on hover/focus), so it never needs its own separate color
   rule or hover state. */
#site-navigation-wrap .main-navigation ul li a {
	font-family: var(--mmsc-font-body);
	font-size: var(--mmsc-text-sm);
	font-weight: 500;
	letter-spacing: 0.01em;
}

#site-navigation-wrap .main-navigation > ul.main-menu > li > a {
	padding-top: var(--mmsc-space-2);
	padding-bottom: var(--mmsc-space-2);
	display: inline-flex;
	align-items: center;
	gap: 7px;
	transition: color var(--mmsc-transition-fast);
}

#site-navigation-wrap .main-navigation > ul.main-menu > li > a .icon.before {
	font-size: 15px;
	line-height: 1;
	color: inherit;
}

/* !important: found via live inspection that this still loses to
   OceanWP's Customizer-generated inline link-color CSS on the current
   page's own nav item specifically (e.g. `.dropdown-menu >
   .current-menu-item > a:hover { color:#000 }`), which this codebase's
   own specificity math says should lose but empirically doesn't — same
   unresolved-but-real conflict class as the other Additional-CSS/
   Customizer overrides in this file, so matched the same way. */
/* Resting colour: the brand espresso text token, not the Customizer's
   pure black (#000) — the one off-palette colour the 2026-09-30 colour
   audit found in the header. Same !important escalation as below; the
   hover/focus rule after it still wins (higher specificity). Top-level
   items only: dropdown links keep their own colours (current item rose). */
#site-navigation-wrap .main-navigation ul.main-menu > li > a {
	color: var(--mmsc-color-text) !important;
}

#site-navigation-wrap .main-navigation ul li a:hover,
#site-navigation-wrap .main-navigation ul li a:focus {
	background: transparent;
	color: var(--mmsc-color-primary) !important;
}

/* Utility cluster: Wishlist | Account | Search | Cart, in that document
   order (menu-item-1290 = Wishlist, menu-item-318 = My Account,
   menu-item-1132 = search widget, then the cart <li>). A divider before
   Wishlist separates "browse" links from "account/cart" actions without
   reordering anything. */
#menu-item-1290 {
	margin-left: var(--mmsc-space-4);
	padding-left: var(--mmsc-space-4);
	border-left: 1px solid var(--mmsc-color-border);
}

/* Wishlist AND My Account get the same icon-only treatment — opposite of
   the primary links above — so the whole cluster reads as one coherent
   group of utility actions rather than a mix of icon-only and icon+text
   items (My Account previously kept its visible text label while
   Wishlist/Search/Cart didn't, which is what made the cluster look
   inconsistent). Text stays for screen readers via the same
   visually-hidden technique in both cases. */
#menu-item-1290 > a,
#menu-item-318 > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

#menu-item-1290 > a .icon.before,
#menu-item-318 > a .icon.before {
	font-size: 18px;
	line-height: 1;
}

#menu-item-1290 > a .menu-text,
#menu-item-318 > a .menu-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* This item is an auto-injected duplicate wishlist counter with no icon
   and no visible label (menu-item-1290 above is the real, labeled
   Wishlist link) — hidden as redundant, not functionality-removing:
   the link still exists and works at menu-item-1290 and on /wishlist/. */
#menu-item-2147480014 {
	display: none;
}

/* Group the utility cluster (Wishlist, search toggle, Cart) tighter
   together — all three are separate sibling <li> items in the same flat
   menu, so this is spacing only, not a structural change. */
#menu-item-1132,
.woo-menu-icon.wcmenucart-toggle-drop_down {
	margin-left: var(--mmsc-space-2);
}

/* Found via live inspection: the legacy Additional CSS pushes the
   FiboSearch icon down and sideways with
   `.icon-magnifier{position:relative !important;top:27px !important;
   left:4px;right:17px}` inside `@media (min-width:979px)` — this, not
   the flex row itself, is what made the search icon look like it had
   "wrapped" to its own line below the others. A same-specificity
   !important rule loses on source order alone (the legacy block prints
   later in <head>), so !important here needed a higher-specificity
   selector too, not just matching weight — same pattern as the .onsale
   and wishlist-icon overrides. */
#site-header .icon-magnifier {
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
}

.wcmenucart .wcmenucart-count {
	display: inline-flex;
	align-items: center;
	gap: var(--mmsc-space-1);
	color: var(--mmsc-color-text);
}

/* Ocean Extra's own WooCommerce module (assets/css/woo/wooCommerce.css)
   sets `.wcmenucart-details.count { background-color: #13aff0 }` — a
   bright blue shared across several unrelated WC UI elements (message
   boxes, the price-filter slider handle). Only the cart badge instance
   was flagged; scoped here to `.wcmenucart` specifically rather than
   overriding the shared rule everywhere it's used. */
/* OceanWP draws the count as a price tag: a CSS triangle in its legacy
   blue (#13aff0) on the left of the badge. The badge is a pill here. */
.wcmenucart .wcmenucart-details.count::before {
	display: none;
}

.wcmenucart .wcmenucart-details.count {
	background-color: var(--mmsc-color-primary);
	font-family: var(--mmsc-font-body);
	font-size: var(--mmsc-text-xs);
	font-weight: 600;
	border-radius: var(--mmsc-radius-pill);
}

/* Top bar (homepage-only welcome strip) — the legacy Additional CSS sets
   #top-bar-wrap to a bright yellow (#ffcb00 !important) fill, which reads
   as a generic promo-banner color, not a calm brand strip. Overridden
   with the same !important weight (required to compete) at higher
   specificity. */
#top-bar-wrap#top-bar-wrap {
	background-color: var(--mmsc-color-text) !important;
}

#top-bar {
	color: #ffffff;
	font-family: var(--mmsc-font-body);
	font-size: var(--mmsc-text-xs);
	letter-spacing: 0.03em;
}

/* The legacy Additional CSS separately sets #site-header to
   `position:fixed;top:0` (a "fix navbar to top" rule, unrelated to this
   stylesheet, not touched here). That's invisible to normal visitors,
   but when the WordPress admin bar is also showing (logged-in users
   only — which is how this site was being reviewed), the fixed header
   renders at the same top:0 as the admin bar with no offset, so the
   admin bar sits over it. Standard, well-known WP fix: offset by the
   admin bar's own height. Does not touch the admin bar itself. */
body.admin-bar .site-header,
body.admin-bar #site-header {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .site-header,
	body.admin-bar #site-header {
		top: 46px;
	}
}

@media (max-width: 1024px) {
	/* Mobile/tablet header: OceanWP's own icon row (cart + hamburger) —
	   left untouched structurally, just aligned to match the button/icon
	   sizing used elsewhere for consistent tap targets. */
	.oceanwp-mobile-menu-icon .wcmenucart {
		min-width: 44px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* Found via live inspection (forcing the panel open, since this
	   environment's viewport can't be resized to trigger the breakpoint
	   naturally): the desktop padding above (2× var(--mmsc-space-5), 48px
	   total) carries over unchanged to mobile, since no mobile-specific
	   override existed — combined with the hamburger row's own 40px
	   line-height, that reads as noticeably taller whitespace on a small
	   screen than the same absolute px reads on desktop. Tightened here,
	   scoped to this breakpoint only, so the desktop header (verified
	   separately) is untouched. Logo size, icons, and menu items are not
	   changed — this is spacing only. */
	#site-header #site-header-inner {
		padding-top: var(--mmsc-space-3);
		padding-bottom: var(--mmsc-space-3);
	}

	/* Logo vs. utility-icon vertical alignment: found via live inspection
	   (this environment's viewport happened to land at a real 768px
	   width, below OceanWP's own 959px mobile breakpoint, so this was
	   confirmed against real mobile CSS, not simulated) that
	   #site-header-inner is plain block/float layout at this breakpoint
	   (OceanWP's own markup — logo float:left, the cart/hamburger/search
	   wrapper float:right), not flexbox. The icon wrapper is tall
	   (~74-77px, its own hamburger icon's native height) and centers its
	   icons *within itself*; the logo box is only as tall as its text
	   (~37px) and — like any floated block box — simply starts at the
	   row's top padding edge, with no equivalent centering of its own.
	   Two same-height floated siblings would have lined up fine (that's
	   why desktop, where the nav row and logo are similarly short,
	   never showed this); the mobile icon wrapper's extra height is what
	   exposes it. Restructuring #site-header-inner to flexbox to fix
	   this would risk the float-based left/right placement other rules
	   here depend on, so instead the logo alone is centered against its
	   parent (already `position: relative`), independent of its
	   siblings' height — the standard technique for centering one
	   element regardless of mismatched sibling heights, applied here
	   because the block/float layout gives no other way to do it
	   without a broader restructure. Logo typography/size is untouched. */
	#site-logo {
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
	}
}

/* Found via live inspection at a real ~360px width (reported: logo
   overlapping the cart icon): taking the logo out of flow with
   `position: absolute` above (needed to center it independent of its
   taller sibling) also means it no longer respects the icon cluster's
   left edge the way a float would — at narrow widths the old text title at
   the header's normal 31px logo size (209px wide) is wider than the
   ~187px actually free before the cart/hamburger/search cluster starts
   (confirmed via getBoundingClientRect on both elements at 360px). Sized
   down only in this narrow band so the full wordmark clears the icons
   with room to spare, rather than truncating or overlapping it. */
@media (max-width: 400px) {
	#site-logo .site-title.site-logo-text {
		font-size: 22px;
	}
}

/* =================================================================
   Mobile top bar (OceanWP's mobile header, ≤959px) — inc/header.php

     [ ☰ ]            D LUNAFAM              [ ⌕ ] [ ◯ ]   (+ cart 768–959)

   The icon row fills the header as one flex line: the hamburger is pulled
   to the left edge, search / account (and the cart on tablets, where the
   bottom nav isn't shown) sit right. The logo is taken out of that row and
   centred on the header itself (left: 50% + translate), so it is centred
   on the viewport whatever the widths of the two icon groups; its
   max-width keeps it clear of the widest group on both sides.

   Same markup as before: OceanWP's toggle (Sidr menu behaviour unchanged),
   FiboSearch's own search widget (opens its full-screen overlay here),
   plus the account link from inc/header.php. Desktop (≥960px) untouched.
   ================================================================= */

@media (max-width: 959px) {
	#site-header {
		--mmsc-bar-h: 64px;
		--mmsc-bar-pad: max(12px, env(safe-area-inset-left, 0px));
		--mmsc-bar-icon: 44px;
		--mmsc-bar-right: calc(var(--mmsc-bar-icon) * 2 + 4px); /* search + account */
	}

	/* Legacy `body { margin-top: 80px }` offsets the page for the fixed
	   header; matched to this bar's real height (it was 103px tall, so the
	   top 23px of every page sat under it). */
	html body {
		margin-top: 65px; /* 64px bar + 1px hairline */
	}

	/* Legacy `#site-header { border-bottom: 3px solid rgba(gold);
	   box-shadow: 0 4px 12px … }` — a single warm hairline instead. */
	html #site-header {
		border-bottom: 1px solid var(--mmsc-color-border);
		background: var(--mmsc-color-surface); /* legacy cream gradient */
		box-shadow: none;
	}

	#site-header #site-header-inner {
		position: relative;
		width: auto;
		max-width: none;
		height: var(--mmsc-bar-h);
		padding: 0 max(12px, env(safe-area-inset-right, 0px)) 0 var(--mmsc-bar-pad);
	}

	#site-header #site-logo {
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 2;
		float: none;
		max-width: calc(100% - 2 * (12px + var(--mmsc-bar-right) + 8px));
		margin: 0;
		padding: 0; /* OceanWP: padding-right 20px, which shifted the centre */
		transform: translate(-50%, -50%);
	}

	#site-header #site-logo #site-logo-inner {
		justify-content: center;
		max-width: 100%;
	}

	#site-header #site-logo .site-title.site-logo-text {
		display: block;
		overflow: hidden;
		font-size: 26px;
		line-height: 1.2;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	/* 50px lockup inside the 64px bar (7px clear above and below). */
	#site-header #site-logo #site-logo-inner a img.custom-logo {
		height: 50px;
	}

	#site-header .oceanwp-mobile-menu-icon {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 2px;
		float: none;
		width: 100%;
		height: 100%;
		margin: 0;
	}

	/* One 44px tap target per icon, one line weight (1.5px) for all. */
	#site-header .oceanwp-mobile-menu-icon > a,
	#site-header .oceanwp-mobile-menu-icon > .dgwt-wcas-search-wrapp {
		display: inline-flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		width: var(--mmsc-bar-icon);
		min-width: var(--mmsc-bar-icon);
		height: var(--mmsc-bar-icon);
		margin: 0;
		padding: 0;
		line-height: 1;
		color: var(--mmsc-color-text);
	}

	#site-header .oceanwp-mobile-menu-icon > a.mobile-menu {
		order: -1;
		justify-content: flex-start;
		margin-right: auto;
		padding-left: 2px;
	}

	#site-header .oceanwp-mobile-menu-icon > .dgwt-wcas-search-wrapp {
		order: 1;
		position: relative;
		max-width: none;
	}

	#site-header .oceanwp-mobile-menu-icon > a.mmsc-mobile-account {
		order: 2;
	}

	#site-header .oceanwp-mobile-menu-icon > a.wcmenucart {
		order: 3;
	}

	#site-header .oceanwp-mobile-menu-icon .mmsc-icon {
		display: block;
	}

	/* Hamburger: OceanWP's own squeeze toggle, drawn as three 1.5px lines
	   (its open/close animation still works on these). */
	#site-header .oceanwp-mobile-menu-icon a.mobile-menu .hamburger {
		display: block;
		padding: 0;
	}

	#site-header .oceanwp-mobile-menu-icon a.mobile-menu .hamburger-box {
		display: block;
		width: 22px;
		height: 14px;
	}

	#site-header .oceanwp-mobile-menu-icon a.mobile-menu .hamburger-inner,
	#site-header .oceanwp-mobile-menu-icon a.mobile-menu .hamburger-inner::before,
	#site-header .oceanwp-mobile-menu-icon a.mobile-menu .hamburger-inner::after {
		width: 22px;
		height: 1.5px;
		border-radius: 1px;
		background-color: var(--mmsc-color-text);
	}

	#site-header .oceanwp-mobile-menu-icon a.mobile-menu .hamburger-inner {
		top: 50%;
		margin-top: -0.75px;
	}

	#site-header .oceanwp-mobile-menu-icon a.mobile-menu .hamburger-inner::before {
		top: -6px;
	}

	#site-header .oceanwp-mobile-menu-icon a.mobile-menu .hamburger-inner::after {
		bottom: -6px;
	}

	#site-header .oceanwp-mobile-menu-icon a.mobile-menu .hamburger.is-active .hamburger-inner::before {
		top: 0;
	}

	#site-header .oceanwp-mobile-menu-icon a.mobile-menu .hamburger.is-active .hamburger-inner::after {
		bottom: 0;
	}

	/* Search: FiboSearch's icon, redrawn as the same line icon as the
	   account glyph (its icon-font magnifier is heavier and sat low —
	   legacy `.icon-magnifier { top: 3px; right: 17px !important }`). */
	#site-header .oceanwp-mobile-menu-icon .dgwt-wcas-search-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}

	#site-header .oceanwp-mobile-menu-icon .dgwt-wcas-search-icon i {
		display: none;
	}

	#site-header .oceanwp-mobile-menu-icon .dgwt-wcas-search-icon::before {
		content: '';
		width: 22px;
		height: 22px;
		background-color: var(--mmsc-color-text);
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='10.8' cy='10.8' r='6.3'/%3E%3Cpath d='m15.5 15.5 4.6 4.6'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='10.8' cy='10.8' r='6.3'/%3E%3Cpath d='m15.5 15.5 4.6 4.6'/%3E%3C/svg%3E") center / contain no-repeat;
	}

	/* FiboSearch's overlay trigger covers the whole widget. */
	#site-header .oceanwp-mobile-menu-icon .dgwt-wcas-enable-mobile-form {
		position: absolute;
		inset: 0;
		z-index: 2;
	}

	#site-header .oceanwp-mobile-menu-icon .dgwt-wcas-search-icon-arrow,
	#site-header .oceanwp-mobile-menu-icon .dgwt-wcas-icon-preloader {
		display: none;
	}

	#site-header .oceanwp-mobile-menu-icon > a:focus-visible,
	#site-header .oceanwp-mobile-menu-icon .dgwt-wcas-enable-mobile-form:focus-visible {
		outline: 2px solid var(--mmsc-color-accent);
		outline-offset: -2px;
		border-radius: var(--mmsc-radius-pill);
	}

	#site-header .oceanwp-mobile-menu-icon > a.mmsc-mobile-account:hover,
	#site-header .oceanwp-mobile-menu-icon > a.wcmenucart:hover {
		color: var(--mmsc-color-primary);
	}
}

/* Phones: the Cart lives in the bottom nav (inc/bottom-nav.php, <768px),
   so the top bar is just menu · logo · search · account. */
@media (max-width: 767px) {
	#site-header .oceanwp-mobile-menu-icon > a.wcmenucart {
		display: none;
	}
}

/* Tablets (768–959px): the cart stays in the bar; the logo's clearance
   grows with the wider right group. */
@media (min-width: 768px) and (max-width: 959px) {
	#site-header {
		--mmsc-bar-right: calc(var(--mmsc-bar-icon) * 3 + 6px);
	}
}

@media (max-width: 400px) {
	#site-header #site-logo .site-title.site-logo-text {
		font-size: 21px;
	}
}

/* Floating widgets: the legacy Additional CSS sets a mobile-only rule
   `.chaty-channel{bottom:60px !important;right:-17px !important}` — that
   negative right offset pushes the chat button partly off-screen on
   phones. Not replacing Chaty per the brief; just correcting this one
   confirmed broken value so it sits fully on-screen instead of bleeding
   past the edge, and giving it a sensible z-index below modals/popups
   rather than an arbitrarily high one. OceanWP's own back-to-top button
   (.scroll-top-right) is generated inline from Customizer settings with
   no fixed default offset found in the theme's static CSS to safely
   coordinate against — not adjusted here to avoid guessing at a value
   that could make placement worse without being able to see it. */
@media (max-width: 768px) {
	.chaty-channel {
		right: var(--mmsc-space-3) !important;
	}
}

/* The floating "Contact us" bubble next to Chaty is NOT actually part of
   Chaty — found via live inspection (searching inline <style> content,
   not guessed) that it's a separate legacy Additional-CSS rule,
   `.sticky-quote-btn a.elementor-button { background-color:#a886cd }`
   (mislabeled "/* red color */" in its own source — it's actually
   purple), an unrelated custom floating CTA. Not a widget to redesign,
   just an off-palette color to neutralize, same as the other Additional
   CSS overrides in this file. `body` ancestor added for specificity
   (0,2,1 → 0,2,2) since this rule already carries !important and would
   otherwise still win on source order alone (Additional CSS prints
   last). */
body .sticky-quote-btn a.elementor-button {
	background-color: var(--mmsc-color-dark) !important;
}

body .sticky-quote-btn a.elementor-button:hover {
	background-color: var(--mmsc-color-dark-hover) !important;
}

/* Chaty's own trigger button: the visible purple circle is NOT a CSS
   background at all — found via live inspection (a plain background-color
   sweep found nothing) that it's an inline SVG `<circle fill="#A886CD">`
   with no class, Chaty's own plugin-configured widget color baked
   directly into the markup as a presentation attribute. A `fill`
   declared in CSS always wins over a presentation attribute regardless
   of specificity, so this is enough to override even without !important
   (kept for consistency with the rest of this file). Per-channel icons
   (WhatsApp green, etc.) are left untouched, since those are recognizable
   brand colors for their channel, not an arbitrary widget color. */
/* 2026-10-01: the owner found the espresso button too dark. Honey gold
   from the V2 palette (--mmsc-v2-honey #b7894f, deepened to #b07f45 so the
   white icon keeps ~3.5:1 contrast) — the same gold as the favicon. Chaty's
   own Widget colour setting holds the same value, since its script also
   paints the close "X" and the attention pulse from that setting. */
button.open-chaty svg circle {
	fill: #b07f45 !important;
}

/* Mobile off-canvas menu (OceanWP's "Sidr" panel, #sidr): its own
   Customizer-generated inline CSS gave the "X CLOSE MENU" bar a bright
   yellow fill (rgb(255,203,0)) with black text — found via live
   inspection, not guessed (confirmed against this environment's actual
   mobile viewport, ~768px and narrower, once it became reachable). A
   first pass replaced the fill with dark espresso, but the brief for
   this follow-up asked for no colored banner at all — just the plain
   panel background (confirmed via live inspection to be plain white,
   `#sidr`'s own background) with dark espresso text/icon, so this
   reads as part of the menu rather than a separate block. `transparent`
   is used instead of hard-coding white, so it always matches whatever
   the panel's own background is. A subtle bottom border stands in for
   the removed fill as the only remaining separation from the menu
   items below. */
a.sidr-class-toggle-sidr-close,
button.sidr-class-toggle-sidr-close {
	background-color: transparent !important;
	border-bottom: 1px solid var(--mmsc-color-border);
}

body .sidr a.sidr-class-toggle-sidr-close {
	color: var(--mmsc-color-text) !important;
}

/* Sidr copies the desktop menu's search widget item, and FiboSearch's
   OceanWP integration adds its own bare search icon at the end of the
   menu; the mobile top bar has the search, so both are dropped. */
#sidr li.sidr-class-menu-item-1132,
#sidr .dgwt-wcas-search-wrapp {
	display: none;
}

/* Menu text in the site's body face (the Customizer set Poppins 600). */
#sidr .sidr-class-dropdown-menu li a,
#sidr .sidr-class-dropdown-menu li span.sidr-class-menu-text {
	font-family: var(--mmsc-font-body);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--mmsc-color-text);
}

#sidr .sidr-class-dropdown-menu ul.sidr-class-sub-menu li a {
	font-weight: 400;
	color: var(--mmsc-color-text-muted);
}

/* Shop's sub-menu toggle: OceanWP's cyan "+" / "−" glyph, now a quiet
   chevron that turns when the categories are open. Shop itself links to
   the Shop page; the chevron's own 60px area opens the list. */
#sidr .sidr-class-dropdown-toggle,
#sidr .sidr-class-menu-item-has-children.active > a,
#sidr .sidr-class-menu-item-has-children.active > a > .sidr-class-dropdown-toggle {
	color: var(--mmsc-color-text);
}

#sidr .sidr-class-dropdown-toggle::before,
#sidr .sidr-class-dropdown-menu li.active > a > .sidr-class-dropdown-toggle::before {
	content: '';
	width: 8px;
	height: 8px;
	margin: -6px 0 0 -4px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--mmsc-transition-fast);
}

#sidr .sidr-class-dropdown-menu li.active > a > .sidr-class-dropdown-toggle::before {
	margin-top: -2px;
	transform: rotate(-135deg);
}

#sidr a.sidr-class-toggle-sidr-close {
	font-family: var(--mmsc-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
}

/* Back-to-top (OceanWP #scroll-top): a small brand circle centred above
   the chat button. OceanWP draws a grey square in the same corner as
   Chaty, one layer below it, so it sat half-hidden behind the bubble.
   --mmsc-float-offset lifts it with everything else above the bottom nav
   and the Cart / Wholesale docks. */
body #scroll-top {
	right: 36px;
	bottom: calc(var(--mmsc-float-offset, 0px) + 96px);
	width: 40px;
	height: 40px;
	line-height: 38px;
	border: 1px solid var(--mmsc-color-border);
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.94);
	box-shadow: var(--mmsc-shadow-md);
	box-sizing: border-box;
	color: var(--mmsc-color-text);
	font-size: 16px;
	z-index: 999;
	transition: background-color var(--mmsc-transition-fast), color var(--mmsc-transition-fast), opacity var(--mmsc-transition-base);
}

body #scroll-top:hover,
body #scroll-top:focus-visible {
	background-color: var(--mmsc-color-dark);
	border-color: var(--mmsc-color-dark);
	color: var(--mmsc-color-surface);
}

body #scroll-top:focus-visible {
	outline: 2px solid var(--mmsc-color-accent);
	outline-offset: 2px;
}

@media (max-width: 767px) {
	body #scroll-top {
		right: 17px;
		bottom: calc(var(--mmsc-float-offset, 0px) + 80px);
		width: 36px;
		height: 36px;
		line-height: 34px;
		font-size: 15px;
	}
}

/* D LUNAFAM brand block under the close bar (inc/brand.php adds it as a
   Sidr source; Sidr prefixes the copied classes with `sidr-class-`). The
   full-colour lockup, the same one as the header. */
#sidr a.sidr-class-mmsc-sidr-brand {
	display: block;
	padding: 20px 20px 18px;
	border-bottom: 1px solid var(--mmsc-color-border);
	line-height: 0;
}

#sidr a.sidr-class-mmsc-sidr-brand img {
	display: block;
	width: auto;
	max-width: 100%;
	height: 64px;
}

/* Woomotiv's "recently purchased" popup is position:fixed at the
   viewport's bottom-left with z-index 999999 — confirmed via inspection.
   On the single-product page that's the same corner as the gallery
   column, so it can sit over the product photo. It can't be made fully
   non-overlapping via CSS alone (a viewport-fixed corner widget will
   overlap whatever content is in that corner at a given scroll
   position, regardless of page layout) without risking a new conflict
   by moving it — not attempted. This caps its footprint so the overlap
   area is smaller and it reads clearly as a small floating notice
   rather than a large obstruction; it already has its own close (×)
   button. Not replacing the plugin, per the brief. */
.woomotiv-popup {
	max-width: 280px;
}

/* ---------------------------------------------------------------
   Shop dropdown (desktop)
   Items come from inc/navigation.php (Shop All, New Arrivals, the retail
   categories). OceanWP's superfish script opens it (`sfHover`, its own
   fade and hide delay); this is its look. Legacy met here: OceanWP's
   bright-blue 3px top border, the Additional CSS gold→red link hover.
------------------------------------------------------------------ */

#site-navigation-wrap .dropdown-menu ul.sub-menu {
	min-width: 232px;
	padding: 8px;
	border: 1px solid var(--mmsc-color-border);
	border-top: 1px solid var(--mmsc-color-border) !important;
	border-radius: var(--mmsc-radius-lg);
	background: var(--mmsc-color-surface);
	box-shadow: 0 18px 48px rgba(43, 37, 33, 0.14);
}

/* Drops from just under the header line; the transparent strip above it
   keeps the pointer "inside" the Shop item on its way down. */
@media (min-width: 960px) {
	#site-navigation-wrap .dropdown-menu > li > ul.sub-menu {
		top: calc(100% + 27px);
	}

	#site-navigation-wrap .dropdown-menu > li > ul.sub-menu::before {
		content: "";
		position: absolute;
		top: -30px;
		right: 0;
		left: 0;
		height: 30px;
	}
}

#site-navigation-wrap .dropdown-menu ul.sub-menu li.menu-item {
	border: 0;
}

#site-navigation-wrap .main-navigation .dropdown-menu ul.sub-menu li a.menu-link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border: 0;
	border-radius: var(--mmsc-radius-md);
	background: transparent;
	font-family: var(--mmsc-font-body);
	font-size: var(--mmsc-text-sm);
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.3;
	text-transform: none;
	color: var(--mmsc-color-text);
	transition: background-color var(--mmsc-transition-fast), color var(--mmsc-transition-fast);
}

#site-navigation-wrap .main-navigation .dropdown-menu ul.sub-menu li a.menu-link:hover,
#site-navigation-wrap .main-navigation .dropdown-menu ul.sub-menu li a.menu-link:focus-visible {
	background: var(--mmsc-color-bg);
	color: var(--mmsc-color-text) !important;
}

#site-navigation-wrap .main-navigation .dropdown-menu ul.sub-menu li.current-menu-item > a.menu-link {
	color: var(--mmsc-color-primary);
	font-weight: 600;
}

/* "New Arrivals": the same rose dot as its chip on the Shop page. */
#site-navigation-wrap .main-navigation .dropdown-menu ul.sub-menu li.mmsc-nav-new > a.menu-link::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--mmsc-color-sale);
}

/* Shop All / New Arrivals, then the categories. */
#site-navigation-wrap .dropdown-menu ul.sub-menu li.mmsc-nav-new {
	margin-bottom: 6px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--mmsc-color-border);
}

/* ---------------------------------------------------------------
   Cart preview (desktop header)
   OceanWP's mini-cart dropdown, opened by assets/js/header-cart.js
   (hover intent + keyboard) instead of OceanWP's raw `li:hover`, with
   content from woocommerce/cart/mini-cart.php. A transparent bridge
   above the panel keeps the pointer "inside" on its way down from the
   icon. Touch / no-hover devices never get it: the icon is a link to
   the Cart page.
   Legacy rules met here: `div { color: black !important }`, `strong`
   black, Customizer `.amount { font-size: 20px }`, `.wc-forward
   { color: #000 !important }` on the buttons, OceanWP's blue top border.
------------------------------------------------------------------ */

#site-header .woo-menu-icon {
	position: relative;
}

#site-header .woo-menu-icon .current-shop-items-dropdown {
	top: 100%;
	right: -12px;
	width: 380px;
	margin-top: 10px;
	padding: 0;
	border: 1px solid var(--mmsc-color-border);
	border-radius: var(--mmsc-radius-lg);
	background: var(--mmsc-color-surface);
	box-shadow: 0 18px 48px rgba(43, 37, 33, 0.16);
	visibility: hidden;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
	pointer-events: none;
	color: var(--mmsc-color-text);
	font-family: var(--mmsc-font-body);
	text-align: left;
}

/* Hover bridge across the 10px gap. */
#site-header .woo-menu-icon .current-shop-items-dropdown::before {
	content: "";
	position: absolute;
	top: -14px;
	right: 0;
	left: 0;
	height: 14px;
}

#site-header .woo-menu-icon.mmsc-mc-open .current-shop-items-dropdown {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition: opacity 180ms ease, transform 180ms ease, visibility 0s;
	pointer-events: auto;
}

@media (hover: none), (pointer: coarse) {
	#site-header .woo-menu-icon .current-shop-items-dropdown {
		display: none;
	}
}

#site-header .current-shop-items-dropdown .current-shop-items-inner,
#site-header .current-shop-items-dropdown .widget_shopping_cart,
#site-header .current-shop-items-dropdown .widget_shopping_cart_content {
	margin: 0;
	padding: 0;
	color: var(--mmsc-color-text) !important;
}

#site-header .mmsc-mini-cart__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding: 18px 20px 12px;
	border-bottom: 1px solid var(--mmsc-color-border);
	color: var(--mmsc-color-text) !important;
}

#site-header .mmsc-mini-cart__title {
	font-family: var(--mmsc-font-heading);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--mmsc-color-text);
}

#site-header .mmsc-mini-cart__count {
	font-size: 13px;
	color: var(--mmsc-color-text-muted);
}

#site-header .current-shop-items-dropdown ul.mmsc-mini-cart__list {
	max-height: min(46vh, 340px);
	margin: 0;
	padding: 4px 20px;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
}

#site-header .current-shop-items-dropdown ul.mmsc-mini-cart__list li.mmsc-mini-cart__item {
	display: grid;
	grid-template-columns: 60px minmax(0, 1fr) auto;
	gap: 14px;
	align-items: start;
	margin: 0;
	padding: 14px 0;
	border: 0;
	border-top: 1px solid var(--mmsc-color-border);
	line-height: 1.35;
}

#site-header .current-shop-items-dropdown ul.mmsc-mini-cart__list li.mmsc-mini-cart__item:first-child {
	border-top: 0;
}

#site-header .mmsc-mini-cart__img {
	display: block;
	width: 60px;
	height: 80px;
	overflow: hidden;
	border-radius: var(--mmsc-radius-md);
	background: var(--mmsc-color-bg);
}

#site-header .current-shop-items-dropdown .mmsc-mini-cart__img img {
	position: static;
	float: none;
	display: block;
	width: 60px;
	max-width: none;
	height: 80px;
	margin: 0;
	padding: 0;
	border: 0;
	object-fit: cover;
	object-position: center top;
}

#site-header .mmsc-mini-cart__info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	color: var(--mmsc-color-text) !important;
}

#site-header .current-shop-items-dropdown a.mmsc-mini-cart__name {
	display: -webkit-box;
	overflow: hidden;
	padding: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--mmsc-color-text);
	text-decoration: none;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

#site-header .current-shop-items-dropdown a.mmsc-mini-cart__name:hover,
#site-header .current-shop-items-dropdown a.mmsc-mini-cart__name:focus-visible {
	color: var(--mmsc-color-primary);
}

#site-header .mmsc-mini-cart__meta,
#site-header .mmsc-mini-cart__qty {
	font-size: 12px;
	line-height: 1.4;
	color: var(--mmsc-color-text-muted);
}

#site-header .mmsc-mini-cart__side {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	color: var(--mmsc-color-text) !important;
}

#site-header .mmsc-mini-cart__price,
#site-header .current-shop-items-dropdown .mmsc-mini-cart__price .amount,
#site-header .current-shop-items-dropdown .mmsc-mini-cart__price bdi {
	font-size: 14px !important; /* Customizer `.amount { font-size: 20px }` */
	font-weight: 600;
	color: var(--mmsc-color-text) !important;
	white-space: nowrap;
}

#site-header .current-shop-items-dropdown a.mmsc-mini-cart__remove {
	position: static;
	display: inline;
	width: auto;
	height: auto;
	padding: 0;
	border: 0;
	background: none;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--mmsc-color-text-muted) !important; /* legacy `.remove` red */
	text-decoration: underline;
	text-decoration-color: var(--mmsc-color-border);
	text-underline-offset: 3px;
}

#site-header .current-shop-items-dropdown a.mmsc-mini-cart__remove:hover,
#site-header .current-shop-items-dropdown a.mmsc-mini-cart__remove:focus-visible {
	background: none;
	color: var(--mmsc-color-text) !important;
}

/* WooCommerce dims a line while its AJAX removal runs. */
#site-header .current-shop-items-dropdown .blockUI.blockOverlay {
	background: rgba(255, 255, 255, 0.7) !important;
}

#site-header .mmsc-mini-cart__foot {
	padding: 14px 20px 20px;
	border-top: 1px solid var(--mmsc-color-border);
	background: var(--mmsc-color-bg);
	border-radius: 0 0 var(--mmsc-radius-lg) var(--mmsc-radius-lg);
	color: var(--mmsc-color-text) !important;
}

#site-header .current-shop-items-dropdown .woocommerce-mini-cart__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin: 0 0 14px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 14px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--mmsc-color-text);
}

#site-header .current-shop-items-dropdown .woocommerce-mini-cart__total strong {
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--mmsc-color-text) !important; /* legacy `strong { color: black !important }` */
}

#site-header .current-shop-items-dropdown .woocommerce-mini-cart__total > .amount {
	margin-left: auto; /* OceanWP's own total-row alignment wins over justify-content */
}

#site-header .current-shop-items-dropdown .woocommerce-mini-cart__total .amount,
#site-header .current-shop-items-dropdown .woocommerce-mini-cart__total bdi {
	font-size: 17px !important;
	font-weight: 600;
	color: var(--mmsc-color-text) !important;
}

#site-header .current-shop-items-dropdown .woocommerce-mini-cart__buttons {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: 10px;
	margin: 0;
	padding: 0;
}

#site-header .current-shop-items-dropdown .woocommerce-mini-cart__buttons a.button {
	display: flex;
	align-items: center;
	justify-content: center;
	float: none;
	width: auto;
	min-height: 46px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--mmsc-color-dark);
	border-radius: var(--mmsc-radius-sm);
	font-family: var(--mmsc-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color var(--mmsc-transition-fast), color var(--mmsc-transition-fast), border-color var(--mmsc-transition-fast);
}

#site-header .current-shop-items-dropdown .woocommerce-mini-cart__buttons a.mmsc-drawer-view-cart {
	background: var(--mmsc-color-surface);
	color: var(--mmsc-color-dark) !important; /* legacy `.wc-forward { color: #000 !important }` */
}

#site-header .current-shop-items-dropdown .woocommerce-mini-cart__buttons a.mmsc-drawer-view-cart:hover,
#site-header .current-shop-items-dropdown .woocommerce-mini-cart__buttons a.mmsc-drawer-view-cart:focus-visible {
	background: var(--mmsc-color-dark);
	color: var(--mmsc-color-surface) !important;
}

#site-header .current-shop-items-dropdown .woocommerce-mini-cart__buttons a.mmsc-drawer-checkout {
	background: var(--mmsc-color-dark);
	color: var(--mmsc-color-surface) !important;
}

#site-header .current-shop-items-dropdown .woocommerce-mini-cart__buttons a.mmsc-drawer-checkout:hover,
#site-header .current-shop-items-dropdown .woocommerce-mini-cart__buttons a.mmsc-drawer-checkout:focus-visible {
	border-color: var(--mmsc-color-dark-hover);
	background: var(--mmsc-color-dark-hover);
	color: var(--mmsc-color-surface) !important;
}

#site-header .current-shop-items-dropdown a:focus-visible {
	outline: 2px solid var(--mmsc-color-accent);
	outline-offset: 2px;
}

#site-header .mmsc-mini-cart__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 32px 24px 28px;
	text-align: center;
	color: var(--mmsc-color-text-muted) !important;
}

#site-header .current-shop-items-dropdown p.woocommerce-mini-cart__empty-message {
	margin: 0;
	padding: 0;
	font-size: 15px;
	color: var(--mmsc-color-text);
}

#site-header .current-shop-items-dropdown a.mmsc-mini-cart__shop {
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	margin-top: 4px;
	padding: 0 22px;
	border-radius: var(--mmsc-radius-sm);
	background: var(--mmsc-color-dark);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--mmsc-color-surface);
	transition: background-color var(--mmsc-transition-fast);
}

#site-header .current-shop-items-dropdown a.mmsc-mini-cart__shop:hover,
#site-header .current-shop-items-dropdown a.mmsc-mini-cart__shop:focus-visible {
	background: var(--mmsc-color-dark-hover);
	color: var(--mmsc-color-surface);
}

@media (prefers-reduced-motion: reduce) {
	#site-logo .site-title.site-logo-text,
	#site-navigation-wrap .main-navigation > ul.main-menu > li > a,
	#site-header .woo-menu-icon .current-shop-items-dropdown,
	#site-header .woo-menu-icon.mmsc-mc-open .current-shop-items-dropdown {
		transition: none;
	}
}

/* The phone header's icon cluster (hamburger, search, account, cart)
   inherited Poppins from an OceanWP Customizer typography setting. It
   shows no Poppins text, but the declaration alone made every phone page
   download a legacy Elementor font (from the old production host, blocked
   by CORS here). Pinned to the body font; nothing visible changes. */
#site-header .oceanwp-mobile-menu-icon,
#site-header .oceanwp-mobile-menu-icon a {
	font-family: var(--mmsc-font-body);
}