/*
 * Shop and product category archives.
 * Figma "Sportlab Cosmetics UI" -> Karta produktu oraz listing produktów
 * (12754:44855). The cards themselves: css/product-card.css.
 *
 * Above 1200px the filters are a 334px column beside a four-column grid.
 * Below, the same aside becomes a drawer from the left (Bootstrap's
 * offcanvas-xl) and the grid takes the full width.
 */

.themeShopPage {
	--shop-sidebar: clamp(15rem, 17.4vw, 20.875rem);
	--shop-gap: 1.5rem;
	--shop-icon-size: 1rem;

	font-family: var(--theme-font);
	color: var(--sl-grey-900);
}

.themeShopPage .shop-wrap {
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--grid-max-width) + 2 * var(--grid-margin));
	margin-inline: auto;
	padding: 0 var(--grid-margin) 5rem;
}

/* One masked element per icon, coloured by currentColor. */
.themeShopPage .shop-sort::after,
.themeShopPage .shop-filters-toggle-icon {
	display: block;
	flex: none;
	width: var(--shop-icon-size);
	height: var(--shop-icon-size);
	background: currentColor;
	-webkit-mask: var(--shop-icon) no-repeat center / contain;
	mask: var(--shop-icon) no-repeat center / contain;
}

/****************************** HEADER ******************************/

/* The count lines up with the first column of cards, so the header shares
   the layout's two tracks. */
.themeShopPage .shop-header {
	display: grid;
	grid-template-columns: var(--shop-sidebar) minmax(0, 1fr);
	align-items: center;
	column-gap: var(--shop-gap);
	margin-bottom: 2rem;
}

.themeShopPage .shop-title {
	margin: 0;
	font-size: clamp(1.75rem, 1.339vw + 0.89375rem, 2.25rem);
	font-weight: 600;
	line-height: 1.2;
	color: var(--sl-black);
}

.themeShopPage .shop-toolbar {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-width: 0;
}

.themeShopPage .shop-count {
	margin: 0 auto 0 0;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--sl-black);
	white-space: nowrap;
}

.themeShopPage .shop-count strong {
	font-weight: 600;
}

/*
 * The select covers the whole box, so a click anywhere in it opens the list.
 * "Sortuj według" and the chevron are painted over it and let clicks through;
 * the select's left padding keeps its value clear of the prefix, whose width
 * is fixed by its copy and type.
 */
.themeShopPage .shop-sort {
	--shop-icon: url("../template-img/icon_chevron_down.svg");
	--shop-icon-size: 1.25rem;
	--shop-sort-prefix: 5.875rem;

	position: relative;
	display: block;
	box-sizing: border-box;
	width: 18.9375rem;
	max-width: 100%;
	height: 2.25rem;
	margin: 0;
	background: var(--sl-white);
	border: 1px solid var(--sl-grey-300);
	border-radius: var(--sl-radius-xs);
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--sl-grey-500);
}

.themeShopPage .shop-sort-label,
.themeShopPage .shop-sort::after {
	position: absolute;
	top: 50%;
	pointer-events: none;
	transform: translateY(-50%);
}

.themeShopPage .shop-sort-label {
	left: 1rem;
	white-space: nowrap;
}

.themeShopPage .shop-sort::after {
	content: "";
	right: 1rem;
}

.themeShopPage .shop-sort:has(:focus-visible) {
	outline: 2px solid var(--sl-black);
	outline-offset: 2px;
}

.woocommerce .themeShopPage .shop-sort-select {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0 2.75rem 0 calc(1rem + var(--shop-sort-prefix));
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	appearance: none;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	text-overflow: ellipsis;
	cursor: pointer;
}

.woocommerce .themeShopPage .shop-sort-select:focus,
.woocommerce .themeShopPage .shop-sort-select:focus-visible {
	outline: none;
	box-shadow: none;
}

.themeShopPage .shop-filters-toggle {
	--shop-icon: url("../template-img/filter.svg");

	display: none;
	align-items: center;
	gap: 0.5rem;
	height: 2.25rem;
	padding: 0 1rem;
	background: var(--sl-white);
	border: 1px solid var(--sl-grey-300);
	border-radius: var(--sl-radius-xs);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--sl-grey-900);
}

/****************************** LAYOUT ******************************/

.themeShopPage .shop-layout {
	display: grid;
	grid-template-columns: var(--shop-sidebar) minmax(0, 1fr);
	align-items: start;
	gap: var(--shop-gap);
}

.themeShopPage .shop-results {
	min-width: 0;
	transition: opacity 0.2s;
}

.themeShopPage .shop-results[aria-busy="true"] {
	opacity: 0.5;
	pointer-events: none;
}

/****************************** FILTERS ******************************/

.themeShopPage .shop-filters-form {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	width: 100%;
}

.themeShopPage .shop-filter {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.themeShopPage .shop-filter + .shop-filter {
	padding-top: 1.5rem;
	border-top: 1px solid var(--sl-grey-200);
}

/* A legend will not take part in layout, so it floats across the full width
   and the list clears it. */
.themeShopPage .shop-filter-title {
	float: left;
	width: 100%;
	margin: 0 0 1rem;
	padding: 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--sl-grey-900);
}

.themeShopPage .shop-filter-title + * {
	clear: both;
}

.themeShopPage .shop-filter-options {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.themeShopPage .shop-filter-option {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--sl-grey-900);
	cursor: pointer;
}

/****************************** PRICE SLIDER ******************************/

/* Two range inputs stacked on one track; only their thumbs take the pointer,
   so either can be grabbed wherever they sit. */
.themeShopPage .shop-price-track {
	/* Positions as fractions of the range, set by js/shop.js. */
	--shop-price-from: 0;
	--shop-price-to: 1;
	/* The thumb takes 24px of pointer (WCAG 2.5.8) but paints the design's
	   16px dot - blue, ringed in white - in its middle. */
	--shop-price-thumb: 1.5rem;
	--shop-price-thumb-paint: radial-gradient(
		circle,
		var(--sl-tertiary) 0 0.375rem,
		var(--sl-white) 0.375rem 0.5rem,
		transparent calc(0.5rem + 0.5px)
	);
	--shop-price-thumb-shadow: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.15));

	position: relative;
	height: var(--shop-price-thumb);
	margin: 0 0 0.5rem;
}

.themeShopPage .shop-price-track::before,
.themeShopPage .shop-price-range {
	content: "";
	position: absolute;
	top: 50%;
	height: 0.25rem;
	border-radius: 6.25rem;
	transform: translateY(-50%);
}

.themeShopPage .shop-price-track::before {
	inset-inline: 0;
	background: var(--sl-grey-200);
}

/* A thumb's centre travels half a thumb in from either end of the track. */
.themeShopPage .shop-price-range {
	left: calc(
		var(--shop-price-thumb) / 2 + var(--shop-price-from) * (100% - var(--shop-price-thumb))
	);
	right: calc(
		100% - var(--shop-price-thumb) / 2 - var(--shop-price-to) * (100% - var(--shop-price-thumb))
	);
	border-radius: 0;
	background: var(--sl-tertiary);
}

.themeShopPage .shop-price-track input[type="range"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	appearance: none;
	pointer-events: none;
}

.themeShopPage .shop-price-track input[type="range"]::-webkit-slider-runnable-track {
	height: 100%;
	background: none;
	border: 0;
}

.themeShopPage .shop-price-track input[type="range"]::-moz-range-track {
	height: 100%;
	background: none;
	border: 0;
}

.themeShopPage .shop-price-track input[type="range"]::-webkit-slider-thumb {
	width: var(--shop-price-thumb);
	height: var(--shop-price-thumb);
	background: var(--shop-price-thumb-paint);
	border: 0;
	border-radius: 50%;
	filter: var(--shop-price-thumb-shadow);
	appearance: none;
	pointer-events: auto;
	cursor: grab;
}

.themeShopPage .shop-price-track input[type="range"]::-moz-range-thumb {
	width: var(--shop-price-thumb);
	height: var(--shop-price-thumb);
	background: var(--shop-price-thumb-paint);
	border: 0;
	border-radius: 50%;
	filter: var(--shop-price-thumb-shadow);
	pointer-events: auto;
	cursor: grab;
}

.themeShopPage .shop-price-track input[type="range"]:focus-visible::-webkit-slider-thumb {
	outline: 2px solid var(--sl-tertiary);
}

.themeShopPage .shop-price-track input[type="range"]:focus-visible::-moz-range-thumb {
	outline: 2px solid var(--sl-tertiary);
}

.themeShopPage .shop-price-labels {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	font-family: var(--sl-font-ui);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: normal;
	color: var(--sl-grey-900);
	white-space: nowrap;
}

.themeShopPage .shop-price-labels .amount,
.themeShopPage .shop-price-labels bdi {
	font: inherit;
	color: inherit;
}

/****************************** DRAWER ******************************/

.themeShopPage .shop-filters-header,
.themeShopPage .shop-filters-footer {
	display: none;
}

@media (max-width: 1199.98px) {
	.themeShopPage .shop-header {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 1.25rem;
	}

	.themeShopPage .shop-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.themeShopPage .shop-filters-toggle {
		display: inline-flex;
	}

	.themeShopPage .shop-filters {
		--bs-offcanvas-width: min(23rem, 90vw);
	}

	.themeShopPage .shop-filters-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 1.25rem 1.5rem;
		border-bottom: 1px solid var(--sl-grey-200);
	}

	.themeShopPage .shop-filters-title {
		margin: 0;
		font-size: 1.25rem;
		font-weight: 600;
		line-height: 1.2;
		color: var(--sl-black);
	}

	.themeShopPage .shop-filters-body {
		padding: 1.5rem;
	}

	.themeShopPage .shop-filters-footer {
		display: block;
		padding: 1rem 1.5rem;
		border-top: 1px solid var(--sl-grey-200);
	}

	.themeShopPage .shop-filters-apply {
		width: 100%;
		padding: 0.9375rem 1.5rem;
		background: var(--sl-black);
		border: 1px solid var(--sl-black);
		border-radius: var(--sl-radius-md);
		font-size: 1rem;
		font-weight: 800;
		line-height: 1.5;
		color: var(--sl-white);
	}
}

@media (max-width: 767.98px) {
	.themeShopPage .shop-wrap {
		padding-bottom: 3.5rem;
	}

	.themeShopPage .shop-toolbar {
		flex-wrap: wrap;
		row-gap: 0.75rem;
	}

	.themeShopPage .shop-count {
		order: -1;
		flex: 1 0 100%;
	}

	.themeShopPage .shop-sort {
		--shop-sort-prefix: 0rem;

		flex: 1 1 auto;
		width: auto;
	}

	/* Out of sight, not out of the accessibility tree - it names the select. */
	.themeShopPage .shop-sort-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* The grid narrows next to the sidebar before the sidebar folds away. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
	.themeShopPage .product-grid.columns-4 {
		--product-grid-columns: 3;
	}
}

/****************************** EMPTY ******************************/

.themeShopPage .shop-empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	padding: 2rem;
	background: var(--sl-grey-50);
	border-radius: var(--sl-radius-lg);
}

.themeShopPage .shop-empty-title {
	margin: 0;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--sl-grey-900);
}

.themeShopPage .shop-empty-reset {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--sl-grey-900);
	text-decoration: underline;
}