/* ─────────────────────────────────────────────────────────────────────────
   Shieldworks — application layer.

   tokens.css is the system. This file only ever *uses* tokens; it never
   introduces a colour, a radius or a step of the spacing scale. If something
   here needs a value that does not exist yet, the fix is a new token, not a
   hex literal.

   Budgets carried from the design system:
     glacier  <= 8%  of any screen — links, focus, one primary button
     hazard   <= 2%  — warnings only, never decoration
   ───────────────────────────────────────────────────────────────────────── */

/* ---- 1. ground ------------------------------------------------------ */

html,
body {
	background: var(--sw-asphalt);
	color: var(--sw-salt);
}

body,
.site,
#main-container,
.ct-container,
.ct-container-fluid {
	background: var(--sw-asphalt);
}

img {
	max-width: 100%;
	height: auto;
}

.sw-muted {
	color: var(--sw-grit);
}

/* Blocksy paints its own surfaces; pull them onto our palette. */
header[data-device],
.ct-header,
footer.ct-footer,
[data-footer] {
	background: var(--sw-asphalt);
	color: var(--sw-salt);
}

/* ---- 2. the standing demo notice ------------------------------------ */

.sw-demo {
	background: var(--sw-slate);
	color: var(--sw-salt);
	border-bottom: var(--sw-border-w) solid var(--sw-border);
	font-size: var(--sw-t-xs);
	line-height: 1.4;
	padding: var(--sw-2) var(--sw-gutter);
	text-align: center;
}

.sw-demo strong {
	font-family: var(--sw-font-display);
	text-transform: uppercase;
	letter-spacing: var(--sw-track-display);
	color: var(--sw-hazard); /* a warning, and the only hazard on the page */
}

/* ---- 3. shell ------------------------------------------------------- */

.sw-wrap,
.woocommerce-page .site-main > .woocommerce,
.sw-dept__inner {
	max-width: var(--sw-maxw);
	margin-inline: auto;
	padding-inline: var(--sw-gutter);
}

.sw-crumbs {
	font-size: var(--sw-t-xs);
	color: var(--sw-grit);
	letter-spacing: 0.02em;
	margin-bottom: var(--sw-3);
}

.sw-crumbs a {
	color: var(--sw-grit);
	text-decoration: none;
}

.sw-crumbs a:hover {
	color: var(--sw-salt);
}

.sw-crumb__sep {
	padding-inline: var(--sw-2);
	color: var(--sw-grit);
	opacity: 0.55;
}

/* ---- 4. department header ------------------------------------------- */

.sw-dept {
	position: relative;
	margin-bottom: var(--sw-6);
	border-bottom: var(--sw-border-w) solid var(--sw-border);
}

.sw-dept__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.sw-dept__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 60%;
}

/* The gradient is what lets the title sit on the photograph without a
   drop shadow — depth from surface, never from a blur. */
.sw-dept.has-image .sw-dept__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		var(--sw-asphalt) 0%,
		color-mix(in srgb, var(--sw-asphalt) 88%, transparent) 42%,
		color-mix(in srgb, var(--sw-asphalt) 35%, transparent) 100%
	);
}

.sw-dept__inner {
	position: relative;
	padding-block: var(--sw-8);
	min-height: 0;
}

.sw-dept.has-image .sw-dept__inner {
	padding-block: var(--sw-9);
}

.sw-dept__title {
	font-size: var(--sw-t-h1);
	margin: 0;
	color: var(--sw-salt);
}

.sw-dept__desc {
	margin: var(--sw-3) 0 0;
	color: var(--sw-grit);
	max-width: 52ch;
}

/* ---- 5. catalogue shell --------------------------------------------- */

.sw-catalogue {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: var(--sw-6);
	max-width: var(--sw-maxw);
	margin-inline: auto;
	padding-inline: var(--sw-gutter);
	align-items: start;
}

.sw-results {
	min-width: 0;
}

/* ---- 6. the facet rail ---------------------------------------------- */

.sw-rail {
	position: sticky;
	top: var(--sw-4);
	border: var(--sw-border-w) solid var(--sw-border);
	border-radius: var(--sw-radius);
	background: var(--sw-slate);
	padding: var(--sw-4);
	max-height: calc(100vh - var(--sw-6));
	overflow-y: auto;
	overscroll-behavior: contain;
}

.sw-rail__head {
	display: none;
}

.sw-facet + .sw-facet {
	margin-top: var(--sw-5);
	padding-top: var(--sw-5);
	border-top: var(--sw-border-w) solid var(--sw-border);
}

.sw-facet__head {
	font-family: var(--sw-font-display);
	font-size: var(--sw-t-sm);
	text-transform: uppercase;
	letter-spacing: var(--sw-track-display);
	color: var(--sw-grit);
	margin: 0 0 var(--sw-3);
}

.sw-facet__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sw-facet__back {
	display: inline-block;
	font-size: var(--sw-t-xs);
	margin-bottom: var(--sw-2);
	text-decoration: none;
}

.sw-facet__link {
	display: flex;
	align-items: center;
	gap: var(--sw-2);
	padding: var(--sw-2) var(--sw-1);
	color: var(--sw-salt);
	text-decoration: none;
	font-size: var(--sw-t-sm);
	line-height: 1.3;
	border-radius: var(--sw-radius);
	min-height: 36px;
}

.sw-facet__link:hover {
	background: var(--sw-surface-raised);
	color: var(--sw-salt);
}

.sw-facet__box {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	border: var(--sw-border-w) solid var(--sw-grit);
	border-radius: var(--sw-radius);
}

.sw-facet__link.is-on .sw-facet__box {
	background: var(--sw-glacier);
	border-color: var(--sw-glacier);
}

.sw-facet__link.is-on {
	color: var(--sw-salt);
}

.sw-facet__label {
	flex: 1 1 auto;
	min-width: 0;
}

.sw-facet__count {
	flex: 0 0 auto;
	color: var(--sw-grit);
	font-family: var(--sw-font-mono);
	font-size: var(--sw-t-xs);
	letter-spacing: var(--sw-track-mono);
}

.sw-facet__more {
	margin-top: var(--sw-2);
	background: none;
	border: 0;
	padding: var(--sw-2) 0;
	color: var(--sw-glacier);
	font-size: var(--sw-t-xs);
	cursor: pointer;
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--sw-glacier) 40%, transparent);
}

/* price */

.sw-price__row {
	display: flex;
	gap: var(--sw-2);
	align-items: flex-end;
	flex-wrap: wrap;
}

.sw-price__field {
	flex: 1 1 78px;
	min-width: 0;
	display: block;
}

.sw-price__cap {
	display: block;
	font-size: var(--sw-t-xs);
	color: var(--sw-grit);
	margin-bottom: var(--sw-1);
}

.sw-price input,
.sw-select select {
	width: 100%;
	background: var(--sw-asphalt);
	color: var(--sw-salt);
	border: var(--sw-border-w) solid var(--sw-border);
	border-radius: var(--sw-radius);
	padding: var(--sw-2);
	font: inherit;
	font-size: var(--sw-t-sm);
	min-height: 38px;
}

.sw-price__go {
	flex: 0 0 auto;
	background: transparent;
	color: var(--sw-glacier);
	border: var(--sw-border-w) solid var(--sw-glacier);
	border-radius: var(--sw-radius);
	padding: var(--sw-2) var(--sw-3);
	font-family: var(--sw-font-display);
	text-transform: uppercase;
	letter-spacing: var(--sw-track-display);
	font-size: var(--sw-t-xs);
	cursor: pointer;
	min-height: 38px;
}

.sw-price__hint {
	margin: var(--sw-2) 0 0;
	font-size: var(--sw-t-xs);
	color: var(--sw-grit);
	max-width: none;
}

/* ---- 7. chips and toolbar ------------------------------------------- */

.sw-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sw-2);
	align-items: center;
	margin-bottom: var(--sw-4);
}

.sw-chips__cap {
	font-size: var(--sw-t-xs);
	color: var(--sw-grit);
	text-transform: uppercase;
	letter-spacing: var(--sw-track-display);
	font-family: var(--sw-font-display);
}

.sw-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--sw-2);
	background: var(--sw-slate);
	border: var(--sw-border-w) solid var(--sw-border);
	border-radius: var(--sw-radius);
	padding: var(--sw-1) var(--sw-2);
	font-size: var(--sw-t-xs);
	color: var(--sw-salt);
	text-decoration: none;
	min-height: 30px;
}

.sw-chip:hover {
	border-color: var(--sw-glacier);
	color: var(--sw-salt);
}

.sw-chip__x {
	color: var(--sw-grit);
}

.sw-chip--clear {
	background: none;
	color: var(--sw-glacier);
}

.sw-toolbar {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sw-4);
	flex-wrap: wrap;
	padding-bottom: var(--sw-3);
	margin-bottom: var(--sw-5);
	border-bottom: var(--sw-border-w) solid var(--sw-border);
}

.sw-toolbar__count {
	margin: 0;
	color: var(--sw-grit);
	font-size: var(--sw-t-sm);
	max-width: none;
}

.sw-toolbar__controls {
	display: flex;
	gap: var(--sw-3);
	flex-wrap: wrap;
}

.sw-select {
	display: flex;
	align-items: center;
	gap: var(--sw-2);
}

.sw-select__cap {
	font-size: var(--sw-t-xs);
	color: var(--sw-grit);
	text-transform: uppercase;
	letter-spacing: var(--sw-track-display);
	font-family: var(--sw-font-display);
	white-space: nowrap;
}

.sw-select select {
	width: auto;
	min-width: 120px;
}

.sw-empty {
	padding: var(--sw-6) 0;
	color: var(--sw-grit);
}

/* ---- 8. product cards ----------------------------------------------- */

.woocommerce ul.products,
ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sw-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce ul.products li.product,
ul.products li.product {
	margin: 0;
	width: auto;
	float: none;
	background: var(--sw-slate);
	border: var(--sw-border-w) solid var(--sw-border);
	border-radius: var(--sw-radius);
	padding: var(--sw-3);
	display: flex;
	flex-direction: column;
	transition: border-color 0.15s ease;
}

ul.products li.product:hover {
	border-color: color-mix(in srgb, var(--sw-grit) 70%, transparent);
}

ul.products li.product a img {
	background: transparent;
	aspect-ratio: 1;
	object-fit: contain;
	margin-bottom: var(--sw-3);
	mix-blend-mode: normal;
}

.sw-card__brand {
	display: block;
	font-family: var(--sw-font-display);
	font-size: var(--sw-t-xs);
	text-transform: uppercase;
	letter-spacing: var(--sw-track-display);
	color: var(--sw-grit);
	margin-bottom: var(--sw-1);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2 {
	font-family: var(--sw-font-body);
	font-size: var(--sw-t-sm);
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.35;
	color: var(--sw-salt);
	padding: 0;
	margin: 0 0 var(--sw-1);
}

.sw-card__size {
	display: block;
	font-family: var(--sw-font-mono);
	font-size: var(--sw-t-xs);
	letter-spacing: var(--sw-track-mono);
	color: var(--sw-grit);
}

.sw-card__stock {
	display: inline-block;
	margin-top: var(--sw-1);
	font-size: var(--sw-t-xs);
	color: var(--sw-grit);
	border: var(--sw-border-w) solid var(--sw-border);
	border-radius: var(--sw-radius);
	padding: 0 var(--sw-1);
}

.woocommerce ul.products li.product .price,
ul.products li.product .price {
	margin-top: auto;
	padding-top: var(--sw-3);
	color: var(--sw-salt);
	font-family: var(--sw-font-mono);
	font-size: var(--sw-t-body);
	letter-spacing: var(--sw-track-mono);
}

/* ---- 9. product page ------------------------------------------------ */

.single-product div.product {
	max-width: var(--sw-maxw);
	margin-inline: auto;
	padding-inline: var(--sw-gutter);
}

.single-product div.product .woocommerce-product-gallery img {
	background: var(--sw-slate);
	border: var(--sw-border-w) solid var(--sw-border);
	border-radius: var(--sw-radius);
	aspect-ratio: 1;
	object-fit: contain;
	padding: var(--sw-5);
}

.sw-pdp__brand {
	display: inline-block;
	font-family: var(--sw-font-display);
	font-size: var(--sw-t-sm);
	text-transform: uppercase;
	letter-spacing: var(--sw-track-display);
	text-decoration: none;
	margin-bottom: var(--sw-2);
}

.single-product .product_title {
	font-size: var(--sw-t-h2);
	margin: 0 0 var(--sw-3);
}

.single-product .price,
.single-product p.price {
	font-family: var(--sw-font-mono);
	letter-spacing: var(--sw-track-mono);
	color: var(--sw-salt);
	font-size: var(--sw-t-h4);
}

.sw-pdp__size {
	font-family: var(--sw-font-mono);
	font-size: var(--sw-t-sm);
	letter-spacing: var(--sw-track-mono);
	color: var(--sw-grit);
	margin: var(--sw-1) 0 var(--sw-4);
}

.woocommerce-product-details__short-description {
	color: var(--sw-salt);
	margin-bottom: var(--sw-4);
}

.sw-pdp__terms {
	list-style: none;
	margin: var(--sw-5) 0 0;
	padding: var(--sw-4) 0 0;
	border-top: var(--sw-border-w) solid var(--sw-border);
	font-size: var(--sw-t-sm);
	color: var(--sw-grit);
}

.sw-pdp__terms li + li {
	margin-top: var(--sw-1);
}

/* the one primary CTA on the page */
.single-product .single_add_to_cart_button,
.woocommerce .button.alt {
	background: var(--sw-glacier);
	color: var(--sw-asphalt);
	border: var(--sw-border-w) solid var(--sw-glacier);
	border-radius: var(--sw-radius);
	font-family: var(--sw-font-display);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--sw-track-display);
	padding: 14px var(--sw-5);
	min-height: 48px;
}

.single-product .single_add_to_cart_button:hover,
.woocommerce .button.alt:hover {
	background: var(--sw-glacier-hover);
	color: var(--sw-asphalt);
}

.single-product .quantity input[type="number"] {
	background: var(--sw-asphalt);
	color: var(--sw-salt);
	border: var(--sw-border-w) solid var(--sw-border);
	border-radius: var(--sw-radius);
	min-height: 48px;
}

/* anchors — what a tab strip only pretended to be */
.sw-anchors {
	display: flex;
	gap: var(--sw-1);
	flex-wrap: wrap;
	margin: var(--sw-8) 0 var(--sw-5);
	padding-bottom: var(--sw-2);
	border-bottom: var(--sw-border-w) solid var(--sw-border);
	position: sticky;
	top: 0;
	background: var(--sw-asphalt);
	z-index: 2;
}

.sw-anchors__link {
	font-family: var(--sw-font-display);
	font-size: var(--sw-t-sm);
	text-transform: uppercase;
	letter-spacing: var(--sw-track-display);
	color: var(--sw-grit);
	text-decoration: none;
	padding: var(--sw-2) var(--sw-3);
	border-radius: var(--sw-radius);
}

.sw-anchors__link:hover,
.sw-anchors__link.is-current {
	color: var(--sw-salt);
	background: var(--sw-slate);
}

.sw-stack__section {
	scroll-margin-top: var(--sw-8);
	padding-block: var(--sw-5);
	border-top: var(--sw-border-w) solid var(--sw-border);
}

.sw-stack__section:first-child {
	border-top: 0;
}

.sw-stack__title {
	font-size: var(--sw-t-h4);
	margin: 0 0 var(--sw-4);
}

.sw-stack__body ul {
	color: var(--sw-salt);
	padding-left: var(--sw-5);
}

.sw-note--warn {
	border-left: 2px solid var(--sw-hazard);
	padding-left: var(--sw-3);
	color: var(--sw-salt);
}

/* the spec table — the credibility argument, so it is the most legible
   object on the page */
.sw-spec {
	display: block;
	width: 100%;
	max-width: 620px;
	margin: 0;
	border: var(--sw-border-w) solid var(--sw-border);
	border-radius: var(--sw-radius);
	overflow: hidden;
}

.sw-spec__row {
	display: flex;
	justify-content: space-between;
	gap: var(--sw-4);
	padding: var(--sw-3) var(--sw-4);
}

.sw-spec__row:nth-child(odd) {
	background: var(--sw-slate);
}

.sw-spec dt {
	color: var(--sw-grit);
	font-size: var(--sw-t-sm);
	font-weight: 500;
	margin: 0;
}

.sw-spec dd {
	margin: 0;
	text-align: right;
	font-family: var(--sw-font-mono);
	font-size: var(--sw-t-sm);
	letter-spacing: var(--sw-track-mono);
	color: var(--sw-salt);
}

.sw-related {
	margin-top: var(--sw-8);
	padding-top: var(--sw-6);
	border-top: var(--sw-border-w) solid var(--sw-border);
}

.sw-related__title {
	font-size: var(--sw-t-h4);
	margin: 0 0 var(--sw-4);
}

/* ---- 10. cart, checkout, account ------------------------------------ */

.woocommerce table.shop_table,
.woocommerce-cart table.cart {
	border: var(--sw-border-w) solid var(--sw-border);
	border-radius: var(--sw-radius);
	border-collapse: collapse;
	background: var(--sw-slate);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border-color: var(--sw-border);
	color: var(--sw-salt);
}

.woocommerce .cart_totals h2,
.woocommerce-checkout h3 {
	font-size: var(--sw-t-h4);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single {
	background: var(--sw-asphalt);
	color: var(--sw-salt);
	border: var(--sw-border-w) solid var(--sw-border);
	border-radius: var(--sw-radius);
	min-height: 46px;
	padding: var(--sw-2) var(--sw-3);
}

.woocommerce-checkout #payment,
.woocommerce-checkout .woocommerce-checkout-review-order {
	background: var(--sw-slate);
	border: var(--sw-border-w) solid var(--sw-border);
	border-radius: var(--sw-radius);
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--sw-asphalt);
	color: var(--sw-salt);
	border-radius: var(--sw-radius);
}

.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--sw-asphalt);
}

.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
	background: var(--sw-slate);
	border-top-color: var(--sw-glacier);
	color: var(--sw-salt);
	border-radius: var(--sw-radius);
}

.woocommerce-error {
	border-top-color: var(--sw-err);
}

/* ---- 11. responsive -------------------------------------------------- */

.sw-rail__toggle {
	display: none;
}

@media (max-width: 1024px) {
	.woocommerce ul.products,
	ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.sw-catalogue {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sw-4);
	}

	.sw-rail__toggle {
		display: inline-flex;
		align-items: center;
		gap: var(--sw-2);
		background: transparent;
		color: var(--sw-glacier);
		border: var(--sw-border-w) solid var(--sw-glacier);
		border-radius: var(--sw-radius);
		font-family: var(--sw-font-display);
		text-transform: uppercase;
		letter-spacing: var(--sw-track-display);
		padding: var(--sw-2) var(--sw-4);
		min-height: 44px;
		cursor: pointer;
		margin-bottom: var(--sw-3);
	}

	.sw-rail__badge {
		background: var(--sw-glacier);
		color: var(--sw-asphalt);
		border-radius: var(--sw-radius);
		padding: 0 var(--sw-1);
		font-size: var(--sw-t-xs);
	}

	/* The rail becomes a sheet. Hidden by default so the grid is what loads. */
	.sw-rail {
		position: fixed;
		inset: 0;
		z-index: 80;
		max-height: none;
		height: 100%;
		border: 0;
		border-radius: 0;
		padding: var(--sw-4) var(--sw-gutter) var(--sw-8);
		display: none;
	}

	.sw-rail.is-open {
		display: block;
	}

	.sw-rail__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: sticky;
		top: 0;
		background: var(--sw-slate);
		padding-block: var(--sw-3);
		margin-bottom: var(--sw-3);
		border-bottom: var(--sw-border-w) solid var(--sw-border);
	}

	.sw-rail__title {
		font-size: var(--sw-t-h4);
		margin: 0;
	}

	.sw-rail__close {
		background: var(--sw-glacier);
		color: var(--sw-asphalt);
		border: 0;
		border-radius: var(--sw-radius);
		font-family: var(--sw-font-display);
		text-transform: uppercase;
		letter-spacing: var(--sw-track-display);
		padding: var(--sw-2) var(--sw-5);
		min-height: 44px;
		cursor: pointer;
	}

	body.sw-rail-open {
		overflow: hidden;
	}
}

@media (max-width: 680px) {
	.woocommerce ul.products,
	ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sw-dept.has-image .sw-dept__inner {
		padding-block: var(--sw-7);
	}

	.sw-dept.has-image .sw-dept__media::after {
		background: linear-gradient(
			180deg,
			color-mix(in srgb, var(--sw-asphalt) 55%, transparent) 0%,
			var(--sw-asphalt) 88%
		);
	}

	.sw-toolbar {
		align-items: flex-start;
		flex-direction: column;
		gap: var(--sw-3);
	}

	.sw-anchors {
		overflow-x: auto;
		flex-wrap: nowrap;
		scrollbar-width: none;
	}

	.sw-anchors::-webkit-scrollbar {
		display: none;
	}

	.sw-anchors__link {
		white-space: nowrap;
	}
}

/* 360px is the floor this build is verified at. Two columns still fit
   because the card has no fixed minimum wider than half the gutter box. */
@media (max-width: 400px) {
	.woocommerce ul.products,
	ul.products {
		gap: var(--sw-2);
	}

	ul.products li.product {
		padding: var(--sw-2);
	}

	.sw-toolbar__controls {
		width: 100%;
	}

	.sw-select {
		flex: 1 1 100%;
	}

	.sw-select select {
		flex: 1 1 auto;
	}
}

/* ---- 12. focus ------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--sw-glacier);
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---- 13. home page furniture ---------------------------------------- */

.sw-hero {
	position: relative;
	border-bottom: var(--sw-border-w) solid var(--sw-border);
	overflow: hidden;
}

.sw-hero__media {
	position: absolute;
	inset: 0;
}

.sw-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 70% center;
}

.sw-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		95deg,
		var(--sw-asphalt) 0%,
		color-mix(in srgb, var(--sw-asphalt) 92%, transparent) 38%,
		color-mix(in srgb, var(--sw-asphalt) 30%, transparent) 100%
	);
}

.sw-hero__inner {
	position: relative;
	max-width: var(--sw-maxw);
	margin-inline: auto;
	padding: var(--sw-9) var(--sw-gutter);
}

.sw-hero__title {
	font-size: var(--sw-t-hero);
	margin: 0 0 var(--sw-4);
	max-width: 18ch;
}

.sw-hero__lede {
	color: var(--sw-salt);
	max-width: 46ch;
	margin: 0 0 var(--sw-6);
}

.sw-depts,
.sw-trust,
.sw-strip,
.sw-brands {
	max-width: var(--sw-maxw);
	margin-inline: auto;
	padding: var(--sw-8) var(--sw-gutter);
}

.sw-depts__title,
.sw-strip__title,
.sw-brands__title {
	font-size: var(--sw-t-h3);
	margin: 0 0 var(--sw-5);
}

.sw-depts__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sw-4);
}

.sw-depts__item {
	background: var(--sw-slate);
	border: var(--sw-border-w) solid var(--sw-border);
	border-radius: var(--sw-radius);
	overflow: hidden;
}

.sw-depts__link {
	display: block;
	text-decoration: none;
	color: var(--sw-salt);
}

.sw-depts__media {
	display: block;
	aspect-ratio: 21 / 9;
	overflow: hidden;
}

.sw-depts__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sw-depts__name {
	display: block;
	font-family: var(--sw-font-display);
	font-size: var(--sw-t-h4);
	text-transform: uppercase;
	letter-spacing: var(--sw-track-display);
	padding: var(--sw-3) var(--sw-4) 0;
}

.sw-depts__count {
	display: block;
	font-family: var(--sw-font-mono);
	font-size: var(--sw-t-xs);
	letter-spacing: var(--sw-track-mono);
	color: var(--sw-grit);
	padding: 0 var(--sw-4) var(--sw-3);
}

.sw-depts__kids {
	list-style: none;
	margin: 0;
	padding: 0 var(--sw-4) var(--sw-4);
	display: flex;
	flex-wrap: wrap;
	gap: var(--sw-2);
}

.sw-depts__kids a {
	font-size: var(--sw-t-xs);
	color: var(--sw-grit);
	text-decoration: none;
	border: var(--sw-border-w) solid var(--sw-border);
	border-radius: var(--sw-radius);
	padding: var(--sw-1) var(--sw-2);
	display: inline-block;
}

.sw-depts__kids a:hover {
	color: var(--sw-salt);
	border-color: var(--sw-grit);
}

.sw-trust {
	border-block: var(--sw-border-w) solid var(--sw-border);
}

.sw-trust__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sw-5);
}

.sw-trust__head {
	font-size: var(--sw-t-sm);
	margin: 0 0 var(--sw-2);
	color: var(--sw-salt);
}

.sw-trust__body {
	margin: 0;
	color: var(--sw-grit);
	font-size: var(--sw-t-sm);
	max-width: none;
}

.sw-brands__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: var(--sw-2);
}

.sw-brands__link {
	display: flex;
	justify-content: space-between;
	gap: var(--sw-2);
	align-items: center;
	padding: var(--sw-3);
	background: var(--sw-slate);
	border: var(--sw-border-w) solid var(--sw-border);
	border-radius: var(--sw-radius);
	text-decoration: none;
	color: var(--sw-salt);
	font-size: var(--sw-t-sm);
	min-height: 48px;
}

.sw-brands__link:hover {
	border-color: var(--sw-glacier);
	color: var(--sw-salt);
}

.sw-brands__count {
	font-family: var(--sw-font-mono);
	font-size: var(--sw-t-xs);
	letter-spacing: var(--sw-track-mono);
	color: var(--sw-grit);
}

@media (max-width: 1024px) {
	.sw-depts__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sw-trust__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 680px) {
	.sw-hero__inner {
		padding-block: var(--sw-7);
	}

	.sw-hero__media::after {
		background: linear-gradient(
			180deg,
			color-mix(in srgb, var(--sw-asphalt) 60%, transparent) 0%,
			var(--sw-asphalt) 85%
		);
	}

	.sw-hero__title,
	.sw-hero__lede {
		max-width: none;
	}

	.sw-depts__grid,
	.sw-trust__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.sw-brands__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---- 14. Blocksy corrections ---------------------------------------- */

/* Blocksy paints its own page-title band above the content. On a catalogue
   view that is a second, lighter hero stacked on ours. The PHP filter names
   for this moved between Blocksy versions, so it is switched off here where
   the selector is stable. */
body.woocommerce-shop .hero-section,
body.tax-product_cat .hero-section,
body.tax-product_brand .hero-section,
body.single-product .hero-section {
	display: none;
}

/* The card is ours: no duplicate category list, no second call to action.
   One primary CTA per view, and on a grid that CTA is the card itself. */
ul.products li.product .entry-meta,
ul.products li.product .ct-woo-card-actions {
	display: none;
}

ul.products li.product figure,
ul.products li.product .ct-media-container {
	display: block;
	margin: 0 0 var(--sw-3);
}

ul.products li.product .ct-media-container img,
ul.products li.product img.wp-post-image {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: contain;
	background: transparent;
}

/* Titles on a card are text that happens to be clickable, not links to read
   as links — the accent budget is spent on the one primary action. */
ul.products li.product .woocommerce-loop-product__title a,
ul.products li.product h2 a {
	color: var(--sw-salt);
	text-decoration: none;
}

ul.products li.product .woocommerce-loop-product__title a:hover {
	color: var(--sw-glacier);
}

/* Blocksy's header and footer ship light. */
header.ct-header,
header.ct-header [data-row],
header.ct-header [data-column],
footer.ct-footer,
footer.ct-footer [data-row] {
	background-color: var(--sw-asphalt);
	color: var(--sw-salt);
}

header.ct-header .site-title,
header.ct-header .site-title a {
	font-family: var(--sw-font-display);
	text-transform: uppercase;
	letter-spacing: var(--sw-track-display);
	color: var(--sw-salt);
	text-decoration: none;
}

header.ct-header .menu-item > a,
header.ct-header .ct-menu-link {
	color: var(--sw-salt);
	font-family: var(--sw-font-display);
	text-transform: uppercase;
	letter-spacing: var(--sw-track-display);
}

header.ct-header .menu-item > a:hover {
	color: var(--sw-glacier);
}

/* Blocksy's own form controls, pulled onto the palette. */
.sw-toolbar select,
.sw-price input[type="number"] {
	background-color: var(--sw-asphalt);
	color: var(--sw-salt);
	border-color: var(--sw-border);
}

/* ---- 15. identity ---------------------------------------------------- */

/*
 * The wordmark is the theme's own SVG rather than an uploaded attachment:
 * Hostinger's WAF refuses SVG through the REST media endpoint, and a
 * rasterised logo is either soft on a retina screen or a large asset on the
 * critical path. The anchor keeps its text for assistive technology.
 */
header.ct-header .site-title a,
header.ct-header .site-logo-container .site-title a {
	display: inline-block;
	width: 212px;
	height: 48px;
	font-size: 0;
	line-height: 0;
	color: transparent;
	background: url("brand/horizontal.svg") left center / contain no-repeat;
}

@media (max-width: 680px) {
	header.ct-header .site-title a {
		width: 168px;
		height: 38px;
	}
}

/* ---- 16. long-form content ------------------------------------------ */

.page .entry-content,
.single-post .entry-content {
	max-width: 74ch;
	margin-inline: auto;
	padding-inline: var(--sw-gutter);
}

.entry-content h2 {
	font-size: var(--sw-t-h3);
	margin-top: var(--sw-7);
	margin-bottom: var(--sw-3);
}

.entry-content h3 {
	font-size: var(--sw-t-h4);
	margin-top: var(--sw-6);
	margin-bottom: var(--sw-2);
}

.entry-content p,
.entry-content li {
	color: var(--sw-salt);
}

.entry-content hr {
	border: 0;
	border-top: var(--sw-border-w) solid var(--sw-border);
	margin-block: var(--sw-6);
}

.entry-content .sw-table,
.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--sw-t-sm);
	margin-block: var(--sw-5);
	display: block;
	overflow-x: auto;
}

.entry-content table th {
	text-align: left;
	color: var(--sw-grit);
	font-weight: 500;
	padding: var(--sw-2) var(--sw-3);
	border-bottom: var(--sw-border-w) solid var(--sw-border);
	white-space: nowrap;
}

.entry-content table td {
	padding: var(--sw-2) var(--sw-3);
	border-bottom: var(--sw-border-w) solid var(--sw-border);
}

/* A term description is guidance, not a wall — it gets the reading measure
   the page body does, inside the department header. */
.sw-dept__desc,
.term-description {
	max-width: 62ch;
	color: var(--sw-grit);
}

/* ---- 17. holding the palette against Blocksy ------------------------ */

/*
 * Blocksy renders its own colour scheme through a large block of CSS custom
 * properties on :root, and those win over element selectors because they are
 * what its own rules read. Re-point the ones that matter at our tokens rather
 * than fighting each rule individually — this is the whole reason tokens.css
 * exists as the single source.
 */
:root,
body {
	--theme-palette-color-1: var(--sw-glacier);
	--theme-palette-color-2: var(--sw-glacier-hover);
	--theme-palette-color-3: var(--sw-salt);
	--theme-palette-color-4: var(--sw-salt);
	--theme-palette-color-5: var(--sw-slate);
	--theme-palette-color-6: var(--sw-asphalt);
	--theme-palette-color-7: var(--sw-asphalt);
	/* Blocksy paints the header row from palette-8; on a dark theme that has
	   to be the page ground, not a raised surface. */
	--theme-palette-color-8: var(--sw-asphalt);
	--theme-text-color: var(--sw-salt);
	--theme-link-initial-color: var(--sw-glacier);
	--theme-link-hover-color: var(--sw-glacier-hover);
	--theme-headings-color: var(--sw-salt);
	--theme-content-spacing: var(--sw-5);
	--theme-border-color: var(--sw-border);
	--theme-button-text-initial-color: var(--sw-asphalt);
	--theme-button-background-initial-color: var(--sw-glacier);
	--theme-button-background-hover-color: var(--sw-glacier-hover);
	--theme-form-field-background-color: var(--sw-asphalt);
	--theme-form-text-initial-color: var(--sw-salt);
	--theme-form-field-border-initial-color: var(--sw-border);
	--theme-button-border-radius: var(--sw-radius);
	--theme-form-field-border-radius: var(--sw-radius);
	--paletteColor1: var(--sw-glacier);
	--paletteColor3: var(--sw-salt);
	--paletteColor5: var(--sw-slate);
	--paletteColor8: var(--sw-asphalt);
	--paletteColor6: var(--sw-asphalt);
	--paletteColor7: var(--sw-asphalt);
	--headings-color: var(--sw-salt);
	--linkInitialColor: var(--sw-glacier);
	--linkHoverColor: var(--sw-glacier-hover);
	--color: var(--sw-salt);
	--headerBackground: var(--sw-asphalt);
	--footerBackground: var(--sw-asphalt);
}

/* Headings are salt. The accent budget is spent on links, focus and the one
   primary button — never on a heading, which would put glacier well past 8%. */
h1,
h2,
h3,
h4,
h5,
h6,
.page-title,
.entry-title,
.woocommerce-loop-product__title,
.product_title {
	color: var(--sw-salt);
}

/* Blocksy's page-title band duplicates our own header on every template that
   has one, and on the front page it prints the site name above the hero. */
.hero-section,
.ct-hero-section,
.page-title-wrapper {
	display: none;
}

/* Full bleed. Blocksy paints the row, not the element that surrounds it. */
html,
body,
#main-container,
.site,
header.ct-header,
header.ct-header [data-row],
header.ct-header [data-column],
footer.ct-footer,
footer.ct-footer [data-row],
footer.ct-footer [data-column],
.ct-drawer-canvas,
[data-panel],
#offcanvas {
	background-color: var(--sw-asphalt);
}

.ct-header [data-row="middle"],
.ct-header [data-row="top"],
.ct-header [data-row="bottom"] {
	border-bottom: var(--sw-border-w) solid var(--sw-border);
}

footer.ct-footer {
	border-top: var(--sw-border-w) solid var(--sw-border);
	color: var(--sw-grit);
	font-size: var(--sw-t-sm);
}

footer.ct-footer a {
	color: var(--sw-grit);
	text-decoration: none;
}

footer.ct-footer a:hover {
	color: var(--sw-salt);
}

/* Dropdowns in the primary menu — the level-2 categories live here, so they
   have to be legible rather than inheriting a light default. */
.ct-header .sub-menu,
.ct-header .menu-item .sub-menu {
	background: var(--sw-slate);
	border: var(--sw-border-w) solid var(--sw-border);
	border-radius: var(--sw-radius);
}

.ct-header .sub-menu a {
	color: var(--sw-salt);
	text-transform: none;
	letter-spacing: 0;
	font-family: var(--sw-font-body);
}

/* Mobile off-canvas panel. */
#offcanvas .ct-panel-inner,
#offcanvas .ct-panel-content {
	background: var(--sw-asphalt);
	color: var(--sw-salt);
}

/* The search modal ships light. */
#search-modal .ct-panel-content,
#search-modal form {
	background: var(--sw-asphalt);
	color: var(--sw-salt);
}

/* ---- 18. full-bleed home sections ----------------------------------- */

/*
 * The home page is built from shortcodes inside the normal entry content, so
 * its sections inherit the reading measure meant for prose — a 590px hero on
 * a 1280px screen. These break out to the viewport and re-impose the
 * catalogue's own max width from the inside, which keeps one grid across the
 * whole site without needing a separate page template.
 */
.home .entry-content,
.page-id-482 .entry-content {
	max-width: none;
	padding-inline: 0;
}

.sw-hero,
.sw-depts,
.sw-trust,
.sw-strip,
.sw-brands {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
	padding-inline: max(var(--sw-gutter), calc(50vw - var(--sw-maxw) / 2));
	box-sizing: border-box;
}

.sw-hero {
	padding-inline: 0;
}

.sw-hero__inner {
	padding-inline: max(var(--sw-gutter), calc(50vw - var(--sw-maxw) / 2));
	max-width: none;
	margin-inline: 0;
}

/* Header rows: Blocksy paints the row slate and the inner container asphalt,
   which shows as two pale strips either side of the menu. */
header.ct-header [data-row="top"],
header.ct-header [data-row="middle"],
header.ct-header [data-row="bottom"],
footer.ct-footer [data-row="top"],
footer.ct-footer [data-row="middle"],
footer.ct-footer [data-row="bottom"] {
	background-color: var(--sw-asphalt);
}

/* Blocksy's container is 1152; ours is 1280. One grid, not two. */
.ct-container,
.ct-container-narrow,
[class*="ct-container"] {
	max-width: var(--sw-maxw);
}