/**
 * Filter drawer (auron-theme/filter-drawer).
 *
 * >= 1024 px: no box of its own. The wrappers are `display: contents` and the
 * drawer chrome is not displayed, so the sidebar inside lays out exactly as it
 * does without the drawer.
 *
 * < 1024 px: a sheet from the inline start edge over a dimmed page. It opens
 * on `.is-open` (view module) or on `:target` (no JavaScript — the
 * "Filtrovať" link points at #auron-filtre).
 */

.auron-filter-drawer,
.auron-filter-drawer__sheet,
.auron-filter-drawer__body {
	display: contents;
}

.auron-filter-drawer__backdrop,
.auron-filter-drawer__head,
.auron-filter-drawer__foot {
	display: none;
}

@media (max-width: 1023px) {
	.auron-filter-drawer {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 100000;
		visibility: hidden;
		pointer-events: none;
		/* Stay visible until the sheet has slid out. */
		transition: visibility 0s linear 0.3s;
	}

	.auron-filter-drawer.is-open,
	.auron-filter-drawer:target {
		visibility: visible;
		pointer-events: auto;
		transition-delay: 0s;
	}

	.auron-filter-drawer__backdrop {
		display: block;
		position: absolute;
		inset: 0;
		background: rgb(12 12 12 / 0.55);
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.auron-filter-drawer.is-open .auron-filter-drawer__backdrop,
	.auron-filter-drawer:target .auron-filter-drawer__backdrop {
		opacity: 1;
	}

	.auron-filter-drawer__sheet {
		display: flex;
		flex-direction: column;
		position: absolute;
		inset-block: 0;
		inset-inline-start: 0;
		width: min(100%, 26rem);
		color: var(--auron-card-fg);
		background: var(--auron-card-bg);
		box-shadow: 0 0 40px rgb(12 12 12 / 0.25);
		transform: translateX(-100%);
		transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	.auron-filter-drawer.is-open .auron-filter-drawer__sheet,
	.auron-filter-drawer:target .auron-filter-drawer__sheet {
		transform: none;
	}

	.auron-filter-drawer__head {
		display: flex;
		flex: none;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		min-height: 3.75rem;
		padding-inline: 1.25rem 0.625rem;
		border-bottom: 1px solid var(--wp--preset--color--border);
	}

	.auron-filter-drawer__title {
		margin: 0;
		font-size: 1.125rem;
		line-height: 1.2;
		color: var(--auron-card-fg);
	}

	.auron-filter-drawer__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.75rem;
		height: 2.75rem;
		color: var(--auron-card-fg);
	}

	.auron-filter-drawer__close:focus-visible,
	.auron-filter-drawer__clear:focus-visible {
		outline: 1px solid currentColor;
		outline-offset: -2px;
	}

	.auron-filter-drawer__body {
		display: block;
		flex: 1 1 auto;
		min-height: 0;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	/* The sidebar keeps its own padding; its card border would only outline
	   the sheet's edges, so the sides are pushed out of the clipped body and
	   the top one sits under the head's rule. */
	.auron-filter-drawer__body > .auron-shop-sidebar {
		margin: -1px -1px 0;
	}

	/* The sheet's title already says what the column is. */
	.auron-filter-drawer__body > .auron-shop-sidebar > .wp-block-heading:first-child {
		display: none;
	}

	.auron-filter-drawer__body > .auron-shop-sidebar > .wp-block-heading:first-child + * {
		margin-block-start: 0;
	}

	.auron-filter-drawer__foot {
		display: flex;
		flex: none;
		align-items: center;
		gap: 0.75rem;
		padding: 0.75rem 1.25rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
		background: var(--auron-card-bg);
		border-top: 1px solid var(--wp--preset--color--border);
	}

	.auron-filter-drawer__clear {
		flex: none;
		display: inline-flex;
		align-items: center;
		min-height: 2.75rem;
		padding-inline: 0.25rem;
		font-size: 0.875rem;
		color: var(--auron-card-fg);
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}

	.auron-filter-drawer__apply {
		display: inline-flex;
		flex: 1 1 auto;
		align-items: center;
		justify-content: center;
		min-height: 3rem;
		text-align: center;
		text-decoration: none;
	}
}

/* The page behind an open sheet does not scroll. */
@media (max-width: 1023px) {
	html.auron-filters-open {
		overflow: hidden;
	}
}

/* Reopened after a filter reload (view.js): no slide-in, no fade. */
.auron-filter-drawer.is-restoring,
.auron-filter-drawer.is-restoring .auron-filter-drawer__backdrop,
.auron-filter-drawer.is-restoring .auron-filter-drawer__sheet {
	transition: none;
}

@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
	.auron-filter-drawer,
	.auron-filter-drawer__backdrop,
	.auron-filter-drawer__sheet {
		transition: none;
	}
}