:root {
	--zk-bg: #faf9f7;
	--zk-surface: #fff;
	--zk-ink: #2e2338;
	--zk-muted: #7a7282;
	--zk-accent: #3f7a6a;
	--zk-hairline: #e8e3da;
}

html body { background-color: var(--zk-bg); }

/* Header. The trail is printed above the title, the description below it.
   The theme pads both blocks with 28px of empty space; the grid has to stay
   near the fold on mobile, so that padding is dropped. */
.site-main > .woocommerce-breadcrumb {
	margin: 0 0 6px;
	padding: 0;
	font-size: 13px;
	line-height: 1.3;
	color: var(--zk-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.site-main > .woocommerce-breadcrumb a { color: var(--zk-muted); }
.site-main > .woocommerce-breadcrumb a:hover { color: var(--zk-accent); }

.content-area .site-main > h1.page-title {
	margin-bottom: 10px;
	line-height: 1.15;
}

.content-area header.woocommerce-products-header {
	margin-bottom: 14px;
	background-color: transparent;
}

.content-area header.woocommerce-products-header .term-description {
	max-width: 72ch;
	margin: 0;
	padding: 0;
	text-transform: none;
}

.content-area header.woocommerce-products-header .term-description > *:last-child { margin-bottom: 0; }

.shoptimizer-sorting { margin-bottom: 16px; }

/* Card grid. The theme lays the loop out with floats sized in percentages,
   so the widths are released before the grid takes over. */
.content-area ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	/* The theme pairs margin: -15px with width: calc(100% + 30px). Dropping
	   only the margin left the grid 30px wider than its column. */
	margin: 0 0 32px;
	width: 100%;
	padding: 0;
}

.content-area ul.products::before,
.content-area ul.products::after { content: none; }

.content-area ul.products li.product {
	display: flex;
	flex-direction: column;
	width: auto;
	margin: 0;
	padding: 0;
	background-color: var(--zk-surface);
	border: 1px solid var(--zk-hairline);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: none;
	transition: border-color 160ms ease;
}

.content-area ul.products li.product:hover { border-color: var(--zk-muted); }

.content-area ul.products li.product .woocommerce-image__wrapper { margin: 0; }

.content-area ul.products li.product .woocommerce-card__header {
	flex: 1 1 auto;
	padding: 10px 12px 14px;
}

@media (min-width: 993px) {
	/* WooCommerce prints columns-N on the list from the Customizer catalog
	   setting. The count was hard coded to four here, which is why the
	   Customizer value of three never showed. */
	.content-area ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px;
	}

	.content-area ul.products.columns-1 { grid-template-columns: minmax(0, 1fr); }
	.content-area ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.content-area ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.content-area ul.products.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.content-area ul.products.columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

	.content-area ul.products li.product .woocommerce-card__header { padding: 12px 16px 18px; }
}

/* Both columns start flush against the navigation bar. */
.shoptimizer-archive > .col-full { padding-top: 12px; }

/* Running text stays out of the malachite, which is reserved for what can be
   clicked. The Customizer typography setting paints .term-description p, so
   the override has to reach the paragraph itself. */

.content-area header.woocommerce-products-header .term-description,
.content-area header.woocommerce-products-header .term-description p { color: var(--zk-muted); }


@media (min-width: 993px) {
}

/* Filter sidebar. The theme pins every widget count absolute against the right
   edge, which stranded it far from its label. It reads better tucked against
   the term it counts, in the facet list and in the price bands alike. */
#secondary .widget li .count {
	position: static;
	display: inline;
	margin-left: 6px;
	color: var(--zk-muted);
}

/* Category band. Switched on by Customizer > Layout > WooCommerce > category
   position = below-header, which lifts the title and description out of the
   content column into a full width band and leaves the trail underneath. Its
   background is the Customizer field Colors > WooCommerce > Archive
   description background, so no colour is set here. The band does not run on
   the shop page, which keeps the header rules above. */
.shoptimizer-category-banner {
	border-bottom: 1px solid var(--zk-hairline);
	padding: 20px 0 24px;
	margin-bottom: 0;
}

.shoptimizer-category-banner h1 {
	margin-bottom: 8px;
	line-height: 1.15;
}

/* The title only grows on desktop, where it has to hold its own against a
   17px description. At 375px, 46px would eat the fold. */
@media (min-width: 993px) {
	.shoptimizer-category-banner h1 { font-size: 46px; }
}

body .shoptimizer-category-banner .taxonomy-description,
body .shoptimizer-category-banner .taxonomy-description p {
	/* Aiming at roughly 100 characters a line. Karla averages 6.56px a
	   character at 14px, so 7.97px at 17px, and 47em lands near 100. */
	max-width: 47em;
	font-size: 17px;
	line-height: 1.5;
	margin: 0;
	padding: 0;
	color: var(--zk-muted);
	text-transform: none;
}

/* Price bands. Plain links, so the whole filter state sits in the URL and the
   back button needs no help. */
.zk-price-ranges {
	margin: 0;
	padding: 0;
	list-style: none;
}

.zk-price-ranges li { margin: 0; }

.zk-price-ranges a {
	display: block;
	padding: 5px 0;
	color: var(--zk-ink);
	text-decoration: none;
}

.zk-price-ranges a:hover { color: var(--zk-accent); }

.zk-price-ranges .count { color: var(--zk-muted); }

.zk-price-range--on > a {
	color: var(--zk-accent);
	font-weight: 600;
}

/* A band holding nothing but the title does not need the room the
   description would have taken. The body class comes from plp-layout.php. */
.zk-band-title-only .shoptimizer-category-banner { padding: 10px 0 12px; }
.zk-band-title-only .shoptimizer-category-banner h1 { margin-bottom: 0; }

/* Filter headings carry the sidebar, so they need real weight. The theme
   prints them in a span, which stays a span: this is visual only. */
#secondary .widget-title {
	display: block;
	margin-bottom: 16px;
	font-family: Karla, sans-serif;
	font-size: 17px;
	font-weight: 600;
	color: var(--zk-ink);
}

/* Active filter chips. One chip per band, not one per bound. */
.zk-active-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.zk-active-filters .zk-chip { margin: 0; }

.zk-active-filters .zk-chip > a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 34px;
	padding: 4px 12px;
	border: 1px solid var(--zk-hairline);
	border-radius: 4px;
	background-color: var(--zk-surface);
	color: var(--zk-ink);
	font-size: 14px;
	line-height: 1.2;
	text-decoration: none;
}

.zk-active-filters .zk-chip > a:hover {
	border-color: var(--zk-accent);
	color: var(--zk-accent);
}

.zk-active-filters .zk-chip__x {
	font-size: 17px;
	line-height: 1;
	color: var(--zk-muted);
}

.zk-active-filters .zk-chip > a:hover .zk-chip__x { color: var(--zk-accent); }

.zk-active-filters .zk-chip--clear > a {
	border-color: transparent;
	background: none;
	padding-left: 4px;
	padding-right: 4px;
	color: var(--zk-accent);
	font-weight: 600;
	text-decoration: underline;
}

@media (max-width: 992px) {
	/* The filter toggle measured 374x40. Below the 44px a thumb needs, edge
	   taps miss. */
	.mobile-filter.shoptimizer-mobile-toggle {
		min-height: 48px;
		padding-top: 0;
		padding-bottom: 0;
	}

	/* The drawer waited 100ms before moving, so the first tap read as dead and
	   invited a second one that landed on the overlay and closed it again.
	   The theme sets transition: 0.35s 0.1s from .woocommerce.archive
	   #secondary, which outranks a shorter selector. */
	.woocommerce.archive #secondary.widget-area {
		transition-delay: 0s;
		transition-duration: 0.25s;
	}
}