/* ==========================================================================
   ZIP bar (2026-10 redesign): desktop top bar (Header > Top Bar > HTML 2) and the slim phone
   line under the mobile header. Logic: assets/js/zip-locator.js (window.SWPZip).
   ========================================================================== */

/* Desktop top bar --------------------------------------------------------------- */
#top-bar.header-top {
	height: auto;
	min-height: 44px;
	background-color: #f2f5f1;
	border-bottom: 1px solid #e1e8df;
}
#top-bar .html_topbar_right {
	padding: 0;
}
#top-bar .html_topbar_left span {
	font-size: 13px !important; /* the promo text's inline 11px (Header > Top Bar > HTML 1); its colour #666 stays */
}

.swp-zip {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 10px;
	min-height: 44px;
	font-size: 13px;   /* same as the top-bar promo text */
	font-weight: 500;
	color: #666666;   /* measured: the site's body text and the promo text (rgb 102,102,102) */
	text-align: left;
	letter-spacing: 0;
	text-transform: none;
}
.swp-zip__entry,
.swp-zip__result {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}
.swp-zip__entry[hidden],
.swp-zip__result[hidden],
.swp-zip__error[hidden] {
	display: none;
}
.swp-zip__pin {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	fill: none;
	stroke: #557353;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.swp-zip__label {
	white-space: nowrap;
}
.swp-zip__pill {
	display: flex;
	height: 30px;
	overflow: hidden;
	border: 1px solid #b9c4b6;
	border-radius: 15px;
	background: #fff;
}
.swp-zip .swp-zip__input {
	width: 92px;
	height: 100%;
	min-height: 0;
	margin: 0;
	padding: 0 12px;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	font: inherit;
	font-size: 14px;
}
.swp-zip .swp-zip__input:focus {
	outline: none;
	box-shadow: inset 0 0 0 2px rgba(85, 115, 83, .35);
}
.swp-zip .swp-zip__go {
	height: 100%;
	min-height: 0;
	margin: 0;
	padding: 0 14px;
	border: 0;
	border-radius: 0;
	background: #557353;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	text-transform: none;
	letter-spacing: 0;
}
.swp-zip .swp-zip__go:hover {
	background: #3f573e;
}
.swp-zip__or {
	color: #6b7568;
	font-size: 13px;
}
.swp-zip .swp-zip__geo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 30px;
	min-height: 0;
	margin: 0;
	padding: 0 13px 0 11px;
	border: 1px solid #e3b79f;
	border-radius: 15px;
	background: #fdf3ee;
	color: #9a4a22;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	text-transform: none;
	letter-spacing: 0;
	white-space: nowrap;
}
.swp-zip .swp-zip__geo:hover {
	background: #fbe7dc;
}
.swp-zip__geo.is-busy {
	opacity: .7;
	cursor: progress;
}
.swp-zip__geo-short {
	display: none;
}
.swp-pulse {
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #cc6633;
	animation: swp-pulse 1.8s ease-out infinite;
}
@keyframes swp-pulse {
	0% { box-shadow: 0 0 0 0 rgba(204, 102, 51, .55); }
	70% { box-shadow: 0 0 0 7px rgba(204, 102, 51, 0); }
	100% { box-shadow: 0 0 0 0 rgba(204, 102, 51, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.swp-pulse {
		animation: none;
	}
}
.swp-zip__result > * {
	flex-shrink: 0;
	white-space: nowrap; /* one line, never wrapped */
}
.swp-zip a.swp-zip__phone {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-weight: 700; /* swp-tel keeps the surrounding text colour (#666) */
}
.swp-zip__tel-icon {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: #557353;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
/* "Visit Us": outline pill, 24px tall, 12px text (lighter than a filled button next to the ZIP line text). */
.swp-zip a.swp-zip__pillbtn {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	height: 24px;
	padding: 0 11px;
	border: 1px solid #557353;
	border-radius: 12px;
	background: transparent;
	color: #3f573e;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}
.swp-zip a.swp-zip__pillbtn:hover {
	background: rgba(85, 115, 83, .1);
	color: #3f573e;
}
/* The X (aria-label "Change ZIP"): 44 x 44 tap target; the negative margin keeps the bar's height. */
.swp-zip .swp-zip__change {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-height: 0;
	margin: -7px 0 -7px -6px;
	padding: 0;
	border: 0;
	border-radius: 0; /* square, so the whole 44px box takes the tap */
	background: transparent;
	color: #3f573e;
	line-height: 1;
}
.swp-zip .swp-zip__change:hover {
	color: #1f2a1e;
}
.swp-zip__change svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
}
.swp-zip__error {
	width: 100%;
	margin: 0 0 6px;
	font-size: 13px;
	color: #b3261e;
}

/* Phones / tablets: slim line under the mobile header -------------------------------- */
.swp-zip-mobile {
	padding: 8px 12px;
	background: #f2f5f1;
	border-bottom: 1px solid #e1e8df;
}
@media (max-width: 849px) {
	.swp-zip {
		gap: 8px;
		min-height: 32px;
		font-size: 13px;
	}
	.swp-zip__entry {
		width: 100%;
		gap: 8px;
	}
	.swp-zip__label,
	.swp-zip__or,
	.swp-zip__geo-long {
		display: none;
	}
	.swp-zip__geo-short {
		display: inline;
	}
	.swp-zip__pill {
		flex: 1;
		min-width: 0;
		height: 32px;
		border-radius: 16px;
	}
	.swp-zip .swp-zip__input {
		flex: 1;
		width: auto;
		min-width: 0;
		padding: 0 10px;
		font-size: 16px; /* no iOS zoom */
	}
	.swp-zip .swp-zip__go {
		padding: 0 12px;
	}
	.swp-zip .swp-zip__geo {
		flex-shrink: 0;
		height: 32px;
		padding: 0 10px;
		font-size: 12px;
		gap: 6px;
	}
	.swp-pulse {
		width: 7px;
		height: 7px;
	}
	.swp-zip__result {
		width: 100%;
		gap: 7px;
	}
	.swp-zip .swp-zip__change {
		margin: -6px -12px -6px auto; /* X at the right end; the tap area runs into the line's padding */
	}
}
/* Phones (under 768px): centre the line. Result: the X is pinned to the right edge (same 44px tap target) and the
   group (pin · text · phone · Visit Us) is centred between the screen's left edge and the X you see: 32px right
   padding = 12px line padding on the left + the X's 14px inset, rounded. Empty state (no X): ZIP box + Locate me
   centred on the line. Tablets 768-849px stay left-aligned. */
@media (max-width: 767px) {
	.swp-zip__entry {
		justify-content: center;
	}
	.swp-zip__result {
		position: relative;
		box-sizing: border-box;
		justify-content: center;
		padding-right: 32px;
	}
	.swp-zip .swp-zip__change {
		position: absolute;
		top: 50%;
		right: -12px;
		margin: -22px 0 0;
	}
}
/* Narrow phones (under 375px): the phone icon goes, so the line still fits with the X inside the screen. */
@media (max-width: 374px) {
	.swp-zip__tel-icon {
		display: none;
	}
}

/* Contact Us page (round 22) ------------------------------------------------------------
   The box is a UX Builder Text element with class "swp-cp-zip": an editable heading (class
   swp-cp-zip__title) and [swp_zip_box style="contact"], i.e. the top bar's own ZIP widget (above),
   centred, with the label "Your Delivery ZIP". The phone sections below follow the saved ZIP
   (zip-locator.js B). */
.swp-cp-zip {
	margin: 0 0 22px;
	padding: 14px 16px;
	border: 1px solid #e2e2df;
	border-radius: 8px;
	background: #f4f4f2;
	text-align: center;
}
.swp-cp-zip__title {
	margin: 0 0 10px;
	color: #555;
	font-size: 24px;
	line-height: 1.3;
}
.swp-zip-contact .swp-zip,
.swp-zip-contact .swp-zip__entry,
.swp-zip-contact .swp-zip__result {
	justify-content: center;
	flex-wrap: wrap;
}
.swp-zip-contact .swp-zip__error {
	text-align: center;
}
@media (max-width: 849px) {
	.swp-zip-contact .swp-zip__label {
		display: block;
		flex-basis: 100%;
		text-align: center;
	}
	.swp-cp-zip__title {
		font-size: 19px;
	}
}
/* First paint (also on cached pages): the head script marks <html> with the saved choice, and the
   matching section is shown open until zip-locator.js has opened it in Flatsome too (no layout shift). */
html.swp-cp-init.swp-cp-national .accordion-item.acc-national > .accordion-inner,
html.swp-cp-init.swp-cp-local .accordion-item.acc-local > .accordion-inner {
	display: block;
}
/* The selected column (local or national) after a ZIP */
.swp-cp-selected {
	background: #f6f9f5;
	box-shadow: inset 0 0 0 2px #70926e;
	border-radius: 8px;
	transition: background .3s, box-shadow .3s;
}