/**
 * Chief Camper — shop, category, search, and product pages.
 */

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */
.cc-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0 0 var(--cc-space-2);
	padding: 0;
	font-size: var(--cc-text-xs);
	color: var(--cc-color-body);
}

.cc-breadcrumb li { display: flex; align-items: center; gap: 6px; }

.cc-breadcrumb li:not(:last-child)::after {
	content: "/";
	opacity: 0.45;
}

.cc-breadcrumb a { color: inherit; text-decoration: none; opacity: 0.8; }
.cc-breadcrumb a:hover { color: var(--cc-color-accent); opacity: 1; text-decoration: underline; }

/* ==========================================================================
   Archive header
   ========================================================================== */
.cc-archive-header {
	background: var(--cc-color-surface);
	border-bottom: 1px solid var(--cc-color-border);
	padding-block: var(--cc-space-5);
	margin-bottom: var(--cc-space-5);
}

.cc-archive-header__title { margin: 0 0 var(--cc-space-2); }

.cc-archive-header__desc {
	max-width: 68ch;
	color: var(--cc-color-body);
}

.cc-archive-header__desc p:last-child { margin-bottom: 0; }

/* With a banner the header goes full-bleed dark with the photo behind */
.cc-archive-header--banner {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	background: var(--cc-color-heading);
	border-bottom: none;
	padding-block: var(--cc-space-5);
	/* Tall enough to actually show the photograph. The banners are ~2.36:1;
	   a short band crops so hard that the composition is lost entirely. */
	min-height: clamp(240px, 24vw, 360px);
}

.cc-archive-header__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
}

/* Scoped through the parent (0-2-0) so it outranks WooCommerce's
   `.woocommerce img { height: auto }` (0-1-1) — otherwise the banner keeps
   its natural aspect height, overflows the header, and gets clipped to a
   near-black sliver by the scrim. */
.cc-archive-header .cc-archive-header__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Scrim weighted to the left, where the title and breadcrumbs sit, and
   falling away sharply to the right so the subject of the photograph
   stays visible. Only as dark as the white text actually needs. */
.cc-archive-header--banner::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(20, 28, 23, .8) 0%, rgba(20, 28, 23, .55) 38%, rgba(20, 28, 23, .12) 100%);
}

/* The subject sits right of centre in every banner, so anchor the crop
   there rather than letting a centre crop slice it off. */
.cc-archive-header--banner .cc-archive-header__img { object-position: 65% 50%; }

.cc-archive-header--banner .cc-archive-header__title,
.cc-archive-header--banner .cc-archive-header__desc {
	text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
}

.cc-archive-header--banner .cc-archive-header__inner { max-width: var(--cc-container-max); }
.cc-archive-header--banner .cc-archive-header__desc { max-width: 46ch; }

.cc-archive-header--banner .cc-archive-header__title { color: #FFFFFF; }
.cc-archive-header--banner .cc-archive-header__desc { color: rgba(255, 255, 255, .88); }
.cc-archive-header--banner .cc-breadcrumb { color: rgba(255, 255, 255, .8); }
.cc-archive-header--banner .cc-breadcrumb a:hover { color: var(--cc-color-button-bg); }

@media (max-width: 768px) {
	/* Text spans the full width on mobile, so the scrim has to cover the
	   whole frame — kept lighter than the desktop left edge so the photo
	   still reads behind it. */
	.cc-archive-header--banner::after {
		background: linear-gradient(180deg, rgba(20, 28, 23, .72) 0%, rgba(20, 28, 23, .6) 55%, rgba(20, 28, 23, .74) 100%);
	}

	.cc-archive-header--banner { min-height: clamp(200px, 44vw, 280px); }
	.cc-archive-header--banner .cc-archive-header__img { object-position: 60% 50%; }
}

/* ==========================================================================
   Shop layout — filters + results
   ========================================================================== */
.cc-shop__layout {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: var(--cc-space-5);
	align-items: start;
	padding-bottom: var(--cc-space-7);
}

.cc-shop__results { min-width: 0; }

/* ==========================================================================
   Filters
   ========================================================================== */
.cc-filters {
	background: var(--cc-color-surface);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-md);
	padding: var(--cc-space-4);
	position: sticky;
	top: var(--cc-space-3);
	max-height: calc(100vh - var(--cc-space-6));
	overflow-y: auto;
}

.cc-filters__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--cc-space-3);
}

.cc-filters__heading {
	font-size: var(--cc-text-md);
	margin: 0;
	text-transform: uppercase;
	letter-spacing: var(--cc-tracking-wide);
}

.cc-filters__close {
	display: none;
	background: none;
	border: none;
	font-size: 1.6rem;
	line-height: 1;
	color: var(--cc-color-heading);
	cursor: pointer;
	padding: 0 4px;
}

.cc-filters__open { display: none; }

.cc-filters__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	margin-left: 6px;
	border-radius: 100px;
	background: var(--cc-color-accent);
	color: #FFFFFF;
	font-family: var(--cc-font-mono);
	font-size: 11px;
}

.cc-filter-group {
	padding-top: var(--cc-space-3);
	margin-top: var(--cc-space-3);
	border-top: 1px solid var(--cc-color-border);
}

.cc-filter-group:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }

.cc-filter-group__title {
	font-size: var(--cc-text-xs);
	text-transform: uppercase;
	letter-spacing: var(--cc-tracking-wide);
	color: var(--cc-color-muted, var(--cc-color-body));
	opacity: .75;
	margin: 0 0 var(--cc-space-2);
}

.cc-filter-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }

.cc-filter-link {
	display: flex;
	align-items: center;
	gap: var(--cc-space-2);
	padding: 7px 8px;
	border-radius: var(--cc-radius-sm);
	text-decoration: none;
	color: var(--cc-color-body);
	font-size: var(--cc-text-sm);
}

.cc-filter-link:hover { background: var(--cc-color-background); color: var(--cc-color-accent); }

.cc-filter-link.is-active {
	background: var(--cc-color-background);
	color: var(--cc-color-heading);
	font-weight: 600;
	box-shadow: inset 3px 0 0 var(--cc-color-accent);
}

.cc-filter-link span:first-child { flex: 1 1 auto; }
.cc-filter-link--check span.cc-filter-label { flex: 1 1 auto; }

.cc-filter-count {
	font-family: var(--cc-font-mono);
	font-size: var(--cc-text-xs);
	opacity: .6;
	flex: 0 0 auto;
}

/* Checkbox-styled toggle links */
.cc-filter-box {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	border: 2px solid var(--cc-color-border);
	border-radius: 3px;
	background: var(--cc-color-surface);
	position: relative;
}

.cc-filter-link--check.is-checked .cc-filter-box {
	background: var(--cc-color-accent);
	border-color: var(--cc-color-accent);
}

.cc-filter-link--check.is-checked .cc-filter-box::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 1px;
	width: 4px;
	height: 8px;
	border-right: 2px solid #FFFFFF;
	border-bottom: 2px solid #FFFFFF;
	transform: rotate(45deg);
}

.cc-filter-price { display: flex; align-items: center; gap: var(--cc-space-2); margin-bottom: var(--cc-space-3); }

.cc-filter-price input {
	width: 100%;
	min-width: 0;
	font-family: var(--cc-font-mono);
	font-size: var(--cc-text-sm);
	padding: 8px 10px;
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-sm);
	background: var(--cc-color-surface);
	color: var(--cc-color-body);
}

.cc-filter-check {
	display: flex;
	align-items: center;
	gap: var(--cc-space-2);
	font-size: var(--cc-text-sm);
	margin-bottom: var(--cc-space-3);
	cursor: pointer;
}

/* ==========================================================================
   Toolbar & active filters
   ========================================================================== */
.cc-shop__toolbar { margin-bottom: var(--cc-space-4); }

.cc-shop__toolbar-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-space-3);
	flex-wrap: wrap;
}

.cc-shop__count {
	margin: 0;
	font-size: var(--cc-text-sm);
	color: var(--cc-color-body);
}

.woocommerce .cc-shop__count .woocommerce-result-count { margin: 0; }

.cc-shop__sort .woocommerce-ordering { margin: 0; }

.cc-shop__sort select {
	font-family: var(--cc-font-body);
	font-size: var(--cc-text-sm);
	padding: 9px 12px;
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-sm);
	background: var(--cc-color-surface);
	color: var(--cc-color-body);
}

.cc-active-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cc-space-2);
	align-items: center;
	list-style: none;
	margin: var(--cc-space-3) 0 0;
	padding: 0;
}

.cc-active-filters__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border-radius: 100px;
	background: var(--cc-color-surface);
	border: 1px solid var(--cc-color-border);
	font-size: var(--cc-text-xs);
	color: var(--cc-color-heading);
	text-decoration: none;
}

.cc-active-filters__chip:hover { border-color: var(--cc-color-accent); color: var(--cc-color-accent); }
.cc-active-filters__x { font-size: 1.05rem; line-height: 1; opacity: .6; }

.cc-active-filters__clear {
	font-size: var(--cc-text-xs);
	color: var(--cc-color-accent);
	text-decoration: underline;
}

/* ==========================================================================
   Product card additions
   ========================================================================== */
.cc-card__brand {
	display: block;
	font-family: var(--cc-font-heading);
	font-size: var(--cc-text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--cc-tracking-wide);
	color: var(--cc-color-accent);
	margin-bottom: 2px;
}

.cc-card__sku {
	display: block;
	font-family: var(--cc-font-mono);
	font-size: var(--cc-text-xs);
	color: var(--cc-color-body);
	opacity: .6;
	margin-bottom: var(--cc-space-1);
}

.cc-stock {
	display: inline-block;
	font-size: var(--cc-text-xs);
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 100px;
	margin-bottom: var(--cc-space-1);
}

.cc-stock--out { background: var(--cc-color-error-bg); color: var(--cc-color-error); }
.cc-stock--backorder { background: #FFF4E0; color: #96590B; }

/* ==========================================================================
   Single product
   ========================================================================== */
.cc-product { padding-block: var(--cc-space-4) var(--cc-space-7); }

/* WooCommerce floats the gallery and summary side by side (48% each) and
   relies on the theme to clear them. Anything hooked onto
   woocommerce_after_single_product_summary then overlaps the taller
   column. Laying div.product out as a grid removes the float entirely:
   gallery and summary take a column each, and everything after them
   (details, reviews, related) spans the full width in source order. */
.woocommerce div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--cc-space-4) var(--cc-space-6);
	align-items: start;
	margin-bottom: 0;
}

.woocommerce div.product > * { grid-column: 1 / -1; min-width: 0; }

/* WooCommerce also ships `#content`-prefixed copies of these rules
   (`.woocommerce #content div.product div.summary { width: 48% }`). That ID
   gives them specificity 1-2-2, which beats any class-only selector no
   matter how late it loads — and GeneratePress happens to wrap content in
   #content, so they match. The `#content` variants below are listed
   explicitly to win on equal footing rather than resorting to !important. */
.woocommerce div.product > div.images,
.woocommerce div.product > .woocommerce-product-gallery,
.woocommerce-page div.product > div.images,
.woocommerce-page div.product > .woocommerce-product-gallery,
.woocommerce #content div.product > div.images,
.woocommerce #content div.product > .woocommerce-product-gallery,
.woocommerce-page #content div.product > div.images,
.woocommerce-page #content div.product > .woocommerce-product-gallery {
	grid-column: 1;
	grid-row: 1;
	float: none;
	width: auto;
	margin: 0;
	position: relative;
}

.woocommerce div.product > div.summary,
.woocommerce div.product > .entry-summary,
.woocommerce-page div.product > div.summary,
.woocommerce-page div.product > .entry-summary,
.woocommerce #content div.product > div.summary,
.woocommerce #content div.product > .entry-summary,
.woocommerce-page #content div.product > div.summary,
.woocommerce-page #content div.product > .entry-summary {
	grid-column: 2;
	grid-row: 1;
	float: none;
	width: auto;
	margin: 0;
}

@media (max-width: 860px) {
	.woocommerce div.product { grid-template-columns: minmax(0, 1fr); }

	.woocommerce #content div.product > div.images,
	.woocommerce #content div.product > .woocommerce-product-gallery,
	.woocommerce #content div.product > div.summary,
	.woocommerce #content div.product > .entry-summary,
	.woocommerce div.product > div.images,
	.woocommerce div.product > .woocommerce-product-gallery,
	.woocommerce div.product > div.summary,
	.woocommerce div.product > .entry-summary {
		grid-column: 1 / -1;
		grid-row: auto;
		width: auto;
	}
}

.cc-product__brand {
	font-family: var(--cc-font-heading);
	font-size: var(--cc-text-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--cc-tracking-wide);
	color: var(--cc-color-accent);
	margin: 0 0 var(--cc-space-1);
}

.woocommerce div.product .cc-product__title {
	font-family: var(--cc-font-heading);
	font-size: var(--cc-text-xl);
	line-height: 1.15;
	margin: 0 0 var(--cc-space-2);
	text-transform: none;
}

/* .product_meta is WooCommerce's own wrapper; it carries no layout of its
   own here — the dl inside does the work. */
.cc-product__meta { margin: 0 0 var(--cc-space-3); }

.woocommerce div.product .cc-product__meta .cc-product__ids,
.cc-product__ids {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cc-space-1) var(--cc-space-4);
	margin: 0 0 var(--cc-space-3);
	padding: 0;
}

.cc-product__ids > div { display: flex; align-items: baseline; gap: 6px; }
.cc-product__ids .sku { font-family: inherit; }

.cc-product__ids dt {
	font-family: var(--cc-font-heading);
	font-size: var(--cc-text-xs);
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--cc-color-body);
	opacity: .65;
	margin: 0;
}

.cc-product__ids dd {
	font-family: var(--cc-font-mono);
	font-size: var(--cc-text-sm);
	color: var(--cc-color-heading);
	margin: 0;
}

.cc-product__rating-link {
	display: inline-block;
	text-decoration: none;
	margin-bottom: var(--cc-space-2);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--cc-font-mono);
	font-size: var(--cc-text-xl);
	font-weight: 600;
	color: var(--cc-color-accent);
	margin-bottom: var(--cc-space-3);
}

.woocommerce div.product p.price del { opacity: .55; font-weight: 400; font-size: .7em; }
.woocommerce div.product p.price ins { text-decoration: none; }

.cc-product__excerpt {
	color: var(--cc-color-body);
	margin-bottom: var(--cc-space-3);
}

.cc-product__excerpt p:last-child { margin-bottom: 0; }

/* Assurance list */
.cc-product__assurance {
	margin-top: var(--cc-space-4);
	padding-top: var(--cc-space-3);
	border-top: 1px solid var(--cc-color-border);
}

.cc-assurance-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--cc-space-2);
}

.cc-assurance-list li {
	display: flex;
	align-items: center;
	gap: var(--cc-space-2);
	font-size: var(--cc-text-sm);
	color: var(--cc-color-body);
	margin: 0;
}

.cc-assurance-icon { color: var(--cc-color-accent); display: inline-flex; flex: 0 0 auto; }

.cc-product__shipping-note {
	margin: var(--cc-space-3) 0 0;
	font-size: var(--cc-text-xs);
	color: var(--cc-color-body);
	opacity: .8;
}

/* Manuals & documents */
.cc-documents-panel {
	margin-top: var(--cc-space-4);
	padding: var(--cc-space-3);
	background: var(--cc-color-background);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-md);
}

.cc-documents-panel__title {
	font-size: var(--cc-text-xs);
	text-transform: uppercase;
	letter-spacing: var(--cc-tracking-wide);
	margin: 0 0 var(--cc-space-2);
	color: var(--cc-color-heading);
}

.cc-documents-panel__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.cc-doc-link {
	display: flex;
	align-items: center;
	gap: var(--cc-space-2);
	padding: 9px 11px;
	background: var(--cc-color-surface);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-sm);
	text-decoration: none;
	color: var(--cc-color-heading);
	font-size: var(--cc-text-sm);
	font-weight: 600;
}

.cc-doc-link:hover {
	border-color: var(--cc-color-accent);
	color: var(--cc-color-accent);
}

.cc-doc-link__icon { color: var(--cc-color-accent); display: inline-flex; flex: 0 0 auto; }
.cc-doc-link__label { flex: 1 1 auto; }
.cc-doc-link__ext { opacity: .45; display: inline-flex; flex: 0 0 auto; }

/* ==========================================================================
   Product detail sections
   ========================================================================== */
.cc-product-details {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: var(--cc-space-5);
	margin-top: var(--cc-space-6);
	padding-top: var(--cc-space-5);
	border-top: 1px solid var(--cc-color-border);
}

.cc-detail-block__title {
	font-size: var(--cc-text-lg);
	margin: 0 0 var(--cc-space-3);
	padding-bottom: var(--cc-space-2);
	border-bottom: 2px solid var(--cc-color-border);
}

.cc-prose p:last-child { margin-bottom: 0; }

.cc-feature-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--cc-space-2);
}

.cc-feature-list li {
	position: relative;
	padding-left: 24px;
	font-size: var(--cc-text-sm);
	margin: 0;
}

.cc-feature-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	width: 10px;
	height: 5px;
	border-left: 2px solid var(--cc-color-accent);
	border-bottom: 2px solid var(--cc-color-accent);
	transform: rotate(-45deg);
}

.cc-spec-table-wrap { overflow-x: auto; }

.cc-spec-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--cc-text-sm);
}

.cc-spec-table th,
.cc-spec-table td {
	padding: 9px 12px;
	text-align: left;
	border-bottom: 1px solid var(--cc-color-border);
	vertical-align: top;
}

.cc-spec-table th {
	font-family: var(--cc-font-heading);
	font-weight: 600;
	color: var(--cc-color-heading);
	width: 42%;
	white-space: normal;
}

.cc-spec-table td {
	font-family: var(--cc-font-mono);
	font-size: var(--cc-text-xs);
	color: var(--cc-color-body);
}

.cc-spec-table tr:nth-child(odd) { background: var(--cc-color-surface); }
.cc-spec-table tr:last-child th,
.cc-spec-table tr:last-child td { border-bottom: none; }

.cc-detail-block__note {
	margin: var(--cc-space-3) 0 0;
	font-size: var(--cc-text-xs);
	color: var(--cc-color-body);
	opacity: .8;
}

/* Related products */
.woocommerce .related > h2,
.woocommerce .upsells > h2 {
	font-size: var(--cc-text-xl);
	margin-bottom: var(--cc-space-4);
	padding-top: var(--cc-space-5);
	border-top: 1px solid var(--cc-color-border);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
	.cc-shop__layout { grid-template-columns: 1fr; }

	.cc-filters__open { display: inline-flex; }

	/* Filters become an off-canvas panel rather than stacking above the
	   grid, which would push results below the fold on every load. */
	.cc-filters {
		position: fixed;
		inset: 0 auto 0 0;
		z-index: 200;
		width: min(320px, 88vw);
		max-height: none;
		border-radius: 0;
		border: none;
		border-right: 1px solid var(--cc-color-border);
		transform: translateX(-100%);
		transition: transform .2s ease;
		box-shadow: 0 0 40px var(--cc-color-shadow);
	}

	.cc-filters.is-open { transform: translateX(0); }

	.cc-filters__close { display: block; }

	body.cc-filters-open::after {
		content: "";
		position: fixed;
		inset: 0;
		background: rgba(20, 28, 23, .5);
		z-index: 199;
	}
}

@media (max-width: 640px) {
	.cc-product-details { grid-template-columns: 1fr; gap: var(--cc-space-4); }
	.cc-shop__toolbar-row { gap: var(--cc-space-2); }
	.cc-shop__sort { width: 100%; }
	.cc-shop__sort select { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.cc-filters { transition: none; }
}


/* ==========================================================================
   Single product — wide layout (Phase 18)

   The gallery was losing to the summary column on large screens and the
   product photograph is the thing a customer is actually here to look at.
   Gallery takes 54%, summary 46%, which keeps the two columns close enough
   in weight that the top of the summary still aligns with the top of the
   image.
   ========================================================================== */
@media (min-width: 900px) {
	.woocommerce div.product,
	.woocommerce #content div.product {
		display: grid;
		grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
		column-gap: clamp(2rem, 3.5vw, 4rem);
		align-items: start;
	}

	.woocommerce div.product .woocommerce-product-gallery,
	.woocommerce #content div.product .woocommerce-product-gallery {
		width: 100%;
		float: none;
		margin-bottom: 0;
		grid-column: 1;
		grid-row: 1;
		position: sticky;
		top: var(--cc-space-4);
	}

	.woocommerce div.product .summary,
	.woocommerce #content div.product .summary {
		width: 100%;
		float: none;
		margin-bottom: 0;
		grid-column: 2;
		grid-row: 1;
	}

	/* Everything below the fold spans both columns. */
	.woocommerce div.product .woocommerce-tabs,
	.woocommerce div.product .related,
	.woocommerce div.product .upsells,
	.woocommerce div.product .cc-product-details,
	.woocommerce div.product .cc-product-documents,
	.woocommerce div.product .cc-reviews,
	.woocommerce div.product .cc-guide-callout-block {
		grid-column: 1 / -1;
	}
}

/* Let the photograph fill the space it has been given. */
.woocommerce div.product .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
}

/* ==========================================================================
   Filter rows — no empty boxes (Phase 18)

   Every brand row carried a 16px outlined square that read as a broken
   checkbox when nothing was selected. The whole row was already a link, so
   the box was decoration standing in for an input that does not exist.
   ========================================================================== */
.cc-filter-box { display: none !important; }

.cc-filter-link--check {
	border-radius: var(--cc-radius-sm);
	padding-inline: 0.4rem;
	transition: background 0.15s ease, color 0.15s ease;
}

.cc-filter-link--check:hover,
.cc-filter-link--check:focus-visible {
	background: var(--cc-color-background);
	color: var(--cc-color-accent);
}

.cc-filter-link--check.is-checked .cc-filter-label {
	font-weight: 700;
	color: var(--cc-color-heading);
	box-shadow: inset 0 -2px 0 var(--cc-color-accent);
}

.cc-filter-link--check.is-checked .cc-filter-count {
	opacity: 1;
	color: var(--cc-color-accent);
}

/* A selected row shows a small clear affordance so it is obvious the click
   removes the filter rather than adding another. */
.cc-filter-link--check.is-checked::after {
	content: "×";
	margin-left: auto;
	font-family: var(--cc-font-heading);
	font-size: var(--cc-text-sm);
	line-height: 1;
	color: var(--cc-color-accent);
	padding-left: 0.4rem;
}

/* ==========================================================================
   Helpful guide card on a product page (Phase 18)

   Which guide appears is decided in inc/guide-links.php, not here, so a new
   guide is connected by editing one map rather than this template.
   ========================================================================== */
.cc-product-guide {
	margin: var(--cc-space-6) 0 0;
}

.cc-product-guide__link {
	display: grid;
	grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
	gap: var(--cc-space-4);
	align-items: center;
	background: var(--cc-color-surface);
	border: 1px solid var(--cc-color-border);
	border-left: 4px solid var(--cc-color-accent);
	border-radius: var(--cc-radius-md);
	overflow: hidden;
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.cc-product-guide__link:hover,
.cc-product-guide__link:focus-visible {
	box-shadow: 0 10px 24px var(--cc-color-shadow);
	transform: translateY(-2px);
}

.cc-product-guide__media {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--cc-color-background);
	height: 100%;
}

.cc-product-guide__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cc-product-guide__body {
	display: flex;
	flex-direction: column;
	gap: var(--cc-space-2);
	padding: var(--cc-space-4) var(--cc-space-4) var(--cc-space-4) 0;
}

.cc-product-guide__eyebrow {
	font-family: var(--cc-font-heading);
	font-size: var(--cc-text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--cc-tracking-wide);
	color: var(--cc-color-accent);
}

.cc-product-guide__title {
	font-family: var(--cc-font-heading);
	font-size: var(--cc-text-lg);
	font-weight: 700;
	color: var(--cc-color-heading);
	line-height: var(--cc-leading-snug);
}

.cc-product-guide__text {
	font-size: var(--cc-text-sm);
	color: var(--cc-color-body);
}

.cc-product-guide__cta {
	font-family: var(--cc-font-heading);
	font-weight: 700;
	font-size: var(--cc-text-sm);
	text-transform: uppercase;
	letter-spacing: var(--cc-tracking-wide);
	color: var(--cc-color-accent);
}

.cc-product-guide__cta::after {
	content: " →";
}

@media (max-width: 640px) {
	.cc-product-guide__link {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.cc-product-guide__media { aspect-ratio: 16 / 9; }
	.cc-product-guide__body  { padding: var(--cc-space-4); }
}

/* ==========================================================================
   Shipping and delivery messaging

   Two presentations, one source of truth (inc/shipping-display.php). Both
   are deliberately quieter than the price and the Add to Cart button — this
   is reassurance, not the headline.
   ========================================================================== */

/* Card line ---------------------------------------------------------------
   One wrapping line, so a card grows by about 18px rather than gaining a
   block. Cards in a row already stretch to equal height. */
.cc-ship-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.15rem 0.45rem;
	margin: 0.35rem 0 0;
	font-family: var(--cc-font-heading);
	font-size: var(--cc-text-xs);
	line-height: 1.4;
	max-width: none;
}

.cc-ship-line__free {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	font-weight: 700;
	color: var(--cc-ship-green, #2E7D46);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.cc-ship-line__free .cc-icon {
	width: 1em;
	height: 1em;
}

.cc-ship-line__threshold {
	color: var(--cc-color-body);
	font-weight: 600;
}

.cc-ship-line__eta {
	color: var(--cc-color-body);
	opacity: 0.85;
}

/* Put a hairline dot between the two halves when both are present. */
.cc-ship-line__free + .cc-ship-line__eta::before,
.cc-ship-line__threshold + .cc-ship-line__eta::before {
	content: "·";
	margin-right: 0.45em;
	opacity: 0.5;
}

/* Product page card -------------------------------------------------------- */
.cc-ship-card {
	--cc-ship-green: #2E7D46;
	margin: var(--cc-space-4) 0;
	padding: var(--cc-space-4);
	background: var(--cc-color-background);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-md);
}

.cc-ship-card.is-free {
	background: #F1F7F2;
	border-color: #CBE2D2;
}

.cc-ship-card__status {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	margin: 0 0 var(--cc-space-3);
	padding-bottom: var(--cc-space-3);
	border-bottom: 1px solid var(--cc-color-border);
	max-width: none;
}

.cc-ship-card__icon {
	flex: none;
	color: var(--cc-color-heading);
	margin-top: 0.1rem;
}

.cc-ship-card.is-free .cc-ship-card__icon {
	color: var(--cc-ship-green);
}

.cc-ship-card__icon .cc-icon {
	width: 1.35rem;
	height: 1.35rem;
}

.cc-ship-card__free,
.cc-ship-card__threshold {
	display: block;
	font-family: var(--cc-font-heading);
	font-size: var(--cc-text-base);
	font-weight: 700;
	line-height: 1.25;
}

.cc-ship-card__free { color: var(--cc-ship-green); }
.cc-ship-card__threshold { color: var(--cc-color-heading); }

.cc-ship-card__sub {
	display: block;
	font-size: var(--cc-text-sm);
	color: var(--cc-color-body);
	margin-top: 0.15rem;
}

.cc-ship-card__eta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
}

.cc-ship-card__eta-label {
	font-family: var(--cc-font-heading);
	font-size: var(--cc-text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--cc-tracking-wide);
	color: var(--cc-color-body);
	flex: 1 0 100%;
}

/* The dates are the thing people scan for, so they get the weight —
   without outgrowing the price above them. */
.cc-ship-card__eta-range {
	font-family: var(--cc-font-heading);
	font-size: var(--cc-text-lg);
	font-weight: 700;
	color: var(--cc-color-heading);
	line-height: 1.15;
}

.cc-ship-card__eta-range--soft {
	font-size: var(--cc-text-sm);
	font-weight: 600;
	color: var(--cc-color-body);
}

.cc-ship-card__freight {
	font-family: var(--cc-font-heading);
	font-size: var(--cc-text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--cc-tracking-wide);
	color: var(--cc-color-accent);
	background: var(--cc-color-surface);
	border: 1px solid var(--cc-color-border);
	border-radius: 999px;
	padding: 0.15em 0.6em;
}

.cc-ship-card__note {
	margin: var(--cc-space-3) 0 0;
	font-size: var(--cc-text-xs);
	color: var(--cc-color-body);
	opacity: 0.75;
	max-width: none;
}

@media (max-width: 480px) {
	.cc-ship-card { padding: var(--cc-space-3); }
	.cc-ship-card__eta-range { font-size: var(--cc-text-md); }
}