/* KomKits — catalogue banner, filter sidebar, results bar and grid. */

/* ---------------------------------------------------------------- banner -- */

.kk-banner {
	padding-block: clamp(1.75rem, 1rem + 3vw, 3.25rem);
	background: var(--kk-cream);
	text-align: center;
}

.kk-crumbs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .45rem;
	margin-bottom: var(--kk-gap-s);
	color: var(--kk-muted);
	font-size: var(--kk-step--1);
}

.kk-crumbs a { color: inherit; text-decoration: none; }
.kk-crumbs a:hover { color: var(--kk-gold-deep); text-decoration: underline; }
.kk-crumbs span { opacity: .5; }

.kk-banner__title {
	margin: 0;
	font-size: var(--kk-step-4);
}

.kk-banner__copy {
	margin: var(--kk-gap-s) auto 0;
	max-width: 62ch;
	color: var(--kk-muted);
	font-style: italic;
}

.kk-banner__copy p { margin: 0; }

/* ------------------------------------------------------------------ shop -- */

.kk-shop {
	display: grid;
	grid-template-columns: 16.5rem minmax(0, 1fr);
	gap: clamp(1.5rem, .8rem + 2vw, 3rem);
	padding-block: var(--kk-section);
	align-items: start;
}

.kk-shop__filter-toggle { display: none; }

/* The sidebar carries [hidden] for the mobile toggle's initial state; desktop
   ignores it and always shows the panel. */
.kk-shop__aside[hidden] { display: block; }

/* --------------------------------------------------------------- sidebar -- */

.kk-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--kk-gap-s);
	position: sticky;
	top: 6.5rem;
}

.kk-filter {
	border: 1px solid var(--kk-rule);
	border-radius: var(--kk-radius);
	background: var(--kk-white);
	overflow: hidden;
}

.kk-filter__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .85rem 1rem;
	border-bottom: 1px solid transparent;
	color: var(--kk-brown);
	font-family: var(--kk-display);
	font-size: var(--kk-step-1);
	cursor: pointer;
	list-style: none;
}

.kk-filter__head::-webkit-details-marker { display: none; }

.kk-filter__head::after {
	content: "+";
	font-family: var(--kk-body);
	font-size: 1.1rem;
	line-height: 1;
	color: var(--kk-muted);
}

.kk-filter[open] .kk-filter__head {
	border-bottom-color: var(--kk-rule-soft);
}

.kk-filter[open] .kk-filter__head::after { content: "\2212"; }

.kk-filter__list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: .4rem 0;
	max-height: 16rem;
	overflow-y: auto;
	list-style: none;
}

.kk-filter__opt {
	display: flex;
	align-items: center;
	gap: .55rem;
	padding: .42rem 1rem;
	color: var(--kk-text);
	font-size: var(--kk-step--1);
	text-decoration: none;
	transition: background .15s var(--kk-ease), color .15s var(--kk-ease);
}

.kk-filter__opt:hover { background: var(--kk-cream); }

.kk-filter__box {
	flex: 0 0 auto;
	width: .95rem;
	height: .95rem;
	border: 1px solid var(--kk-rule);
	border-radius: 2px;
	background: var(--kk-white);
	position: relative;
}

.kk-filter__opt.is-on { color: var(--kk-brown); font-weight: 500; }

.kk-filter__opt.is-on .kk-filter__box {
	background: var(--kk-brown);
	border-color: var(--kk-brown);
}

.kk-filter__opt.is-on .kk-filter__box::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 1px;
	width: 4px;
	height: 8px;
	border: solid var(--kk-white);
	border-width: 0 1.6px 1.6px 0;
	transform: rotate(43deg);
}

.kk-filter__name { flex: 1; }

.kk-filter__n {
	color: var(--kk-faint);
	font-size: .72rem;
	font-variant-numeric: tabular-nums;
}

.kk-filter__clear {
	margin: 0;
	font-size: var(--kk-step--1);
}

.kk-filter__clear a { color: var(--kk-gold-deep); }

/* Price bands are single-choice, so they carry no checkbox. */
.kk-filter__opt .kk-filter__name .woocommerce-Price-amount { color: inherit; }

/* ------------------------------------------------------------ results bar -- */

.kk-shop__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--kk-gap-s);
	margin-bottom: var(--kk-gap-m);
	padding-bottom: var(--kk-gap-s);
	border-bottom: 1px solid var(--kk-rule-soft);
}

.kk-shop__bar .woocommerce-result-count {
	margin: 0;
	color: var(--kk-muted);
	font-size: var(--kk-step--1);
	font-variant-numeric: tabular-nums;
}

.kk-shop__bar .woocommerce-ordering { margin: 0; }

.kk-shop__bar select {
	padding: .55em 2.2em .55em .85em;
	border: 1px solid var(--kk-rule);
	border-radius: var(--kk-radius);
	background: var(--kk-white);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E645A' stroke-width='1.8'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .6em center;
	background-size: 14px;
	color: var(--kk-text);
	font-family: var(--kk-body);
	font-size: var(--kk-step--1);
	appearance: none;
	cursor: pointer;
}

/* ------------------------------------------------------------------ grid -- */

.kk-shop__grid { margin: 0; padding: 0; list-style: none; }
.kk-shop__grid::before,
.kk-shop__grid::after { content: none; }

/* Woo's float-based loop classes fight the grid. */
.kk-shop__grid .kk-card {
	float: none;
	width: auto;
	margin: 0;
	clear: none;
}

.kk-shop .woocommerce-pagination {
	margin-top: var(--kk-gap-l);
	text-align: center;
}

.kk-shop .woocommerce-pagination ul {
	display: inline-flex;
	gap: .3rem;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.kk-shop .woocommerce-pagination li { border: 0; }

.kk-shop .woocommerce-pagination a,
.kk-shop .woocommerce-pagination span {
	display: grid;
	place-items: center;
	min-width: 2.4rem;
	height: 2.4rem;
	padding: 0 .5rem;
	border: 1px solid var(--kk-rule);
	border-radius: var(--kk-radius);
	background: var(--kk-white);
	color: var(--kk-text);
	font-size: var(--kk-step--1);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}

.kk-shop .woocommerce-pagination .current {
	background: var(--kk-brown);
	border-color: var(--kk-brown);
	color: var(--kk-shell);
}

/* ----------------------------------------------------------------- empty -- */

.kk-empty {
	padding: var(--kk-gap-xl) var(--kk-gap-m);
	border: 1px dashed var(--kk-rule);
	border-radius: var(--kk-radius);
	text-align: center;
}

.kk-empty h2 { margin: 0 0 .5rem; font-size: var(--kk-step-2); }
.kk-empty p { margin: 0 auto .9rem; max-width: 46ch; color: var(--kk-muted); }

/* --------------------------------------------------- woo message notices -- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	margin: 0 0 var(--kk-gap-m);
	padding: .9rem 1.1rem;
	border: 1px solid var(--kk-rule);
	border-left: 3px solid var(--kk-gold);
	border-radius: var(--kk-radius);
	background: var(--kk-cream);
	color: var(--kk-text);
	font-size: var(--kk-step--1);
	list-style: none;
}

.woocommerce-error { border-left-color: var(--kk-sale); }

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 1100px) {
	.kk-shop { grid-template-columns: 14rem minmax(0, 1fr); }
	.kk-shop__grid.kk-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.kk-shop { grid-template-columns: minmax(0, 1fr); }
	.kk-shop__filter-toggle { display: inline-flex; justify-self: start; }
	.kk-shop__aside[hidden] { display: none; }
	.kk-sidebar { position: static; }
	.kk-shop__grid.kk-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
	.kk-shop__bar { flex-direction: column; align-items: stretch; }
	.kk-shop__bar select { width: 100%; }
}

/* ------------------------------------------------------- single product -- */

.single-product .kk-main > .ct-container { padding-block: var(--kk-section); }

.single-product .woocommerce-breadcrumb {
	margin-bottom: var(--kk-gap-m);
	color: var(--kk-muted);
	font-size: var(--kk-step--1);
	text-transform: none;
	letter-spacing: 0;
}

.single-product .woocommerce-breadcrumb a { color: inherit; text-decoration: none; }
.single-product .woocommerce-breadcrumb a:hover { color: var(--kk-gold-deep); text-decoration: underline; }

.single-product .product_title {
	margin: 0 0 var(--kk-gap-s);
	font-size: var(--kk-step-3);
}

.single-product .summary .price {
	color: var(--kk-brown);
	font-family: var(--kk-body);
	font-size: var(--kk-step-2);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.single-product .summary .price del { color: var(--kk-faint); font-weight: 400; }
.single-product .summary .price ins { text-decoration: none; }

.single-product .woocommerce-product-details__short-description {
	color: var(--kk-muted);
	font-size: var(--kk-step-1);
}

.single-product .product_meta {
	color: var(--kk-muted);
	font-size: var(--kk-step--1);
}

.single-product .product_meta a { color: var(--kk-gold-deep); }

/* Variation selector */
.single-product .variations th,
.single-product .variations label {
	color: var(--kk-brown);
	font-family: var(--kk-body);
	font-size: var(--kk-step--1);
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.single-product .variations select {
	width: 100%;
	padding: .7em 2.2em .7em .9em;
	border: 1px solid var(--kk-rule);
	border-radius: var(--kk-radius);
	background: var(--kk-white);
	color: var(--kk-text);
	font-family: var(--kk-body);
	font-size: var(--kk-step-0);
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E645A' stroke-width='1.8'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .7em center;
	background-size: 14px;
}

.single-product .single_add_to_cart_button,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt {
	background: var(--kk-brown);
	border-color: var(--kk-brown);
	color: var(--kk-shell);
	font-family: var(--kk-body);
	font-size: var(--kk-step--1);
	font-weight: 500;
	letter-spacing: .07em;
	text-transform: uppercase;
	border-radius: var(--kk-radius);
}

.single-product .single_add_to_cart_button:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover {
	background: var(--kk-brown-deep);
	border-color: var(--kk-brown-deep);
	color: var(--kk-white);
}

/* Tabs */
.woocommerce-tabs .wc-tabs {
	border-bottom: 1px solid var(--kk-rule);
}

.woocommerce-tabs .wc-tabs li a {
	color: var(--kk-muted);
	font-family: var(--kk-body);
	font-size: var(--kk-step--1);
	font-weight: 500;
	letter-spacing: .07em;
	text-transform: uppercase;
	text-decoration: none;
}

.woocommerce-tabs .wc-tabs li.active a { color: var(--kk-brown); }

.woocommerce-tabs .wc-tabs li.active {
	border-bottom: 2px solid var(--kk-brown);
}

.woocommerce-tabs h2 { font-size: var(--kk-step-2); }

/* Related products heading and grid */
.related > h2,
.upsells > h2 {
	margin-bottom: var(--kk-gap-m);
	font-size: var(--kk-step-3);
	text-align: center;
}

.related .kk-grid,
.upsells .kk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
	.related .kk-grid,
	.upsells .kk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Stock note */
.single-product .stock.in-stock { color: var(--kk-ok); font-size: var(--kk-step--1); }
.single-product .stock.out-of-stock { color: var(--kk-sale); font-size: var(--kk-step--1); }

/* Blocksy renders its own breadcrumb element, which keeps its palette link colour. */
.ct-breadcrumbs,
.ct-breadcrumbs a,
.single-product .woocommerce-breadcrumb a {
	color: var(--kk-muted);
	text-decoration: none;
}

.ct-breadcrumbs a:hover { color: var(--kk-gold-deep); text-decoration: underline; }
.ct-breadcrumbs .last-item,
.ct-breadcrumbs [aria-current] { color: var(--kk-brown); }

/* The theme's fixed select height clipped the descender on "Choose an option". */
.single-product .variations select,
.kk-shop__bar select {
	height: auto;
	min-height: 0;
	line-height: 1.5;
}