/* ==========================================================================
   Quote / sample / Quick Contact / newsletter popups + product page quote button
   (2026-10 redesign). Markup: [swp_quote_form] in inc/features/quote-popups.php.
   --------------------------------------------------------------------------
   Contents: 1. Tokens  2. Popup frame  3. Header band  4. Body + text  5. HubSpot form
             6. Thank-you  7. Phones (full-height sheet)  8. Product page button + links
             9. Phone "Quote Request" bar  10. Open / close animation  11. Desktop drawer
   "LEGACY" marks the few !important declarations that beat the old popup rules in base.css
   (sections 26.1/26.2 and the 600px popup block). They go when those rules are removed.
   :is(#swp-qp, .swp-qp) matches .swp-qp but counts as an ID: the old rules use #stone-quote /
   #pineflooring-quote selectors, and HubSpot injects per-form styles (some !important).
   ========================================================================== */

/* 1. Tokens ------------------------------------------------------------------ */
.swp-qp,
.swp-quote-cta-wrap,
.swp-quote-bar {
	--swp-green: #557353;
	--swp-green-dark: #3f573e;
	--swp-band: #eef3ec;
	--swp-line: #c7d0c4;
	--swp-text: #1f2a1e;
	--swp-muted: #4a5548;
	--swp-accent: #cc6633;
}

/* 2. Popup frame -------------------------------------------------------------- */
.lightbox-content.swp-qp-box:is(#swp-qp, .swp-qp-box) {
	padding: 0;
	max-width: 600px;
	margin: 20px auto;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.swp-qp-wrap .mfp-close {
	display: none; /* the band has its own 44px close button */
}
.swp-qp {
	color: var(--swp-text);
	font-family: Lato, "Helvetica Neue", Arial, sans-serif;
	text-align: left;
}

/* 3. Header band (photo, eyebrow, name, watermark) ------------------------------ */
.swp-qp__band {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: flex;
	align-items: center;
	gap: 18px;
	min-height: 72px;
	padding: 22px 64px 22px 32px;
	background: var(--swp-band);
	border-bottom: 1px solid #d9e3d6;
}
.swp-qp__thumb {
	flex-shrink: 0;
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: 8px;
}
.swp-qp__head {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}
.swp-qp__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--swp-green);
}
.swp-qp__dot {
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--swp-accent);
}
.swp-qp__name {
	font-size: 21px;
	font-weight: 900;
	line-height: 1.2;
}
.swp-qp__sub {
	font-size: 14px;
	color: var(--swp-muted);
}
.swp-qp__mark {
	position: absolute;
	z-index: -1;
	right: -46px;
	top: -38px;
	width: 210px;
	height: 210px;
	color: #70926e;
	opacity: .13;
	pointer-events: none;
}
.swp-qp__close {
	position: absolute;
	top: 6px;
	right: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--swp-text);
	cursor: pointer;
}
.swp-qp__close:hover,
.swp-qp__close:focus-visible {
	background: rgba(255, 255, 255, .6);
}
.swp-qp__close svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

/* 4. Body + editable text (UX Block "Popup - … text") ------------------------------ */
.swp-qp__body {
	padding: 26px 32px 28px;
}
.swp-qp__intro h2,
.swp-qp__intro h3 {
	margin: 0 0 6px;
	font-size: 24px;
	font-weight: 900;
	line-height: 1.2;
	color: var(--swp-text);
	text-transform: none;
	letter-spacing: 0;
}
.swp-qp__intro p {
	margin: 0 0 18px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--swp-muted);
}
.swp-qp__trust {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid #e3e8e1;
	font-size: 14px;
	color: var(--swp-muted);
}
.swp-qp__trust p {
	margin: 0;
}
.swp-qp__loading {
	margin: 20px 0;
	color: var(--swp-muted);
}

/* 5. HubSpot form (v2 embed, HubSpot's own CSS switched off) --------------------- */
:is(#swp-qp, .swp-qp) form fieldset {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 16px;
	max-width: none !important; /* HubSpot sets max-width on fieldsets */
	margin: 0 0 14px;
	padding: 0;
	border: 0;
}
:is(#swp-qp, .swp-qp) form fieldset.swp-hidden-row {
	display: none; /* only hidden fields inside; their values are still submitted */
}
:is(#swp-qp, .swp-qp) form fieldset.form-columns-1 {
	grid-template-columns: minmax(0, 1fr);
}
:is(#swp-qp, .swp-qp) form fieldset.form-columns-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
:is(#swp-qp, .swp-qp) form fieldset .hs-form-field {
	width: auto !important; /* HubSpot inline widths per column */
	float: none !important;
	margin: 0;
}
:is(#swp-qp, .swp-qp) form .hs-form-field > label {
	display: block;
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 700;
	color: var(--swp-text);
}
:is(#swp-qp, .swp-qp) form .hs-form-required {
	display: none; /* no markers: required fields have no asterisk, optional ones no "(optional)" */
}
:is(#swp-qp, .swp-qp) form .hs-field-desc {
	margin: 0 0 6px;
	font-size: 13px;
	color: var(--swp-muted);
}
:is(#swp-qp, .swp-qp) form .input {
	margin: 0 !important; /* HubSpot's right margin on inputs */
}
:is(#swp-qp, .swp-qp) form input.hs-input:not([type="checkbox"]):not([type="radio"]),
:is(#swp-qp, .swp-qp) form select.hs-input,
:is(#swp-qp, .swp-qp) form textarea.hs-input {
	width: 100% !important; /* LEGACY: base.css 600px block + HubSpot widths */
	max-width: 100%;
	height: 46px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--swp-line);
	border-radius: 6px;
	box-shadow: none;
	background: #fff;
	color: var(--swp-text);
	font: inherit;
	font-size: 16px; /* no iOS zoom on focus */
	box-sizing: border-box;
}
:is(#swp-qp, .swp-qp) form textarea.hs-input {
	height: auto;
	min-height: 92px;
	padding: 10px 12px;
	resize: vertical;
}
:is(#swp-qp, .swp-qp) form input.hs-input:focus,
:is(#swp-qp, .swp-qp) form select.hs-input:focus,
:is(#swp-qp, .swp-qp) form textarea.hs-input:focus {
	border-color: var(--swp-green);
	outline: 2px solid rgba(85, 115, 83, .25);
	outline-offset: 0;
}
:is(#swp-qp, .swp-qp) form input::placeholder,
:is(#swp-qp, .swp-qp) form textarea::placeholder {
	color: #7d877a;
}
/* Phone: no country picker (US +1 default), so the field never overflows */
:is(#swp-qp, .swp-qp) .hs-fieldtype-phonenumber div.hs-input {
	display: block !important; /* LEGACY: base.css 26.2 makes this a flex row */
	width: 100% !important;    /* HubSpot style: the wrapper is also .hs-input */
	height: auto !important;
	padding: 0 !important;
	border: 0 !important;
}
:is(#swp-qp, .swp-qp) .hs-fieldtype-phonenumber input.hs-input {
	display: block !important; /* LEGACY: base.css 26.2 (flex) */
}
:is(#swp-qp, .swp-qp) .hs-fieldtype-phonenumber select,
:is(#swp-qp, .swp-qp) .hs-fieldtype-intl-phone select {
	display: none !important; /* LEGACY: base.css 26.2 sizes the country select */
}
:is(#swp-qp, .swp-qp) .hs-fieldtype-phonenumber input[type="tel"],
:is(#swp-qp, .swp-qp) .hs-fieldtype-intl-phone input[type="tel"] {
	width: 100% !important; /* LEGACY: base.css 26.2 */
	min-width: 0 !important;
	float: none !important;
}
/* Radios (shiplap unit) and checkboxes (stone "interested in samples") */
:is(#swp-qp, .swp-qp) form .inputs-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
:is(#swp-qp, .swp-qp) form .inputs-list li {
	margin: 0;
}
:is(#swp-qp, .swp-qp) form .inputs-list label {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	margin: 0;
	font-size: 15px;
	font-weight: 400;
}
:is(#swp-qp, .swp-qp) form .inputs-list input {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--swp-green);
}
/* Errors */
:is(#swp-qp, .swp-qp) form .hs-error-msgs {
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
}
:is(#swp-qp, .swp-qp) form .hs-error-msg,
:is(#swp-qp, .swp-qp) form .hs-main-font-element {
	font-size: 13px;
	font-weight: 400;
	color: #b3261e;
}
:is(#swp-qp, .swp-qp) form .hs-input.invalid.error {
	border-color: #b3261e;
}
/* Submit: "Request a quote" / "Send" / "Request samples" (text set in HubSpot) */
:is(#swp-qp, .swp-qp) form .hs_submit {
	margin-top: 4px;
}
:is(#swp-qp, .swp-qp) form .hs_submit .actions {
	margin: 0;
	padding: 0;
}
:is(#swp-qp, .swp-qp) form input[type="submit"].hs-button {
	display: block !important;   /* LEGACY: base.css 26.2 (inline-block) */
	width: 100% !important;      /* LEGACY: base.css 26.2 (auto, max 150px) */
	max-width: none !important;  /* LEGACY */
	min-width: 0 !important;     /* LEGACY */
	height: 52px !important;     /* LEGACY: base.css 26.2 (auto) */
	margin: 0;
	padding: 0 16px !important;  /* LEGACY */
	border: 0;
	border-radius: 6px !important;  /* LEGACY */
	background: var(--swp-green) !important;  /* LEGACY: #70926e */
	color: #fff !important;
	font-family: inherit;
	font-size: 17px !important;  /* LEGACY: 13px */
	font-weight: 700;
	line-height: 52px !important; /* LEGACY */
	letter-spacing: 0;
	text-transform: none !important; /* LEGACY: capitalize */
	cursor: pointer;
}
:is(#swp-qp, .swp-qp) form input[type="submit"].hs-button:hover,
:is(#swp-qp, .swp-qp) form input[type="submit"].hs-button:focus-visible {
	background: var(--swp-green-dark) !important; /* LEGACY */
}
/* Submit arrow: a small white "play" triangle (10px) 8px after the text, vertically centred.
   HubSpot's button is an <input>, so the triangle is its background; quote-popups.js submitArrow()
   sets --swp-arrow-x from the text width. The right padding is 18px wider (triangle + gap) so text
   and triangle stay centred together. Hover / keyboard focus: 2px to the right ("reduce motion": no
   move). The !important longhands win over the hover rule's "background" shorthand above. */
:is(#swp-qp, .swp-qp) form input[type="submit"].hs-button.swp-has-arrow {
	padding-right: 34px !important; /* 16px + 18px */
	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, background-position .15s ease-out;
}
:is(#swp-qp, .swp-qp) form input[type="submit"].hs-button.swp-has-arrow:hover,
:is(#swp-qp, .swp-qp) form input[type="submit"].hs-button.swp-has-arrow:focus-visible {
	background-position: calc(50% + var(--swp-arrow-x, 0px) + 2px) 50% !important;
}
@media (prefers-reduced-motion: reduce) {
	:is(#swp-qp, .swp-qp) form input[type="submit"].hs-button.swp-has-arrow:hover,
	:is(#swp-qp, .swp-qp) form input[type="submit"].hs-button.swp-has-arrow:focus-visible {
		background-position: calc(50% + var(--swp-arrow-x, 0px)) 50% !important;
	}
}
.swp-qp .submitted-message {
	display: none; /* our thank-you state replaces HubSpot's message */
}
.swp-qp .hs-recaptcha,
.swp-qp .legal-consent-container {
	margin-top: 12px;
	font-size: 12px;
}

/* 6. Thank-you state --------------------------------------------------------- */
.swp-qp__thanks {
	padding: 30px 32px 28px;
	outline: none;
}
.swp-qp__thanks h2,
.swp-qp__thanks h3 {
	margin: 0 0 8px;
	font-size: 26px;
	font-weight: 900;
	line-height: 1.2;
	color: var(--swp-text);
	text-transform: none;
}
.swp-qp__thanks h2::before,
.swp-qp__thanks h3::before {
	content: "";
	display: block;
	width: 64px;
	height: 64px;
	margin-bottom: 20px;
	border-radius: 50%;
	background: var(--swp-band) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23557353' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 30px 30px no-repeat;
}
.swp-qp__thanks p {
	margin: 0 0 8px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--swp-muted);
}
.swp-qp__thanks p strong {
	color: var(--swp-text);
}
.swp-qp__thanks ol {
	margin: 20px 0 8px;
	padding: 0;
	list-style: none;
	counter-reset: swp-step;
	border-top: 1px solid #e3e8e1;
}
.swp-qp__thanks ol li {
	position: relative;
	margin: 0;
	padding: 16px 0 16px 40px;
	border-bottom: 1px solid #e3e8e1;
	font-size: 15px;
	line-height: 1.45;
	color: var(--swp-muted);
	counter-increment: swp-step;
}
.swp-qp__thanks ol li::before {
	content: counter(swp-step);
	position: absolute;
	left: 0;
	top: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--swp-green);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
}
.swp-qp__thanks ol li strong {
	display: block;
	color: var(--swp-text);
}
.swp-qp__thanks .swp-qp-keep,
.swp-qp__thanks .swp-qp-keep.button {
	display: block;
	width: 100%;
	min-height: 48px;
	margin: 8px 0 0;
	border: 0;
	background: transparent;
	color: var(--swp-green);
	font-size: 16px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	box-shadow: none;
}

/* 7. Phones: full-height sheet, close at the top, button pinned at the bottom ---- */
@media (max-width: 549px) {
	.swp-qp-wrap .mfp-container {
		padding: 0 !important; /* LEGACY: Flatsome popup padding */
	}
	.swp-qp-wrap .mfp-content {
		height: 100%;
		vertical-align: top;
	}
	.lightbox-content.swp-qp-box:is(#swp-qp, .swp-qp-box) {
		width: 100% !important;     /* LEGACY: base.css 600px block (#pineflooring-quote 95vw) */
		max-width: 100% !important; /* LEGACY */
		padding: 0 !important;      /* LEGACY: #stone-quote 0 15px */
		overflow: hidden !important; /* LEGACY */
		height: 100%;
		margin: 0 !important;       /* LEGACY */
		border-radius: 0;
		box-shadow: none;
		transform: none !important; /* LEGACY: old #pineflooring-quote translate */
		left: auto !important;
	}
	.swp-qp {
		display: flex;
		flex-direction: column;
		height: 100%;
		max-height: 100%;
	}
	.swp-qp__band {
		flex-shrink: 0;
		gap: 12px;
		min-height: 52px;
		padding: 14px 56px 14px 18px;
	}
	.swp-qp__thumb {
		width: 52px;
		height: 52px;
		border-radius: 6px;
	}
	.swp-qp__eyebrow {
		font-size: 11px;
	}
	.swp-qp__name {
		font-size: 17px;
	}
	.swp-qp__sub {
		display: none;
	}
	.swp-qp__mark {
		right: -30px;
		top: -24px;
		width: 130px;
		height: 130px;
	}
	.swp-qp__close {
		top: 50%;
		right: 4px;
		margin-top: -22px;
	}
	.swp-qp__body,
	.swp-qp__thanks {
		flex: 1;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 20px 18px 0;
	}
	.swp-qp__intro h2,
	.swp-qp__intro h3 {
		font-size: 21px;
	}
	.swp-qp__intro p {
		font-size: 14px;
		margin-bottom: 14px;
	}
	:is(#swp-qp, .swp-qp) form fieldset {
		gap: 12px;
		margin-bottom: 12px;
	}
	:is(#swp-qp, .swp-qp) form fieldset.form-columns-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	:is(#swp-qp, .swp-qp) form .hs_submit {
		position: sticky;
		bottom: 0;
		z-index: 2;
		margin: 0 -18px;
		padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
		background: #fff;
		border-top: 1px solid #e3e8e1;
		box-shadow: 0 -6px 16px rgba(0, 0, 0, .06);
	}
	.swp-qp__trust {
		margin-top: 0;
		padding: 12px 0 20px;
		border-top: 0;
		font-size: 13px;
	}
	.swp-qp__thanks h2,
	.swp-qp__thanks h3 {
		font-size: 24px;
	}
}

/* 8. Product page: one "Quote Request" button + outline buttons under it ----------- */
/* Phones and tablets (under 850px): button and the row under it 320px, centred. Desktop (850px
   and up): compact button with the links stacked to its right (8c). The grey line under them
   (Text element with class swp-quote-note) is in the same UX Blocks. The button's look (style 8,
   offset block shadow) is shared with the phone bar: 8b. */
.swp-quote-cta.button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 320px;
	max-width: 100%;
	min-height: 52px;
	margin: 6px auto 10px;
	padding: 0 20px;
	font-size: 17px;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
}
/* Flatsome sets .text-center .button:first-of-type / :last-of-type { margin-left/right: 0 !important },
   which would push the button to the left. */
.swp-quote-cta.button,
.text-center .swp-quote-cta.button:first-of-type,
.text-center .swp-quote-cta.button:last-of-type {
	margin-left: auto !important;
	margin-right: auto !important;
}
/* Outline buttons under it: Calculators / Cut Sheet / Free Sample, 2 per row (a 3rd is centred on
   a second row), same total width as the main button. Each paragraph of the Text element is one
   button; the green line icon comes from the link: a .pdf = Cut Sheet, "sample" in the link =
   Free Sample, anything else = Calculators. Old icon images in the text are hidden. The cut sheet
   link comes from the product and is moved into this row by PHP (swp_qp_merge_cutsheet);
   .swp-cutsheet alone only shows if a product has no row. */
.swp-quote-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	width: 320px;
	max-width: 100%;
	margin: 0 auto 14px;
}
.swp-quote-links > p {
	flex: 0 0 calc(50% - 5px);
	min-width: 0;
	margin: 0;
}
.swp-cutsheet {
	width: 155px;
	max-width: 100%;
	margin: 0 auto 14px;
}
.swp-quote-links a,
.swp-cutsheet a {
	--swp-ql-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cpath d='M8 6h8M8 10h.01M12 10h.01M16 10h.01M8 14h.01M12 14h.01M8 18h.01M12 18h.01M16 14v4'/%3E%3C/svg%3E");
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 44px;
	padding: 0 8px;
	border: 1px solid #9ebc96;
	border-radius: 0; /* square, like the Quote Request button */
	background: transparent;
	color: #3f573e;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
}
.swp-quote-links a::before,
.swp-cutsheet a::before {
	content: "";
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	background: #557353;
	-webkit-mask: var(--swp-ql-icon) center / contain no-repeat;
	mask: var(--swp-ql-icon) center / contain no-repeat;
}
.swp-quote-links a[href*="sample"] {
	--swp-ql-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z'/%3E%3Cpath d='M12 22V12M3.3 7l8.7 5 8.7-5M7.5 4.27l9 5.16'/%3E%3C/svg%3E");
}
.swp-quote-links a[href$=".pdf"],
.swp-cutsheet a {
	--swp-ql-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4M16 13H8M16 17H8M10 9H8'/%3E%3C/svg%3E");
}
.swp-quote-links a:hover,
.swp-quote-links a:focus-visible,
.swp-cutsheet a:hover,
.swp-cutsheet a:focus-visible {
	border-color: #557353;
	background: #f3f7f2;
	color: #3f573e;
}
.swp-quote-links a img,
.swp-cutsheet a img {
	display: none;
}
/* Grey line under the button and links. */
.swp-quote-note {
	max-width: 320px;
	margin: 0 auto 14px;
	color: #666;
	font-size: 13px;
	line-height: 1.4;
	text-align: center;
}
.swp-quote-note p {
	margin: 0;
}

/* 8b. "Quote Request" look, style 8 "offset block shadow" (product button + phone bar) --------
   White, 2px dark green border, square corners, sage shadow 5px down and right; no mark.
   Hover and keyboard focus: sage fill, darker text (#2f3f2e on #9ebc96 = 5.4:1), the button moves
   3px into its shadow. Pressed: all the way (5px, no shadow). Keyboard focus also gets a ring.
   Reduced motion: colour change only. */
.swp-quote-cta.button,
.swp-quote-bar__btn {
	border: 2px solid #3f573e;
	border-radius: 0;
	background: #fff;
	color: #3f573e;
	font-weight: 900;
	box-shadow: 5px 5px 0 #9ebc96;
	transition: background-color 150ms ease-out, color 150ms ease-out, box-shadow 150ms ease-out, transform 150ms ease-out;
}
.swp-quote-cta.button:hover,
.swp-quote-cta.button:focus-visible,
.swp-quote-bar__btn:hover,
.swp-quote-bar__btn:focus-visible {
	background: #9ebc96;
	color: #2f3f2e;
	box-shadow: 2px 2px 0 #9ebc96;
	transform: translate(3px, 3px);
}
.swp-quote-cta.button:active,
.swp-quote-bar__btn:active {
	box-shadow: none;
	transform: translate(5px, 5px);
}
.swp-quote-cta.button:focus-visible,
.swp-quote-bar__btn:focus-visible {
	outline: 2px solid #2f3f2e;
	outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
	.swp-quote-cta.button,
	.swp-quote-bar__btn {
		transition: background-color 150ms ease-out, color 150ms ease-out;
	}
	.swp-quote-cta.button:hover,
	.swp-quote-cta.button:focus-visible,
	.swp-quote-cta.button:active,
	.swp-quote-bar__btn:hover,
	.swp-quote-bar__btn:focus-visible,
	.swp-quote-bar__btn:active {
		box-shadow: 5px 5px 0 #9ebc96;
		transform: none;
	}
}
/* 8c. Desktop (850px and up): compact button sized to its text, with Calculators / Cut Sheet /
   Free Sample as quiet text links stacked to its right. Both are inline boxes, so they sit side
   by side and stay centred in the summary column. */
@media (min-width: 850px) {
	.swp-quote-cta.button {
		display: inline-flex;
		width: auto;
		min-height: 44px;
		margin-top: 6px;
		margin-bottom: 10px;
		padding: 0 20px;
		font-size: 16px;
		vertical-align: middle;
	}
	.swp-quote-cta.button,
	.text-center .swp-quote-cta.button:first-of-type,
	.text-center .swp-quote-cta.button:last-of-type {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	.swp-quote-links {
		display: inline-flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		width: auto;
		margin: 6px 0 10px 22px;
		vertical-align: middle;
	}
	.swp-quote-links > p {
		flex: none;
	}
	.swp-quote-links a {
		justify-content: flex-start;
		gap: 7px;
		height: auto;
		padding: 2px 0;
		border: 0;
		border-radius: 0;
		font-size: 15px;
		font-weight: 600;
	}
	.swp-quote-links a::before {
		width: 16px;
		height: 16px;
	}
	.swp-quote-links a:hover,
	.swp-quote-links a:focus-visible {
		background: transparent;
		text-decoration: underline;
		text-underline-offset: 3px;
	}
	.swp-quote-note {
		max-width: none;
	}
}

/* 9. Phone "Quote Request" bar (only while the in-page button is scrolled past) ---- */
/* The 10px / 14px padding leaves room for the button's 5px shadow (8b). */
.swp-quote-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
	background: #fff;
	border-top: 1px solid #e3e8e1;
	box-shadow: 0 -6px 16px rgba(0, 0, 0, .08);
}
.swp-quote-bar[hidden] {
	display: none;
}
.swp-quote-bar__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	font-size: 17px;
	text-decoration: none; /* colours, border and shadow: 8b */
}
@media (min-width: 550px) {
	.swp-quote-bar {
		display: none !important; /* phones only, whatever the JS says */
	}
}
.swp-quote-bar:not([hidden]) ~ #top-link,
html:has(.swp-quote-bar:not([hidden])) #top-link {
	bottom: 86px; /* keep Flatsome's back-to-top button above the bar */
}

/* 10. Open / close animation (our popups only) ---------------------------------- */
/* html.swp-qp-anim is set by quote-popups.js on the click that opens one of our popups (before
   Magnific builds it) and removed when it is gone. Desktop: fade in + rise 12px, 180ms; phones
   (sheet): slide up from below the screen, 220ms; the dim fades with it. Closing: fade out 120ms
   (Magnific keeps the popup 300ms). CSS only, so focus and the HubSpot form load are not delayed.
   Replaces Flatsome's 0.5s drop for these popups. */
.swp-qp-anim .mfp-bg {
	transition: opacity 180ms ease-out;
}
.swp-qp-anim .mfp-bg.mfp-removing {
	transition: opacity 120ms ease-in;
}
.swp-qp-anim .mfp-wrap .mfp-content {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 180ms ease-out, transform 180ms ease-out;
}
.swp-qp-anim .mfp-wrap.mfp-ready .mfp-content {
	opacity: 1;
	transform: translateY(0);
}
.swp-qp-anim .mfp-wrap.mfp-ready.mfp-removing .mfp-content {
	opacity: 0;
	transition: opacity 120ms ease-in;
}
@media (max-width: 549px) {
	.swp-qp-anim .mfp-bg {
		transition-duration: 220ms;
	}
	.swp-qp-anim .mfp-wrap .mfp-content {
		opacity: 1;
		transform: translateY(100vh);
		transition: transform 220ms ease-out;
	}
}
@media (prefers-reduced-motion: reduce) {
	.swp-qp-anim .mfp-bg,
	.swp-qp-anim .mfp-bg.mfp-removing,
	.swp-qp-anim .mfp-wrap .mfp-content,
	.swp-qp-anim .mfp-wrap.mfp-ready.mfp-removing .mfp-content {
		transition: none;
	}
	.swp-qp-anim .mfp-wrap .mfp-content {
		transform: translateY(0);
	}
}

/* 11. Desktop drawer (850px and up; Jay, live 2026-10-19) ---------------------------------------
   The popup becomes a right-side drawer over the page (the page doesn't move): 440px (at most 90vw),
   full height, white, the band at the top, the form scrolling inside, the band's ✕ top right. The dim,
   closing on the dim / Escape, the scroll lock and the focus handling stay Magnific's, as before.
   Slides in from the right in 220ms (ease-out), out in 160ms; with reduced motion it just appears.
   Phones keep the bottom sheet (7) and tablets (550-849px) the centred popup. */
@media (min-width: 850px) {
	.swp-hf .swp-qp-wrap .mfp-container {
		padding: 0 !important; /* LEGACY: Flatsome popup padding */
	}
	.swp-hf .swp-qp-wrap .mfp-content {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: min(440px, 90vw);
		height: 100%;
		vertical-align: top;
		text-align: left;
	}
	.swp-hf .lightbox-content.swp-qp-box:is(#swp-qp, .swp-qp-box) {
		width: 100% !important;     /* LEGACY: base.css 600px popup blocks */
		max-width: 100% !important; /* LEGACY */
		height: 100%;
		margin: 0 !important;       /* LEGACY */
		padding: 0 !important;      /* LEGACY */
		border-radius: 0;
		box-shadow: -12px 0 40px rgba(0, 0, 0, .22);
		overflow: hidden !important; /* LEGACY */
		transform: none !important;  /* LEGACY: old #pineflooring-quote translate */
		left: auto !important;
	}
	.swp-hf .swp-qp {
		display: flex;
		flex-direction: column;
		height: 100%;
		max-height: 100%;
		background: #fff;
	}
	.swp-hf .swp-qp__band {
		flex-shrink: 0;
		padding: 20px 60px 20px 24px;
	}
	.swp-hf .swp-qp__close {
		top: 14px;
		right: 10px;
		margin-top: 0;
	}
	.swp-hf .swp-qp__body,
	.swp-hf .swp-qp__thanks {
		flex: 1;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 22px 24px 0;
	}
	.swp-hf .swp-qp--newsletter .swp-qp__body {
		padding-bottom: 24px;
	}
	.swp-hf :is(#swp-qp, .swp-qp) form fieldset.form-columns-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	/* Animation (with section 10's html.swp-qp-anim): slide from the right instead of rising. */
	.swp-qp-anim .swp-hf .mfp-wrap .mfp-content {
		opacity: 1;
		transform: translateX(100%);
		transition: transform 220ms ease-out;
	}
	.swp-qp-anim .swp-hf .mfp-wrap.mfp-ready .mfp-content {
		transform: translateX(0);
	}
	.swp-qp-anim .swp-hf .mfp-wrap.mfp-ready.mfp-removing .mfp-content {
		opacity: 1;
		transform: translateX(100%);
		transition: transform 160ms ease-in;
	}
	.swp-qp-anim .swp-hf .mfp-bg.mfp-removing {
		transition-duration: 160ms;
	}
}
@media (min-width: 850px) and (prefers-reduced-motion: reduce) {
	.swp-qp-anim .swp-hf .mfp-wrap .mfp-content,
	.swp-qp-anim .swp-hf .mfp-wrap.mfp-ready.mfp-removing .mfp-content {
		transform: none;
		transition: none;
	}
}