/* ==========================================================================
   Header v2 + the Stonewood Pro header (Jay, HV2 2026-10-26; staging). inc/features/header-v2.php, header-v2.js.
   Loads after header-footer.css (sections 2, 2b, 2c, 10, 12 still apply: icon sizes, the brand tabs, the slim
   heights). Everything is scoped to body.swp-hf. The Pro header's layout is the shared sub-brand header
   (subbrand-header.css, body.swp-sbh--pro); here only its badge and its drawer.
   Contents: 1. Top strip (+ items by ZIP)  2. Main row: logo centred, icons, the SVG truck  3. Tooltips
             4. The pin + popover  5. The PRO badge  6. Phones
   ========================================================================== */

/* 1. Top strip: very light grey; "We Ship Nationwide · Visit a Showroom | For the Trade ▾" ---------------------- */
.swp-hf #top-bar.header-top {
	background-color: #efefec; /* Jay 26 Oct v3: a clear light grey (was #f7f8f6; zip-bar.css: #f2f5f1) */
	border-bottom-color: #e3e6e0;
}

/* Items by the saved ZIP (item classes from the menu; the <html> class from the head script, before the first paint) */
html.swp-zip-local .swp-show-national,
html.swp-zip-national .swp-show-local {
	display: none !important;
}

/* Pro menu items for a local ZIP only (class swp-pro-local: Meet the Team, Events; Jay 26 Oct 13:14): nothing without
   a ZIP or with a national one; the bar and the drawer alike */
html:not(.swp-zip-local) .swp-pro-local {
	display: none !important;
}

/* The strip's right side shows ONE of three states, for everyone, logged in or not (Jay 26 Oct 16:57; replaces #91's
   logged-in exception): no ZIP saved -> the tagline "Global Reach. Local Service." (menu "Top strip - links", class
   swp-strip-tagline); a local ZIP (017-029) -> "Visit a Showroom" only; out of area -> "We Ship Nationwide" only
   (the rules above). Never two at once. The ZIP classes on <html> come from the head script before the first paint
   and follow the pin live (header-v2.js zipClass). No flash, no shift. */
html.swp-zip-local .swp-strip-tagline,
html.swp-zip-national .swp-strip-tagline {
	display: none !important;
}

html:not(.swp-zip-local):not(.swp-zip-national) #top-bar :is(.swp-show-local, .swp-show-national) {
	display: none !important;
}

/* The strip's ZIP button (Jay 26 Oct 17:00): a divider, then the pin + bold "Enter your ZIP", or the pin + bold ZIP +
   " · " + "Change" (1px #999 underline). It opens the header pin's popover (one component). Desktop only (the strip
   doesn't show on phones). */
@media (min-width: 850px) {
	.swp-hf #top-bar .swp-strip__zip {
		height: 36px;
		padding-left: 22px;
		border-left: 1px solid #dcdfd9;
	}
	.swp-hf #top-bar .swp-strip__zipbtn {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		height: 36px;
		min-height: 0;
		margin: 0;
		padding: 0 4px;
		border: 0;
		background: transparent;
		box-shadow: none;
		color: #3d4a3b;
		font-family: Lato, "Lato Fallback", sans-serif;
		font-size: 13px;
		font-weight: 400;
		letter-spacing: 0;
		line-height: 1;
		text-transform: none;
		white-space: nowrap;
		cursor: pointer;
	}
	.swp-hf #top-bar .swp-strip__zipbtn strong {
		color: #2f3f2e;
		font-weight: 700;
	}
	.swp-hf #top-bar .swp-strip__pin {
		flex: none;
		color: #557353;
	}
	.swp-hf #top-bar .swp-strip__change {
		text-decoration: underline;
		text-decoration-color: #999;
		text-decoration-thickness: 1px;
		text-underline-offset: 3px;
	}
	.swp-hf #top-bar .swp-strip__zipbtn:hover .swp-strip__change,
	.swp-hf #top-bar .swp-strip__zipbtn:focus-visible .swp-strip__change {
		text-decoration-color: #666;
	}
	.swp-hf #top-bar .swp-strip__zipbtn:focus-visible {
		outline: 2px solid #3f573e;
		outline-offset: -2px;
	}
	.swp-hf #top-bar .swp-strip__zip [hidden] {
		display: none;
	}
}

@media (min-width: 850px) {
	.swp-hf #top-bar .swp-strip--v2 {
		height: 36px;
		margin: 0;
		padding: 0;
		border: 0;
		gap: 22px;
		font-size: 13px;
	}
	.swp-hf #top-bar .swp-strip--v2 .swp-strip__item {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		margin: 0;
		color: #3d4a3b;
		font-size: 13px;
		font-weight: 400;
		line-height: 1;
		white-space: nowrap;
	}
	.swp-hf #top-bar .swp-strip--v2 .swp-strip__link {
		color: #3d4a3b;
		font-weight: 400;
	}
	.swp-hf #top-bar .swp-strip--v2 .swp-strip__truck {
		color: #557353;
	}
	/* "Our Locations or Schedule a Visit" (card #637, Jay 2 Nov; local ZIPs, as "Visit a Showroom" before): the small
	   "or" is its own text item (menu "Top strip - links", class swp-strip-or), pulled close to its two links */
	.swp-hf #top-bar .swp-strip--v2 .swp-strip-or {
		margin: 0 -16px; /* the strip's 22px gap → 6px on each side */
		color: #6b7568;
		font-size: 12px;
	}
	/* the dropdown item: a thin divider before it, the label bold */
	.swp-hf #top-bar .swp-strip__item--menu {
		position: relative;
		height: 36px;
		padding-left: 22px;
		border-left: 1px solid #dcdfd9;
	}
	.swp-hf #top-bar .swp-strip__toggle {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		height: 36px;
		margin: 0;
		padding: 0 4px;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		color: #2f3f2e;
		font-family: Lato, "Lato Fallback", sans-serif;
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 0;
		line-height: 1;
		text-transform: none;
		cursor: pointer;
	}
	.swp-hf #top-bar .swp-strip__toggle svg {
		transition: transform .15s;
	}
	.swp-hf #top-bar .swp-strip__item--menu.is-open .swp-strip__toggle svg {
		transform: rotate(180deg);
	}
	/* the panel: the UberMenu's (Jay 26 Oct 14:05, audit A1): #f9f9f9, 1px #e0e0e0, 0 0 20px .15, no padding */
	.swp-hf #top-bar .swp-strip__menu {
		position: absolute;
		top: 40px;
		right: 0;
		z-index: 60;
		display: flex;
		flex-direction: column;
		width: 300px;
		padding: 0;
		border: 1px solid #e0e0e0;
		background: #f9f9f9;
		box-shadow: 0 0 20px rgba(0, 0, 0, .15);
		text-align: left;
	}
	.swp-hf #top-bar .swp-strip__menu[hidden] {
		display: none;
	}
	/* the items: UberMenu's heading row (15px/700, padding 15px 20px) + description (12px; #666, UberMenu's #999 fails
	   contrast on #f9f9f9); no lines between rows, hover = the title's colour only */
	.swp-hf #top-bar .swp-strip__sub {
		display: flex;
		flex-direction: column;
		gap: 3px;
		padding: 15px 20px;
		color: #2f3f2e;
		line-height: 1.3;
		text-decoration: none;
		white-space: normal;
	}
	.swp-hf #top-bar .swp-strip__sub + .swp-strip__sub {
		padding-top: 0;
	}
	.swp-hf #top-bar .swp-strip__sub strong {
		font-size: 15px;
		font-weight: 700;
	}
	.swp-hf #top-bar .swp-strip__sub span {
		color: #666;
		font-size: 12px;
	}
	.swp-hf #top-bar .swp-strip__sub:focus-visible,
	.swp-hf #top-bar .swp-strip__toggle:focus-visible {
		outline: 2px solid #3f573e;
		outline-offset: -2px;
	}
}

@media (hover: hover) {
	.swp-hf #top-bar .swp-strip--v2 .swp-strip__link:hover,
	.swp-hf #top-bar .swp-strip__toggle:hover {
		color: #557353;
		text-decoration: underline;
		text-decoration-color: #666; /* no green underline (Jay 26 Oct 14:40) */
		text-underline-offset: 3px;
	}
	.swp-hf #top-bar .swp-strip__sub:hover strong {
		color: #222; /* UberMenu's hover: the colour only, no background */
	}
}

/* The account dropdown (Flatsome's markup, a logged-in customer): the UberMenu's panel and items (Jay 26 Oct 14:05,
   audit A2): #f9f9f9, 1px #e0e0e0, 0 0 20px .15; items 14px/400 #555, 5px 20px, no lines */
.swp-hf #masthead .account-item > .nav-dropdown,
.swp-hf #masthead .account-item .nav-dropdown.nav-dropdown-default {
	min-width: 220px;
	padding: 10px 0;
	border: 1px solid #e0e0e0;
	background: #f9f9f9;
	box-shadow: 0 0 20px rgba(0, 0, 0, .15);
}

.swp-hf #masthead .account-item .nav-dropdown > li {
	margin: 0;
	padding: 0;
	border: 0;
}

.swp-hf #masthead .account-item .nav-dropdown > li > a {
	display: block;
	padding: 5px 20px;
	border: 0;
	color: #555;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.3;
	text-transform: none;
}

.swp-hf #masthead .account-item .nav-dropdown > li > a:hover,
.swp-hf #masthead .account-item .nav-dropdown > li > a:focus-visible {
	color: #222;
}

/* 2-0. The header follows the page's width (Jay 30 Oct 17:31 / 17:32, card #400): the top strip and the logo row take
   the width of the page below, so their outer edges line up with its content at every width. A template sets two
   variables on its body (main's category template and Wood Flooring: 1360px; Global Select: 1330px; Pro /
   Architectural: 1200px): --swp-page-width = the content width without the side gutters, and --swp-page-gutter = the
   side padding its content uses on narrower windows (default 15px, as Flatsome's containers). A page that sets nothing
   keeps Flatsome's own width (--swp-site-content, printed by header-v2.php from the Customizer's site width). The
   search box starts on the content's left edge and the cart / truck ends on its right edge (the old site-wide
   `.header-nav { padding-right: 20px }` in base.css is undone for this row only); the logo stays centred; the trade
   row and the menu bar stay centred as before. Phones: unchanged. */
@media (min-width: 850px) {
	.swp-hf #top-bar > .container,
	.swp-hf #masthead > .header-inner {
		max-width: calc(var(--swp-page-width, var(--swp-site-content, 1200px)) + 2 * var(--swp-page-gutter, 15px));
		padding-left: var(--swp-page-gutter, 15px);
		padding-right: var(--swp-page-gutter, 15px);
	}
	.swp-hf #masthead > .header-inner .header-nav-main.nav-right {
		padding-right: 0;
	}
}
/* 2-0b. The home page at 1360 (Jay 31 Oct 15:18, card #358; home page only, the site-wide width is a later card): the
   same width as the category pages and Wood Flooring, so the header doesn't move from home to a category. Content
   1360px, 20px side space from 850px (at 1440 it runs 40..1400); the header follows through the two variables (2-0).
   Rows (Flatsome's, built in UX Builder at 1200): the hero (collapse row, custom width 1200 in its settings), the
   Featured cards, the Trending slider (custom 1450), the shop-features block and the about row go to 1360. The four
   photo + text rows (Everblue, saunas, fence, beams) stay 1200 centred: their photos are 623-652px files that would be
   stretched at 1360; they only get the same 20px side space under 1240px. Phones: unchanged. */
@media (min-width: 850px) {
	body.home {
		--swp-page-width: 1360px;
		--swp-page-gutter: 20px;
	}
	/* normal rows: 15px column padding + 5px = 20px */
	body.home #content :is(#content > .row, .section-content > .row):not(.row-small, .row-collapse, .row-full-width, [style*="max-width"]) {
		max-width: 1400px;
		padding-left: 5px;
		padding-right: 5px;
	}
	/* the Trending slider (its columns already carry 20px) and the hero (no column padding); both have an inline width */
	body.home #content :is(#content > .row, .section-content > .row)[style*="max-width"]:not(.row-collapse) {
		max-width: 1400px !important;
	}
	body.home #content :is(#content > .row, .section-content > .row).row-collapse[style*="max-width"] {
		max-width: 1400px !important;
		padding-left: 20px;
		padding-right: 20px;
	}
	/* small rows: 9.8px column padding + 10.2px = 20px; the about row to 1360, the photo + text rows stay 1200 */
	body.home #content .section-content > .row.row-small {
		max-width: 1240px;
		padding-left: 10.2px;
		padding-right: 10.2px;
	}
	body.home #content .section-content > .row.row-small.row-dashed {
		max-width: 1400px;
	}
}
/* 2. Main row: search left, the logo centred, icons right (Flatsome logo_position = center) --------------------- */
@media (min-width: 850px) {
	.swp-hf #masthead .header-inner.logo-center > .flex-left,
	.swp-hf #masthead .header-inner.logo-center > .flex-right {
		flex: 1 1 0;
	}
	.swp-hf #masthead .header-inner.logo-center > #logo {
		flex: none;
		margin: 0 16px;
	}
	.swp-hf #masthead .header-inner.logo-center .header-nav-main.nav-right {
		justify-content: flex-end;
		gap: 4px;
	}
	/* the search pill, as now; at most 300px (Jay 26 Oct 14:18: narrower still, was 360 (#68) and 380; it may shrink on
	   small laptops as before, 160px floor, never grow past 300; the live-results panel keeps its own width). 30 Oct (Jay, card #416): about 70 %, 300 -> 210px;
	   the left edge, the 40px height, the radius, "Search" and the magnifier are unchanged; phones never see this rule) */
	.swp-hf #masthead .header-inner.logo-center li.header-search-form {
		flex: 1 1 auto;
		max-width: 210px;
	}
	.swp-hf #masthead .header-inner.logo-center .header-search-form .searchform-wrapper {
		width: 100%;
	}
	/* the icons: 44px targets, no text except the account label (on the main header under its icon, section 2b-2) */
	.swp-hf .header-main .header-nav-main.nav-right > li.header-wishlist-icon,
	.swp-hf .header-main .header-nav-main.nav-right > li.cart-item,
	.swp-hf .header-main .header-nav-main.nav-right > li.swp-pin {
		position: relative;
		height: 44px;
	}
	.swp-hf .header-main .header-nav-main.nav-right > li.header-wishlist-icon > a,
	.swp-hf .header-main .header-nav-main.nav-right > li.cart-item > a.header-cart-link,
	.swp-hf .header-main .header-nav-main.nav-right > li.swp-pin > .swp-pin__btn {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0;
		min-width: 44px;
		height: 44px;
		border-radius: 999px;
	}
	.swp-hf .header-main .header-nav-main.nav-right > li.account-item {
		height: 44px;
		margin-right: 6px;
	}
	.swp-hf .header-main .header-nav-main.nav-right > li.account-item > a {
		height: 44px;
		font-size: 14px;
	}
	/* heart: no text; the count badge round, green-ink, top-right */
	.swp-hf .header-main .header-wishlist-icon .header-wishlist-title {
		display: none;
	}
	.swp-hf .header-main .header-nav-main .header-wishlist-icon i[data-icon-label] {
		margin-right: 0;
	}
	.swp-hf .header-main .header-nav-main .header-wishlist-icon i[data-icon-label]::after {
		top: -6px;
		right: -9px;
		min-width: 16px;
		height: 16px;
		padding: 0 4px;
		border-radius: 8px;
		background: #2f3f2e;
		color: #fff;
		font-size: 10px;
		line-height: 16px;
	}
	/* truck: the SVG only; the cart total stays hidden */
	.swp-hf .header-main .header-nav-main.nav-right .header-cart-title {
		display: none;
	}
}
@media (min-width: 850px) and (hover: hover) {
	.swp-hf .header-main .header-nav-main.nav-right > li.header-wishlist-icon > a:hover,
	.swp-hf .header-main .header-nav-main.nav-right > li.cart-item > a.header-cart-link:hover,
	.swp-hf .header-main .header-nav-main.nav-right > li.swp-pin > .swp-pin__btn:hover {
		background: #f4f5f3;
	}
}

/* 2b. The truck as an inline SVG (header-v2.php swaps Flatsome's JPEG, which had a white background, for the same
   artwork traced: the flatbed truck, 44 × 19, its own colours; Jay 26 Oct 13:4x), the count badge round at the top
   right like the heart's, hidden when the cart is empty */
.swp-hf .header-main .header-cart-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 0;
	max-width: none;
	height: auto;
	margin: 0;
	color: #3f573e;
	line-height: 0;
}
.swp-hf .header-main .header-cart-icon .swp-cart-svg {
	display: block;
	width: 44px;
	height: 19px;
}
.swp-hf .header-main .header-cart-icon[data-icon-label]::after {
	top: -8px;
	right: -9px;
	left: auto;
	box-sizing: border-box;
	width: auto;
	min-width: 16px;
	height: 16px;
	margin: 0;
	padding: 0 4px;
	border-radius: 8px;
	background: #2f3f2e;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}
.swp-hf .header-main .header-cart-icon[data-icon-label="0"]::after,
.swp-hf .header-main .cart-item.swp-cart-empty .header-cart-icon::after {
	display: none;
}

/* 2b-2. The account on the main header (Jay 31 Oct, card #373, option F) and the sub-brand headers (card #369: the
   Architectural row; the Pro row has its "Pro Account" button instead); body class from header-v2.php: the person
   icon on top (the link's own background, header-footer.css), the first name / "Login" under it exactly like the ZIP
   under the pin (section 4: Lato 10px 700 #2f3f2e, 1px from the bottom of the 44px box, centred under the icon).
   Icon and label share one grid cell, so a long name widens the item instead of running into the heart; one line,
   cut with "…" at 88px (the name is already cut at 12 letters in header-footer.php). Desktop only; phones unchanged. */
@media (min-width: 850px) {
	body.swp-hv2-acct-under #masthead .header-nav-main.nav-right > li.account-item {
		margin-right: 0;
	}
	body.swp-hv2-acct-under #masthead .header-nav-main.nav-right > li.account-item > a {
		display: inline-grid;
		grid-template: 1fr / auto;
		justify-items: center;
		min-width: 44px;
		height: 44px;
		padding: 0 !important;
		background-position: center 11px !important; /* the 22px icon at 11–33px, as the pin's */
	}
	body.swp-hv2-acct-under #masthead .header-nav-main.nav-right > li.account-item > a > span {
		grid-area: 1 / 1;
		align-self: end;
		max-width: 88px;
		margin-bottom: -1px; /* the text 1px from the bottom, as the ZIP; the 2px below keep "g" / "y" inside the clip */
		padding: 0 3px 2px;
		color: #2f3f2e;
		font-family: Lato, "Lato Fallback", sans-serif;
		font-size: 10px;
		font-weight: 700;
		line-height: 1;
		letter-spacing: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

/* 2d. The trade row (Jay 26 Oct 16:48 / 16:49, C2): white, a 1px #e6e7e3 line on top, 36px, items centred,
   Lato 11.5px / .08em caps / #3d4a3b, grey dots between them; the PRO badge outlined 9px/900; "Architectural" in
   Cormorant italic 16px #7a6248; hover = a 1px #666 underline (never green); visible keyboard focus. Desktop only
   (header-v2.php prints it with hide-for-medium); the main Stonewood header only. */
.swp-trade {
	position: relative;
	z-index: 2; /* above Flatsome's .header-bg-container (absolute), which follows in the header wrapper */
	border-top: 1px solid #e6e7e3;
	background: #fff;
}

.swp-trade__list {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	height: 36px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.swp-trade__item {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.swp-trade__item + .swp-trade__item::before {
	content: "";
	width: 3px;
	height: 3px;
	margin: 0 8px; /* + the links' 8px side padding = the same 16px from the text to the dot */
	border-radius: 50%;
	background: #c4c8c0; /* the light grey dot */
}

.swp-trade__link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 36px;
	padding: 0 8px; /* room for the inset focus ring */
	color: #3d4a3b;
	font-family: Lato, "Lato Fallback", sans-serif;
	font-size: 11.5px;
	font-weight: 400;
	letter-spacing: .08em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Jay 26 Oct 18:28: no underline in any state; hover = a colour change only, like the UberMenu (#3d4a3b -> #111);
   keyboard focus = an outline ring; the current page's item is bold (no line) */
.swp-trade__link,
.swp-trade__link:hover,
.swp-trade__link:focus,
.swp-trade__link:focus-visible,
.swp-trade__link .swp-trade__label {
	text-decoration: none;
}

.swp-trade__link:hover,
.swp-trade__link:focus-visible {
	color: #111;
}

.swp-trade__link:focus-visible {
	outline: 2px solid #3f573e;
	outline-offset: -2px; /* inside: the link fills the row's height, an outside ring was cut off at top and bottom */
}

.swp-trade__item.current-menu-item .swp-trade__label {
	font-weight: 700;
}

.swp-trade__badge {
	display: inline-block;
	padding: 2px 4px 2px 5px;
	border: 1px solid #2f3f2e;
	color: #2f3f2e;
	font-size: 9px;
	font-weight: 900;
	letter-spacing: .2em;
	line-height: 1;
}

.swp-trade__serif {
	color: #7a6248;
	font-family: "Cormorant Garamond", "SWP GS Tab", "SWP GS Tab Fallback", Georgia, serif;
	font-size: 16px;
	font-style: italic;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

/* 2e. "Global Select" in the main UberMenu's STONE dropdown (a tab under Natural Stone; menu item class swp-tab-serif;
   Jay 26 Oct 17:05) and in the phone drawer's Stone section: Cormorant italic, as the brand's name everywhere else.
   Only the label's type changes; UberMenu's own tab layout / colours stay. */
.ubermenu .ubermenu-item.swp-tab-serif > .ubermenu-target .ubermenu-target-title {
	font-family: "Cormorant Garamond", "SWP GS Tab", "SWP GS Tab Fallback", Georgia, serif;
	font-size: 19px;
	font-style: italic;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 19.5px;
	text-transform: none;
}

/* STONE > Global Select's photo (Jay 26 Oct 17:23): one installed Global Select photo on the right of the panel, tall,
   cropped (object-fit), the tiles' 3px white frame + shadow; its title is the caption: the stone's name + "Global
   Select" in UberMenu's description style (12px #666). The photo is a plain menu item of the tab (class swp-um-photo;
   UberMenu's [Column] items stack their children, which broke the tiles' rows): the panel that holds it keeps its
   right third (243px) for it, so the tiles wrap three per row and the panel keeps the STONE dropdown's height. */
/* the panel's heading "Global Select" (Jay 26 Oct 18:17; item class swp-um-gs-heading, Cormorant italic through
   swp-tab-serif): UberMenu gives it the column-heading row (15px 20px) but draws the 1px #e9e9e9 line only under a
   heading that has items under it, as Natural Stone's does; this one stands alone, so the line is set here */
/* Jay 26 Oct 19:21: the heading 25px (the real 600 italic subset first: no faux bold), and a tagline on the SAME line,
   baseline-aligned, 12px after it: the heading item's UberMenu "Custom Content" (Appearance › Menus › the item ›
   UberMenu › Content; class swp-um-gs-tagline, unpadded), printed after the link, so it is not a link. The row is a
   wrapping flex line: when both don't fit (small laptops), the tagline drops under the heading, at its left edge.
   The 1px line moved from the link to the row, so it runs under both. */
.ubermenu .ubermenu-item-header.swp-um-gs-heading {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 12px;
	box-sizing: border-box;
	padding: 0 20px 14px;
	border-bottom: 1px solid #e9e9e9;
}

.ubermenu .ubermenu-item-header.swp-um-gs-heading > .ubermenu-target {
	flex: none;
	padding: 15px 0 0;
	border-bottom: 0;
}

.ubermenu .ubermenu-item.swp-um-gs-heading > .ubermenu-target .ubermenu-target-title {
	font-family: "SWP GS Tab", "Cormorant Garamond", "SWP GS Tab Fallback", Georgia, serif;
	font-size: 25px;
	font-weight: 600;
	font-synthesis: none;
	line-height: 1.1;
}

.ubermenu .swp-um-gs-heading > .ubermenu-custom-content.swp-um-gs-tagline {
	flex: 0 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	color: #666;
	font-family: Lato, "Lato Fallback", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.4;
	text-transform: none;
}

.ubermenu .ubermenu-tab-content-panel:has(> .swp-um-photo) {
	box-sizing: border-box; /* UberMenu positions the panel itself (absolute): no position change here */
	padding-right: 243px;
}

.ubermenu .ubermenu-tab-content-panel > .swp-um-photo {
	position: absolute;
	top: 0;
	right: 0;
	width: 243px;
}

.ubermenu .swp-um-photo > .ubermenu-target {
	padding-right: 20px;
}

.ubermenu .swp-um-photo .ubermenu-image {
	width: 210px;
	height: 340px;
	max-width: 100%;
	object-fit: cover;
	border: 3px solid #fff;
	box-shadow: 1px 1px 3px #ccc;
}

.ubermenu .swp-um-photo > .ubermenu-target .ubermenu-target-title {
	color: #666;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.3;
}

.ubermenu .swp-um-photo > .ubermenu-target:hover .ubermenu-target-title {
	color: #222;
}

/* Jay 26 Oct 19:4x, desktop: (1) the photo's caption on ONE line ("Select" sat alone on a second line), never cut;
   since CAP-1 (19:5x) the caption (the photo item's label) is "Marenco Reclaimed · Global Select", which fits under
   the 203px photo at 12px. (2) A faded "Global Select" watermark at the bottom of THIS tab's panel only (the panel that holds the
   swp-um-gs-heading item), in the empty space under the tiles, its lower third cut off by the panel's edge: pure
   decoration (generated content with an empty alt, so screen readers skip it; pointer-events none), behind the
   tiles / links / photo (z-index -1 inside the panel, which UberMenu positions with z-index 10 = its own stacking
   context), clipped by the panel. Ink at 5.5% (texture, not text); the panel's height and the other tabs are
   unchanged. */
@media (min-width: 850px) {
	.ubermenu .swp-um-photo > .ubermenu-target .ubermenu-target-title {
		white-space: nowrap;
	}
	.ubermenu .ubermenu-tab-content-panel:has(> .swp-um-gs-heading) {
		overflow: hidden;
	}
	/* the photo column covers the watermark (the panel's own #f9f9f9, full height), so it runs behind the photo and
	   never under the caption */
	.ubermenu .ubermenu-tab-content-panel:has(> .swp-um-gs-heading) > .swp-um-photo {
		bottom: 0;
		background-color: #f9f9f9;
	}
	.ubermenu .ubermenu-tab-content-panel:has(> .swp-um-gs-heading)::after {
		content: "Global Select";
		content: "Global Select" / "";
		position: absolute;
		left: 10px;
		bottom: -0.4em; /* the box's bottom 0.4em below the edge: about the lower third of the letters hidden */
		z-index: -1;
		color: rgba(47, 63, 46, .08); /* the brand ink #2f3f2e at 8% (Jay WM-1, 26 Oct 19:5x; was 5.5%) */
		font-family: "SWP GS Tab", "Cormorant Garamond", Georgia, serif;
		font-size: 104px; /* the largest size whose whole word ends before the photo column (112px read "Global Selec") */
		letter-spacing: -0.01em;
		font-style: italic;
		font-weight: 400;
		line-height: 1;
		white-space: nowrap;
		pointer-events: none;
		user-select: none;
	}
}

/* Small laptops (850-1099px): without FOR PROS the UberMenu bar is narrower and starts further right, so its 950px mega
   panels (anchored to the bar's left edge) ran 20px past a 1024px window. Here they centre under the bar instead
   (`translate` is its own property, so UberMenu's own transforms / transitions stay untouched). 1100px and up: as is. */
@media (min-width: 850px) and (max-width: 1099px) {
	.ubermenu-main > .ubermenu-nav > .ubermenu-item-level-0 > .ubermenu-submenu.ubermenu-submenu-type-mega {
		left: 50% !important;
		right: auto !important;
		translate: -50% 0;
	}
}

.off-canvas .nav-sidebar ul li.swp-tab-serif > a {
	font-family: "Cormorant Garamond", "SWP GS Tab", "SWP GS Tab Fallback", Georgia, serif;
	font-size: 19px;
	font-style: italic;
	text-transform: none;
}

/* 2c. The search icon of the sub-brand rows (subbrand-header.php, element swp-sbh-search): the same 44px round target as
   the pin; its panel (the site's own search form) drops down over the content under the header, full width, so
   nothing moves. Phones keep their drawer search. */
.swp-hf .header-main .header-nav-main.nav-right > li.swp-sbh__search-item {
	position: relative;
	height: 44px;
}
.swp-sbh__search-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	color: #3f573e;
	line-height: 0;
	cursor: pointer;
}
.swp-sbh__search-btn svg {
	display: block;
}
.swp-sbh__search-btn:focus-visible {
	outline: 2px solid #3f573e;
	outline-offset: 2px;
}
.swp-sbh__search-btn[aria-expanded="true"] {
	background: #f4f5f3;
}
.swp-sbh__search-wrap {
	position: relative;
	height: 0;
}
.swp-sbh__search {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 90;
	padding: 14px 0 18px;
	border-bottom: 1px solid #e3e6e0;
	background: #fff;
	box-shadow: 0 10px 24px rgba(47, 63, 46, .10);
}
.swp-sbh__search[hidden] {
	display: none;
}
.swp-sbh__search .container {
	display: flex;
	align-items: center;
	gap: 10px;
}
.swp-sbh__search .searchform-wrapper {
	flex: 1 1 auto;
}
.swp-sbh__search .searchform .search-field {
	height: 44px;
	font-size: 16px;
}
.swp-sbh__search-close {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	color: #3f573e;
	line-height: 0;
	cursor: pointer;
}
.swp-sbh__search-close:focus-visible {
	outline: 2px solid #3f573e;
	outline-offset: 2px;
}
@media (hover: hover) {
	.swp-sbh__search-btn:hover,
	.swp-sbh__search-close:hover {
		background: #f4f5f3;
	}
}

/* 3. Tooltips: under the control, on hover AND keyboard focus; over the content, so nothing moves -------------- */
.swp-hv2-tip__box,
.swp-hf .header-main .nav-right > li > a[data-swp-tip]::after {
	position: absolute;
	top: calc(100% + 2px);
	left: 50%;
	z-index: 60;
	padding: 5px 9px;
	border-radius: 4px;
	background: #2f3f2e;
	color: #fff;
	font-family: Lato, "Lato Fallback", sans-serif;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.3;
	text-transform: none;
	white-space: nowrap;
	/* hidden = out of the layout (display none), not just invisible: an invisible tooltip under the last phone icon
	   still counted as scrollable overflow and made every page 2-4px wider than the screen (main's 27 Oct finding);
	   the fade stays through display's discrete transition + @starting-style */
	display: none;
	opacity: 0;
	pointer-events: none;
	transform: translateX(-50%);
	transition: opacity .15s, display .15s allow-discrete;
}
.swp-hf .header-main .nav-right > li > a[data-swp-tip]::after {
	content: attr(data-swp-tip);
}
/* the last icon's tooltip hangs to the left, so it never crosses the screen's right edge when shown */
.swp-hf .header-main .nav-right > li:last-child .swp-hv2-tip__box,
.swp-hf .header-main .nav-right > li:last-child > a[data-swp-tip]::after {
	right: 0;
	left: auto;
	transform: none;
}
.swp-hv2-tip:focus-visible .swp-hv2-tip__box,
.swp-hf .header-main .nav-right > li > a[data-swp-tip]:focus-visible::after {
	display: block;
	opacity: 1;
}
@media (hover: hover) {
	.swp-hv2-tip:hover .swp-hv2-tip__box,
	.swp-hf .header-main .nav-right > li > a[data-swp-tip]:hover::after {
		display: block;
		opacity: 1;
	}
}
@starting-style {
	.swp-hv2-tip:focus-visible .swp-hv2-tip__box,
	.swp-hf .header-main .nav-right > li > a[data-swp-tip]:focus-visible::after,
	.swp-hv2-tip:hover .swp-hv2-tip__box,
	.swp-hf .header-main .nav-right > li > a[data-swp-tip]:hover::after {
		opacity: 0;
	}
}
.swp-pin.is-open .swp-hv2-tip__box {
	display: none !important; /* not over the open popover */
	opacity: 0 !important;
}

/* 4. The location pin + its ZIP popover: the heading, the ZIP bar's own widget exactly as it was in the strip
   (zip-bar.css styles it: pin · "Deliver to" · the rounded pill with the round green ▸ · "◎ My location"; saved:
   "Delivering to 02645 · Change"; its own error texts), and the one-line note ------------------------------------ */
.swp-pin {
	position: relative;
}
.swp-pin__btn {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: #3f573e;
	line-height: 0;
	cursor: pointer;
}
.swp-pin__btn svg {
	display: block;
}
.swp-pin__btn:focus-visible {
	outline: 2px solid #3f573e;
	outline-offset: 2px;
}
.swp-pin__zip {
	position: absolute;
	bottom: 1px;
	left: 50%;
	padding: 0 3px;
	background: #fff;
	color: #2f3f2e;
	font-family: Lato, "Lato Fallback", sans-serif;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	transform: translateX(-50%);
}
.swp-sbh .swp-pin__zip {
	background: var(--swp-sbh-bg, #fff);
}
.swp-pin__zip:empty {
	display: none;
}
.swp-pin__pop {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 70;
	width: 334px; /* the strip widget (286px on one line) + the padding */
	padding: 12px 16px 14px;
	border: 1px solid #e3e6e0;
	background: #fff;
	box-shadow: 0 6px 20px rgba(47, 63, 46, .10);
	text-align: left;
}
.swp-pin__pop[hidden] {
	display: none;
}
.swp-pin__label {
	margin: 0 0 4px;
	color: #2f3f2e;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}
.swp-pin__note {
	margin: 6px 0 0;
	color: #666;
	font-size: 13px;
	line-height: 1.4;
}
.swp-pin__pop .swp-zip {
	position: relative; /* the error note sits under the field as in the strip */
	min-height: 40px;
}
.swp-pin__pop .swp-zip__error {
	position: static;
	max-width: none;
	margin: 6px 0 0;
}

/* The pin popover's places + X (card #644, Jay 2 Nov 13:52): PHONES only (the strip shows the places on desktops).
   Local ZIP: "Our Locations" or "Schedule a Visit" as outlined boxes (BRAND.md "talk to us": white, green-ink 2px
   outline, square; hover / focus fill green-ink); out of area: "We Ship Nationwide"; no ZIP: nothing (the entry). The
   items and which ZIPs see them come from the menu "Top strip - links" (the strip's own classes + html.swp-zip-*). */
.swp-pin__x,
.swp-pin__places {
	display: none;
}
@media (max-width: 849px) {
	.swp-pin__label {
		padding-right: 36px; /* the X sits in the label's row; the ZIP field below keeps its full width (286px at 360) */
	}
	.swp-pin__x {
		position: absolute;
		top: 4px;
		right: 4px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		min-height: 0;
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		box-shadow: none;
		color: #2f3f2e;
		cursor: pointer;
	}
	.swp-pin__x:focus-visible {
		outline: 2px solid #3f573e;
		outline-offset: -4px;
	}
	html.swp-zip-local .swp-pin__places,
	html.swp-zip-national .swp-pin__places {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px;
		margin: 12px 0 0;
	}
	.swp-pin__place {
		flex: 1 1 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		padding: 8px 10px;
		border: 2px solid #2f3f2e;
		border-radius: 0;
		background: #fff;
		color: #2f3f2e;
		font-size: 14px;
		font-weight: 700;
		line-height: 1.2;
		text-align: center;
		text-decoration: none;
		white-space: nowrap;
	}
	.swp-pin__place:hover,
	.swp-pin__place:focus-visible {
		background: #2f3f2e;
		color: #fff;
	}
	.swp-pin__place:focus-visible {
		outline: 2px solid #3f573e;
		outline-offset: 2px;
	}
	.swp-pin__or {
		flex: none;
		color: #6b7568;
		font-size: 12px;
	}
	.swp-pin__place-text {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		margin: 0;
		color: #3d4a3b;
		font-size: 14px;
	}
	.swp-pin__place-text .swp-strip__truck {
		color: #557353;
	}
	/* with a ZIP the places replace the "enter your ZIP" note */
	html.swp-zip-local .swp-pin__note,
	html.swp-zip-national .swp-pin__note {
		display: none;
	}
}

/* 5. The PRO badge (the Pro brand's lockup and phone mark; subbrand-header.php prints it after the logo link) ------ */
.swp-pro-badge {
	display: inline-block;
	padding: 5px 9px 5px 11px;
	background: #2f3f2e;
	box-shadow: 3px 3px 0 #9ebc96; /* the Quote Request button's offset shadow */
	color: #fff;
	font-family: Lato, "Lato Fallback", sans-serif;
	font-size: 13px;
	font-weight: 900;
	letter-spacing: .22em;
	line-height: 1;
	vertical-align: middle;
}

/* 6. Phones: menu left, the logo centred (Flatsome), pin + heart + truck right; the pro drawer --------------- */
@media (max-width: 849px) {
	/* brand headers: the icon groups keep their width (menu 44px left; pin + heart + truck 132px right); the logo column takes the
	   rest and centres the logo in it, i.e. between the groups as Flatsome does (44px left of the screen's centre at
	   390: with three icons on the right a 166px logo can't sit on the exact centre without overlapping them). On a
	   narrow phone, and with a brand mark, the logo shrinks a little (to 110px at least) instead of overlapping. */
	.swp-hf #masthead .header-inner.medium-logo-center > .flex-col.show-for-medium {
		flex: 0 0 auto;
	}
	.swp-hf #masthead .header-inner.medium-logo-center > #logo {
		flex: 1 1 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		min-width: 0;
		width: auto;
	}
	.swp-hf #masthead .header-inner.medium-logo-center > #logo > a {
		flex: 0 1 166px; /* = the logo width setting */
		min-width: 110px;
	}
	.swp-hf #masthead .header-inner.medium-logo-center > #logo img {
		max-width: 100%;
		height: auto;
	}
	/* the plain logo (no brand mark; menu left, heart + truck right): centred on the SCREEN, not between the groups
	   (Jay 4 Nov 19:03, card #692). Both icon columns get the same width (the menu side as wide as heart + truck,
	   84px); the logo is 166px, or narrower when the room left would bring it within 6px of the icons' 44px tap
	   areas (150px at 360). Brand headers (Pro, Architectural) and the Global Select header keep the rules above. */
	.swp-hf:not(.swp-sbh) #masthead .header-inner.logo-center.medium-logo-center > .flex-col.show-for-medium {
		display: flex;
		flex: 1 1 0;
	}
	.swp-hf:not(.swp-sbh) #masthead .header-inner.logo-center.medium-logo-center > .flex-right {
		justify-content: flex-end;
	}
	.swp-hf:not(.swp-sbh) #masthead .header-inner.logo-center.medium-logo-center > #logo {
		flex: 0 0 auto;
		width: min(166px, 100% - 180px);
		margin: 0;
	}
	.swp-hf #masthead .mobile-nav.nav-right {
		gap: 0;
	}
	.swp-hf #masthead .mobile-nav.nav-right > li {
		margin: 0;
		padding: 0;
	}
	.swp-hf #masthead .mobile-nav.nav-right > li > a,
	.swp-hf #masthead .mobile-nav.nav-right > li.swp-pin > .swp-pin__btn {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		margin: 0;
		padding: 0;
	}
	.swp-hf #masthead .mobile-nav.nav-right > li.header-wishlist-icon > a > i {
		display: inline-block;
		width: 22px;
		height: 22px;
		font-size: 0;
		line-height: 0;
		background: var(--swp-i-heart) no-repeat center / 22px 22px;
	}
	.swp-hf #masthead .mobile-nav.nav-right > li.header-wishlist-icon > a > i::before {
		content: none;
	}
	.swp-hf #masthead .mobile-nav.nav-right > li.header-wishlist-icon > a > i.wishlist-icon[data-icon-label] {
		background-image: var(--swp-i-heart-oak);
	}
	.swp-hf #masthead .mobile-nav.nav-right > li.header-wishlist-icon > a > i[data-icon-label]::after {
		top: -6px;
		right: -9px;
		left: auto;
		min-width: 16px;
		height: 16px;
		margin: 0;
		padding: 0 4px;
		border-radius: 8px;
		background: #2f3f2e;
		color: #fff;
		font-size: 10px;
		font-weight: 700;
		line-height: 16px;
	}
	.swp-hf #masthead .mobile-nav.nav-right > li.cart-item .header-cart-title {
		display: none;
	}
	.swp-hf #masthead .mobile-nav.nav-right > li.cart-item > a.header-cart-link {
		margin-right: -4px;
	}
	/* the popover: fixed under the header, full width minus 12px */
	.swp-hf .swp-pin__pop {
		position: fixed;
		top: 76px;
		right: 12px;
		left: 12px;
		width: auto;
	}
	/* the pro badge, smaller next to the centred logo */
	.swp-pro-badge {
		padding: 4px 7px 4px 9px;
		font-size: 11px;
		box-shadow: 2px 2px 0 #9ebc96;
	}
	/* the drawer: the pro menu */
	.off-canvas .nav-sidebar > li.swp-pro-nav__mob-title {
		width: 100%;
		padding: 10px 20px 4px;
		border-top: 0;
		color: #2f3f2e;
		font-size: 13px;
		font-weight: 700;
		letter-spacing: .06em;
		text-transform: uppercase;
	}
	.off-canvas .nav-sidebar > li.swp-pro-nav__mob-title > span {
		display: inline-block;
		margin-right: 6px;
		padding: 3px 6px 3px 8px;
		background: #2f3f2e;
		color: #fff;
		font-size: 10px;
		font-weight: 900;
		letter-spacing: .22em;
	}
	.off-canvas .nav-sidebar > li.swp-pro-nav__item {
		width: 100%;
	}
	.off-canvas .nav-sidebar > li.swp-pro-nav__item.swp-tab-serif > a {
		font-family: "Cormorant Garamond", "SWP GS Tab", "SWP GS Tab Fallback", Georgia, serif;
		font-size: 21px;
		font-style: italic;
		font-weight: 400;
		text-transform: none;
	}
	.off-canvas .nav-sidebar > li.swp-pro-nav__mob-divider {
		width: 100%;
		height: 8px;
		border-top: 1px solid #e3e6e0;
	}
}

/* 12. Phones: the strip under the header (card #650, Jay 2 Nov 15:16; inc/features/header-v2.php) -------------------
   One line, full width, like the desktop strip's right side: the pin + "02645 · Change" / "Enter your ZIP" (a tap opens
   the pin's ZIP panel, #644), then the strip menu's items (local ZIP: "Our Locations or Schedule a Visit", out of area:
   "We Ship Nationwide", no ZIP: none). A fixed 34px height (no shift); scrolls away with the header (not sticky). */
.swp-mstrip {
	display: none;
}
@media (max-width: 849px) {
	.swp-mstrip {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		box-sizing: border-box;
		height: 34px;
		padding: 0 12px;
		overflow: hidden;
		border-bottom: 1px solid #e3e6e0;
		background: #efefec; /* the desktop strip's grey */
		color: #3d4a3b;
		font-size: 12px;
		line-height: 1;
		white-space: nowrap;
	}
	.swp-mstrip .swp-pin__btn {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		height: 34px;
		min-height: 0;
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		box-shadow: none;
		color: #3d4a3b;
		font-size: 12px;
		font-weight: 400;
		letter-spacing: 0;
		line-height: 1;
		text-transform: none;
	}
	.swp-mstrip .swp-pin__btn > svg {
		flex: none;
		width: 15px;
		height: 15px;
		color: #557353;
	}
	.swp-mstrip .swp-pin__zip,
	.swp-mstrip .swp-hv2-tip__box {
		display: none !important; /* the header pin's ZIP badge and tooltip: the words say it here */
	}
	.swp-mstrip__empty,
	.swp-mstrip__num {
		color: #2f3f2e;
		font-weight: 700;
	}
	.swp-mstrip__chg {
		text-decoration: underline;
		text-decoration-color: #999;
		text-underline-offset: 2px;
	}
	.swp-mstrip__places {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		min-width: 0;
	}
	html:not(.swp-zip-local):not(.swp-zip-national) .swp-mstrip__places {
		display: none;
	}
	.swp-mstrip__item {
		color: #3d4a3b;
		font-size: 12px;
	}
	a.swp-mstrip__item {
		text-decoration: none;
	}
	.swp-mstrip .swp-strip-or {
		color: #6b7568;
		font-size: 11px;
	}
	/* the panel opens under the strip (the header 64px + the strip 34px + 12px) */
	.swp-hf .swp-mstrip .swp-pin__pop {
		top: 110px;
	}
}