/*
 * Shop pages: the shop and product-category archives. Blocksy draws the page-title band; these rules make it
 * a Forest band that matches the homepage hero, and keep its text light enough to read on Forest. Then the
 * toolbar (filters from inc/filters.php, sorting), product cards and "Load more".
 */

/* Blocksy's "type-2" page title is the band above the products (and on ordinary pages). The colour is set in
 * the Customizer (woo_categories_pageTitleBackground), but the text colours have no Customizer equivalent that
 * follows the brand tokens, so they are set here: dark Blocksy defaults on Forest would fail contrast.
 *
 * Compact and left-aligned, as Baymard and the agri shops do it, so the first products show without
 * scrolling: breadcrumb, then the title, then the category's one-line description. The Customizer sets the
 * alignment, a minimum height of 0 and the breadcrumb (woo_categories_hero_elements); the sizes are here so
 * they follow the type tokens. */
.hero-section[data-type='type-2'] {
	border-block-end: var(--ca-space-1) solid var(--ca-decor-gold);
	color: var(--ca-text-on-brand);
}

.hero-section[data-type='type-2'] .entry-header {
	padding-block: var(--ca-space-5);
}

@media (min-width: 690px) {
	.hero-section[data-type='type-2'] .entry-header {
		padding-block: var(--ca-space-8);
	}
}

/* Cart, checkout and account pages use the full width, so their title lines up with it, not the narrow
 * column that ordinary pages keep (single_page_hero_structure). */
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .hero-section[data-type='type-2'] .ct-container-narrow {
	max-width: var(--theme-normal-container-max-width);
}

.hero-section[data-type='type-2'] .page-title {
	margin: 0;
	font-family: var(--ca-font-heading);
	font-size: var(--ca-text-h1);
	font-weight: var(--ca-text-h1-weight);
	line-height: var(--ca-text-h1-line-height);
}

.hero-section[data-type='type-2'] .page-title,
.hero-section[data-type='type-2'] .page-description,
.hero-section[data-type='type-2'] .ct-breadcrumbs,
.hero-section[data-type='type-2'] .ct-breadcrumbs * {
	color: var(--ca-text-on-brand);
}

.hero-section[data-type='type-2'] .page-description {
	max-width: var(--ca-measure);
	margin: var(--ca-space-2) 0 0;
	font-size: var(--ca-text-body);
	line-height: var(--ca-text-body-line-height);
}

.hero-section[data-type='type-2'] .page-description > :last-child {
	margin-block-end: 0;
}

/* Breadcrumb in sentence case at the small text size, instead of Blocksy's 12px capitals. */
.hero-section[data-type='type-2'] .ct-breadcrumbs {
	font-family: var(--ca-font-body);
	font-size: var(--ca-text-small);
	font-weight: 400;
	line-height: var(--ca-text-small-line-height);
	letter-spacing: 0;
	text-transform: none;
}

/* Links in the band (breadcrumbs) stay underlined, as everywhere else. */
.hero-section[data-type='type-2'] a {
	color: var(--ca-text-on-brand);
	text-decoration-line: underline;
	text-decoration-color: var(--ca-decor-gold);
	text-underline-offset: 0.15em;
}

/* Toolbar above the grid --------------------------------------------------------------------------------- */

/* Phones and tablets: "Filter" and "Sort by" side by side, the product count under them. Desktop: the Category
 * and Price dropdowns, the count, then "Sort by" at the end. The filters are in inc/filters.php. */
.woo-listing-top {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ca-space-3);
	align-items: center;
}

.ca-filters {
	display: contents;
}

/* Sentence case at the small size, instead of Blocksy's 11px capitals; shown on phones too (Blocksy hides it). */
.woo-listing-top .woocommerce-result-count {
	order: 3;
	flex-basis: 100%;
	margin: 0;
	color: var(--ca-text-secondary);
	font-size: var(--ca-text-small);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.woo-listing-top .woocommerce-result-count.ct-hidden-sm {
	display: block !important; /* beats Blocksy's .ct-hidden-sm, which is !important too */
}

.ca-filters__toggle,
.ca-filters__menu-toggle,
.woo-listing-top .woocommerce-ordering select {
	min-height: var(--ca-size-control);
	border: var(--ca-border-width-control) solid var(--ca-border-strong);
	border-radius: var(--ca-radius-md);
	background-color: var(--ca-bg-surface);
	color: var(--ca-text-primary);
	font-size: var(--ca-text-body);
	font-weight: 600;
}

.ca-filters__toggle,
.ca-filters__menu-toggle {
	display: inline-flex;
	gap: var(--ca-space-2);
	align-items: center;
	justify-content: center;
	padding-inline: var(--ca-space-4);
	cursor: pointer;
}

.ca-filters__toggle {
	order: 1;
	flex: 1 1 40%; /* equal halves: a 0 basis would add the button's padding to its share */
}

.ca-filters__toggle svg,
.ca-filters__menu-toggle svg {
	flex: none;
	width: var(--ca-size-icon);
	height: var(--ca-size-icon);
}

:is(.ca-filters__toggle, .ca-filters__menu-toggle):hover,
.woo-listing-top .woocommerce-ordering select:hover {
	border-color: var(--ca-border-brand);
}

.ca-filters__menu-toggle[aria-expanded='true'] {
	border-color: var(--ca-border-brand);
	background-color: var(--ca-bg-brand-subtle);
}

.ca-filters__menu-toggle[aria-expanded='true'] .ca-filters__chevron {
	rotate: 180deg;
}

.ca-filters__count {
	padding: 0 var(--ca-space-2);
	border-radius: var(--ca-radius-full);
	background: var(--ca-bg-brand);
	color: var(--ca-text-on-brand);
	font-size: var(--ca-text-caption);
	line-height: 1.6;
}

/* "Sort by" sits inside the box as a caption above the chosen order, so the box lines up with the Filter
 * button. WooCommerce's own label (useLabel, inc/shop.php) replaces Blocksy's unlabelled icon on phones. */
.woo-listing-top .woocommerce-ordering {
	position: relative;
	order: 2;
	flex: 1 1 40%;
	margin: 0;
}

.woo-listing-top .woocommerce-ordering label {
	position: absolute;
	inset: var(--ca-space-1) auto auto calc(var(--ca-space-3) + var(--ca-border-width-control));
	margin: 0;
	color: var(--ca-text-secondary);
	font-size: var(--ca-text-caption);
	font-weight: 400;
	line-height: var(--ca-text-caption-line-height);
	pointer-events: none;
}

.woo-listing-top .woocommerce-ordering select {
	width: 100%;
	max-width: none;
	height: var(--ca-size-control);
	padding: calc(var(--ca-space-4) + var(--ca-space-0-5)) var(--ca-space-8) 0 var(--ca-space-3);
	font-size: var(--ca-text-small);
	line-height: var(--ca-text-small-line-height);
	background-image: none; /* Blocksy's small arrow; the chevron below replaces it */
	appearance: none;
}

/* The field focus style (theme.css): its border colour would lose to the border set above. */
.woo-listing-top .woocommerce-ordering select:focus-visible {
	border-color: var(--ca-border-focus);
}

.woo-listing-top .woocommerce-ordering .ct-sort-icon {
	display: none;
}

.woo-listing-top .woocommerce-ordering::after {
	position: absolute;
	inset-block: 0;
	inset-inline-end: var(--ca-space-3);
	width: var(--ca-size-icon);
	background: var(--ca-text-primary);
	content: '';
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	pointer-events: none;
}

/* Desktop bar: dropdowns on the left, the count, sorting on the right. */
.ca-filters__bar {
	display: none;
}

@media (min-width: 1000px) {
	.ca-filters.is-enhanced .ca-filters__toggle {
		display: none;
	}

	.ca-filters.is-enhanced .ca-filters__bar {
		display: flex;
		order: 1;
		gap: var(--ca-space-2);
	}

	.woo-listing-top .woocommerce-result-count {
		order: 2;
		flex-basis: auto;
		margin-inline-start: auto;
	}

	.woo-listing-top .woocommerce-ordering {
		order: 3;
		flex: none;
		width: 15rem;
	}
}

.ca-filters__menu {
	position: relative;
}

.ca-filters__dropdown {
	position: absolute;
	inset: calc(100% + var(--ca-space-1)) auto auto 0;
	z-index: var(--ca-z-dropdown);
	width: 22rem;
	padding: var(--ca-space-4);
	border: var(--ca-border-width-thin) solid var(--ca-border-default);
	border-radius: var(--ca-radius-md);
	background: var(--ca-bg-surface);
	box-shadow: var(--ca-shadow-2);
}

.ca-filters__dropdown[hidden] {
	display: none;
}

.ca-filters__dropdown .ca-filters__form {
	display: grid;
	gap: var(--ca-space-4);
}

/* A long category list scrolls inside the dropdown; the padding keeps the tick boxes' focus rings in view. */
.ca-filters__dropdown .ca-filters__choices {
	max-height: min(22rem, 50vh);
	margin-inline: calc(-1 * var(--ca-space-1));
	padding-inline: var(--ca-space-1);
	overflow-y: auto;
}

/* Without JavaScript: no Filter button or dropdown buttons; both groups show open under the toolbar. */
.ca-filters:not(.is-enhanced) .ca-filters__toggle,
.ca-filters:not(.is-enhanced) .ca-filters__menu-toggle {
	display: none;
}

.ca-filters:not(.is-enhanced) .ca-filters__bar {
	display: grid;
	order: 4;
	flex-basis: 100%;
	gap: var(--ca-space-3);
}

.ca-filters:not(.is-enhanced) .ca-filters__dropdown {
	position: static;
	width: auto;
	box-shadow: none;
}

/* Filter panel (phones and tablets) ------------------------------------------------------------------------ */

/* Full screen on phones, a sheet from the right on tablets. The heading and the "Show N products" button stay
 * in view while the choices scroll between them. */
.ca-filters__dialog {
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--ca-bg-surface);
	color: var(--ca-text-primary);
}

.ca-filters__dialog::backdrop {
	background: color-mix(in srgb, var(--ca-charcoal-950) 50%, transparent);
}

body:has(.ca-filters__dialog[open]) {
	overflow: hidden;
}

@media (min-width: 690px) {
	.ca-filters__dialog {
		inset-inline-start: auto;
		width: min(26rem, 100%);
		box-shadow: var(--ca-shadow-3);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.ca-filters__dialog[open] {
		animation: ca-sheet-up var(--ca-duration-base) var(--ca-ease-standard);
	}
}

@media (prefers-reduced-motion: no-preference) and (min-width: 690px) {
	.ca-filters__dialog[open] {
		animation-name: ca-sheet-in;
	}
}

@keyframes ca-sheet-up {
	from {
		translate: 0 100%;
	}
}

@keyframes ca-sheet-in {
	from {
		translate: 100% 0;
	}
}

.ca-filters__dialog .ca-filters__form {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.ca-filters__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--ca-space-1) var(--ca-space-1) var(--ca-space-1) var(--ca-space-4);
	border-block-end: var(--ca-border-width-thin) solid var(--ca-border-default);
}

.ca-filters__title {
	margin: 0;
	font-size: var(--ca-text-h3);
	line-height: var(--ca-text-h3-line-height);
}

.ca-filters__close {
	display: grid;
	place-items: center;
	width: var(--ca-size-control);
	height: var(--ca-size-control);
	padding: 0;
	border: 0;
	border-radius: var(--ca-radius-md);
	background: transparent;
	color: var(--ca-text-primary);
	cursor: pointer;
}

.ca-filters__close:hover {
	background: var(--ca-bg-brand-subtle);
}

.ca-filters__close svg {
	width: var(--ca-size-icon-lg);
	height: var(--ca-size-icon-lg);
}

.ca-filters__body {
	display: grid;
	flex: 1;
	align-content: start;
	gap: var(--ca-space-6);
	padding: var(--ca-space-4);
	overflow-y: auto;
}

.ca-filters__foot {
	display: flex;
	gap: var(--ca-space-4);
	align-items: center;
	padding: var(--ca-space-3) var(--ca-space-4);
	border-block-start: var(--ca-border-width-thin) solid var(--ca-border-default);
	background: var(--ca-bg-surface);
}

.ca-filters__reset {
	display: inline-flex;
	align-items: center;
	min-height: var(--ca-size-control);
	color: var(--ca-text-link);
	text-decoration-line: underline;
}

.ca-filters__submit.button {
	flex: 1;
	min-height: var(--ca-size-control);
}

/* Filter groups, in the panel and the dropdowns ------------------------------------------------------------ */

.ca-filters__group {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

/* A floated legend lines up with the fields instead of sitting in the fieldset's border. */
.ca-filters__group legend {
	float: inline-start;
	width: 100%;
	margin: 0 0 var(--ca-space-2); /* Blocksy pulls legends 15px left */
	padding: 0;
	font-family: var(--ca-font-heading);
	font-weight: 600;
}

.ca-filters__group legend + * {
	clear: both;
}

.ca-filters__group label {
	margin: 0;
}

.ca-filters__choices {
	display: grid;
}

/* Each tick box is a full 48px row, so it's easy to hit with a thumb. */
.ca-filters__check {
	display: flex;
	gap: var(--ca-space-3);
	align-items: center;
	min-height: var(--ca-size-control);
	cursor: pointer;
}

.ca-filters__check input[type='checkbox'] {
	flex: none;
	width: 22px;
	height: 22px;
	margin: 0;
	accent-color: var(--ca-bg-brand);
}

.ca-filters__price {
	display: flex;
	gap: var(--ca-space-3);
}

.ca-filters__price label {
	display: grid;
	flex: 1;
	gap: var(--ca-space-1);
	font-size: var(--ca-text-small);
}

.ca-filters__price input {
	width: 100%;
	min-height: var(--ca-size-control);
}

/* Applied filters, between the toolbar and the grid: each chip removes itself. */
.ca-filters__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ca-space-2);
	align-items: center;
	margin: calc(var(--ca-space-3) - 25px) 0 var(--ca-space-6); /* Blocksy puts 25px under the toolbar */
	padding: 0;
	list-style: none;
}

.ca-chip {
	display: inline-flex;
	gap: var(--ca-space-2);
	align-items: center;
	min-height: var(--ca-size-control);
	padding: 0 var(--ca-space-3) 0 var(--ca-space-4);
	border: var(--ca-border-width-thin) solid var(--ca-border-brand);
	border-radius: var(--ca-radius-full);
	background: var(--ca-bg-brand-subtle);
	color: var(--ca-text-primary);
	font-size: var(--ca-text-small);
	font-weight: 600;
	text-decoration: none;
}

.ca-chip svg {
	width: var(--ca-size-icon-sm);
	height: var(--ca-size-icon-sm);
}

.ca-chip:hover {
	background: var(--ca-bg-surface);
}

.ca-filters__clear {
	display: inline-flex;
	align-items: center;
	min-height: var(--ca-size-control);
	padding-inline: var(--ca-space-2);
	color: var(--ca-text-link);
	font-size: var(--ca-text-small);
	text-decoration-line: underline;
}

.ca-filters__none a {
	text-decoration-line: underline;
}

/* Product cards ----------------------------------------------------------------------------------------- */

.ca-card-spec {
	margin: 0;
	color: var(--ca-text-secondary);
	font-size: var(--ca-text-small);
	line-height: var(--ca-text-small-line-height);
}

.products .product .price {
	color: var(--ca-text-primary);
	font-family: var(--ca-font-heading);
	font-weight: 700;
}

/* Old price on sale items: quieter, but full strength (WooCommerce fades it to half opacity, failing contrast). */
.products .product .price del {
	color: var(--ca-text-secondary);
	font-size: var(--ca-text-caption);
	font-weight: 400;
	opacity: 1;
}

.products .product .price ins {
	text-decoration: none;
}

.price .woocommerce-price-suffix {
	color: var(--ca-text-secondary);
	font-family: var(--ca-font-body);
	font-size: var(--ca-text-caption);
	font-weight: 400;
}

.ct-woo-card-stock .stock {
	display: flex;
	gap: var(--ca-space-2);
	align-items: center;
	margin: 0;
	color: var(--ca-text-primary);
	font-size: var(--ca-text-caption);
	font-weight: 600;
}

.ct-woo-card-stock .stock::before {
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: var(--ca-radius-full);
	background: var(--ca-status-success-icon);
	content: '';
}

.ct-woo-card-stock .stock.out-of-stock {
	color: var(--ca-status-error-text);
}

.ct-woo-card-stock .stock.out-of-stock::before {
	background: var(--ca-status-error-icon);
}

.ct-woo-card-stock .stock.available-on-backorder::before {
	background: var(--ca-status-warning-icon);
}

/* Card buttons fill the card on phones, where two cards sit side by side. */
.products .product .ct-woo-card-actions .button {
	min-height: var(--ca-size-control);
}

@media (max-width: 689.98px) {
	.products .product .ct-woo-card-actions .button {
		width: 100%;
		padding-inline: var(--ca-space-2);
	}
}

/* "Load more products" (Blocksy's load-more pagination). */
.ct-pagination[data-pagination='load_more'] .ct-load-more {
	min-height: var(--ca-size-control);
	padding-inline: var(--ca-space-8);
}

/* Search with no results (inc/search.php): what to try next, then the headings and the phone number. */
.ca-no-results {
	max-width: var(--ca-container-measure);
	margin-block: var(--ca-space-6) var(--ca-space-12);
}

.ca-no-results__lead {
	font-family: var(--ca-font-heading);
	font-size: var(--ca-text-h3);
	font-weight: 600;
	line-height: var(--ca-text-h3-line-height);
}

.ca-no-results__heading {
	margin-block: var(--ca-space-8) var(--ca-space-3);
	font-size: var(--ca-text-h4);
}

.ca-no-results__categories {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ca-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ca-no-results__call {
	margin-block-start: var(--ca-space-8);
}