/*
 * AURA Woo Shop — responsive composition.
 *
 * Desktop ≥ 1024 px, tablet 768–1023 px, mobile < 768 px (see
 * Presentation\Design\ResponsiveSettings). Mobile is not a squeezed desktop:
 * the toolbar becomes rows, the filters become a sheet or a side drawer, and
 * the grid follows the mobile column token.
 */

/* ------------------------------------------------------- Desktop layout */

@media (min-width: 1024px) {
	.aura-shop-archive--sidebar.aura-shop-archive--has-filters > .aura-shop-archive__layout {
		grid-template-columns: var(--aura-shop-sidebar-width) minmax(0, 1fr);
	}

	.aura-shop-archive--sidebar-end.aura-shop-archive--has-filters > .aura-shop-archive__layout {
		grid-template-columns: minmax(0, 1fr) var(--aura-shop-sidebar-width);
	}

	.aura-shop-archive--sidebar-end .aura-shop-filters--sidebar {
		order: 2;
	}
}

/* --------------------------------------------------------- Tablet down */

@media (max-width: 1023px) {
	.aura-shop-archive__layout {
		gap: var(--aura-shop-space-lg);
	}

	.aura-shop-hero {
		min-block-size: min(var(--aura-shop-hero-height, 280px), 320px);
		padding: var(--aura-shop-space-xl) var(--aura-shop-space-md);
	}

	/* Filters are a panel the visitor opens; the toggle is the only control. */
	.aura-shop-filters {
		display: none;
	}

	.aura-shop-filters.is-open,
	.aura-shop-filters:target {
		position: fixed;
		inset: 0;
		z-index: 99990;
		display: block;
		background: var(--aura-shop-overlay);
	}

	.aura-shop-filters.is-open > .aura-shop-filters__panel,
	.aura-shop-filters:target > .aura-shop-filters__panel {
		position: absolute;
		padding: var(--aura-shop-space-md) var(--aura-shop-space-lg) 0;
		overflow-y: auto;
		background: var(--aura-shop-surface);
		color: var(--aura-shop-text);
		box-shadow: var(--aura-shop-drawer-shadow);
	}

	/* Bottom sheet (default). */
	.aura-shop-filters--mobile-sheet.is-open > .aura-shop-filters__panel,
	.aura-shop-filters--mobile-sheet:target > .aura-shop-filters__panel {
		inset-inline: 0;
		inset-block-end: 0;
		max-block-size: 88vh;
		padding-block-end: env(safe-area-inset-bottom, 0px);
		border-start-start-radius: var(--aura-shop-panel-radius);
		border-start-end-radius: var(--aura-shop-panel-radius);
	}

	/* Side drawer. */
	.aura-shop-filters--mobile-drawer.is-open > .aura-shop-filters__panel,
	.aura-shop-filters--mobile-drawer:target > .aura-shop-filters__panel {
		inset-block: 0;
		inline-size: min(22rem, 92vw);
		max-block-size: none;
	}

	.aura-shop-filters--mobile-drawer[data-mobile-side="start"].is-open > .aura-shop-filters__panel,
	.aura-shop-filters--mobile-drawer[data-mobile-side="start"]:target > .aura-shop-filters__panel {
		inset-inline: 0 auto;
	}

	.aura-shop-filters--mobile-drawer[data-mobile-side="end"].is-open > .aura-shop-filters__panel,
	.aura-shop-filters--mobile-drawer[data-mobile-side="end"]:target > .aura-shop-filters__panel {
		inset-inline: auto 0;
	}

	.aura-shop-filters.is-open .aura-shop-filters__close,
	.aura-shop-filters:target .aura-shop-filters__close {
		display: inline-grid;
	}

	.aura-shop-filters--mobile-sheet.is-open .aura-shop-filters__grab,
	.aura-shop-filters--mobile-sheet:target .aura-shop-filters__grab {
		display: block;
	}

	.aura-shop-filters.is-open > .aura-shop-filters__panel > .aura-shop-filters__form,
	.aura-shop-filters:target > .aura-shop-filters__panel > .aura-shop-filters__form {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		min-block-size: 0;
	}

	.aura-shop-filters.is-open .aura-shop-filters__groups,
	.aura-shop-filters:target .aura-shop-filters__groups {
		flex: 1 1 auto;
		min-block-size: 0;
		overflow-y: auto;
	}

	.aura-shop-filters.is-open .aura-shop-filters__actions,
	.aura-shop-filters:target .aura-shop-filters__actions {
		position: sticky;
		inset-block-end: 0;
		display: flex;
		flex: 0 0 auto;
		background: var(--aura-shop-surface);
	}

	.aura-shop-filters.is-open .aura-shop-filter__options,
	.aura-shop-filters:target .aura-shop-filter__options {
		max-block-size: none;
	}
}

/* --------------------------------------------------------- Mobile only */

@media (max-width: 767px) {
	.aura-shop-archive {
		gap: var(--aura-shop-space-md);
	}

	/*
	 * Two half-width rows instead of one crowded line: filtering and ordering
	 * first, then how many results and how they are laid out. The active
	 * filters render underneath as their own part, so they only take space
	 * when the visitor actually filtered something.
	 */
	.aura-shop-toolbar.aura-shop-toolbar--compact {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--aura-shop-space-sm);
		align-items: center;
	}

	/* The controls join the toolbar grid instead of forming a row of their own. */
	.aura-shop-toolbar.aura-shop-toolbar--compact .aura-shop-toolbar__controls {
		display: contents;
	}

	.aura-shop-toolbar.aura-shop-toolbar--compact .aura-shop-filter-toggle {
		grid-area: 1 / 1;
		justify-content: center;
	}

	.aura-shop-toolbar.aura-shop-toolbar--compact .aura-shop-ordering,
	.aura-shop-toolbar.aura-shop-toolbar--compact .woocommerce-ordering {
		grid-area: 1 / 2;
		margin: 0;
		inline-size: 100%;
	}

	.aura-shop-toolbar.aura-shop-toolbar--compact .aura-shop-ordering select,
	.aura-shop-toolbar.aura-shop-toolbar--compact .woocommerce-ordering select {
		inline-size: 100%;
	}

	.aura-shop-toolbar.aura-shop-toolbar--compact .aura-shop-toolbar__count,
	.aura-shop-toolbar.aura-shop-toolbar--compact .woocommerce-result-count {
		grid-area: 2 / 1;
		margin: 0;
	}

	.aura-shop-toolbar.aura-shop-toolbar--compact .aura-shop-toolbar__views {
		grid-area: 2 / 2;
		justify-self: end;
	}

	.aura-shop-toolbar.aura-shop-toolbar--compact .aura-shop-per-page {
		grid-column: 1 / -1;
	}

	.aura-shop-hero {
		min-block-size: min(var(--aura-shop-hero-height, 280px), 260px);
		padding: var(--aura-shop-space-lg) var(--aura-shop-space-md);
		border-radius: var(--aura-shop-button-radius);
	}

	.aura-shop-hero__benefits {
		gap: var(--aura-shop-space-sm);
	}

	.aura-shop-benefit {
		max-inline-size: none;
		flex: 1 1 100%;
	}

	.aura-shop-card__body {
		padding: var(--aura-shop-space-sm) var(--aura-shop-space-sm) 0;
	}

	.aura-shop-card__actions {
		padding: var(--aura-shop-space-sm);
	}

	.aura-shop-card__title {
		font-size: min(var(--aura-shop-card-title-size), 0.9375rem);
	}

	.aura-shop-card__price {
		font-size: min(var(--aura-shop-card-price-size), 0.9375rem);
	}

	.aura-shop--mobile-cta-compact .aura-shop-card__actions .button {
		min-block-size: 2.5rem;
		padding-inline: 0.625rem;
		font-size: 0.8125rem;
	}

	.aura-shop-results--list .aura-shop-card__media {
		flex-basis: 40%;
	}

	.aura-shop-hero--hidden-mobile {
		display: none;
	}
}