/* ==========================================================================
   Main menu on Flatsome (inc/features/mega-menu.php; preview: body.swp-mm-on): the UberMenu's look, measured on
   26-27 Oct 2026 (reports\header-v2\um-style\um-measure.json, reports\menu-flatsome\um-style-probe.json).
   Bar: since 2 Nov (#634) version A, see section 1 (was 44px #424242 + the 2015 pattern, Lato 400 14px #555).
   Panels: #f9f9f9, 1px #e0e0e0, shadow 0 0 20px rgba(0,0,0,.15), right under the bar. Tabs: 200px column with a
   1px #eee line, rows 15px/19.5px padding 15px 25px 15px 20px (50px), active #111 on #eee. Headings 15px/700 #777
   padding 15px 20px + 1px #e9e9e9. Links 14px/18.2px padding 5px 20px. Tiles: image 3px white frame + 1px 1px 3px #ccc
   shadow, 15px 20px around, title 14px/19.5px. Custom text 12px/15.6px #999 padding 15px 20px. Link colour #555
   (the UberMenu's #999 fails contrast) and NO green underlines (Jay 26 Oct 14:40): hover = colour only.
   Contents: 1. Bar  2. Panel  3. Tabs  4. Columns / rows  5. Headings  6. Links  7. Tiles  8. View All / texts
             9. ABOUT / CONTACT  10. Global Select tab  11. Builder
   ========================================================================== */

/* 1. Bar ------------------------------------------------------------------------------------------------------- */
/* Version A (card #634, Jay 2 Nov 08:45; mockup "Main menu: today vs. ideas 3 + 4 + 5"): a flat warm stone bar with a
   hairline above and below (was #424242 + the 2015 stripe pattern, 44px), 56px in all; Lato 700 13px, 0.14em, #555
   (since #642; hover / current #2f3a2f),
   ~38px between items at 1440 (less at 1100-1299 / below 1100, so it never wraps from 1024 up); light 7px arrows; a 2px
   #70926e line that grows from the centre on hover / keyboard focus / an open panel, and stays under the CURRENT section
   (li.swp-mm-current, mega-menu.php). Phones: unchanged (this bar is desktop only; the phone menu is the drawer). */
.swp-mm-on #wide-nav.header-bottom,
.swp-mm-on.swp-hf #wide-nav.header-bottom { /* .swp-hf: header-footer.css sets 44px with !important */
	box-sizing: border-box;
	height: 56px;
	min-height: 56px !important;
	border-top: 1px solid #e2ded5;
	border-bottom: 1px solid #e2ded5;
	background: #f1efea;
}
.swp-mm-on #wide-nav {
	--swp-mm-pad: 19px; /* half the gap between two items */
}
@media (max-width: 1299px) {
	.swp-mm-on #wide-nav {
		--swp-mm-pad: 14px;
	}
}
@media (max-width: 1099px) {
	.swp-mm-on #wide-nav {
		--swp-mm-pad: 10px;
	}
}
.swp-mm-on #wide-nav .header-nav.nav-center {
	justify-content: center;
}
.swp-mm-on #wide-nav .header-nav > li {
	margin: 0;
	padding: 0;
}
.swp-mm-on #wide-nav .header-nav > li > a.nav-top-link {
	position: relative;
	display: flex;
	align-items: center;
	height: 54px; /* the bar's 56px less its two hairlines */
	margin: 0;
	padding: 0 var(--swp-mm-pad);
	color: #555; /* Jay 2 Nov 13:22 (#642): #555555; hover / current #2f3a2f */
	font-family: Lato, "Lato Fallback", sans-serif;
	font-size: 13px;
	font-weight: 700 !important; /* base.css forces normal */
	letter-spacing: .14em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	opacity: 1;
}
.swp-mm-on #wide-nav .header-nav > li > a.nav-top-link:hover,
.swp-mm-on #wide-nav .header-nav > li.current-dropdown > a.nav-top-link,
.swp-mm-on #wide-nav .header-nav > li.swp-mm-current > a.nav-top-link,
.swp-mm-on #wide-nav .header-nav > li > a.nav-top-link:focus-visible {
	color: #2f3a2f;
	background: transparent;
}
/* the cue: a 2px sage-green line under the label (and its arrow), growing from the centre */
.swp-mm-on #wide-nav .header-nav > li > a.nav-top-link::after {
	content: "";
	position: absolute;
	left: var(--swp-mm-pad);
	right: var(--swp-mm-pad);
	bottom: -1px; /* over the bottom hairline */
	height: 2px;
	background: #70926e;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .2s ease;
}
.swp-mm-on #wide-nav .header-nav > li > a.nav-top-link:hover::after,
.swp-mm-on #wide-nav .header-nav > li > a.nav-top-link:focus-visible::after,
.swp-mm-on #wide-nav .header-nav > li.current-dropdown > a.nav-top-link::after,
.swp-mm-on #wide-nav .header-nav > li.swp-mm-current > a.nav-top-link::after {
	transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
	.swp-mm-on #wide-nav .header-nav > li > a.nav-top-link::after {
		transition: none;
	}
}
/* the chevron: Flatsome's icon-angle-down after the label, light and small */
.swp-mm-on #wide-nav .header-nav > li > a.nav-top-link > i.icon-angle-down {
	position: static;
	width: auto;
	height: auto;
	margin: 0 0 0 6px;
	color: #a9b3a6;
	font-size: 7px;
	line-height: 1;
	opacity: 1;
}
.swp-mm-on #wide-nav .header-nav > li > a.nav-top-link:hover > i.icon-angle-down,
.swp-mm-on #wide-nav .header-nav > li.current-dropdown > a.nav-top-link > i.icon-angle-down {
	color: #70926e;
}
.swp-mm-on #wide-nav .header-nav.nav-center,
.swp-mm-on #wide-nav .header-nav.nav-center > li {
	margin: 0;
	padding: 0;
}
.swp-mm-on #wide-nav .header-nav.nav-center {
	position: relative;
	left: 0; /* the UberMenu's bar sat 10px left of the centre; version A is centred */
}
.swp-mm-on #wide-nav .header-nav > li > a.nav-top-link:focus-visible {
	outline: 2px solid #3f573e; /* BRAND.md's focus ring colour (green-heading), on the light bar */
	outline-offset: -6px;
}

/* 2. Panel ------------------------------------------------------------------------------------------------------ */
.swp-mm-on #wide-nav .header-nav > li > .nav-dropdown {
	display: none; /* closed = out of the layout: a hidden 950px box would still widen the page at 850-1099px (main's 27 Oct finding) */
	top: 55px; /* just under the bar's bottom hairline (#634: the 54px item + 1px) */
	left: 0; /* mega-menu.js sets the alignment */
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 1px solid #e0e0e0;
	border-radius: 0;
	background: #f9f9f9;
	box-shadow: 0 0 20px rgba(0, 0, 0, .15);
	color: #555;
	text-align: left;
	text-transform: none;
	letter-spacing: 0;
	transition: none; /* the UberMenu shows on the first mouse move */
}
.swp-mm-on #wide-nav .header-nav > li.menu-item-has-block > .nav-dropdown {
	box-sizing: border-box;
}
.swp-mm-on #wide-nav .header-nav > li:hover > .nav-dropdown,
.swp-mm-on #wide-nav .header-nav > li.current-dropdown > .nav-dropdown {
	display: block; /* open on hover (Flatsome) and on the keyboard's current-dropdown (mega-menu.js; not :focus-within, or Esc could not close it while the top item keeps focus) */
}
.swp-mm-on #wide-nav .header-nav > li > .nav-dropdown > .swp-mm,
.swp-mm-on .swp-mm {
	margin: 0 !important;
	padding: 0;
	max-width: none;
	width: 100%;
}
.swp-mm-on .swp-mm > .col,
.swp-mm-on .swp-mm > .col > .col-inner {
	padding: 0;
	margin: 0;
}
.swp-mm-on .swp-mm *,
.swp-mm-on .swp-mm *::before,
.swp-mm-on .swp-mm *::after {
	box-sizing: border-box;
}
.swp-mm-on .swp-mm p {
	margin: 0;
}
/* Flatsome's dropdown link rules (71% size, margins) must not touch the panels: every text size below is set with
   this weight (#wide-nav), so Flatsome's own #wide-nav rules can't win */
.swp-mm-on #wide-nav .header-nav .swp-mm,
.swp-mm-on #wide-nav .header-nav .swp-mm a {
	margin: 0;
	font-size: 14px;
	line-height: 19.5px;
	text-transform: none;
	letter-spacing: 0;
}
/* short laptop screens: the panel never runs off the bottom, it scrolls inside (bar bottom ≈ 193px from the top) */
.swp-mm-on #wide-nav .header-nav > li.menu-item-has-block > .nav-dropdown {
	max-height: calc(100vh - 200px);
	overflow-x: hidden; /* the 77% tab panel runs 12px past FLOORING's box (padding only): no horizontal scrollbar */
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* 3. Tabs ------------------------------------------------------------------------------------------------------- */
.swp-mm__tabs {
	display: flex;
	align-items: stretch;
	width: 100%;
	min-height: 100%;
}
.swp-mm-on #wide-nav .swp-mm ul.swp-mm__tablist { /* #wide-nav: Flatsome pads lists inside dropdowns */
	flex: 0 0 var(--swp-mm-tabw, 200px);
	width: var(--swp-mm-tabw, 200px);
	margin: 0;
	padding: 0;
	border-right: 1px solid #eee;
	list-style: none;
}
.swp-mm-on #wide-nav .swp-mm ul.swp-mm__tablist > li.swp-mm__tab {
	display: block;
	margin: 0 !important; /* Flatsome indents list items in dropdowns (1.3em, !important) */
	padding: 0;
	list-style: none;
}
.swp-mm-on #wide-nav .swp-mm .swp-mm__tab > a.swp-mm__tab-link {
	position: relative;
	display: block;
	padding: 15px 25px 15px 20px;
	color: #555; /* the UberMenu's tab text: 14px #555 idle AND active (its #999 / #111 sit on the wrapper; the chevron shows them) */
	font-family: Lato, "Lato Fallback", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 19.5px;
	text-decoration: none;
	cursor: pointer;
}
.swp-mm-on #wide-nav .swp-mm .swp-mm__tab.is-active > a.swp-mm__tab-link,
.swp-mm-on #wide-nav .swp-mm .swp-mm__tab > a.swp-mm__tab-link:hover,
.swp-mm-on #wide-nav .swp-mm .swp-mm__tab > a.swp-mm__tab-link:focus-visible {
	color: #555;
	background: #eee;
}
.swp-mm-on #wide-nav .swp-mm .swp-mm__tab > a.swp-mm__tab-link:focus-visible {
	outline: 2px solid #3f573e;
	outline-offset: -3px;
}
.swp-mm__chev {
	position: absolute;
	top: 50%;
	right: 10px;
	width: 10px;
	height: 10px;
	margin-top: -5px;
	color: #999;
	transform: rotate(-90deg); /* the UberMenu's "angle" symbol (a down chevron) turned to point right, filled, thin */
}
.swp-mm__tab.is-active > .swp-mm__tab-link > .swp-mm__chev,
.swp-mm__tab > .swp-mm__tab-link:hover > .swp-mm__chev {
	color: #111;
}
.swp-mm__star {
	display: inline-block;
	width: 15px;
	height: 15px;
	margin: -2px 5px 0 0;
	vertical-align: middle;
	color: #666; /* the Featured tab's star: #666 at rest AND on hover / active (Jay 28 Oct; was #111 = black); the tab text stays #555 */
}
.swp-mm__tab.is-active > .swp-mm__tab-link > .swp-mm__star,
.swp-mm__tab > .swp-mm__tab-link:hover > .swp-mm__star,
.swp-mm__tab > .swp-mm__tab-link:focus-visible > .swp-mm__star {
	color: #666;
}
/* all panels of one tab group sit in one grid cell, so the group is as tall as its tallest panel and nothing jumps
   when another tab is hovered (the UberMenu's tab panels share one height); the inactive ones are invisible and
   out of the tab order / the accessibility tree (visibility hidden) */
.swp-mm__panels {
	position: relative;
	display: grid;
	flex: 0 0 77%; /* the UberMenu's tab content panel is 77% of the panel (730px of 948; FLOORING's 627 runs 12px past its 817 box) */
	width: 77%;
	min-width: 0;
	padding: 0;
}
.swp-mm-on #wide-nav .swp-mm .swp-mm__panel {
	display: block;
	grid-area: 1 / 1;
	width: 100%;
	min-width: 0;
	padding: 0;
}
.swp-mm-on #wide-nav .swp-mm .swp-mm__panel[hidden] {
	display: block;
	visibility: hidden;
	pointer-events: none;
}
.swp-mm__panel::after {
	content: "";
	display: block;
	clear: both;
}
/* second level (STONE › Natural Stone): the same, inside the first panel */
.swp-mm__tabs--l2 {
	min-height: 0;
}

/* 4. Columns / rows (the UberMenu's floats) ------------------------------------------------------------------- */
.swp-mm__col {
	position: relative;
	float: left;
	min-height: 1px;
}
.swp-mm__col--auto { width: auto; }
.swp-mm__col--full { width: 100%; }
.swp-mm__col--1-2 { width: 50%; }
.swp-mm__col--1-3 { width: 33.3333%; }
.swp-mm__col--2-3 { width: 66.6667%; }
.swp-mm__col--1-4 { width: 25%; } /* 4 equal columns (GUIDES, card #793) */
.swp-mm__col--1-5 { width: 20%; }
.swp-mm__col--3-10 { width: 30%; }
.swp-mm__col--11-12 { width: 91.6667%; }
.swp-mm__col::after,
.swp-mm__row::after {
	content: "";
	display: block;
	clear: both;
}
.swp-mm__row {
	clear: both;
	width: 100%;
}
.swp-mm__row--divider {
	margin: 20px 20px; /* the UberMenu's divider item: a 1px line with 20px above and below (41px; Fire Pits' button row starts there) */
	width: auto;
	border-top: 1px solid #e9e9e9;
}
.swp-mm-on #wide-nav .swp-mm .swp-mm__col > a.button { /* a lone [button] in a column: the UberMenu's custom-content padding around it */
	margin: 15px 20px;
}

/* 5. Headings ----------------------------------------------------------------------------------------------------- */
.swp-mm-on #wide-nav .swp-mm .swp-mm__h {
	clear: both;
	display: block;
	padding: 15px 20px;
	border-bottom: 1px solid #e9e9e9;
	color: #555; /* the UberMenu's header TEXT ("Specialty Wood"): 14px regular #555 inside a bold #777 15px wrapper nobody sees */
	font-family: Lato, "Lato Fallback", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 19.5px;
}
.swp-mm-on #wide-nav .swp-mm .swp-mm__h--noline {
	border-bottom: 0;
}
.swp-mm-on #wide-nav .swp-mm .swp-mm__h a.swp-mm__h-link {
	color: inherit;
	font: inherit;
	text-decoration: none;
}
.swp-mm-on #wide-nav .swp-mm .swp-mm__h a.swp-mm__h-link:hover,
.swp-mm-on #wide-nav .swp-mm .swp-mm__h a.swp-mm__h-link:focus-visible {
	color: #222;
}
.swp-mm-on #wide-nav .swp-mm .swp-mm__h--grey { /* "Stone Reference" (GUIDES): 14px regular #666 */
	color: #666;
	font-size: 14px;
	font-weight: 400;
}
.swp-mm-on #wide-nav .swp-mm .swp-mm__h--bold { /* the UberMenu's "header" items: their visible text is the 14px regular #555 above */
	font-weight: 400;
}
.swp-mm-on #wide-nav .swp-mm .swp-mm__h--16 { /* the 16px grey span the UberMenu used as a panel title */
	color: #727272;
	font-size: 16px;
	font-weight: 400;
}
.swp-mm-on #wide-nav .swp-mm .swp-mm__h--alt { /* the 20px line ("Prefinished Hardwood Flooring Collections"): Lato since 27 Oct (MF-6; the UberMenu's was Merriweather) */
	color: #555;
	font-family: Lato, "Lato Fallback", sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 22px; /* the UberMenu's 20px line sat in a 14px/19.5 line: a 22px line box, 52px row */
}
.swp-mm__h--underline .swp-mm__h-text {
	text-decoration: underline;
	text-underline-offset: 2px;
}
.swp-mm-on #wide-nav .swp-mm .swp-mm__h--green { /* column heading, card #793 (GUIDES): 14px Lato bold, BRAND green-ink #2f3f2e */
	color: #2f3f2e;
	font-weight: 700;
}
.swp-mm-on #wide-nav .swp-mm .swp-mm__h--green a.swp-mm__h-link:hover,
.swp-mm-on #wide-nav .swp-mm .swp-mm__h--green a.swp-mm__h-link:focus-visible { /* links rule: ink unchanged, a 1px #666 line on hover */
	color: #2f3f2e;
	text-decoration: underline 1px #666;
	text-underline-offset: 3px;
}

/* 6. Links: Text elements with <ul class="swp-mm__links"> (14px rows), short texts (.swp-mm__cc, 12px) -------- */
.swp-mm-on #wide-nav .swp-mm ul.swp-mm__links {
	margin: 0;
	padding: 4px 0 0; /* the UberMenu's auto submenus start 4px under their heading */
	list-style: none;
}
.swp-mm-on #wide-nav .swp-mm--guides ul.swp-mm__links {
	padding-bottom: 10px; /* #548 (Jay 1 Nov): GUIDES ends on its link lists, so its last link sat 7px from the panel's bottom edge; +10px = 17px, the same as its top and the WOOD panel's (the other panels measure 15-22px) */
}
/* GUIDES panel (#807, Jay 6 Nov): every link and heading on ONE line, 4 even columns, tighter rows. The menu item's
   own Width (Appearance › Menus › GUIDES › 600) is overridden here, by the item's class (swp-mm--guides, the same on
   both sites): 940px from 1100px up, the bar's width (viewport − 168px, 856px at 1024) below. Columns 1/4 each with
   20px padding on both sides = an even 40px gap, headings and links on the same left edge. mega-menu.js centres it. */
.swp-mm-on #wide-nav .header-nav > li.swp-mm--guides > .nav-dropdown {
	width: 940px;
	max-width: calc(100vw - 16px);
}
@media (max-width: 1099px) {
	.swp-mm-on #wide-nav .header-nav > li.swp-mm--guides > .nav-dropdown {
		width: calc(100vw - 168px);
	}
}
/* NEW panel (main's #800, UX Block "Mega menu - New", item Width 1200): never wider than the screen (984px at 1024).
   The WIDTH itself, not only a max-width: a menu Width wider than the window makes Flatsome switch the panel to its
   nav-dropdown-full (1150px, its own left), which runs off a 1024 screen. */
.swp-mm-on #wide-nav .header-nav > li.swp-mm--new > .nav-dropdown {
	width: min(1200px, calc(100vw - 40px)); /* under Flatsome's limit (the header container's width: wider = nav-dropdown-full) */
	max-width: calc(100vw - 16px);
}
.swp-mm-on #wide-nav .swp-mm--guides ul.swp-mm__links > li > a,
.swp-mm-on #wide-nav .swp-mm--guides .swp-mm__h {
	white-space: nowrap; /* the safety net: a longer link stays on one line (the panel clips sideways, never wraps) */
}
.swp-mm-on #wide-nav .swp-mm.swp-mm--guides ul.swp-mm__links > li > a { /* .swp-mm.swp-mm--guides: one class more than the general link rule below */
	padding-top: 2px;
	padding-bottom: 2px;
	line-height: 1.35; /* 14px text, 18.9px line: about 23px from link to link (was 28-46px with the wrapped lines) */
}
.swp-mm-on #wide-nav .swp-mm ul.swp-mm__links > li {
	margin: 0 !important; /* Flatsome indents list items in dropdowns */
	padding: 0;
	list-style: none;
}
.swp-mm-on #wide-nav .swp-mm ul.swp-mm__links > li > a {
	display: block;
	padding: 5px 20px;
	color: #555;
	font-family: Lato, "Lato Fallback", sans-serif;
	font-size: 14px;
	line-height: 18.2px;
	text-decoration: none;
}
.swp-mm-on #wide-nav .swp-mm ul.swp-mm__links > li > a:hover,
.swp-mm-on #wide-nav .swp-mm ul.swp-mm__links > li > a:focus-visible {
	color: #222; /* colour only, never a green line */
}
.swp-mm-on .swp-mm .swp-mm__tag { /* SALE / NEW / POPULAR, as the UberMenu's .sale-tag etc. */
	display: inline-block;
	margin-left: 4px;
	padding: 1px 2px;
	background: #a1be99;
	color: #fff;
	font-size: 9px;
	line-height: 1.4;
	vertical-align: 2px;
}
.swp-mm-on .swp-mm .swp-mm__cc {
	padding: 15px 20px;
	color: #999;
	font-family: Lato, "Lato Fallback", sans-serif;
	font-size: 12px;
	line-height: 15.6px;
}
.swp-mm-on .swp-mm .swp-mm__cc p {
	margin: 0;
}
.swp-mm-on #wide-nav .swp-mm .swp-mm__cc a:not(.button) {
	color: #606060; /* the UberMenu's custom-content links ("Glossary | Calculators"): 11px #606060 on one line */
	font-size: 11px;
	line-height: inherit;
	text-decoration: none;
}
.swp-mm-on #wide-nav .swp-mm .swp-mm__cc a:not(.button):hover {
	color: #222;
}
.swp-mm-on #wide-nav .header-nav .swp-mm a.button { /* Flatsome's [button] as the UberMenu shows it: 13.8px, spaced */
	padding: 0 16.56px;
	color: #fff;
	font-size: 13.8px;
	line-height: 33.12px;
	letter-spacing: .414px;
}
.swp-mm-on #wide-nav .swp-mm .swp-mm__cc a.veneer-link { /* the "THIN BRICK VENEER COLLECTION" line */
	display: inline-block;
	margin-top: 4px;
	font-weight: 700;
}
.swp-mm-on .swp-mm .swp-mm__cc .button { /* Flatsome's [button] inside a custom text: as the site's buttons */
	margin: 0 13.8px 0 0;
}
.swp-mm-on .swp-mm .swp-mm__cc--ref p:first-child { /* the "Reference" rows */
	margin-bottom: 2px;
	color: #999;
	font-size: 14px;
	font-weight: 600;
}
.swp-mm-on #wide-nav .swp-mm .swp-mm__cc--links a:not(.button) { /* "Fire Glass | Lava Rocks | Spark Screens": 12px #555 (MF-4; the UberMenu had the theme's old link blue) */
	color: #555;
	font-size: 12px;
}
/* The featured line under a panel heading (Jay 27 Oct 12:53, proposal A: "Custom Stone Fabrication" in STONE › Natural
   Stone, a Text element with class swp-mm__feat in the UX Block): the title in the row's 14px #555, bold, the small
   line 12px #999 under it, a rule under the row like the heading's; hover = colour + a 1px #666 underline, never green. */
.swp-mm-on #wide-nav .swp-mm .swp-mm__feat {
	clear: both;
	margin: 0;
	padding: 11px 20px 12px;
	border-bottom: 1px solid #e9e9e9;
}
.swp-mm-on #wide-nav .swp-mm .swp-mm__feat p {
	margin: 0;
}
.swp-mm-on #wide-nav .swp-mm .swp-mm__feat a.swp-mm__feat-link {
	display: inline-block;
	color: #555;
	font-family: Lato, "Lato Fallback", sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 19.5px;
	text-decoration: none;
	text-transform: none;
}
.swp-mm-on #wide-nav .swp-mm .swp-mm__feat a.swp-mm__feat-link:hover,
.swp-mm-on #wide-nav .swp-mm .swp-mm__feat a.swp-mm__feat-link:focus-visible {
	color: #222;
	text-decoration: underline;
	text-decoration-color: #666;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.swp-mm-on #wide-nav .swp-mm .swp-mm__feat .swp-mm__feat-desc {
	display: block;
	margin-top: 2px;
	color: #999;
	font-size: 12px;
	line-height: 15.6px;
}
/* a bold grey sub-heading inside a column (the "Outdoor Showers Collection" line) */
.swp-mm-on #wide-nav .swp-mm ul.swp-mm__links > li > a.swp-mm__sub {
	color: #777;
	font-weight: 700;
}

/* 7. Tiles -------------------------------------------------------------------------------------------------------- */
.swp-mm__tile {
	float: left;
	width: auto; /* the UberMenu's auto column: as wide as the image or the (unwrapped) title, + 20px each side */
	max-width: 100%;
	padding: 15px 20px;
}
.swp-mm__col > .swp-mm__tile {
	float: none;
	width: 100%;
}
.swp-mm-on #wide-nav .swp-mm .swp-mm__tile .swp-mm__tile-title {
	white-space: nowrap;
}
.swp-mm-on #wide-nav .swp-mm .swp-mm__col > .swp-mm__tile .swp-mm__tile-title {
	white-space: normal;
}
.swp-mm-on .swp-mm .swp-mm__tile-in {
	display: block;
	color: #555;
	text-decoration: none;
}
.swp-mm__img {
	display: block;
	max-width: 100%;
	margin: 0 0 10px;
	border: 3px solid #fff;
	box-shadow: 1px 1px 3px #ccc;
	background: #f9f9f9;
}
.swp-mm__img img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}
.swp-mm__tile--below .swp-mm__img {
	margin: 10px 0 0;
}
.swp-mm__tile--only .swp-mm__img {
	margin: 0;
}
.swp-mm-on #wide-nav .swp-mm .swp-mm__tile-title {
	display: block;
	color: #555;
	font-family: Lato, "Lato Fallback", sans-serif;
	font-size: 14px;
	line-height: 19.5px;
}
.swp-mm-on #wide-nav .swp-mm .swp-mm__tile-title:has(> .swp-mm__big) { /* the 16px titles (Sawyer Mason / Aged French Oak): the whole title, the <i> line too */
	font-size: 16px;
}
.swp-mm-on #wide-nav .swp-mm .swp-mm__tile-title h4 { /* the Saunas tiles typed their titles as <h4> */
	margin: 0 0 8px;
	color: #555;
	font-size: 15.75px;
	font-weight: 700;
	line-height: 19.5px;
	text-transform: none;
}
.swp-mm-on .swp-mm .swp-mm__tile-in:hover .swp-mm__tile-title,
.swp-mm-on .swp-mm .swp-mm__tile-in:focus-visible .swp-mm__tile-title {
	color: #222;
}
.swp-mm__tile--accent .swp-mm__tile-title {
	color: #70926e;
}
.swp-mm__tile i { /* "Structured Wide Plank" lines */
	font-style: italic;
}

/* 8. View All ----------------------------------------------------------------------------------------------------- */
.swp-mm__viewall {
	float: left;
	width: 33.3333%;
}
.swp-mm__col > .swp-mm__viewall {
	float: none;
	width: 100%;
}
.swp-mm-on #wide-nav .swp-mm a.swp-mm__viewall-link {
	display: block;
	padding: 15px 20px;
	color: #555; /* the UberMenu's visible VIEW ALL: 14px regular #555 (the green bold is on its wrapper, never seen) */
	font-family: Lato, "Lato Fallback", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 19.5px;
	text-decoration: none;
}
.swp-mm-on #wide-nav .swp-mm a.swp-mm__viewall-link:hover,
.swp-mm-on #wide-nav .swp-mm a.swp-mm__viewall-link:focus-visible {
	color: #222;
}

/* 9. ABOUT / CONTACT: plain dropdowns in the UberMenu's panel look ------------------------------------------------ */
.swp-mm-on #wide-nav .header-nav > li:not(.menu-item-has-block) > .nav-dropdown {
	padding: 15px 0;
	/* #351 (Jay 1 Nov 08:04): wide enough for the longest item on one line (were 115-129px, 4 items wrapped);
	   #521 (Jay 08:13, "a lil too wide"): exactly as wide as the longest item + its 20px sides, no 260px minimum;
	   mega-menu.js keeps the panel inside the window (CONTACT, near the right edge) */
	width: max-content;
	max-width: calc(100vw - 16px);
}
.swp-mm-on #wide-nav .header-nav > li:not(.menu-item-has-block) > .nav-dropdown > li {
	margin: 0;
	padding: 0;
}
.swp-mm-on #wide-nav .header-nav > li:not(.menu-item-has-block) > .nav-dropdown > li > a {
	display: block;
	margin: 0;
	padding: 5px 20px;
	white-space: nowrap; /* #351 */
	border: 0;
	color: #555;
	font-family: Lato, "Lato Fallback", sans-serif;
	font-size: 14px;
	line-height: 18.2px;
	text-transform: none;
	letter-spacing: 0;
	text-decoration: none;
}
.swp-mm-on #wide-nav .header-nav > li:not(.menu-item-has-block) > .nav-dropdown > li > a:hover,
.swp-mm-on #wide-nav .header-nav > li:not(.menu-item-has-block) > .nav-dropdown > li > a:focus-visible {
	color: #222;
	background: transparent;
}

/* 10. The Global Select tab (STONE): the 26 Oct look, from header-v2.css §2e --------------------------------------- */
.swp-mm-on .swp-mm .swp-mm__tab.swp-mm__tab--gs > a.swp-mm__tab-link .swp-mm__tab-title {
	font-family: "SWP GS Tab", "Cormorant Garamond", "SWP GS Tab Fallback", Georgia, serif;
	font-size: 19px;
	font-style: italic;
	font-weight: 500;
	line-height: 19.5px;
}
.swp-mm-on #wide-nav .swp-mm .swp-mm__h--gs { /* heading 25px Cormorant italic 600 + the tagline on the same baseline, 12px gap, one line under */
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 12px;
	padding: 15px 20px 14px;
	border-bottom: 1px solid #e9e9e9;
}
.swp-mm-on #wide-nav .swp-mm .swp-mm__h--gs .swp-mm__h-text {
	color: #555; /* as the UberMenu's */
	font-family: "SWP GS Tab", "Cormorant Garamond", "SWP GS Tab Fallback", Georgia, serif;
	font-size: 25px;
	font-style: italic;
	font-weight: 600;
	font-synthesis: none;
	line-height: 1.1;
}
.swp-mm-on .swp-mm .swp-mm__h--gs a.swp-mm__h-link:hover .swp-mm__h-text {
	color: #111;
}
.swp-mm-on #wide-nav .swp-mm .swp-mm__h-tagline {
	color: #666;
	font-family: Lato, "Lato Fallback", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.4;
}
.swp-mm-on #wide-nav .swp-mm .swp-mm__panel.swp-mm__tab--gs-panel { /* the weight of the panel rule above (padding 0) */
	position: relative;
	padding-right: 243px; /* room for the tall photo: the tiles wrap in the 487px left (3 per row, as the UberMenu's) */
	overflow: hidden;
	min-height: 100%;
}
.swp-mm__tile--photo { /* the installed photo, right, 210 x 340 */
	position: absolute;
	top: 0;
	right: 0;
	float: none;
	width: 243px;
	padding: 15px 20px;
}
.swp-mm__tile--photo .swp-mm__img { /* the UberMenu's photo box: 203 x 340 with its 3px frame (the 210px image squeezed to the 243px column) */
	width: 203px;
	height: 340px;
	overflow: hidden;
}
.swp-mm__tile--photo .swp-mm__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.swp-mm-on #wide-nav .swp-mm .swp-mm__tile--photo .swp-mm__tile-title {
	color: #666;
	font-size: 12px;
	line-height: 1.3;
	white-space: nowrap;
}
.swp-mm__panel.swp-mm__tab--gs-panel::after { /* the 8% watermark, its lower third cut by the panel's edge */
	content: "Global Select";
	content: "Global Select" / "";
	position: absolute;
	left: 10px;
	bottom: -0.4em;
	z-index: 0;
	clear: none;
	display: block;
	color: rgba(47, 63, 46, .08);
	font-family: "SWP GS Tab", "Cormorant Garamond", Georgia, serif;
	font-size: 104px;
	font-style: italic;
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.01em;
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
}
.swp-mm__panel.swp-mm__tab--gs-panel > * {
	position: relative;
	z-index: 1;
}
.swp-mm-on #wide-nav .swp-mm .swp-mm__panel.swp-mm__tab--gs-panel > .swp-mm__tile--photo {
	position: absolute; /* stays at the panel's right (the rule above would make it relative) */
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	float: none;
	width: 243px;
	background: #f9f9f9;
}

/* 11. UX Builder (editing the blocks): show every tab's panel stacked, so the team can see what they edit -------- */
.ux-builder-rendering .swp-mm__panel[hidden],
body.ux-builder .swp-mm__panel[hidden] {
	display: block;
	opacity: .6;
}