/* ==========================================================================
   Turbo Reman Center: shop listings (shop page, categories, brands, product search)
   The title band, the department row, filters beside the products (a bottom sheet on phones and tablets),
   the toolbar, the chosen filters, pagination and the empty state.
   ========================================================================== */

/* Title band, shorter on the shop so the products come up sooner ----------- */

.page-hero--compact .page-hero__inner {
	padding-block: clamp(28px, 4.2vw, 56px) clamp(28px, 3.8vw, 52px);
}

.page-hero--compact .page-hero__title {
	font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
}

/* Search results carry the search field; its suggestions open below the band. */
.page-hero:has(.page-hero__search) {
	z-index: 3;
	overflow: visible;
}

.page-hero__search {
	max-width: 560px;
	margin-top: 22px;
}

/* Departments ---------------------------------------------------------------- */

.departments {
	padding-top: clamp(20px, 3vw, 32px);
}

/* One row that scrolls sideways on phones and tablets, edge to edge; wraps on wide screens. */
.departments__list {
	display: flex;
	gap: 10px;
	margin-inline: calc(-1 * var(--gutter));
	padding: 2px var(--gutter) 6px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scroll-padding-inline: var(--gutter);
	scrollbar-width: none;
	list-style: none;
}

.departments__list::-webkit-scrollbar {
	display: none;
}

.departments__list > li {
	flex: none;
	scroll-snap-align: start;
}

@media (min-width: 1024px) {
	.departments__list {
		flex-wrap: wrap;
		margin-inline: 0;
		padding-inline: 0;
		overflow: visible;
	}
}

.department {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 60px;
	padding: 6px 22px 6px 6px;
	border-radius: var(--radius-pill);
	background: var(--c-surface);
	color: var(--c-ink);
	text-decoration: none;
	transition:
		background-color 0.15s ease,
		box-shadow 0.15s ease,
		color 0.15s ease,
		transform 0.16s var(--ease-out);
}

.department__well {
	display: grid;
	flex: none;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--c-white);
	color: var(--c-red);
}

.department__well img {
	width: 44px;
	height: 44px;
	object-fit: contain;
}

.department__well .icon {
	width: 22px;
	height: 22px;
}

.department__text {
	display: grid;
	line-height: 1.2;
}

.department__name {
	font-size: 0.9375rem;
	font-weight: 500;
	white-space: nowrap;
}

.department__count {
	color: var(--c-muted);
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	transition: color 0.15s ease;
}

a.department:active {
	transform: scale(0.97);
}

.department.is-current {
	background: var(--c-red);
	color: var(--c-white);
}

.department.is-current .department__count {
	color: rgb(255 255 255 / 0.85);
}

.department.is-empty {
	color: var(--c-muted);
	opacity: 0.6;
}

@media (hover: hover) and (pointer: fine) {
	a.department:not(.is-current):hover {
		box-shadow: inset 0 0 0 1px var(--c-line-strong);
		background: var(--c-white);
	}
}

/* Layout -------------------------------------------------------------------- */

.shop__layout {
	display: grid;
	gap: 20px;
	padding-block: clamp(20px, 3vw, 36px) var(--space-section);
}

@media (min-width: 1024px) {
	.shop__layout {
		grid-template-columns: 256px minmax(0, 1fr);
		gap: clamp(40px, 4vw, 56px);
		align-items: start;
	}
}

/* Filters ---------------------------------------------------------------------- */

.shop-filters__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.shop-filters__title {
	font-size: 1.875rem;
}

.shop-filters__close {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--c-surface);
	color: var(--c-ink);
	transition: background-color 0.15s ease, transform 0.16s var(--ease-out);
}

.shop-filters__close:active {
	transform: scale(0.94);
}

.shop-filters__body {
	display: grid;
	gap: 28px;
	align-content: start;
}

.facet__title {
	margin-bottom: 8px;
	font-size: 1.375rem;
}

.facet__group {
	margin: 12px 0 2px;
	color: var(--c-muted);
	font-size: 0.8125rem;
	font-weight: 500;
}

.facet__title + .facet__group {
	margin-top: 0;
}

.facet__list {
	display: grid;
	list-style: none;
}

.facet-option {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	margin-inline: -10px;
	padding: 4px 10px;
	border-radius: var(--radius-sm);
	color: var(--c-ink);
	line-height: 1.3;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.facet-option__box {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border: 2px solid var(--c-line-strong);
	border-radius: 6px;
	background: var(--c-white);
	color: var(--c-white);
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.facet-option__box .icon {
	width: 14px;
	height: 14px;
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 0.15s ease, transform 0.2s var(--ease-out);
}

.facet-option.is-chosen .facet-option__box {
	border-color: var(--c-red);
	background: var(--c-red);
}

.facet-option.is-chosen .facet-option__box .icon {
	opacity: 1;
	transform: none;
}

.facet-option.is-chosen .facet-option__label {
	font-weight: 500;
}

.facet-option__count {
	color: var(--c-muted);
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
}

@media (hover: hover) and (pointer: fine) {
	.facet-option:hover {
		background: var(--c-surface);
		color: var(--c-ink);
	}

	.facet-option:not(.is-chosen):hover .facet-option__box {
		border-color: var(--c-ink);
	}

	.shop-filters__close:hover {
		background: var(--c-line);
	}
}

.shop-filters__help {
	margin-top: 4px;
	padding: 24px;
}

.help-card.shop-filters__help .help-card__phone {
	font-size: 2rem;
}

.shop-filters__foot {
	display: flex;
	gap: 10px;
}

.shop-filters__foot .btn--primary {
	flex: 1;
}

/* Phones and tablets: a sheet from the bottom, opened by the toolbar's Filters button (Popover API). */
@media (max-width: 1023.98px) {
	@supports selector(:popover-open) {
		.shop-filters {
			position: fixed;
			inset: auto 0 0;
			flex-direction: column;
			width: 100%;
			max-width: none;
			height: auto;
			max-height: min(88dvh, 760px);
			margin: 0;
			padding: 0;
			overflow: hidden;
			border: 0;
			border-radius: 20px 20px 0 0;
			background: var(--c-white);
			color: var(--c-text);
			box-shadow: var(--shadow-pop);
			transform: translateY(100%);
			transition:
				transform 0.34s var(--ease-drawer),
				overlay 0.34s allow-discrete,
				display 0.34s allow-discrete;
		}

		.shop-filters:popover-open {
			display: flex;
			transform: none;
		}

		@starting-style {
			.shop-filters:popover-open {
				transform: translateY(100%);
			}
		}

		.shop-filters::backdrop {
			background: rgb(10 10 10 / 0);
			transition:
				background-color 0.34s ease,
				overlay 0.34s allow-discrete,
				display 0.34s allow-discrete;
		}

		.shop-filters:popover-open::backdrop {
			background: rgb(10 10 10 / 0.55);
		}

		@starting-style {
			.shop-filters:popover-open::backdrop {
				background: rgb(10 10 10 / 0);
			}
		}

		.shop-filters__head {
			padding: 16px var(--gutter) 12px;
			border-bottom: 1px solid var(--c-line);
		}

		.shop-filters__body {
			flex: 1;
			padding: 20px var(--gutter) 28px;
			overflow-y: auto;
			overscroll-behavior: contain;
		}

		.shop-filters__foot {
			padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px));
			border-top: 1px solid var(--c-line);
			background: var(--c-white);
		}

		/* Reopened after choosing a filter: already in place, no second slide. */
		.shop-filters.is-instant,
		.shop-filters.is-instant::backdrop {
			transition: none;
		}
	}

	/* Without the Popover API the filters simply sit above the products. */
	@supports not selector(:popover-open) {
		.shop-toolbar__filters,
		.shop-filters__head,
		.shop-filters__foot {
			display: none;
		}
	}
}

@media (max-width: 1023.98px) and (prefers-reduced-motion: reduce) {
	.shop-filters,
	.shop-filters::backdrop {
		transition-duration: 0.01s;
	}
}

/* Wide screens: the same panel is the sidebar. */
@media (min-width: 1024px) {
	.shop-filters {
		position: static;
		display: block;
		width: auto;
		height: auto;
		margin: 0;
		padding: 0;
		overflow: visible;
		border: 0;
		border-radius: 0;
		background: none;
		color: inherit;
		box-shadow: none;
		transform: none;
		transition: none;
	}

	.shop-filters__head,
	.shop-filters__foot {
		display: none;
	}
}

html.has-sheet-open {
	overflow: hidden;
}

/* Toolbar ----------------------------------------------------------------------- */

.shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin-bottom: 20px;
}

.shop-toolbar__filters {
	min-height: 44px;
	padding: 0.5em 1.2em;
	font-size: 0.9375rem;
}

.shop-toolbar__filters .icon {
	width: 20px;
	height: 20px;
}

.shop-toolbar__badge {
	display: grid;
	place-items: center;
	min-width: 22px;
	height: 22px;
	padding-inline: 6px;
	border-radius: var(--radius-pill);
	background: var(--c-red);
	color: var(--c-white);
	font-size: 0.75rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.woocommerce-result-count {
	order: 3;
	width: 100%;
	color: var(--c-muted);
	font-size: 0.9375rem;
	font-variant-numeric: tabular-nums;
}

.woocommerce-ordering {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

.woocommerce-ordering label {
	color: var(--c-muted);
	font-size: 0.9375rem;
	white-space: nowrap;
}

.woocommerce-ordering select {
	height: 44px;
	padding: 0 44px 0 18px;
	border: 1px solid var(--c-line-strong);
	border-radius: var(--radius-pill);
	background: var(--c-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23161616' d='M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E") no-repeat right 18px center / 14px;
	color: var(--c-ink);
	font-weight: 500;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.woocommerce-ordering select:focus-visible {
	border-color: var(--c-red);
	outline: none;
	box-shadow: 0 0 0 4px rgb(229 39 39 / 0.14);
}

@media (hover: hover) and (pointer: fine) {
	.woocommerce-ordering select:hover {
		border-color: var(--c-ink);
	}
}

/* Phones: the Filters button and the sorting share the first row, the count sits under them. */
@media (max-width: 479.98px) {
	.woocommerce-ordering label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

@media (min-width: 1024px) {
	.shop-toolbar {
		flex-wrap: nowrap;
	}

	.shop-toolbar__filters {
		display: none;
	}

	.woocommerce-result-count {
		order: 0;
		width: auto;
		margin-right: auto;
	}
}

/* Chosen filters -------------------------------------------------------------------- */

.chosen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	margin: -4px 0 24px;
}

.chosen__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
}

.chosen__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 14px 0 18px;
	border-radius: var(--radius-pill);
	background: var(--c-surface);
	color: var(--c-ink);
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.15s ease, transform 0.16s var(--ease-out);
}

.chosen__chip .icon {
	width: 16px;
	height: 16px;
	color: var(--c-muted);
	transition: color 0.15s ease;
}

.chosen__chip:active {
	transform: scale(0.97);
}

.chosen__clear {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--c-red-600);
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: rgb(200 30 30 / 0.35);
}

@media (hover: hover) and (pointer: fine) {
	.chosen__chip:hover {
		background: var(--c-line);
		color: var(--c-ink);
	}

	.chosen__chip:hover .icon {
		color: var(--c-red);
	}

	.chosen__clear:hover {
		text-decoration-color: currentColor;
	}
}

/* Pagination ------------------------------------------------------------------------- */

.woocommerce-pagination {
	margin-top: clamp(40px, 5vw, 64px);
}

.woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	list-style: none;
}

.woocommerce-pagination li > .page-numbers {
	display: grid;
	place-items: center;
	min-width: 48px;
	height: 48px;
	padding-inline: 14px;
	border: 1px solid var(--c-line-strong);
	border-radius: var(--radius-pill);
	color: var(--c-ink);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	transition:
		background-color 0.15s ease,
		border-color 0.15s ease,
		color 0.15s ease,
		transform 0.16s var(--ease-out);
}

.woocommerce-pagination li > .page-numbers .icon {
	width: 20px;
	height: 20px;
}

.woocommerce-pagination li > a.page-numbers:active {
	transform: scale(0.94);
}

.woocommerce-pagination .page-numbers.current {
	border-color: var(--c-red);
	background: var(--c-red);
	color: var(--c-white);
}

.woocommerce-pagination .page-numbers.dots {
	min-width: 24px;
	padding: 0;
	border-color: transparent;
	color: var(--c-muted);
}

@media (hover: hover) and (pointer: fine) {
	.woocommerce-pagination li > a.page-numbers:hover {
		border-color: var(--c-ink);
		color: var(--c-ink);
	}
}

/* Nothing found ------------------------------------------------------------------------ */

.empty-state {
	display: grid;
	justify-items: start;
	gap: 10px;
	padding: clamp(28px, 4vw, 48px);
	border-radius: var(--radius-lg);
	background: var(--c-surface);
}

.empty-state__title {
	max-width: 24ch;
	font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem);
}

.empty-state__text {
	font-size: 1.0625rem;
}

.empty-state__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 14px;
}