/*
 * Shop archive: the filter column, the results header and the WooCommerce
 * controls the Elementor template embeds.
 *
 * Layout and spacing come from the Product Category Archive template; this file
 * only styles what WooCommerce and this plugin render inside it, using the
 * Kit's global tokens so the shop keeps one visual system.
 */

:root {
	--shop-radius: 6px;
	--shop-gap: 18px;
}

/* -- Filter column ------------------------------------------------------- */

.product-filters {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 4px 0 8px;
	font-family: var( --e-global-typography-text-font-family ), sans-serif;
	font-size: 14px;
	color: var( --e-global-color-text );
}

.filter-panel {
	padding: 18px 20px;
	border-bottom: 1px solid var( --e-global-color-border );
}

.filter-panel:last-of-type {
	border-bottom: 0;
}

.product-filters h2.filter-panel__title {
	margin: 0 0 12px;
	font-family: var( --e-global-typography-secondary-font-family ), sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: var( --e-global-color-primary );
	letter-spacing: 0.01em;
}

.filter-panel--categories .product-filters h2.filter-panel__title {
	font-size: 17px;
}

.filter-panel--manufacturer .filter-list {
	max-height: 300px;
	overflow-y: auto;
}

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

.filter-list__item a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 10px;
	border-radius: 4px;
	color: var( --e-global-color-text );
	text-decoration: none;
	line-height: 1.35;
}

.filter-list__item a:hover,
.filter-list__item a:focus-visible {
	background-color: var( --e-global-color-surface );
	color: var( --e-global-color-primary );
}

.filter-list__item--child a {
	padding-left: 18px;
}

.filter-list__item--current a {
	background-color: rgba( 255, 166, 10, 0.16 );
	color: var( --e-global-color-primary );
	font-weight: 600;
}

.filter-list__count {
	margin-left: auto;
	color: var( --e-global-color-secondary );
	font-size: 13px;
}

.filter-list__box {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	border: 1px solid var( --e-global-color-border );
	border-radius: 3px;
	background-color: #FFFFFF;
}

.filter-list__item--checked .filter-list__box {
	border-color: var( --e-global-color-accent );
	background-color: var( --e-global-color-accent );
	box-shadow: inset 0 0 0 3px #FFFFFF;
}

/* WooCommerce's own layered navigation and price filter. */

.filter-panel__widget ul {
	max-height: 264px;
	overflow-y: auto;
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.filter-panel__widget ul li {
	margin: 0;
	padding: 0;
}

.filter-panel__widget ul li a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 10px;
	border-radius: 4px;
	color: var( --e-global-color-text );
	text-decoration: none;
	line-height: 1.35;
}

.filter-panel__widget ul li a::before {
	content: "";
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	border: 1px solid var( --e-global-color-border );
	border-radius: 3px;
	background-color: #FFFFFF;
}

.filter-panel__widget ul li.chosen a::before {
	border-color: var( --e-global-color-accent );
	background-color: var( --e-global-color-accent );
	box-shadow: inset 0 0 0 3px #FFFFFF;
}

.filter-panel__widget ul li a:hover,
.filter-panel__widget ul li a:focus-visible {
	background-color: var( --e-global-color-surface );
	color: var( --e-global-color-primary );
}

.filter-panel__widget .count {
	color: var( --e-global-color-secondary );
	font-size: 13px;
}

.filter-panel--price .price_slider_wrapper {
	padding-top: 6px;
}

.filter-panel--price .ui-slider {
	position: relative;
	height: 4px;
	margin: 10px 8px 18px;
	border-radius: 2px;
	background-color: var( --e-global-color-border );
}

.filter-panel--price .ui-slider .ui-slider-range {
	position: absolute;
	height: 100%;
	border-radius: 2px;
	background-color: var( --e-global-color-accent );
}

.filter-panel--price .ui-slider .ui-slider-handle {
	position: absolute;
	top: -6px;
	width: 16px;
	height: 16px;
	margin-left: -8px;
	border: 2px solid #FFFFFF;
	border-radius: 50%;
	background-color: var( --e-global-color-accent );
	box-shadow: 0 1px 3px rgba( 22, 33, 46, 0.25 );
	cursor: pointer;
}

.filter-panel--price .price_slider_amount {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.filter-panel--price .price_slider_amount .price_label {
	order: 1;
	width: 100%;
	color: var( --e-global-color-secondary );
	font-size: 13px;
}

.filter-panel--price .price_slider_amount button.button {
	order: 2;
	padding: 8px 16px;
	border: 0;
	border-radius: 4px;
	background-color: var( --e-global-color-primary );
	color: #FFFFFF;
	font-family: var( --e-global-typography-accent-font-family ), sans-serif;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.filter-panel--price .price_slider_amount button.button:hover {
	background-color: var( --e-global-color-accent );
	color: var( --e-global-color-primary );
}

.filter-reset {
	display: block;
	margin: 6px 20px 4px;
	padding: 11px 16px;
	border: 1px solid var( --e-global-color-border );
	border-radius: 4px;
	color: var( --e-global-color-primary );
	font-family: var( --e-global-typography-accent-font-family ), sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

.filter-reset:hover,
.filter-reset:focus-visible {
	border-color: var( --e-global-color-accent );
	color: var( --e-global-color-primary );
}

/* -- Results header ------------------------------------------------------ */

.results-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	font-family: var( --e-global-typography-text-font-family ), sans-serif;
	font-size: 14px;
	color: var( --e-global-color-text );
}

.results-header__count .woocommerce-result-count {
	margin: 0;
	color: var( --e-global-color-secondary );
}

.results-header__controls {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

.results-header__per-page,
.results-header__ordering {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.results-header__per-page label,
.results-header .woocommerce-ordering::before {
	color: var( --e-global-color-secondary );
	white-space: nowrap;
}

.results-header .woocommerce-ordering {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.results-header .woocommerce-ordering::before {
	content: "Kārtot pēc:";
}

.results-header__select,
.results-header .woocommerce-ordering select {
	min-width: 150px;
	padding: 9px 12px;
	border: 1px solid var( --e-global-color-border );
	border-radius: 4px;
	background-color: #FFFFFF;
	color: var( --e-global-color-primary );
	font-family: inherit;
	font-size: 14px;
	line-height: 1.3;
}

.results-header__select:focus-visible,
.results-header .woocommerce-ordering select:focus-visible {
	outline: 2px solid var( --e-global-color-accent );
	outline-offset: 1px;
}

/* -- Archive introduction ------------------------------------------------ */

.archive-intro {
	color: var( --e-global-color-text );
	font-size: 15px;
	line-height: 1.7;
}

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

/* -- Responsive ---------------------------------------------------------- */

@media (max-width: 1024px) {
	.product-filters {
		font-size: 15px;
	}

	.filter-panel {
		padding: 16px 18px;
	}

	.results-header {
		align-items: flex-start;
		flex-direction: column;
	}

	.results-header__controls {
		width: 100%;
		justify-content: space-between;
	}
}

@media (max-width: 767px) {
	.results-header__controls {
		gap: 10px;
		flex-direction: column;
		align-items: stretch;
	}

	.results-header__per-page,
	.results-header .woocommerce-ordering {
		justify-content: space-between;
	}

	.results-header__select,
	.results-header .woocommerce-ordering select {
		flex: 1 1 auto;
		min-width: 0;
	}

	.filter-list__item a,
	.filter-panel__widget ul li a {
		padding-top: 10px;
		padding-bottom: 10px;
	}
}

/* A filter value is a phrase, not a word: it wraps rather than pushing its
   count off the edge of the column. */
.filter-list__label {
	min-width: 0;
	overflow-wrap: anywhere;
}

.filter-panel--attribute .filter-list {
	max-height: 300px;
	overflow-y: auto;
}

/* -- The filter disclosure ------------------------------------------------ */

/* On a wide screen the column simply is the filters; the disclosure's own
   marker and heading belong to the narrow layout. */
.product-filters {
	display: block;
}

.product-filters__toggle {
	display: none;
}

@media (max-width: 1024px) {
	.product-filters__toggle {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 14px 20px;
		cursor: pointer;
		font-family: var( --e-global-typography-secondary-font-family ), sans-serif;
		font-size: 15px;
		font-weight: 600;
		color: var( --e-global-color-primary );
		list-style: none;
	}

	.product-filters__toggle::-webkit-details-marker {
		display: none;
	}

	/* A chevron that turns as the panel opens. */
	.product-filters__toggle::before {
		content: "";
		width: 9px;
		height: 9px;
		border-right: 2px solid var( --e-global-color-accent );
		border-bottom: 2px solid var( --e-global-color-accent );
		transform: rotate( 45deg );
		transform-origin: 60% 60%;
		transition: transform 0.15s ease;
	}

	.product-filters[open] .product-filters__toggle::before {
		transform: rotate( -135deg );
	}

	.product-filters__toggle:focus-visible {
		outline: 2px solid var( --e-global-color-accent );
		outline-offset: -2px;
	}

	.product-filters[open] .product-filters__panels {
		border-top: 1px solid var( --e-global-color-border );
	}
}

/* -- Keyboard focus ------------------------------------------------------- */

/* Every control in the column is reachable by keyboard and says where it is. */
.product-filters a:focus-visible,
.product-filters button:focus-visible,
.product-filters input:focus-visible,
.results-header select:focus-visible,
.results-header__reset:focus-visible {
	outline: 2px solid var( --e-global-color-accent );
	outline-offset: 2px;
}