/* ==========================================================================
   Pills: "Quote Request" and the secondary pill (Jay, live 2026-10-20; BRAND.md "Components").
   Replaces style 8 (white, outline, sage offset shadow). Loads on every page, after quote-popup.css.
   --------------------------------------------------------------------------
   Contents: 1. Quote pill look  2. Quote pill sizes per place  3. Secondary pill
   1. Quote pill (.swp-quote-cta product/empty-cart buttons, .swp-quote-bar__btn phone bar, .swp-pl__quote-all
      Project List "Quote All N Items", and .swp-quote-pill: the class for any Flatsome Button element in page
      content, Button > Advanced > Class; add swp-quote-pill--sm in slim link bars):
      - Deep green fill with white text (Jay, 2026-10-20; was #9ebc96 with #2f3f2e text): fill #5d7d59 (white
        4.6:1), radius 999px, Lato 700, normal letter-spacing, nowrap. The colours are the --swp-pill-*
        variables below.
      - At the end, a 16px #3f573e circle (18px on the 46px phone pills) with a white play triangle, close to
        the right end (decorative: a CSS background, so screen readers skip it).
      - 3D base: 3px #4a6646 edge. Hover (hover devices only): #567652 (white 5.1:1). Pressed: #567652, down
        2px onto a 1px edge. Keyboard focus: 2px #2f3f2e outline. Reduced motion: colour only.
      - Touch: the press shows only while the finger is down (header-footer.js listens to touchstart, so iOS
        applies :active); hover colours are inside @media (hover: hover), so nothing sticks after a tap.
   3. Secondary pill (.swp-secondary-pill, e.g. "Order Samples"; the shop's "Load More Products" uses the same
      values in shop-page.css): white, 1.5px #7a9a74 outline, #2f3f2e text, no circle, no edge; hover #f2f3f1.
   ========================================================================== */

/* 1. Quote pill look ---------------------------------------------------------------------------------- */
:root {
	--swp-pill-fill: #5d7d59;
	--swp-pill-hover: #567652;
	--swp-pill-edge: #4a6646;
}
body :is(.swp-quote-cta.button, .swp-quote-bar__btn, .swp-pl__quote-all, .swp-quote-pill) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border: 0;
	border-radius: 999px;
	background: var(--swp-pill-fill);
	color: #fff;
	font-family: Lato, sans-serif;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 3px 0 var(--swp-pill-edge);
	transform: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 150ms ease-out, box-shadow 100ms ease-out, transform 100ms ease-out;
}
body :is(.swp-quote-cta.button, .swp-quote-bar__btn, .swp-pl__quote-all, .swp-quote-pill)::after {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%233f573e'/%3E%3Cpath fill='%23fff' d='M6.8 4.5c-.4-.2-.9 0-.9.5v6c0 .5.5.7.9.5l5.1-3c.4-.2.4-.8 0-1z'/%3E%3C/svg%3E") center / contain no-repeat;
}
body :is(.swp-quote-cta.button, .swp-quote-bar__btn, .swp-pl__quote-all, .swp-quote-pill):is(:hover, :focus, :focus-visible, :active) {
	color: #fff;
}
@media (hover: hover) {
	body :is(.swp-quote-cta.button, .swp-quote-bar__btn, .swp-pl__quote-all, .swp-quote-pill):hover {
		background: var(--swp-pill-hover);
		box-shadow: 0 3px 0 var(--swp-pill-edge);
		transform: none;
	}
}
body :is(.swp-quote-cta.button, .swp-quote-bar__btn, .swp-pl__quote-all, .swp-quote-pill):focus-visible {
	outline: 2px solid #2f3f2e;
	outline-offset: 3px;
	box-shadow: 0 3px 0 var(--swp-pill-edge);
	transform: none;
}
body :is(.swp-quote-cta.button, .swp-quote-bar__btn, .swp-pl__quote-all, .swp-quote-pill):active {
	background: var(--swp-pill-hover);
	box-shadow: 0 1px 0 var(--swp-pill-edge);
	transform: translateY(2px);
}
@media (prefers-reduced-motion: reduce) {
	body :is(.swp-quote-cta.button, .swp-quote-bar__btn, .swp-pl__quote-all, .swp-quote-pill) {
		transition: background-color 150ms ease-out;
	}
	body :is(.swp-quote-cta.button, .swp-quote-bar__btn, .swp-pl__quote-all, .swp-quote-pill):active {
		box-shadow: 0 3px 0 var(--swp-pill-edge);
		transform: none;
	}
}

/* 2. Quote pill sizes per place ------------------------------------------------------------------------ */
/* Each selector needs the specificity of the :is() lists above (they count as .swp-quote-cta.button) or more. */
/* Product page quote box, phones and tablets (under 850px): sized to its text, centred, 46px, 16px, 18px circle. */
body .swp-quote-cta.button:not(.swp-ce-btn) {
	display: flex;
	width: fit-content;
	min-height: 46px;
	padding: 0 10px 0 22px;
	font-size: 16px;
}
body .swp-quote-cta.button:not(.swp-ce-btn)::after,
body .swp-quote-bar .swp-quote-bar__btn::after {
	width: 18px;
	height: 18px;
}
/* Phone bar: full width x 46, 16px (quote-popup.css 9 places the bar). */
body .swp-quote-bar .swp-quote-bar__btn {
	display: flex;
	height: 46px;
	padding: 0 10px 0 22px;
	font-size: 16px;
}
/* Empty cart: 40px like Add To Truck beside it; text size from cart-empty.css 4 (15px, 14px on phones). */
body .swp-ce .swp-quote-cta.swp-ce-btn {
	min-height: 40px;
	padding: 0 8px 0 18px;
}
/* Project List: the "Quote All N Items" pill under the list, 40px, 15px (the rows have text links, project-list.css 5). */
body .swp-pl .swp-pl__quote-all {
	min-height: 40px;
	padding: 0 8px 0 20px;
	font-size: 15px;
}
/* Button elements in page content (.swp-quote-pill): 40px, 15px, any width. Flatsome's size, colour and style
   options don't apply. */
body .button.swp-quote-pill,
body a.swp-quote-pill {
	min-height: 40px;
	padding: 0 8px 0 20px;
	font-size: 15px;
}
/* Slim link bars (e.g. UX Block "Wood information links - Green Bar"): 30px, 14px, 2px edge. */
body a.swp-quote-pill.swp-quote-pill--sm {
	min-height: 30px;
	margin: 0;
	padding: 0 7px 0 14px;
	font-size: 14px;
	box-shadow: 0 2px 0 var(--swp-pill-edge);
	vertical-align: middle;
}
body a.swp-quote-pill.swp-quote-pill--sm:active {
	box-shadow: 0 1px 0 var(--swp-pill-edge);
	transform: translateY(1px);
}
/* Product page quote box, desktop (850px and up): 40px, 15px, next to the stacked Calculators / Cut Sheet /
   Free Sample links (quote-popup.css 8c). */
@media (min-width: 850px) {
	body .swp-quote-cta.button:not(.swp-ce-btn) {
		display: inline-flex;
		width: auto;
		min-height: 40px;
		padding: 0 8px 0 20px;
		font-size: 15px;
	}
	body .swp-quote-cta.button:not(.swp-ce-btn)::after {
		width: 16px;
		height: 16px;
	}
}

/* 3. Secondary pill ------------------------------------------------------------------------------------ */
/* Flatsome Button element with class swp-secondary-pill: 40px, Lato 700 15px, #2f3f2e on white (12.4:1).
   Flatsome's button colour/style/size options and its hover darkening don't apply. */
body .button.swp-secondary-pill,
body .button.swp-secondary-pill:is(:hover, :focus, :focus-visible, :active) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 20px;
	border: 1.5px solid #7a9a74;
	border-radius: 999px;
	background: #fff;
	color: #2f3f2e;
	font-family: Lato, sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	box-shadow: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 150ms ease-out;
}
@media (hover: hover) {
	body .button.swp-secondary-pill:hover {
		background: #f2f3f1;
	}
}
body .button.swp-secondary-pill:active {
	background: #f2f3f1;
}
body .button.swp-secondary-pill:focus-visible {
	outline: 2px solid #2f3f2e;
	outline-offset: 3px;
}