/* ==========================================================================
   Empty cart page "Your Truck Is Empty" (Jay, live 2026-10-20). Markup: UX Block "Cart - Empty" +
   inc/features/cart-empty.php ([swp_ce_zip], [swp_ce_items]). Loaded only on the cart page while it is empty.
   Colours (BRAND.md), contrast on white: H1 green-ink #2f3f2e 11.2:1; text #3d4a3b 9.4:1; section headings
   #3f573e 7.94:1; product names #555555 7.46:1; category and spec lines #666666 5.74:1; truck icon #557353 5.3:1.
   --------------------------------------------------------------------------
   Contents: 1. Page  2. Head (icon, H1, line, ZIP)  3. Product cards  4. Buttons  5. Categories  6. Band  7. Phones
             8. Panel layout (body.swp-panels + swp-ce-panels)
   ========================================================================== */

/* 1. Page: the Cart page's own spacers (55 px + 500 px gap elements) only while the cart is empty */
.swp-ce-empty #content > .gap-element {
	display: none !important; /* LEGACY: Flatsome writes style="display:block" on gap elements */
}
.swp-ce {
	text-align: left;
}
.swp-ce .woocommerce-notices-wrapper:empty {
	display: none;
}
.swp-ce .swp-ce-main h2 {
	margin: 0 0 18px;
	color: #3f573e;
	font-size: 22px;
	line-height: 1.3;
	text-align: center;
	text-wrap: balance;
}

/* 2. Head: truck icon (decorative), H1, one line, the saved ZIP line.
   The icon (Jay, 2026-10-20) is the header's flatbed cart truck (Flatsome custom cart icon, a 100x75 JPEG) redrawn
   as an outline SVG: the same drawing (flatbed with plank line, headboard, exhaust, cab window, door logo, wheels),
   64px wide on every screen, #557353. */
.swp-ce-intro h1 {
	margin: 0 0 10px;
	color: #2f3f2e;
	font-size: 34px;
	line-height: 1.2;
	text-wrap: balance;
}
.swp-ce-intro h1::before {
	content: "";
	display: block;
	width: 64px;
	height: 30px;
	margin: 0 auto 14px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='6 18 86 40' fill='none' stroke='%23557353' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 40.5V48H17.3A5.5 5.5 0 0 1 25.7 48H64V42H8M8 45H60M60 42V24H64M65.5 27V20.5'/%3E%3Cpath d='M64 48V27H76.8Q78.6 27 78.9 29L79.8 35Q86.5 35.5 89.3 38Q90.5 39.2 90.5 41V48H85.6A5.5 5.5 0 0 0 76.4 48H64'/%3E%3Cpath d='M67.4 29.2H76.6L77.5 34.8H67.4Z'/%3E%3Cellipse cx='72.4' cy='40.4' rx='3.4' ry='1.4' stroke-width='1.8'/%3E%3Ccircle cx='21.5' cy='51.5' r='4'/%3E%3Ccircle cx='21.5' cy='51.5' r='1'/%3E%3Ccircle cx='81' cy='51.5' r='4'/%3E%3Ccircle cx='81' cy='51.5' r='1'/%3E%3C/svg%3E") no-repeat center / contain;
}
.swp-ce-intro p {
	margin: 0;
	color: #3d4a3b;
	font-size: 17px;
	line-height: 1.5;
	text-wrap: balance;
}
.swp-ce-zipwrap .swp-pd-line {
	justify-content: center;
	margin: 12px 0 0;
}

/* 3. Product cards ("From Your Project List (N)" / "Popular Right Now"): the product cards' look */
.swp-ce-items {
	margin: 34px 0 10px;
}
.swp-ce-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	max-width: 900px;
	margin: 0 auto;
}
.swp-ce-items.is-popular .swp-ce-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	max-width: 1100px;
}
.swp-ce-card {
	display: flex;
	flex-direction: column;
	text-align: center;
}
.swp-ce-card__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 750 / 880;
	object-fit: cover;
}
.swp-ce .swp-ce-card__cat {
	margin: 12px 0 4px;
	color: #666666;
	font-size: 11px;
	line-height: 1.3;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.swp-ce .swp-ce-card__name {
	margin: 0;
	font-size: 19px;
	line-height: 1.25;
	text-wrap: balance;
}
.swp-ce .swp-ce-card__name a {
	color: #555555;
}
.swp-ce .swp-ce-card__name a:focus-visible {
	color: #555555;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.swp-ce .swp-ce-card__spec {
	margin: 4px 0 0;
	color: #666666;
	font-size: 13px;
	line-height: 1.35;
	text-wrap: balance;
}
.swp-ce .swp-ce-card__action {
	margin: auto 0 0;
	padding-top: 14px;
}
.swp-ce-items__more {
	margin: 22px 0 0;
	text-align: center;
}
.swp-ce .swp-ce-more {
	color: #2f3f2e;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.swp-ce-items__more.has-phone-link .swp-ce-more--phone {
	display: none;
}

/* 3b. Two columns (550px and up; Jay, 20 Oct): the cards on the left (~58%) as rows (photo, text, button), "Shop by
   Category" 2x3 tiles on the right. Phones (under 550px) stack: 2-up cards, then 4 tiles (section 7). */
@media (min-width: 550px) {
	.swp-ce-body .swp-ce-items {
		margin: 0;
	}
	.swp-ce-body h2.swp-ce-items__title,
	.swp-ce-body .swp-ce-cats-title h2 {
		text-align: left;
	}
	.swp-ce-grid,
	.swp-ce-items.is-popular .swp-ce-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		max-width: none;
	}
	.swp-ce-card {
		display: grid;
		grid-template-columns: 112px minmax(0, 1fr) auto;
		grid-template-rows: auto auto 1fr;
		column-gap: 18px;
		align-items: start;
		padding: 14px 0;
		border-top: 1px solid #e3e6e0;
		text-align: left;
	}
	.swp-ce-card:last-child {
		border-bottom: 1px solid #e3e6e0;
	}
	.swp-ce-card--no-action {
		grid-template-columns: 112px minmax(0, 1fr); /* Project List rows without a button: the text takes its width */
	}
	.swp-ce-card__photo {
		grid-row: 1 / 4;
		grid-column: 1;
	}
	.swp-ce .swp-ce-card__cat,
	.swp-ce .swp-ce-card__name,
	.swp-ce .swp-ce-card__spec {
		grid-column: 2;
	}
	.swp-ce .swp-ce-card__cat {
		margin-top: 6px;
	}
	.swp-ce .swp-ce-card__action {
		grid-row: 1 / 4;
		grid-column: 3;
		align-self: center;
		margin: 0;
		padding: 0;
	}
	.swp-ce-items__more {
		text-align: left;
	}
}

/* 4. Buttons, Title Case: Add To Truck (green-ink, filled), Choose Options (outline), Quote Request (the pill: quote-pill.css) */
.swp-ce .swp-ce-btn {
	min-height: 40px;
	margin: 0;
	padding: 0 18px;
	font-size: 15px;
	font-weight: 700;
	line-height: 36px;
	letter-spacing: 0;
	text-transform: none;
}
.swp-ce .swp-ce-btn--add {
	border: 2px solid #2f3f2e;
	border-radius: 0;
	background: #2f3f2e;
	color: #fff;
}
.swp-ce .swp-ce-btn--options {
	border: 2px solid #2f3f2e;
	border-radius: 0;
	background: #fff;
	color: #2f3f2e;
}
.swp-ce .swp-ce-btn:focus-visible {
	outline: 2px solid #3f573e;
	outline-offset: 2px;
}

/* 5. Shop by Category: photo tiles (UX Builder images + a text link under each) */
.swp-ce-list .col,
.swp-ce-cats-head .col {
	padding-bottom: 0;
}
.swp-ce-cats-head {
	margin-top: 26px;
}
.swp-ce-cats .col {
	padding-bottom: 18px;
}
.swp-ce-cats .img {
	margin-bottom: 0;
}
.swp-ce-cats p {
	margin: 10px 0 0;
	font-size: 15px;
	line-height: 1.3;
	text-align: center;
}
.swp-ce-cats p a {
	color: #2f3f2e;
	font-weight: 700;
}
.swp-ce-cats p a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* 6. The light band: "Not sure what you need? Ask a question …" (opens Quick Contact) */
.swp-ce-band p {
	margin: 0;
	color: #3d4a3b;
	font-size: 16px;
	line-height: 1.5;
	text-align: center;
	text-wrap: balance;
}
.swp-ce-band a {
	color: #2f3f2e;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}
/* A button in the band (the "Request Samples" secondary pill, #sample-request; column class swp-ce-band-actions):
   beside the sentence, centred; under it when there's no room. The pill's look is quote-pill.css 3. */
.swp-ce-band .swp-ce-band-actions > .col-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px 20px;
}
.swp-ce-band a.swp-secondary-pill,
.swp-ce-band a.swp-secondary-pill:hover { /* outranks the band's link underline, also on hover (section 6 hover) */
	margin: 0;
	text-decoration: none;
}

@media (hover: hover) {
	.swp-ce .swp-ce-card__name a:hover {
		color: #555555;
		text-decoration: underline;
		text-underline-offset: 3px;
	}
	.swp-ce .swp-ce-btn--add:hover {
		border-color: #3f573e;
		background: #3f573e;
		color: #fff;
	}
	.swp-ce .swp-ce-btn--options:hover {
		background: #2f3f2e;
		color: #fff;
	}
	.swp-ce .swp-ce-more:hover,
	.swp-ce-cats p a:hover,
	.swp-ce-band a:hover {
		color: #557353;
		text-decoration: underline;
		text-underline-offset: 3px;
	}
}

/* 7. Phones (under 550px): 2 cards per row (the Project List shows 2 + "View All N"), smaller type */
@media (max-width: 549px) {
	.swp-ce-intro h1 {
		font-size: 28px;
	}
	.swp-ce-intro p {
		font-size: 16px;
	}
	.swp-ce-grid,
	.swp-ce-items.is-popular .swp-ce-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px 12px;
	}
	.swp-ce-items.is-list .swp-ce-card:nth-child(n+3) {
		display: none;
	}
	.swp-ce .swp-ce-card__name {
		font-size: 16px;
	}
	.swp-ce .swp-ce-btn {
		width: 100%;
		padding: 0 8px;
		font-size: 14px;
	}
	.swp-ce-items__more.has-phone-link .swp-ce-more--desktop {
		display: none;
	}
	.swp-ce-items__more.has-phone-link .swp-ce-more--phone {
		display: inline;
	}
}

/* 8. Panel layout (BRAND.md "Panel layout"; Jay, live 2026-10-20; body.swp-panels + swp-ce-panels).
   The page background and all values come from base.css section 31 (shared with the shop page): white page, white
   panels, 24px apart. Panels: the head, the list / Popular Right Now, Shop by Category (beside the list from 550px)
   and the Ask band. The UX Block is unchanged: the panels are its columns' inner boxes, and the columns' 12px
   gutters make the 24px gap between the two side-by-side panels and the 12px side margin on phones. */
.swp-ce-panels .swp-ce-main,
.swp-ce-panels .swp-ce-band {
	padding: var(--swp-panel-gap) 0 0 !important; /* LEGACY: the block's section padding (40px / 28px) */
}
.swp-ce-panels .swp-ce-band {
	padding-top: 0 !important; /* the panels above already end with the 24px gap */
	padding-bottom: var(--swp-panel-gap) !important;
	background: none !important; /* LEGACY: the block's band colour */
}
.swp-ce-panels .swp-ce-band .section-bg {
	display: none; /* the band is a white panel now, not a grey strip */
}
.swp-ce-panels .swp-ce-main > .section-content > .row,
.swp-ce-panels .swp-ce-band > .section-content > .row {
	max-width: calc(1200px + var(--swp-panel-gap)); /* 1200px of panels + the column gutters */
}
.swp-ce-panels .swp-ce-head,
.swp-ce-panels .swp-ce-body {
	margin-bottom: 0;
}
.swp-ce-panels .swp-ce-head > .col,
.swp-ce-panels .swp-ce-body > .col,
.swp-ce-panels .swp-ce-band > .section-content > .row > .col {
	padding: 0 calc(var(--swp-panel-gap) / 2) var(--swp-panel-gap);
}
.swp-ce-panels .swp-ce-head > .col {
	flex-basis: 100%;
	max-width: 100%; /* the head panel spans the full width; its text stays centred */
}
.swp-ce-panels .swp-ce-band > .section-content > .row > .col {
	padding-bottom: 0;
}
.swp-ce-panels .swp-ce-body > .col {
	display: flex; /* the list and category panels are the same height */
}
.swp-ce-panels .swp-ce-head > .col > .col-inner,
.swp-ce-panels .swp-ce-body > .col > .col-inner,
.swp-ce-panels .swp-ce-band > .section-content > .row > .col > .col-inner {
	flex: 1;
	padding: var(--swp-panel-pad);
	background: #fff;
	border: 1px solid var(--swp-panel-line);
	border-radius: var(--swp-panel-radius);
}
.swp-ce-panels .swp-ce-cats {
	margin-bottom: -18px; /* the last tile row's bottom padding, so the panel padding is even */
}