/* ==========================================================================
   The shared sub-brand header (Jay, 26 Oct 2026; staging). inc/features/subbrand-header.php. Loads after
   header-v2.css on a brand's page (body.swp-sbh); the brand's colours arrive as CSS variables on <body>:
   --swp-sbh-bg, --swp-sbh-ink, --swp-sbh-accent, --swp-sbh-divider.
   Layout (desktop, from the Global Select header): logo | divider | lockup | the brand's inline menu … the search
   bar (280px, shrinks first at 1024) · pin · heart · (truck) · the brand's button. The menu never wraps: its last
   items go into "More" (the inline script).
   Contents: 1. Main row  2. Lockup  3. Inline menu + More  4. Icons + button  5. Sticky  6. Phones
   ========================================================================== */

/* 1. Main row ------------------------------------------------------------------------------------------------- */
.swp-sbh #masthead.header-main {
	background: var(--swp-sbh-bg);
}

/* The Stonewood Architectural (book) row: 20px taller than Flatsome's 91px header height (Jay 26 Oct 18:53: the
   lockup's subline sat right on the brown bar); Flatsome's .header-inner is a centred flex row, so the logo, lockup,
   search, icons and button stay vertically centred (+10px above and below). Book only, desktop only, not once stuck
   (the sticky row keeps its slim height from section 5). */
@media (min-width: 850px) {
	body.swp-sbh.swp-book-header .header-wrapper:not(.stuck) #masthead.header-main {
		height: 111px;
	}
}

@media (min-width: 850px) {
	.swp-hf.swp-sbh #masthead .header-inner.logo-left > #logo {
		flex: none;
		display: flex;
		align-items: center;
		min-width: 0;
		margin: 0;
		width: auto; /* Flatsome: #logo { width: 166px } */
	}
	.swp-hf.swp-sbh #masthead .header-inner.logo-left > #logo > a {
		flex: none;
		width: 166px; /* = the logo width setting; as a flex item the link collapsed with Flatsome's max-width: 100% images */
	}
	.swp-hf.swp-sbh #masthead .header-inner.logo-left > #logo img {
		object-fit: contain; /* a brand logo of another ratio (the tan book logo) keeps the 166 × 91 box */
	}
	/* the left column: the brand's menu, then the search (280px, the first thing to shrink, 160px at least) */
	.swp-hf.swp-sbh #masthead .header-inner.logo-left > .flex-left {
		flex: 1 1 auto;
		min-width: 0;
		margin-left: 10px;
	}
	.swp-hf.swp-sbh #masthead .header-inner.logo-left .header-nav-main.nav-left {
		flex-wrap: nowrap;
		align-items: center;
		overflow: visible;
	}
	.swp-hf.swp-sbh #masthead .header-inner.logo-left li.header-search-form {
		flex: 1 1 240px;
		min-width: 160px;
		max-width: 300px;
		margin: 0 0 0 12px;
	}
	.swp-hf.swp-sbh #masthead .header-inner.logo-left .header-search-form .searchform-wrapper {
		width: 100%;
	}
	.swp-hf.swp-sbh #masthead .header-inner.logo-left > .flex-right {
		flex: 0 0 auto;
	}
	.swp-hf.swp-sbh #masthead .header-inner.logo-left .header-nav-main.nav-right {
		flex-wrap: nowrap;
		gap: 4px;
	}
}

/* 2. The lockup after the logo: divider + the brand's words / badge ---------------------------------------------- */
.swp-sbh__div {
	display: block;
	flex: none;
	width: 1px;
	height: 34px;
	margin: 0 12px;
	background: var(--swp-sbh-divider);
}

.swp-sbh__lockup-link {
	display: inline-flex;
	align-items: center;
	flex: 0 1 auto;
	min-width: 0;
	min-height: 44px;
	color: var(--swp-sbh-ink);
	text-decoration: none;
}

.swp-sbh__lockup-link:focus-visible {
	outline: 2px solid var(--swp-sbh-ink);
	outline-offset: 3px;
}

.swp-sbh__lockup {
	color: var(--swp-sbh-ink);
	white-space: nowrap;
}

/* the A&D book label (main's pro-programs.css sets its type and colour): two lines at most, so the row has room
   (main's rule says nowrap; this one is more specific) */
/* (26 Oct 12:4x: main's lockup is two stacked spans, "Architectural" in Cormorant + a small subline; main's
   pro-programs.css styles them; the row only lets them stack and never clips them) */
.swp-sbh .swp-sbh__lockup--book {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 260px;
	overflow: visible;
	white-space: normal;
}

/* the Stonewood Pro lockup: "Stonewood" + the PRO badge */
.swp-sbh .swp-sbh__lockup--pro {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: Lato, "Lato Fallback", sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: none; /* Flatsome's #logo capitals */
}

/* the Global Select lockup, for when GS registers: Cormorant italic as its header has it */
.swp-sbh__lockup--gs {
	font-family: "Cormorant Garamond", "SWP GS Tab", "SWP GS Tab Fallback", Georgia, serif;
	font-size: 26px;
	font-style: italic;
	font-weight: 500;
	letter-spacing: .01em;
}

/* 3. The brand's inline menu (Flatsome's dropdown walker; the GS header's type) + "More" -------------------------- */
@media (min-width: 850px) {
	.swp-sbh #masthead .header-nav-main.nav-left > li.swp-sbh__nav-item,
	.swp-sbh #masthead .header-nav-main.nav-left > li.swp-sbh__more {
		flex: none;
		margin: 0;
		padding: 0;
	}
	.swp-sbh #masthead .header-nav-main.nav-left > li.swp-sbh__nav-item > a,
	.swp-sbh #masthead .header-nav-main.nav-left > li.swp-sbh__more > a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		margin: 0;
		padding: 0 9px;
		color: var(--swp-sbh-ink);
		font-family: Lato, "Lato Fallback", sans-serif;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: .08em;
		line-height: 1;
		text-transform: uppercase;
		white-space: nowrap;
	}
	.swp-sbh #masthead .header-nav-main.nav-left > li.swp-sbh__nav-item.swp-tab-serif > a {
		font-family: "Cormorant Garamond", "SWP GS Tab", "SWP GS Tab Fallback", Georgia, serif;
		font-size: 18px;
		font-style: italic;
		font-weight: 400;
		letter-spacing: 0;
		text-transform: none;
	}
	.swp-sbh #masthead .header-nav-main.nav-left > li.swp-sbh__nav-item > a:focus-visible,
	.swp-sbh #masthead .header-nav-main.nav-left > li.swp-sbh__more > a:focus-visible {
		outline: 2px solid var(--swp-sbh-ink);
		outline-offset: -4px;
	}
	.swp-sbh #masthead .header-nav-main.nav-left > li.swp-sbh__nav-item.current-menu-item > a,
	.swp-sbh #masthead .header-nav-main.nav-left > li.swp-sbh__nav-item.current-menu-ancestor > a {
		box-shadow: inset 0 -3px 0 #666; /* never a green line under a link (Jay 26 Oct 14:40) */
	}
	.swp-sbh #masthead .header-nav-main.nav-left > li.swp-sbh__more[hidden] {
		display: none;
	}
	/* dropdowns (a brand's own, and More): Flatsome's panel, the GS header's spacing */
	.swp-sbh #masthead .header-nav-main.nav-left > li > ul.nav-dropdown {
		top: 100%;
		min-width: 0;
		width: max-content;
		padding: 14px 22px;
		border: 1px solid var(--swp-sbh-divider);
		box-shadow: 0 14px 30px rgba(30, 43, 35, .12);
	}
	.swp-sbh #masthead .header-nav-main.nav-left > li > ul.nav-dropdown > li {
		margin: 0;
		padding: 0;
		border-top: 1px solid var(--swp-sbh-divider);
	}
	.swp-sbh #masthead .header-nav-main.nav-left > li > ul.nav-dropdown > li:first-child {
		border-top: 0;
	}
	.swp-sbh #masthead .header-nav-main.nav-left > li > ul.nav-dropdown > li > a {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: 0 4px;
		color: var(--swp-sbh-ink);
		font-size: 15px;
		font-weight: 400;
		letter-spacing: 0;
		text-transform: none;
		white-space: nowrap;
	}
	.swp-sbh #masthead .header-nav-main.nav-left > li > ul.nav-dropdown > li.swp-tab-serif > a {
		font-family: "Cormorant Garamond", "SWP GS Tab", "SWP GS Tab Fallback", Georgia, serif;
		font-size: 19px;
		font-style: italic;
	}
}
@media (min-width: 850px) and (hover: hover) {
	.swp-sbh #masthead .header-nav-main.nav-left > li.swp-sbh__nav-item > a:hover,
	.swp-sbh #masthead .header-nav-main.nav-left > li.swp-sbh__more > a:hover {
		box-shadow: inset 0 -3px 0 #666; /* never green (Jay 26 Oct 14:40) */
	}
	.swp-sbh #masthead .header-nav-main.nav-left > li > ul.nav-dropdown > li > a:hover {
		color: #222; /* UberMenu's hover */
	}
}

/* 4. Icons + the brand's button (the icon group is Header v2's; the button at the right end) ----------------------- */
.swp-sbh #masthead .swp-pin__btn,
.swp-sbh #masthead .header-wishlist-icon > a,
.swp-sbh #masthead .account-item > a,
.swp-sbh #masthead .header-cart-icon {
	color: var(--swp-sbh-ink);
}

.swp-sbh #masthead .header-nav-main.nav-right > li.swp-sbh__button {
	display: flex;
	align-items: center;
	height: 44px;
	margin: 0 0 0 10px;
	padding: 0;
}

.swp-sbh #masthead .swp-sbh__button .button {
	min-height: 36px;
	margin: 0;
	padding: 0 14px;
	font-size: 13px;
	line-height: 32px;
	letter-spacing: .02em;
	text-transform: none; /* Title Case (BRAND) */
	white-space: nowrap;
}

/* 5. Sticky (as the GS header: slim once stuck) -------------------------------------------------------------------- */
.swp-sbh .header-wrapper.stuck {
	box-shadow: 0 1px 0 var(--swp-sbh-divider), 0 4px 14px rgba(30, 43, 35, .08);
}

.swp-sbh .header-wrapper.stuck #logo img {
	max-height: 28px !important; /* Flatsome: .stuck #logo img { max-height: 64px !important } */
	width: auto;
}

.swp-sbh .header-wrapper.stuck .swp-sbh__div {
	height: 26px;
}

/* 5b. The 'bar' layout (Jay 26 Oct 13:13, the approved mockups; Architectural + Pro) -------------------------------
   Row 1 (body.swp-sbh--search-bar): the search bar in the middle of the row (Flatsome's own form in the header
   pill, white fill), up to --swp-sbh-search-max (380 book / 420 pro), 160px at least on small laptops.
   Row 2 (body.swp-sbh--bar): a full-width bar in the brand's colour (--swp-sbh-bar) with the brand's menu centred.
   #70 (Jay 13:27): the bar and its dropdowns reuse the desktop UberMenu's measures (um-measure.json, 1440):
   bar 44px; links Lato 14px/400, line-height 18px, padding 13px 26px 13px 11px (UberMenu keeps the arrow's room on
   every item), labels in caps, colour change only on hover (no underline); dropdown panel #f9f9f9, 1px #e0e0e0,
   shadow 0 0 20px rgba(0,0,0,.15), its links 14px/400 #555 padding 5px 20px line-height 18.2px, headers 15px/700 #777
   padding 15px 20px with a 1px #e9e9e9 line. The link colour is white (Jay: 4.7:1 on the tan) where UberMenu has
   #888 on #424242; "hover" = full white as UberMenu brightens its grey. */
@media (min-width: 850px) {
	.swp-hf.swp-sbh--search-bar #masthead .header-inner.logo-left > .flex-left {
		display: flex;
		justify-content: center;
	}
	.swp-hf.swp-sbh--search-bar #masthead .header-inner.logo-left .header-nav-main.nav-left {
		flex: 1 1 auto;
		justify-content: center;
	}
	.swp-hf.swp-sbh--search-bar #masthead .header-inner.logo-left li.header-search-form {
		flex: 1 1 auto;
		min-width: 160px;
		max-width: var(--swp-sbh-search-max, 380px);
		margin: 0 16px;
	}
	.swp-hf.swp-sbh--search-bar #masthead .header-search-form .searchform .search-field {
		background-color: #fff; /* not the shorthand: it would reset header-footer.css's background-clip (the 34px pill) */
	}
	.swp-sbh #masthead .swp-sbh__button .button {
		display: inline-flex;
		align-items: center;
		gap: 7px;
	}
	.swp-sbh__btn-icon {
		flex: none;
	}
}

.swp-sbh__bar {
	position: relative;
	z-index: 2; /* above Flatsome's .header-bg-container (absolute, white at 90%), which follows it in the header wrapper */
	background: var(--swp-sbh-bar, #2f3f2e);
}

.swp-sbh__bar > .container {
	padding: 0 15px;
}

.swp-sbh__bar .swp-sbh__bar-list {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: stretch;
	min-height: 44px; /* UberMenu: #wide-nav 44px */
	margin: 0;
	padding: 0;
	list-style: none;
}

.swp-sbh__bar .swp-sbh__bar-list > li {
	position: relative;
	flex: none;
	margin: 0;
	padding: 0;
}

.swp-sbh__bar .swp-sbh__bar-list > li > a {
	display: block;
	margin: 0;
	padding: 13px 26px 13px 11px; /* UberMenu's top link */
	color: var(--swp-sbh-bar-ink, #fff);
	font-family: Lato, "Lato Fallback", sans-serif;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 18px;
	text-transform: uppercase; /* UberMenu's labels are typed in caps */
	white-space: nowrap;
	opacity: .9;
}

/* "Global Select" on a bar (Pro green and Architectural brown; menu item class swp-tab-serif): Cormorant italic 600
   from the real 600 subset "SWP GS Tab" (fonts.css; Jay 26 Oct 18:35/18:43), first in the stack so the GS plugin's
   italic-400-only Cormorant can't be faux-bolded; no caps; hover = the bar's white 90% -> 100% only */
.swp-sbh__bar .swp-sbh__bar-list > li.swp-tab-serif > a {
	font-family: "SWP GS Tab", "Cormorant Garamond", "SWP GS Tab Fallback", Georgia, serif;
	font-size: 19px;
	font-style: italic;
	font-weight: 600;
	font-synthesis: none;
	letter-spacing: 0;
	text-transform: none;
}

/* the weight against base.css's `.nav > li > a { font-weight: normal !important }` and the book brand's bold bar
   labels (`body.swp-book-header .swp-sbh__bar .nav > li > a { font-weight: 700 !important }`): this item only */
.swp-sbh .swp-sbh__bar .swp-sbh__bar-list > li.swp-tab-serif > a.nav-top-link,
.swp-sbh .swp-sbh__bar .swp-sbh__bar-list > li.swp-tab-serif > a {
	font-weight: 600 !important;
}

/* The Stonewood Architectural (book) brown bar: links at a real 500 (Jay 26 Oct 19:31; fonts.css "SWP Lato Medium",
   "SWP GS Tab Medium"); same size, colour and spacing. These outweigh the book brand's bold labels
   (pro-programs.css: body.swp-book-header .swp-sbh__bar .nav > li > a { font-weight: 700 !important }). The Pro bar
   is unchanged (Lato 400, "Global Select" 600). */
body.swp-book-header.swp-sbh .swp-sbh__bar .nav > li > a {
	font-family: "SWP Lato Medium", Lato, "Lato Fallback", sans-serif;
	font-weight: 500 !important;
	font-synthesis: none;
}

body.swp-book-header.swp-sbh .swp-sbh__bar .swp-sbh__bar-list > li.swp-tab-serif > a {
	font-family: "SWP GS Tab Medium", "SWP GS Tab", "Cormorant Garamond", "SWP GS Tab Fallback", Georgia, serif;
	font-weight: 500 !important;
}

/* (Flatsome's .nav > li > a:hover / .has-dropdown > a / .nav-top-link rules set a dark colour: the bar's own colour
   is repeated here with more weight, for the hover and for the More link) */
.swp-sbh .swp-sbh__bar .swp-sbh__bar-list > li > a,
.swp-sbh .swp-sbh__bar .swp-sbh__bar-list > li.swp-sbh__more > a.nav-top-link,
.swp-sbh .swp-sbh__bar .swp-sbh__bar-list > li > a:hover,
.swp-sbh .swp-sbh__bar .swp-sbh__bar-list > li.has-dropdown > a:hover,
.swp-sbh .swp-sbh__bar .swp-sbh__bar-list > li > a:focus-visible,
.swp-sbh .swp-sbh__bar .swp-sbh__bar-list > li.current-menu-item > a,
.swp-sbh .swp-sbh__bar .swp-sbh__bar-list > li.current-menu-ancestor > a,
.swp-sbh .swp-sbh__bar .swp-sbh__bar-list > li.current-dropdown > a {
	color: var(--swp-sbh-bar-ink, #fff);
}

.swp-sbh__bar .swp-sbh__bar-list > li > a:hover,
.swp-sbh__bar .swp-sbh__bar-list > li > a:focus-visible,
.swp-sbh__bar .swp-sbh__bar-list > li.current-menu-item > a,
.swp-sbh__bar .swp-sbh__bar-list > li.current-menu-ancestor > a,
.swp-sbh__bar .swp-sbh__bar-list > li.current-dropdown > a {
	opacity: 1;
}

.swp-sbh__bar .swp-sbh__bar-list > li > a:focus-visible {
	outline: 2px solid var(--swp-sbh-bar-ink, #fff);
	outline-offset: -4px;
}

.swp-sbh__bar .swp-sbh__bar-list > li.swp-sbh__more[hidden] {
	display: none;
}

.swp-sbh__bar .swp-sbh__bar-list > li.swp-sbh__more > a .icon-angle-down {
	margin-left: 5px;
	font-size: 10px;
}

/* dropdowns in the bar (More now; the Pro panels later): UberMenu's panel */
.swp-sbh__bar .swp-sbh__bar-list > li > ul.nav-dropdown {
	top: 100%;
	left: 0;
	min-width: 220px;
	width: max-content;
	margin: 0;
	padding: 10px 0;
	border: 1px solid #e0e0e0;
	background: #f9f9f9;
	box-shadow: 0 0 20px rgba(0, 0, 0, .15);
}

.swp-sbh__bar .swp-sbh__bar-list > li > ul.nav-dropdown > li {
	margin: 0;
	padding: 0;
	border: 0;
}

.swp-sbh__bar .swp-sbh__bar-list > li > ul.nav-dropdown > li > a {
	display: block;
	padding: 5px 20px;
	border: 0; /* Flatsome's 1px #ececec line under each item; UberMenu's lists have none */
	color: #555;
	font-family: Lato, "Lato Fallback", sans-serif;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 18.2px;
	text-transform: none;
	white-space: nowrap;
}

.swp-sbh__bar .swp-sbh__bar-list > li > ul.nav-dropdown > li.swp-tab-serif > a {
	font-family: "Cormorant Garamond", "SWP GS Tab", "SWP GS Tab Fallback", Georgia, serif;
	font-size: 18px;
	font-style: italic;
}

.swp-sbh__bar .swp-sbh__bar-list > li > ul.nav-dropdown > li > a:hover,
.swp-sbh__bar .swp-sbh__bar-list > li > ul.nav-dropdown > li > a:focus-visible {
	color: #222; /* UberMenu's hover: the colour only */
}

@media (max-width: 849px) {
	.swp-sbh__bar {
		display: none; /* phones: the brand's menu sits in the drawer */
	}
}

/* 5d. Bar options (Jay 26 Oct 14:46, the Architectural bar, board 3): 'pattern' => 'herringbone' = a faint repeating
   herringbone watermark over the bar colour (a 16px inline SVG tile, no request; stroke white at 16% / 8%; lower to
   .12 if it reads busy), the labels with a soft shadow so they read over it; 'inner_lines' => true = two 1px white
   lines at 60% ~5px inside the bar's top and bottom edges, full width (the bar pads 5px, the inner row carries the
   borders, the links lose 6px of padding: the bar stays 44px). Book brand defaults; Pro and GS unchanged. */
.swp-sbh--bar-herringbone .swp-sbh__bar {
	/* stroke .12 / .06 (Jay: .16 if it reads like the mockup; on the real bar .16 looked busier at 1440, so the lower value) */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cg stroke='rgba(255,255,255,0.12)' stroke-width='1.5' fill='none'%3E%3Cpath d='M0 8L8 0M0 16L8 8M8 4L16 12M8 -4L16 4M8 12L16 20'/%3E%3Cpath d='M8 0V16' stroke='rgba(255,255,255,0.06)'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: 16px 16px;
}

.swp-sbh--bar-herringbone .swp-sbh__bar .swp-sbh__bar-list > li > a {
	text-shadow: 0 1px 2px rgba(60, 45, 30, .35);
}

/* Jay 26 Oct 18:36: the book bar 44 -> 38px (it felt tight under the lockup): 4 + 1 + 28 + 1 + 4. The labels stay
   centred (18px line + 5px top / bottom); an invisible 2px extension above and below keeps a 32px tap target. */
.swp-sbh--bar-lines .swp-sbh__bar {
	padding: 4px 0;
}

.swp-sbh--bar-lines .swp-sbh__bar-inner {
	border-top: 1px solid rgba(255, 255, 255, .6);
	border-bottom: 1px solid rgba(255, 255, 255, .6);
}

.swp-sbh--bar-lines .swp-sbh__bar .swp-sbh__bar-list {
	min-height: 28px;
}

.swp-sbh--bar-lines .swp-sbh__bar .swp-sbh__bar-list > li > a {
	position: relative;
	padding-top: 5px;
	padding-bottom: 5px;
}

.swp-sbh--bar-lines .swp-sbh__bar .swp-sbh__bar-list > li > a::after {
	content: "";
	position: absolute;
	top: -2px;
	right: 0;
	bottom: -2px;
	left: 0;
}

/* 5c. The bar's dropdown PANELS (Jay 26 Oct 14:02, the approved "Pro menu" board): one level, the full bar width.
   LEFT the section photo (300 × 200) + the name (Cormorant italic 24px) + a bold "View All …"; RIGHT up to four
   columns, each a small uppercase heading (13px/700/.1em, a 1px #e0e0e0 line) with the links stacked. The content is a
   UX Block per panel ("Pro menu - Stone" …; row.swp-pm, h4.swp-pm__h, ul.swp-pm__list). Measures = the UberMenu's
   (panel #f9f9f9, border-top 1px #e0e0e0, shadow 0 0 20px rgba(0,0,0,.15), links Lato 15px / 1.3 / 400) with Jay's
   colours: links #555 (UberMenu's #999 fails contrast), hover #2f3f2e + a 1px #666 underline; the open top item gets a
   3px #9ebc96 line in the bar. Opened by hover (a short delay) or Enter / Space; Esc closes (header-v2.js). */
/* (the .swp-pm__* classes + header-v2.js are shared with main's GS "By Type" bar, #78: any li.swp-pm__item under an
   element with data-swp-pm; the bar itself must be position: relative.) Specificity matters here: Flatsome's
   `.nav > li { position: relative }` (flatsome.css loads AFTER this file) ties a bare `li.swp-pm__item` and wins — the
   panel then sizes to the 93px item (Jay 16:01, the squeezed box). The [data-swp-pm] hook makes these rules heavier. */
[data-swp-pm] li.swp-pm__item,
li.swp-pm__item[data-swp-pm],
.nav > li.swp-pm__item {
	position: static; /* the panel spans the bar, not the item */
}

[data-swp-pm] li.swp-pm__item > a .icon-angle-down,
li.swp-pm__item[data-swp-pm] > a .icon-angle-down {
	margin-left: 5px;
	font-size: 10px;
}

[data-swp-pm] li.swp-pm__item.is-open > a,
[data-swp-pm] li.swp-pm__item > a[aria-expanded="true"],
li.swp-pm__item[data-swp-pm].is-open > a,
li.swp-pm__item[data-swp-pm] > a[aria-expanded="true"] {
	box-shadow: inset 0 -3px 0 rgba(255, 255, 255, .6); /* the open marker: white at 60%, not green (Jay 26 Oct 14:40) */
	opacity: 1;
}

.swp-pm__panel,
.nav > li > .swp-pm__panel {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	width: auto;
	min-width: 0;
	max-width: none;
	margin: 0;
	z-index: 40;
	padding: 26px 0 30px;
	border-top: 1px solid #e0e0e0;
	background: #f9f9f9;
	box-shadow: 0 0 20px rgba(0, 0, 0, .15);
	text-align: left;
}

.swp-pm__panel[hidden] {
	display: none;
}

.swp-pm__panel .row.swp-pm {
	margin-bottom: 0;
}

.swp-pm__panel .col {
	padding-bottom: 0;
}

.swp-pm__panel .swp-pm__photo {
	margin-bottom: 14px;
}

.swp-pm__panel .swp-pm__photo img {
	display: block;
	width: 100%;
	max-width: 300px;
	aspect-ratio: 3 / 2;
	height: auto;
	object-fit: cover;
}

.swp-pm__panel .swp-pm__text p {
	margin: 0 0 6px;
}

.swp-pm__panel .swp-pm__name {
	color: #2f3f2e;
	font-family: "Cormorant Garamond", "SWP GS Tab", "SWP GS Tab Fallback", Georgia, serif;
	font-size: 24px;
	font-style: italic;
	font-weight: 500;
	line-height: 1.2;
}

.swp-pm__panel a.swp-pm__all {
	color: #2f3f2e;
	font-family: Lato, "Lato Fallback", sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

/* A featured item under "View All" in a panel's lead column (Jay 27 Oct: "Custom Stone Fabrication" + a short line in
   the Pro STONE panel; in the UX Block: p.swp-pm__feat > a.swp-pm__feat-link, then p.swp-pm__desc). The link in the
   "View All" style, the line 13px #666; a 1px #e0e0e0 rule above, like the column headings. The drawer prints the
   link as a row after "View All" (subbrand-header.php). */
.swp-pm__panel .swp-pm__feat {
	margin: 14px 0 3px;
	padding-top: 12px;
	border-top: 1px solid #e0e0e0;
}

.swp-pm__panel a.swp-pm__feat-link {
	display: inline-block;
	color: #2f3f2e;
	font-family: Lato, "Lato Fallback", sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	text-transform: none; /* Title Case as typed */
}

.swp-pm__panel a.swp-pm__feat-link:hover,
.swp-pm__panel a.swp-pm__feat-link:focus-visible {
	color: #2f3f2e;
	text-decoration: underline;
	text-decoration-color: #666; /* never green */
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.swp-pm__panel .swp-pm__desc {
	margin: 0;
	color: #666;
	font-family: Lato, "Lato Fallback", sans-serif;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
}

.swp-pm__panel .swp-pm__h {
	margin: 0 0 10px;
	padding: 0 0 8px;
	border-bottom: 1px solid #e0e0e0;
	color: #2f3f2e;
	font-family: Lato, "Lato Fallback", sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	line-height: 1.3;
	text-transform: uppercase;
}

.swp-pm__panel ul.swp-pm__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.swp-pm__panel ul.swp-pm__list > li {
	margin: 0 0 7px;
	padding: 0;
	list-style: none;
}

.swp-pm__panel ul.swp-pm__list a,
.swp-pm__panel a.swp-pm__all {
	display: inline-block;
	text-decoration: none;
}

.swp-pm__panel ul.swp-pm__list a {
	color: #555;
	font-family: Lato, "Lato Fallback", sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.3;
}

.swp-pm__panel ul.swp-pm__list a:hover,
.swp-pm__panel ul.swp-pm__list a:focus-visible,
.swp-pm__panel a.swp-pm__all:hover,
.swp-pm__panel a.swp-pm__all:focus-visible {
	color: #2f3f2e;
	text-decoration: underline;
	text-decoration-color: #666;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* 5c-2. Level link columns (Jay 28 Oct, the Pro STONE panel: ACCESSORIES at the edge, MANUFACTURED STONE on two lines,
   the lead column a third of the panel; Jay's pick B = no photo). The lead column's width is set in the block (span 3 =
   a quarter). The link columns are one CSS grid: every column the same width whatever its span, the headings in one
   grid row and the lists in the next (subgrid), so a heading that wraps ("MANUFACTURED STONE" at 1024) never pushes its
   links below the other columns' — the heading rules and the lists stay level. Older browsers without subgrid keep
   Flatsome's columns and reserve a two-line heading height instead. The compact panels (Guides, About) are untouched. */
.swp-pm__panel:not(.swp-pm__panel--compact) .swp-pm__cols .row {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	grid-template-rows: auto auto;
	align-items: start;
}

.swp-pm__panel:not(.swp-pm__panel--compact) .swp-pm__cols .row::before,
.swp-pm__panel:not(.swp-pm__panel--compact) .swp-pm__cols .row::after {
	content: none; /* Flatsome's clearfix pseudo-element would be a fifth grid column */
}

.swp-pm__panel:not(.swp-pm__panel--compact) .swp-pm__cols .row > .col {
	grid-row: 1 / span 2;
	display: grid;
	grid-template-rows: subgrid;
	flex: none;
	width: auto;
	max-width: none;
}

.swp-pm__panel:not(.swp-pm__panel--compact) .swp-pm__cols .row > .col > .col-inner,
.swp-pm__panel:not(.swp-pm__panel--compact) .swp-pm__cols .row > .col > .col-inner > .text {
	display: contents;
}

.swp-pm__panel:not(.swp-pm__panel--compact) .swp-pm__cols .swp-pm__h {
	align-self: end; /* a one-line heading sits on the row's bottom: its rule level with a two-line neighbour's */
}

@supports not (grid-template-rows: subgrid) {
	.swp-pm__panel:not(.swp-pm__panel--compact) .swp-pm__cols .row {
		display: flex;
	}
	.swp-pm__panel:not(.swp-pm__panel--compact) .swp-pm__cols .row > .col {
		display: block;
		flex: 1 1 0;
	}
	.swp-pm__panel:not(.swp-pm__panel--compact) .swp-pm__cols .swp-pm__h {
		display: flex;
		align-items: flex-end;
		min-height: calc(2 * 1.3em + 8px);
	}
}

/* Compact panels (a block without a photo; Jay 26 Oct 16:09: Guides, About): the same UberMenu panel look, only as
   wide as its link columns, left-aligned under its top item (the item is the positioned ancestor here; header-v2.js
   shifts it left when it would leave the viewport). The columns are fixed-width flex items, so the panel's width
   comes from them (Flatsome's percentage columns can't size a shrink-to-fit box). */
[data-swp-pm] li.swp-pm__item.swp-pm__item--compact,
.nav > li.swp-pm__item.swp-pm__item--compact {
	position: relative;
}

.nav > li > .swp-pm__panel.swp-pm__panel--compact,
.swp-pm__panel.swp-pm__panel--compact {
	right: auto;
	left: 0;
	width: max-content;
	max-width: calc(100vw - 30px);
	padding: 20px 0 18px;
}

.swp-pm__panel--compact > .swp-pm__inner.container {
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0 24px;
}

.swp-pm__panel--compact .row.swp-pm,
.swp-pm__panel--compact .row.swp-pm .row {
	display: flex;
	flex-wrap: nowrap;
	width: auto;
	max-width: none;
	margin: 0;
}

.swp-pm__panel--compact .row.swp-pm > .col {
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	padding: 0;
}

.swp-pm__panel--compact .row.swp-pm .row > .col {
	flex: 0 0 200px;
	width: 200px;
	max-width: none;
	padding: 0 24px 0 0;
}

.swp-pm__panel--compact .row.swp-pm .row > .col:last-child {
	padding-right: 0;
}

.swp-pm__panel--compact .swp-pm__text {
	margin-top: 8px;
}

/* the PRO badge: 18px from the logo at every width (Jay 26 Oct 14:02; it touched the D) */
.swp-sbh--pro #logo > .swp-sbh__lockup-link,
.swp-sbh--pro #logo > .swp-sbh__mark {
	margin-left: 18px;
}

@media (max-width: 849px) {
	.swp-hf.swp-sbh--pro #masthead .header-inner.medium-logo-center > #logo {
		gap: 0;
	}
	/* the drawer: a panel item's rows (View All, then the sections' rows, then their links) */
	.off-canvas .nav-sidebar li.swp-pm__mob-all > a {
		font-weight: 700;
	}
	.off-canvas .nav-sidebar li.swp-pm__mob-section > a {
		font-size: 13px;
		letter-spacing: .08em;
	}
}

/* 6. Phones: the compact mark next to the logo; the drawer's brand section ------------------------------------------ */
@media (max-width: 849px) {
	.swp-hf.swp-sbh #masthead .header-inner.medium-logo-center > #logo {
		gap: 8px;
	}
	.swp-sbh__mark {
		display: inline-flex;
		align-items: center;
		flex: none;
	}
	/* the lockup as the phone mark ("Architectural"): it keeps its one line and the logo gives way first (down to
	   84px; header-v2.css lets it shrink to 110px on its own) */
	.swp-hf.swp-sbh #masthead .header-inner.medium-logo-center > #logo > a.swp-sbh__mark--lockup {
		flex: none; /* not header-v2.css's logo-link rule (#logo > a: flex 0 1 166px, min-width 110px) */
		width: auto;
		min-width: 0;
		white-space: nowrap;
		color: inherit;
	}
	.swp-hf.swp-sbh #masthead .header-inner.medium-logo-center > #logo:has(.swp-sbh__mark--lockup) > a:not(.swp-sbh__mark) {
		min-width: 84px;
	}
	.swp-sbh .header-wrapper.stuck .header-main {
		height: 56px !important; /* Flatsome: .stuck .header-main { height: 64px !important } */
	}
	.off-canvas .nav-sidebar > li.swp-sbh__mob-title {
		width: 100%;
		padding: 14px 20px 4px;
		border-top: 0;
		color: #666; /* the drawer's label style (the FOR PROS label; Jay 26 Oct 14:05, audit A5) */
		font-size: 11px;
		font-weight: 700;
		letter-spacing: .16em;
		line-height: 1.2;
		text-transform: uppercase;
	}
	.off-canvas .nav-sidebar > li.swp-sbh__nav-item,
	.off-canvas .nav-sidebar > li.swp-sbh__mob-home {
		width: 100%;
	}
	.off-canvas .nav-sidebar > li.swp-sbh__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-sbh__mob-divider {
		width: 100%;
		height: 8px;
		border-top: 1px solid #e3e6e0;
	}
}