/* ==========================================================================
   Product page delivery line (round 19), its ZIP box and the grey box round the quote area (19b).
   The Quote Request button itself (the pill): quote-pill.css.
   Markup: .swp-pd-line placeholder above the button (inc/features/product-delivery.php), filled by
   assets/js/product-delivery.js from the saved ZIP. Scoped to body.swp-pd (set with the feature).
   --------------------------------------------------------------------------
   Contents: 1. Delivery line  2. ZIP box  3. Grey line under the button  4. Desktop button (850px+)  5. Grey box
   ========================================================================== */

/* 1. Delivery line: "Delivering to 02645 · Local delivery · Change" -------------------- */
/* min-height reserves the line before the JS fills it (no layout shift). */
.swp-pd-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	min-height: 24px;
	margin: 4px 0 8px;
	color: #3f573e;
	font-size: 14px;
	line-height: 22px;
	text-align: center;
}
.swp-pd-line__show {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0 4px;
}
.swp-pd-line__show[hidden] {
	display: none;
}
.swp-pd-pin {
	flex-shrink: 0;
	width: 15px;
	height: 15px;
	fill: none;
	stroke: #557353;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.swp-pd-line strong {
	font-weight: 700;
}
.swp-pd-line .swp-pd-line__change {
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: #3f573e;
	font: inherit;
	font-size: 14px;
	font-weight: 400;
	line-height: 22px;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.swp-pd-line .swp-pd-line__change:hover,
.swp-pd-line .swp-pd-line__change:focus-visible {
	color: #1f2a1e;
}

/* Phones (under 550px), inside the grey box: always 2 lines, "📍 Delivering to 02645" and then
   "Local delivery · Change" (the first dot becomes a line break), and both are reserved before the
   JS runs, so nothing moves. "Your Delivery ZIP" sits in the middle of the 2 lines. */
@media (max-width: 549px) {
	.swp-pd-line {
		min-height: 44px;
	}
	.swp-pd-line__dot--1 {
		flex-basis: 100%;
		height: 0;
		overflow: hidden;
	}
}

/* 2. ZIP box: the top bar's own ZIP widget (zip-bar.css: rounded ZIP pill + Go, "or", location pill),
      opened in the line by "Change". Only what differs from the top bar is here: centred, no
      "Delivery for your area" label, a × to close, and on phones the pill shares the row. */
.swp-pd-zip {
	justify-content: center;
	min-height: 0;
	margin: 0;
}
.swp-pd-zip[hidden] {
	display: none;
}
.swp-pd-zip .swp-zip__label {
	display: none;
}
.swp-pd-zip .swp-pd-zip__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	min-height: 0;
	margin: 0 0 0 -6px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: #3f573e;
}
.swp-pd-zip .swp-pd-zip__close:hover {
	color: #1f2a1e;
}
.swp-pd-zip__close svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
}
.swp-pd-zip .swp-zip__error {
	margin: 0;
	text-align: center;
}
@media (max-width: 849px) {
	.swp-pd-zip {
		flex-wrap: wrap;
		width: 100%;
		gap: 6px 4px;
	}
	.swp-pd-zip .swp-zip__entry {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
	}
}
/* 3. Grey line under the button: may wrap to 2 lines on desktop, kept balanced ------------ */
.swp-pd .swp-quote-note {
	text-wrap: balance;
}
/* It follows the saved ZIP (p.swp-pd-note, filled by product-delivery.js). Its height is reserved for the
   longest wording, 2 lines (3 on phones), so nothing below moves when the JS fills it or the ZIP changes. */
.swp-pd .swp-pd-note {
	min-height: calc(2 * 1.4em);
}
@media (max-width: 549px) {
	.swp-pd .swp-pd-note {
		min-height: calc(3 * 1.4em);
	}
}
.swp-pd-note__zip {
	font-weight: 400;
	white-space: nowrap;
}
.swp-pd .swp-pd-note .swp-pd-note__cta {
	display: inline;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: #3f573e;
	font: inherit;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: underline;
	text-underline-offset: 2px;
	vertical-align: baseline;
	cursor: pointer;
}
.swp-pd .swp-pd-note .swp-pd-note__cta:hover,
.swp-pd .swp-pd-note .swp-pd-note__cta:focus-visible {
	color: #1f2a1e;
}

/* 4. (The smaller desktop style-8 Quote Request button was here until 2026-10-20: the Quote Request pill's
      desktop size, 40px / 15px, is in quote-pill.css.) */

/* 5. Grey box around the delivery line, the button, the links and the grey line (<div class="swp-pd-box">,
      put round them by PHP). 1px #e1e6df, white, square. The phone Quote Request bar has no box. */
.swp-pd-box {
	box-sizing: border-box;
	margin: 8px 0 16px;
	padding: 18px 22px;
	border: 1px solid #e1e6df;
	background: #fff;
	text-align: center;
}
.swp-pd-box .swp-pd-line {
	margin-top: 0;
}
.swp-pd-box > :last-child {
	margin-bottom: 0;
}

/* 6. The same line above Add To Truck (Jay, live 2026-10-20; inc/features/truck-zip.php): just before the add-to-cart
      form or the fire pit tables' form (.swp-pd-line--truck), centred like the buy row; only the spacing differs. */
.swp-pd-line--truck {
	margin: 0 0 12px;
}