/**
 * Shop on mobile: the Filters / Sort bar and its two sheets (Andy, 2026-10-16).
 * Built by assets/js/vd-shop-mobile.js; nothing here applies above 767px.
 */

.vd-shop-bar,
.vd-shop-backdrop,
.vd-shop-sheet {
	display: none;
}

@media (max-width: 767px) {
	/* The sidebar lives in the Filters sheet; the sort dropdown is replaced by
	   the Sort sheet. The results count stays. */
	.vd-shop-sort {
		display: none !important;
	}

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

	.vd-shop-bar {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 990;
		gap: 1px;
		background: var(--secondary);
		padding-bottom: env(safe-area-inset-bottom);
		transform: translateY(100%);
		transition: transform 0.35s ease;
		box-shadow: 0 -0.4rem 1.6rem rgb(0 0 0 / 0.25);
	}

	.vd-shop-bar.is-shown {
		transform: translateY(0);
	}

	.vd-shop-bar__btn {
		flex: 1 1 50%;
		border: 0;
		margin: 0;
		padding: 1.7rem 1rem;
		font: inherit;
		font-size: var(--at-text--s);
		letter-spacing: 0.08em;
		text-transform: uppercase;
		line-height: 1;
		cursor: pointer;
		background: var(--primary-d-3, #1d2b22);
		color: var(--light);
	}

	.vd-shop-bar__btn--filters {
		background: var(--secondary);
		color: var(--primary-d-3, #1d2b22);
	}

	/* --- sheets ------------------------------------------------------- */

	.vd-shop-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1000;
		background: rgb(0 0 0 / 0.55);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.3s ease;
	}

	.vd-shop-sheet-open .vd-shop-backdrop {
		opacity: 1;
		pointer-events: auto;
	}

	.vd-shop-sheet-open,
	.vd-shop-sheet-open body {
		overflow: hidden;
	}

	.vd-shop-sheet {
		display: flex;
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1001;
		max-height: 88vh;
		max-height: 88dvh;
		background: var(--primary);
		color: var(--light);
		border-top: 2px solid var(--secondary);
		transform: translateY(100%);
		transition: transform 0.35s ease;
	}

	.vd-shop-sheet[hidden] {
		display: none;
	}

	.vd-shop-sheet.is-open {
		transform: translateY(0);
	}

	.vd-shop-sheet--sort {
		max-height: 60vh;
		max-height: 60dvh;
	}

	.vd-shop-sheet__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 1.4rem var(--at-gutter, 2rem);
		border-bottom: 1px solid color-mix(in srgb, var(--secondary) 60%, transparent);
	}

	.vd-shop-sheet__title {
		margin: 0;
		font-family: georgia, serif; /* as the sidebar's own "Filters" heading. */
		font-size: var(--at-heading--s, 2.2rem);
		line-height: 1.2;
	}

	.vd-shop-sheet__close {
		border: 0;
		background: none;
		color: var(--light);
		font-size: 3.2rem;
		line-height: 1;
		padding: 0 0.4rem;
		cursor: pointer;
	}

	.vd-shop-sheet__close:focus:not(:focus-visible) {
		outline: none;
	}

	.vd-shop-sheet__body {
		flex: 1 1 auto;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		padding: 1.6rem var(--at-gutter, 2rem) 2.4rem;
	}

	.vd-shop-sheet__foot {
		padding: 1.2rem var(--at-gutter, 2rem) calc(1.2rem + env(safe-area-inset-bottom));
		border-top: 1px solid color-mix(in srgb, var(--secondary) 60%, transparent);
	}

	.vd-shop-sheet__done {
		display: block;
		width: 100%;
		border: 0;
		padding: 1.5rem 1rem;
		font: inherit;
		font-size: var(--at-text--s);
		letter-spacing: 0.08em;
		text-transform: uppercase;
		line-height: 1;
		background: var(--secondary);
		color: var(--primary-d-3, #1d2b22);
		cursor: pointer;
	}

	/* The sidebar inside the sheet: the sheet has its own title. */
	.vd-shop-sheet .vd-shop-filters {
		width: 100%;
	}

	.vd-shop-sheet .vd-shop-filters__title {
		display: none !important;
	}

	.vd-shop-sheet .vd-shop-filters__head {
		justify-content: flex-end !important; /* beats Bricks' own #brxe-… rule */
	}

	/* Sort options. */
	.vd-shop-sort {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.vd-shop-sort li + li {
		border-top: 1px solid color-mix(in srgb, var(--secondary) 40%, transparent);
	}

	/* The theme centres every button with higher specificity, hence !important. */
	.vd-shop-sheet .vd-shop-sort__option {
		display: flex !important;
		justify-content: space-between !important;
		align-items: center;
		width: 100%;
		border: 0;
		background: none;
		text-align: left;
		padding: 1.5rem 0;
		font: inherit;
		font-size: var(--at-text--m, 1.8rem);
		color: var(--light);
		cursor: pointer;
	}

	.vd-shop-sort__option[aria-pressed="true"] {
		color: var(--secondary);
	}

	.vd-shop-sort__option[aria-pressed="true"]::after {
		content: "\2713";
	}
}