/* ==========================================================================
   Header + footer redesign (2026-10, round 18: "header A + footer, gray top band").
   Markup: Flatsome header builder elements; the UX Block "Footer" (slug site-footer) with
   [swp_footer_menu] and [swp_zip_box] (inc/features/header-footer.php). JS: header-footer.js.
   Everything is scoped to body.swp-hf (set with the new header/footer).
   Icons are inline SVG in this file (no icon font, no image requests).
   --------------------------------------------------------------------------
   Contents: 1. Tokens + icons  2. Header: Wishlist / Account icons  3. Phone header
             4. Footer: project band (3 cards)  5. Sliver (social + review)
             6. Main footer (brand, ZIP box, link columns)  7. Legal bar  8. Phones  8b. Footer cards on touch
             9. Colours: white main footer, dark green copyright bar
   ========================================================================== */

/* 1. Tokens + icons ------------------------------------------------------------ */
.swp-hf {
	--swp-hf-green: #557353;
	--swp-hf-green-dark: #3f573e;
	--swp-hf-band: #f2f3f1;
	--swp-hf-deep: #2f3f2e;
	/* Line icons, stroke #3f573e (header) */
	--swp-i-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f573e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
	--swp-i-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f573e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
	/* Social icons (footer strip + copyright bar): one outline pair, the same rounded square and stroke, used as
	   masks so each is painted in one colour (section 5). The viewBox is the icon's outer edge. */
	--swp-s-ig-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M17.5 6.5h.01'/%3E%3C/svg%3E");
	--swp-s-fb-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='5'/%3E%3Cpath d='M16.5 7.5H15a2 2 0 0 0-2 2V21M10 12.5h6'/%3E%3C/svg%3E");
	/* The gray strip's circles (Jay, 2026-10-20): no rounded-square frame (the circle is the frame) for Facebook, a
	   plain outline "f"; Instagram keeps its camera outline. Both in the same 21.43-unit viewBox drawn at 15px, so the
	   stroke is the same 1.4px: the Instagram body is 14px, the "f" the full 15px (a touch taller, so they look equal). */
	--swp-s-ig-strip-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1.29 1.29 21.43 21.43' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M17.5 6.5h.01'/%3E%3C/svg%3E");
	--swp-s-fb-strip-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1.29 1.29 21.43 21.43' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.2 2.3H15a4 4 0 0 0-4 4v15.4M7.6 9.8h7.2'/%3E%3C/svg%3E");
	--swp-i-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f573e' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E");
}

/* 2. Header (desktop): Wishlist / Account as quiet icons; the cart stays as live -------- */
/* The cart (truck image, count, "Truck / $0") keeps Flatsome's look exactly as live (Jay, 18b). */
/* Search keeps its live width (206px measured on 19 Oct) */
.swp-hf .header-main li.header-search-form {
	min-width: 206px;
}
.swp-hf .header-main .header-nav-main.nav-right {
	gap: 22px;
}
.swp-hf .header-main .nav-right > li:not(.cart-item) {
	margin: 0;
}
.swp-hf .header-main .nav-right > li:not(.cart-item) > a,
.swp-hf .header-main .nav-right > li:not(.cart-item) > .header-button > a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--swp-hf-green-dark);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.swp-hf .header-main .nav-right > li:not(.cart-item) > a:hover {
	color: #1f2a1e;
}
.swp-hf .header-main .nav-right > li:not(.cart-item) > a > i,
.swp-hf .header-main .nav-right > li:not(.cart-item) > .header-button > a > i {
	order: -1; /* icon before the label */
	display: inline-block;
	width: 22px;
	height: 22px;
	margin: 0;
	font-size: 0;
	line-height: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 22px 22px;
	top: 0;
}
.swp-hf .header-main .nav-right > li:not(.cart-item) > a > i::before {
	content: none;
}
.swp-hf .header-wishlist-icon i { background-image: var(--swp-i-heart); }
/* Account: Flatsome prints no icon next to "Login", so the link itself carries it as a background
   (left, 22px) and hides Flatsome's own icon when logged in. Not a ::before: that pseudo-element was
   restyled on every frame of the hover colour fade and could blink (round 18b). */
.swp-hf .header-main .account-item > a {
	min-height: 22px;
	padding-left: 29px !important;
	background: var(--swp-i-user) no-repeat left center / 22px 22px !important;
}
.swp-hf .header-main .nav-right > li.account-item > a > i {
	display: none; /* Flatsome's own icon when logged in */
}
/* Hover: colour only (Flatsome fades "all" properties on nav links) */
.swp-hf .header-main .nav-right > li:not(.cart-item) > a {
	transition: color .2s ease;
}

/* 2b. Header icon group (round 20): Wishlist, Login and the truck on one centre line ------------
   - All three items are 36px tall flex boxes centred on the logo/search row, 24px apart; icon,
     label and truck image share one centre line (inline-block links used to sit on the text
     baseline: Wishlist rode ~4px high, Login ~2px low).
   - Cart: the truck comes first, like the other icons, 7px from its label. Empty cart: the truck
     only. With items: the total ("$459") styled like the WISHLIST / LOGIN labels, plus Flatsome's
     count badge. "Truck /" is hidden (font-size 0 on the title; the price sets its own size).
     Empty = the truck's data-icon-label is 0 (:has, so cached pages are right before any JS), or
     .swp-cart-empty set by header-footer.js. Flatsome's AJAX cart fragments replace .cart-price and
     the truck's count, so both rules follow an add/remove without a reload.
   - Long account names (logged in, Flatsome shows the display name) are cut with an ellipsis.
   Live since 2026-10-19 (round 20); labels 11px. */
.swp-hf .header-main .header-nav-main.nav-right {
	align-items: center;
	gap: 24px;
}
.swp-hf .header-main .header-nav-main.nav-right > li.header-wishlist-icon,
.swp-hf .header-main .header-nav-main.nav-right > li.account-item,
.swp-hf .header-main .header-nav-main.nav-right > li.cart-item {
	display: flex;
	align-items: center;
	height: 36px;
	margin: 0;
	padding: 0;
}
.swp-hf .header-main .header-nav-main.nav-right > li.header-wishlist-icon > a,
.swp-hf .header-main .header-nav-main.nav-right > li.account-item > a,
.swp-hf .header-main .header-nav-main.nav-right > li.cart-item > a.header-cart-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 36px;
	min-height: 0;
	margin: 0;
	padding-top: 0;
	padding-bottom: 0;
	line-height: 22px;
}
.swp-hf .header-main .header-nav-main.nav-right > li > a > span {
	line-height: 22px;
}
/* Labels 11px (Jay, 19 Oct; was 12px), same 0.48px letter-spacing and #3f573e; the cart total matches.
   Superseded the same evening by section 2c (Title Case, 15px). */
.swp-hf .header-main .header-nav-main.nav-right > li.header-wishlist-icon > a,
.swp-hf .header-main .header-nav-main.nav-right > li.account-item > a {
	font-size: 11px;
	letter-spacing: .48px;
}
.swp-hf .header-main .header-nav-main.nav-right > li.account-item > a > span {
	max-width: 160px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.swp-hf .header-main .header-nav-main.nav-right > li.cart-item > a.header-cart-link {
	padding-left: 0;
	padding-right: 0;
}
.swp-hf .header-main .header-nav-main.nav-right .header-cart-icon {
	order: -1; /* truck before its label, like the other icons */
	flex: none;
	display: inline-flex;
	align-items: center;
	width: auto; /* Flatsome sizes this box for a 32px icon; the truck is 47px and used to spill out */
	min-width: 0;
	max-width: none;
	height: auto;
	margin: 0;
}
/* Same size as live (47 x 35), but as the image's real width: Flatsome caps it at 32px and an old
   base.css rule stretches it to 146%, so it used to spill out of its 32px box onto the label. */
.swp-hf .header-main .header-nav-main.nav-right .cart-img-icon {
	width: 47px;
	min-width: 0;
	max-width: none;
	height: auto;
	margin: 0;
}
/* Account and cart dropdowns (round 21). The items are 36px flex boxes (above), and a dropdown with no
   top of its own was then centred on its item, so the account menu opened half above it. Anchor both to
   the item's bottom. The account menu: every link the same colour with one hover colour (the active page
   was darker). Its list is WooCommerce's own (the "My Account" WP menu is empty since 19 Oct). */
.swp-hf .header-main .header-nav-main.nav-right > li.has-dropdown > .nav-dropdown {
	top: 100%;
}
.swp-hf .header-main .account-item .nav-dropdown > li > a,
.swp-hf .header-main .account-item .nav-dropdown > li.active > a {
	color: var(--swp-hf-green-dark);
}
.swp-hf .header-main .account-item .nav-dropdown > li > a:hover,
.swp-hf .header-main .account-item .nav-dropdown > li > a:focus-visible {
	color: #1f2a1e;
}
/* Wishlist count (round 21): Flatsome puts it on the heart as data-icon-label, and its badge (26px wide,
   centred on the icon) covered our line heart, so with items it looked like a filled heart with a box.
   Now a small badge on the heart's top-right corner in the truck badge's style (sage, white 11px bold,
   15px tall); anchored on its right, so 2-3 digits grow over the heart, and the label moves 6px right
   only while there is a count. Flatsome's own script updates data-icon-label after an AJAX add/remove. */
.swp-hf .header-main .header-nav-main .header-wishlist-icon i[data-icon-label] {
	margin-right: 6px;
}
.swp-hf .header-main .header-nav-main .header-wishlist-icon i[data-icon-label]::after {
	top: -7px;
	right: -8px;
	left: auto;
	box-sizing: border-box;
	width: auto;
	min-width: 15px;
	height: 15px;
	margin: 0;
	padding: 0 4px;
	font-size: 11px;
	font-weight: 700;
	line-height: 15px;
	text-align: center;
	border-radius: 1px;
}
/* Flatsome's count badge stays where it is live: on the truck's cargo box, 2px from its left
   (it is placed from the box's right edge, which moved when the box got the truck's real width). */
.swp-hf .header-main .header-nav-main.nav-right .header-cart-icon::after {
	left: 2px;
	right: auto;
}
.swp-hf .header-main .header-nav-main.nav-right .header-cart-title {
	display: inline-flex; /* centres the price; with font-size 0 a text line would sit it 2px high */
	align-items: center;
	height: 22px;
	margin: 0;
	font-size: 0; /* hides "Truck /" */
	line-height: 22px;
}
.swp-hf .header-main .header-nav-main.nav-right .header-cart-title .cart-price,
.swp-hf .header-main .header-nav-main.nav-right .header-cart-title .cart-price * {
	color: var(--swp-hf-green-dark);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .48px;
	line-height: 22px;
}
.swp-hf .header-main .header-nav-main.nav-right > li.cart-item:has(.header-cart-icon[data-icon-label="0"]) .header-cart-title,
.swp-hf .header-main .header-nav-main.nav-right > li.cart-item.swp-cart-empty .header-cart-title {
	display: none;
}

/* 2c. Labels in Title Case + oak wishlist heart (Jay, live 2026-10-19; overrides the 11px capitals above): ----
   - Labels in Title Case: "Wishlist", "Hi, Jay" / "My Account", "Login" and the cart total at 15px, #3f573e,
     no uppercase, normal letter-spacing. The flex gap (24px) keeps the three items evenly spaced.
   - Wishlist heart: the line heart while the wishlist is empty; with 1+ items a light-oak heart (SVG pattern:
     base #c8a27a, grain #9c7650), no outline, same 22px. Keyed off Flatsome's data-icon-label, which its
     wishlist.js sets/removes after each YITH AJAX add/remove and header-footer.js sets on cached pages. */
.swp-hf {
	--swp-i-heart-oak: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cpattern id='o' width='24' height='5' patternUnits='userSpaceOnUse' patternTransform='rotate(-14)'%3E%3Crect width='24' height='5' fill='%23c8a27a'/%3E%3Cpath d='M0 1.5c3 .6 6-.5 9 0s6 .9 9 .2 4-.4 6-.1' fill='none' stroke='%239c7650' stroke-width='.6'/%3E%3Cpath d='M0 3.8c4-.4 7 .5 11 .1s8-.5 13 .2' fill='none' stroke='%239c7650' stroke-width='.35' opacity='.75'/%3E%3C/pattern%3E%3C/defs%3E%3Cpath fill='url(%23o)' d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
}
.swp-hf .header-main .header-nav-main.nav-right > li.header-wishlist-icon > a,
.swp-hf .header-main .header-nav-main.nav-right > li.account-item > a,
.swp-hf .header-main .header-nav-main.nav-right .header-cart-title .cart-price,
.swp-hf .header-main .header-nav-main.nav-right .header-cart-title .cart-price * {
	font-size: 15px;
	letter-spacing: normal;
	text-transform: none;
}
.swp-hf .header-wishlist-icon i.wishlist-icon[data-icon-label] {
	background-image: var(--swp-i-heart-oak);
}

/* 3. Phone header: the menu icon in brand green (the cart truck stays as live) ------------ */
@media (max-width: 849px) {
	.swp-hf .header-main .mobile-nav .nav-icon > a > i {
		display: inline-block;
		width: 26px;
		height: 26px;
		font-size: 0;
		line-height: 0;
		background: var(--swp-i-menu) no-repeat center / 26px 26px;
	}
	.swp-hf .header-main .mobile-nav .nav-icon > a > i::before {
		content: none;
	}
}
/* 4. Footer: project band (3 cards) ---------------------------------------------- */
.swp-hf .absolute-footer {
	display: none; /* the legal bar is part of the UX Block (section 7) */
}
.swp-ft-band {
	--swp-c-quote: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23557353' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='4' x='8' y='2' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2M12 11h4M12 16h4M8 11h.01M8 16h.01'/%3E%3C/svg%3E");
	--swp-c-ask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23557353' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3M12 17h.01'/%3E%3C/svg%3E");
	--swp-c-samples: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23557353' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z'/%3E%3Cpath d='m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65M22 12.65l-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65'/%3E%3C/svg%3E");
}
.swp-ft-band__title h2 {
	margin: 0 0 6px;
	color: var(--swp-hf-deep, #2f3f2e);
	font-size: 24px;
	text-align: center;
}
.swp-ft-cards > .col {
	padding-bottom: 0;
}
.swp-ft-card > .col-inner {
	position: relative;
	height: 100%;
	padding: 24px 22px 22px;
	background: #fff;
	border: 1px solid #e3e6e1;
	text-align: center;
}
.swp-ft-card > .col-inner::before {
	content: "";
	display: block;
	width: 34px;
	height: 34px;
	margin: 0 auto 10px;
	background: no-repeat center / contain;
}
.swp-ft-card--quote > .col-inner::before { background-image: var(--swp-c-quote); }
.swp-ft-card--ask > .col-inner::before { background-image: var(--swp-c-ask); }
.swp-ft-card--samples > .col-inner::before { background-image: var(--swp-c-samples); }
.swp-ft-card h3 {
	margin: 0 0 4px;
	color: #2f3f2e;
	font-size: 18px;
}
.swp-ft-card p {
	margin: 0 0 14px;
	color: #666;
	font-size: 14px;
}
.swp-ft-card .button {
	min-height: 38px;
	margin: 0;
	line-height: 34px;
	border: 2px solid #7a9a74; /* darker sage with white bold text (Jay, 19 Oct) */
	border-radius: 3px;
	background: #7a9a74;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
}
.swp-ft-card .button.is-outline {
	border-color: #7a9a74; /* the samples card too: all three buttons alike */
	background: #7a9a74;
	color: #fff;
}
.swp-ft-card .button:focus-visible {
	border-color: #8aab82;
	background: #8aab82;
	color: #fff;
	box-shadow: none;
}
/* Hover colour only for real pointers: on touch screens a tapped card kept it (sticky :hover) and, on phones,
   it filled the card's invisible full-size button over the title and text (see 8b). */
@media (hover: hover) {
	.swp-ft-card .button:hover {
		border-color: #8aab82;
		background: #8aab82;
		color: #fff;
		box-shadow: none;
	}
}

/* 4b. "Ask a question" card: inline form ([swp_quick_question], header-footer.js) ----- */
.swp-ft-card--ask > .col-inner {
	position: relative;
}
.swp-ft-qq-wrap {
	width: 100%;
	margin: 0;
}
.swp-ft-qq-wrap > p:empty {
	display: none;
}
.swp-ft-qq[hidden],
.swp-ft-qq-thanks {
	display: none;
}
.swp-ft-card.is-sent .swp-ft-qq-thanks {
	display: block;
	margin: 6px 0 0;
	color: #2f3f2e;
	font-size: 15px;
	font-weight: 700;
}
.swp-ft-card.is-open .swp-ft-ask,
.swp-ft-card.is-sent .swp-ft-ask {
	display: none;
}
.swp-ft-qq {
	margin: 4px 0 0;
	text-align: left;
}
.swp-ft-qq__close {
	position: absolute;
	top: 4px;
	right: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--swp-hf-green-dark);
}
.swp-ft-qq__close svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
}
.swp-ft-qq__loading {
	margin: 0;
	color: #666;
	font-size: 13px;
}
.swp-ft-qq form {
	margin: 0;
}
.swp-ft-qq .hs-form-field {
	margin: 0 0 10px;
}
.swp-ft-qq .hs-form-field > label {
	display: block;
	margin: 0 0 3px;
	color: #2f3f2e;
	font-size: 13px;
	font-weight: 700;
}
.swp-ft-qq .hs-form-required {
	color: #b3261e;
}
.swp-ft-qq .hs-input {
	width: 100% !important;
	max-width: none;
	height: 40px;
	margin: 0;
	border: 1px solid #c7d0c4;
	border-radius: 0;
	box-shadow: none;
	font-size: 16px; /* no iOS zoom */
}
.swp-ft-qq textarea.hs-input {
	height: 88px;
	min-height: 88px;
	padding-top: 8px;
}
.swp-ft-qq .hs-input:focus {
	border-color: var(--swp-hf-green-dark);
	box-shadow: inset 0 0 0 1px var(--swp-hf-green-dark);
}
.swp-ft-qq .hs-error-msgs {
	margin: 3px 0 0;
	padding: 0;
	list-style: none;
	color: #b3261e;
	font-size: 12px;
}
.swp-ft-qq .hs-error-msgs li {
	margin: 0;
}
.swp-ft-qq .hs_submit {
	text-align: center;
}
/* LEGACY: base.css "input.hs-button.primary.large" styles every HubSpot button with !important
   (light green #70926e, 4px corners, 13px, 6px 8px padding, 70–150px wide), so the card's own
   look needs !important and the panel's id to outrank it (it had shown the old look since go-live). */
#swp-ft-qq .hs_submit input.hs-button {
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	height: auto !important;
	min-height: 38px !important;
	margin: 2px 0 0;
	padding: 0 22px !important;
	border: 2px solid var(--swp-hf-green-dark) !important;
	border-radius: 3px !important; /* as the card buttons */
	background-color: var(--swp-hf-green-dark) !important;
	color: #fff !important;
	font-size: 14px !important;
	font-weight: 700;
	line-height: 34px !important;
	text-transform: none !important;
	letter-spacing: 0;
	cursor: pointer;
}
#swp-ft-qq .hs_submit input.hs-button:hover,
#swp-ft-qq .hs_submit input.hs-button:focus-visible {
	background-color: #2f3f2e !important;
	border-color: #2f3f2e !important;
}
#swp-ft-qq .hs_submit input.hs-button.swp-has-arrow {
	/* The right side is 18px wider than the left (triangle + gap), so text + triangle stay centred. */
	padding-left: 22px !important;
	padding-right: 40px !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 .5 9.5 5 2 9.5z' fill='%23fff'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-size: 10px 10px !important;
	background-position: calc(50% + var(--swp-arrow-x, 0px)) 50% !important;
	transition: background-color .15s ease-out, border-color .15s ease-out, background-position .15s ease-out;
}
#swp-ft-qq .hs_submit input.hs-button.swp-has-arrow:hover,
#swp-ft-qq .hs_submit input.hs-button.swp-has-arrow:focus-visible {
	background-position: calc(50% + var(--swp-arrow-x, 0px) + 2px) 50% !important;
}
@media (prefers-reduced-motion: reduce) {
	#swp-ft-qq .hs_submit input.hs-button.swp-has-arrow:hover,
	#swp-ft-qq .hs_submit input.hs-button.swp-has-arrow:focus-visible {
		background-position: calc(50% + var(--swp-arrow-x, 0px)) 50% !important;
	}
}
.swp-ft-qq .submitted-message {
	display: none; /* the card shows its own thank-you (.swp-ft-qq-thanks) */
}

/* 5. Sliver: social on the left, review on the right -------------------------------
   Gray band (Jay, option B, 2026-10-19; was green #557353). The background is the section's colour in
   UX Builder (Footer block > "Footer - Social and reviews": #dcdfd9, not "dark"); text, circles and the
   button are styled here. Phones: stacked and centred (section 8). */
.swp-ft-sliver {
	--swp-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f2c14e'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3C/svg%3E");
	color: #3f4a3e;
}
.swp-ft-sliver .row {
	align-items: center;
}
.swp-ft-sliver .col {
	padding-bottom: 0;
}
.swp-ft-sliver p {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	margin: 0;
	color: #3f4a3e;
	font-size: 14px;
}
.swp-ft-sliver__review p {
	justify-content: flex-end;
}
.swp-ft-sliver strong {
	color: var(--swp-hf-deep);
	font-weight: 700;
}
/* Social links (here and in the copyright bar, section 9): Facebook + Instagram as a matched pair (Jay, live
   2026-10-20). Both icons share one outline set, rounded square and stroke (section 1). Each icon is a mask on
   ::before painted in one colour, so the link itself keeps its focus outline. The link text is hidden;
   aria-label in the Footer UX Block. In the gray band: 32px green circles with a white icon about 14–15px, without
   the rounded-square frame on Facebook (masks: section 1, "strip"). */
.swp-ft-social {
	position: relative;
	display: inline-block;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: var(--swp-hf-green);
	color: transparent;
	font-size: 0;
	vertical-align: middle;
}
.swp-ft-social::before {
	content: "";
	position: absolute;
	inset: 8px;
	background-color: #fff;
	-webkit-mask: var(--swp-s-ig-mask) no-repeat center / contain;
	mask: var(--swp-s-ig-mask) no-repeat center / contain;
}
.swp-ft-social--facebook::before {
	-webkit-mask-image: var(--swp-s-fb-mask);
	mask-image: var(--swp-s-fb-mask);
}
.swp-ft-sliver .swp-ft-social::before {
	inset: 8.5px;
	-webkit-mask-image: var(--swp-s-ig-strip-mask);
	mask-image: var(--swp-s-ig-strip-mask);
}
.swp-ft-sliver .swp-ft-social--facebook::before {
	-webkit-mask-image: var(--swp-s-fb-strip-mask);
	mask-image: var(--swp-s-fb-strip-mask);
}
.swp-ft-sliver .swp-ft-social:hover,
.swp-ft-sliver .swp-ft-social:focus-visible {
	background-color: var(--swp-hf-green-dark);
}
.swp-ft-sliver .swp-ft-social:focus-visible {
	outline: 2px solid var(--swp-hf-green-dark);
	outline-offset: 2px;
}
.swp-ft-stars {
	display: inline-block;
	width: 90px;
	height: 16px;
	background: var(--swp-star) repeat-x 0 0 / 18px 16px;
}
.swp-ft-sliver .button {
	margin: 0 0 0 4px;
	padding: 0 14px;
	min-height: 32px;
	border: 1.5px solid var(--swp-hf-deep);
	border-radius: 0;
	background: transparent;
	color: var(--swp-hf-deep);
	font-size: 13px;
	font-weight: 700;
	line-height: 29px;
	text-transform: none;
	letter-spacing: 0;
}
.swp-ft-sliver .button:hover,
.swp-ft-sliver .button:focus-visible {
	background: var(--swp-hf-deep);
	color: #fff;
	box-shadow: none;
}
/* 6. Main footer: brand + ZIP box, 4 link columns (layout; colours in section 9) ---------------------------- */
.swp-ft-main {
	font-size: 14px;
}
.swp-ft-logo {
	display: block;
	width: 190px;
	height: auto;
	margin: 0 0 12px;
}
.swp-ft-brand p {
	margin: 0 0 16px;
	line-height: 1.5;
}
/* Link columns ([swp_footer_menu]) */
.swp-fl__title {
	margin: 0 0 10px;
	font-size: 13px;
	line-height: 1.3;
}
.swp-fl__toggle {
	display: block;
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-weight: 700;
	letter-spacing: .06em;
	text-align: left;
	text-transform: uppercase;
	cursor: default;
}
.swp-ft-main .swp-fl__list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.swp-ft-main .swp-fl__list li {
	margin: 0 0 7px;
	padding: 0;
	list-style: none;
	line-height: 1.35;
}
.swp-fl__list a {
	font-size: 14px;
}
/* Catalog links: small book icon (menu item CSS class "swp-fl-book") */
.swp-fl-book > a::before {
	content: "";
	display: inline-block;
	width: 15px;
	height: 15px;
	margin: 0 6px 0 0;
	vertical-align: -2px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23557353' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2zM22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* ZIP box (same widget and saved ZIP as the top bar) */
.swp-zip-footer .swp-zip {
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	font-size: 14px;
}
.swp-zip-footer .swp-zip__entry {
	flex-wrap: wrap;
	justify-content: flex-start;
	width: auto;
}
.swp-zip-footer .swp-zip__entry > .swp-zip__pin {
	display: none;
}
.swp-zip-footer .swp-zip__label {
	display: block;
	flex-basis: 100%;
	font-weight: 700;
}
.swp-zip-footer .swp-zip__or {
	display: inline;
}
.swp-zip-footer .swp-zip__pill {
	flex: none;
}
.swp-zip-footer .swp-zip .swp-zip__input {
	width: 150px;
	flex: none;
}
.swp-zip-footer .swp-zip__geo-long {
	display: inline;
}
.swp-zip-footer .swp-zip__geo-short {
	display: none;
}
.swp-zip-footer .swp-zip__result {
	flex-wrap: wrap;
	justify-content: flex-start;
	width: auto;
	gap: 4px 8px;
	padding-right: 0;
}
/* The X stays on the row, about 8px after the last item (a 32px tap area that takes 16px of the row).
   In a narrow column the row wraps before the last item, and header-footer.js keeps that item, its
   dot and the X together (.swp-zip__tail), so the X is never alone on a line; a dot that would start
   the new line is hidden (.is-wrapped). */
.swp-zip-footer .swp-zip__tail {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}
.swp-zip-footer .swp-zip__tail.is-wrapped {
	flex-basis: 100%; /* the last item and the X start the second line together */
}
.swp-zip-footer .swp-zip__tail.is-wrapped > .swp-zip__sep {
	display: none;
}
.swp-zip-footer .swp-zip .swp-zip__change {
	position: static;
	width: 32px;
	height: 32px;
	margin: -8px;
}

/* 7. Legal bar (layout; colours in section 9) --------------------------------------------- */
.swp-ft-legal {
	font-size: 12px;
}
.swp-ft-legal .row {
	align-items: center;
}
.swp-ft-legal .col {
	padding-bottom: 0;
}
.swp-ft-legal p {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	margin: 0;
}
.swp-ft-legal__right p {
	justify-content: flex-end;
	column-gap: 14px;
}
.swp-ft-flag {
	display: inline-block;
	width: 19px;
	height: 10px;
	margin-right: -8px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7410 3900'%3E%3Crect width='7410' height='3900' fill='%23b22234'/%3E%3Cpath d='M0 450h7410M0 1050h7410M0 1650h7410M0 2250h7410M0 2850h7410M0 3450h7410' stroke='%23fff' stroke-width='300'/%3E%3Crect width='2964' height='2100' fill='%233c3b6e'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* 8. Phones ------------------------------------------------------------------------ */
@media (max-width: 849px) {
	/* Project band: 3 tap rows (icon, title, line, ›); the whole row is the link */
	.swp-ft-band__title h2 {
		font-size: 20px;
		text-align: left;
	}
	.swp-ft-cards > .col {
		padding-bottom: 10px;
	}
	.swp-ft-card > .col-inner {
		display: grid;
		grid-template-columns: 30px 1fr 14px;
		align-items: center;
		column-gap: 14px;
		padding: 14px 16px;
		text-align: left;
	}
	.swp-ft-card > .col-inner::before {
		grid-row: 1;
		width: 30px;
		height: 30px;
		margin: 0;
	}
	.swp-ft-card > .col-inner::after {
		content: "\203A";
		grid-row: 1;
		grid-column: 3;
		color: var(--swp-hf-green);
		font-size: 26px;
		line-height: 1;
	}
	.swp-ft-card h3 {
		font-size: 16px;
	}
	.swp-ft-card p {
		margin: 0;
		font-size: 13px;
	}
	.swp-ft-card .button,
	.swp-ft-card .button.is-outline {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		max-width: none;
		border: 0;
		background: transparent;
		color: transparent;
		font-size: 0;
	}
	.swp-ft-card .button:focus-visible {
		outline: 2px solid var(--swp-hf-green-dark);
		outline-offset: -2px;
		background: transparent;
	}
	/* Ask a question: the form / thank-you open under the row, across its full width */
	.swp-ft-card .swp-ft-qq-wrap {
		grid-column: 1 / -1;
	}
	.swp-ft-card--ask.is-open > .col-inner::after,
	.swp-ft-card--ask.is-sent > .col-inner::after {
		content: none;
	}
	.swp-ft-card--ask.is-open .swp-ft-qq {
		margin-top: 12px;
	}
	.swp-ft-qq__close {
		top: 8px;
		right: 6px;
	}
	/* Sliver: stacked */
	.swp-ft-sliver p,
	.swp-ft-sliver__review p {
		justify-content: center;
		text-align: center;
	}
	.swp-ft-sliver__social {
		padding-bottom: 10px !important;
	}
	/* Link columns as accordions, then the brand/ZIP column */
	.swp-ft-main .swp-ft-brand {
		order: 9;
		padding-top: 18px;
	}
	.swp-ft-main .swp-ft-col {
		padding-bottom: 0;
	}
	.swp-fl {
		border-bottom: 1px solid #e3e6e0;
	}
	.swp-fl__title {
		margin: 0;
	}
	.swp-fl__toggle {
		position: relative;
		padding: 14px 30px 14px 0;
		cursor: pointer;
	}
	.swp-fl__toggle::after {
		content: "+";
		position: absolute;
		top: 50%;
		right: 4px;
		margin-top: -11px;
		font-size: 20px;
		font-weight: 400;
		line-height: 22px;
	}
	.swp-fl.is-open .swp-fl__toggle::after {
		content: "\2212";
	}
	.swp-fl__links {
		display: none;
		padding: 0 0 12px;
	}
	.swp-fl.is-open .swp-fl__links {
		display: block;
	}
	.swp-ft-main .swp-fl__list li {
		margin: 0;
	}
	.swp-fl__list a {
		display: block;
		padding: 7px 0; /* bigger tap targets */
		font-size: 15px;
	}
	/* Legal bar: stacked, centred */
	.swp-ft-legal p,
	.swp-ft-legal__right p {
		justify-content: center;
		text-align: center;
	}
	.swp-ft-legal__left {
		padding-bottom: 8px !important;
	}
}

/* 8b. Footer cards on touch (Jay, live 2026-10-20) ------------------------------------------------------------
   Cause of the blank green cards (iPhone): on phones each card's button is stretched, transparent, over the whole
   card (section 8). After a tap, the button kept a "sticky" :hover / :focus (touch screens keep them until you
   tap elsewhere), and the desktop hover colour (section 4, #8aab82) or Flatsome's outline-button hover/focus
   colour (#70926e, "Request samples") filled that overlay and covered the title, icon and text.
   - The overlay stays transparent in every state (hover, active, focus); keyboard focus keeps its outline.
   - Touch press feedback: only while the finger is down (:active), the card turns #9ebc96 with white text and icon.
   - While the footer question form is open, the phone "Quote Request" bar is hidden (html.swp-ft-qq-open). */
@media (max-width: 849px) {
	.swp-hf .swp-ft-cards .swp-ft-card .button,
	.swp-hf .swp-ft-cards .swp-ft-card .button:is(:hover, :active, :focus, :focus-visible) {
		border-color: transparent !important; /* beats section 4's hover and Flatsome's .is-outline hover/focus */
		background: transparent !important;
		box-shadow: none !important;
		color: transparent !important;
	}
	.swp-hf .swp-ft-cards .swp-ft-card:has(.button:active) > .col-inner {
		border-color: #9ebc96;
		background: #9ebc96;
	}
	.swp-hf .swp-ft-cards .swp-ft-card:has(.button:active) h3,
	.swp-hf .swp-ft-cards .swp-ft-card:has(.button:active) p,
	.swp-hf .swp-ft-cards .swp-ft-card:has(.button:active) > .col-inner::after {
		color: #fff;
	}
	.swp-hf .swp-ft-cards .swp-ft-card:has(.button:active) > .col-inner::before {
		filter: brightness(0) invert(1); /* the green line icon in white */
	}
}
.swp-ft-qq-open .swp-quote-bar {
	display: none !important;
}

/* 9. Colours: white main footer, dark green copyright bar (Jay, design option E, live 2026-10-20) ----------------
   Backgrounds are the sections' colours in UX Builder (Footer block > "Footer - Links": #ffffff, "Dark" off;
   "Footer - Legal": #2f3f2e, "Dark" on). The logo is the header's official green logo (Media Library
   Stonewood_Horizontal_Logo_Green_RGB.svg, brand green #70926e; logos are exempt from text contrast).
   Scoped to body.swp-hf so these rules beat Flatsome's late .dark colours (the copyright bar stays "Dark").
   The "Tell us about your project" band (4) and the social/review strip (5) keep their own colours.
   Contrast (WCAG AA): on white, headings #3f573e 7.94:1, links #2f3f2e 11.22:1, hover #557353 5.3:1 (underlined),
   tagline/delivery #3d4a3b 9.37:1, icons #557353 5.3:1, focus outline #3f573e 7.94:1; copyright bar #dfe6dc on
   #2f3f2e 8.81:1, hover and focus outline white 11.22:1. */
.swp-hf .swp-ft-main {
	color: #3d4a3b;
}
.swp-hf .swp-ft-main a {
	color: #2f3f2e;
}
.swp-hf .swp-ft-main a:hover,
.swp-hf .swp-ft-main a:focus-visible {
	color: #557353;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.swp-hf .swp-ft-main :focus-visible {
	outline: 2px solid #3f573e;
	outline-offset: 2px;
}
.swp-hf .swp-ft-brand p {
	color: #3d4a3b;
}
.swp-hf .swp-fl__toggle,
.swp-hf .swp-fl__toggle::after {
	color: #3f573e;
}
/* ZIP box: "Delivery for your area" (no ZIP yet) and "Local Delivery · phone · Visit Us ✕" */
.swp-hf .swp-zip-footer .swp-zip,
.swp-hf .swp-zip-footer .swp-zip__or,
.swp-hf .swp-zip-footer .swp-zip__result {
	color: #3d4a3b;
}
.swp-hf .swp-zip-footer .swp-zip__label {
	color: #2f3f2e;
}
.swp-hf .swp-zip-footer .swp-zip__pin,
.swp-hf .swp-zip-footer .swp-zip__tel-icon {
	stroke: #557353;
}
.swp-hf .swp-zip-footer .swp-zip__pill {
	border-color: #2f3f2e;
}
.swp-hf .swp-zip-footer .swp-zip a.swp-zip__phone {
	color: #2f3f2e;
	font-weight: 700;
}
.swp-hf .swp-zip-footer .swp-zip a.swp-zip__pillbtn {
	border: 1.5px solid #2f3f2e;
	background: transparent;
	color: #2f3f2e;
}
.swp-hf .swp-zip-footer .swp-zip a.swp-zip__pillbtn:hover,
.swp-hf .swp-zip-footer .swp-zip a.swp-zip__pillbtn:focus-visible {
	background: #2f3f2e;
	color: #fff;
	text-decoration: none;
}
.swp-hf .swp-zip-footer .swp-zip .swp-zip__change {
	color: #3d4a3b;
}
.swp-hf .swp-zip-footer .swp-zip__error {
	color: #b3261e;
}
/* Copyright bar: text and icons #dfe6dc, hover white */
.swp-hf .swp-ft-legal,
.swp-hf .swp-ft-legal a {
	color: #dfe6dc;
}
.swp-hf .swp-ft-legal a:hover,
.swp-hf .swp-ft-legal a:focus-visible {
	color: #fff;
}
.swp-hf .swp-ft-legal a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}
/* Its social icons (the matched pair, section 5) without circles: 18px icon, 24px tap area; the -3px margins
   make the visible gaps 14px (section 7). */
.swp-hf .swp-ft-legal .swp-ft-social {
	width: 24px;
	height: 24px;
	margin: 0 -3px;
	border-radius: 3px;
	background: none;
}
.swp-hf .swp-ft-legal .swp-ft-social::before {
	inset: 3px;
	background-color: #dfe6dc;
}
.swp-hf .swp-ft-legal .swp-ft-social:is(:hover, :focus-visible)::before {
	background-color: #fff;
}