/*
 * Shop loop (THM5a): archive header, FilterBar, toolbar, product grid, loop add-to-cart, pagination, empty state.
 * Only --occ-* tokens. WooCommerce's own CSS sits in the `reset` layer (inc/assets.php), so no !important needed;
 * the float/width rules it still applies are reset here explicitly.
 * Breakpoints: 48rem = filter popovers + 3 columns, 72rem = 4 columns.
 */

@layer occ.components {
	/* Wrapper + header ----------------------------------------------------- */
	.occ-shop {
		padding-block: var(--occ-space-8) var(--occ-space-16);
	}

	.occ-breadcrumb {
		display: flex;
		flex-wrap: wrap;
		gap: var(--occ-space-2);
		margin: 0 0 var(--occ-space-6);
		color: var(--occ-fg-muted);
		font-size: var(--occ-text-sm);
	}

	.occ-breadcrumb a {
		/* ponytail: 24px target (WCAG 2.5.8) without inflating the trail to 44px; it is secondary navigation. */
		display: inline-block;
		padding-block: var(--occ-space-1);
		color: inherit;
		text-underline-offset: 0.2em;
	}

	.occ-breadcrumb a:hover {
		color: var(--occ-fg);
	}

	.occ-shop-header {
		display: grid;
		gap: var(--occ-space-3);
		max-width: 48rem;
		margin-bottom: var(--occ-space-8);
	}

	.occ-shop-header > * {
		margin: 0;
	}

	.occ-shop-header .occ-eyebrow {
		color: var(--occ-accent-ink);
	}

	.occ-shop-header__intro:empty {
		display: none;
	}

	.occ-shop-header__intro > :first-child {
		margin-top: 0;
	}

	.occ-shop-header__intro > :last-child {
		margin-bottom: 0;
	}

	/* FilterBar ------------------------------------------------------------ */
	.occ-filter-bar {
		display: grid;
		gap: var(--occ-space-4);
		padding-block: var(--occ-space-4);
		margin-bottom: var(--occ-space-6);
		border-block: var(--occ-border-width) solid var(--occ-border);
	}

	.occ-filter-bar__form {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: var(--occ-space-2);
		margin: 0;
	}

	.occ-filter-bar__label {
		display: none;
	}

	.occ-filter {
		position: relative;
	}

	.occ-filter__chip {
		display: inline-flex;
		align-items: center;
		gap: var(--occ-space-2);
		min-height: var(--occ-touch-min);
		padding-inline: var(--occ-space-4) var(--occ-space-3);
		border: var(--occ-border-width) solid var(--occ-fg-muted);
		border-radius: var(--occ-radius-md);
		color: var(--occ-fg);
		background: var(--occ-surface);
		font-size: var(--occ-text-sm);
		font-weight: var(--occ-fw-bold);
		list-style: none;
		cursor: pointer;
		user-select: none;
		transition: border-color var(--occ-duration-base) var(--occ-ease-standard);
	}

	.occ-filter__chip::-webkit-details-marker {
		display: none;
	}

	.occ-filter__chip:hover {
		border-color: var(--occ-fg);
	}

	.occ-filter__chip:focus-visible {
		outline: 2px solid var(--occ-focus-color);
		outline-offset: var(--occ-focus-offset);
	}

	.occ-filter__chip.is-active {
		border-color: var(--occ-fg);
		background: var(--occ-bg-subtle);
	}

	.occ-filter__count {
		display: inline-grid;
		place-items: center;
		min-width: var(--occ-space-6);
		height: var(--occ-space-6);
		padding-inline: var(--occ-space-1);
		border-radius: var(--occ-radius-round);
		color: var(--occ-fg-inverse);
		background: var(--occ-surface-inverse);
		font-size: var(--occ-text-xs);
	}

	.occ-filter__chevron {
		width: 1.25em;
		height: 1.25em;
		transition: transform var(--occ-duration-base) var(--occ-ease-standard);
	}

	.occ-filter[open] .occ-filter__chevron {
		transform: rotate(180deg);
	}

	/* Mobile: an open chip takes the full row and its panel opens inline below it (no clipped popover). */
	.occ-filter[open] {
		flex-basis: 100%;
	}

	.occ-filter__panel {
		display: grid;
		gap: var(--occ-space-4);
		min-width: 0;
		margin: var(--occ-space-2) 0 0;
		padding: var(--occ-space-4);
		border: var(--occ-border-width) solid var(--occ-border);
		border-radius: var(--occ-radius-lg);
		background: var(--occ-surface);
	}

	.occ-filter__options {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
		gap: 0 var(--occ-space-4);
		max-block-size: 18rem;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.occ-filter__option {
		display: flex;
		align-items: center;
		gap: var(--occ-space-3);
		min-height: var(--occ-touch-min);
		font-size: var(--occ-text-md);
		cursor: pointer;
	}

	.occ-filter__option input {
		flex: none;
		width: var(--occ-space-6);
		height: var(--occ-space-6);
		margin: 0;
		accent-color: var(--occ-accent-ink);
		cursor: pointer;
	}

	.occ-filter__range {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--occ-space-3);
	}

	.occ-filter__apply {
		justify-self: start;
	}

	/* Active chips + "Wis alles" */
	.occ-filter-bar__active {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--occ-space-2) var(--occ-space-3);
	}

	.occ-filter-bar__active-label {
		margin: 0;
		color: var(--occ-fg-muted);
		font-size: var(--occ-text-sm);
	}

	.occ-filter-bar__chips {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--occ-space-2);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.occ-filter-chip {
		display: inline-flex;
		align-items: center;
		gap: var(--occ-space-2);
		min-height: var(--occ-touch-min);
		padding-inline: var(--occ-space-3) var(--occ-space-2);
		border-radius: var(--occ-radius-md);
		color: var(--occ-fg-inverse);
		background: var(--occ-surface-inverse);
		font-size: var(--occ-text-sm);
		text-decoration: none;
	}

	.occ-filter-chip .occ-icon {
		width: 1.25em;
		height: 1.25em;
	}

	.occ-filter-chip:hover span {
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}

	.occ-filter-bar__clear {
		display: inline-flex;
		align-items: center;
		min-height: var(--occ-touch-min);
		padding-inline: var(--occ-space-2);
		color: var(--occ-fg);
		font-size: var(--occ-text-sm);
		font-weight: var(--occ-fw-bold);
		text-underline-offset: 0.2em;
	}

	.occ-filter-chip:focus-visible,
	.occ-filter-bar__clear:focus-visible {
		outline: 2px solid var(--occ-focus-color);
		outline-offset: var(--occ-focus-offset);
	}

	@media (min-width: 48rem) {
		.occ-filter-bar__label {
			display: inline-flex;
			align-items: center;
			gap: var(--occ-space-2);
			min-height: var(--occ-touch-min);
			margin: 0 var(--occ-space-2) 0 0;
			color: var(--occ-fg-muted);
		}

		.occ-filter-bar__label .occ-icon {
			width: 1.25em;
			height: 1.25em;
		}

		/* Desktop: the panel is a popover under its chip; the chip row keeps its layout. */
		.occ-filter[open] {
			flex-basis: auto;
		}

		.occ-filter__panel {
			position: absolute;
			top: 100%;
			left: 0;
			z-index: var(--occ-z-overlay);
			width: max-content;
			min-width: 16rem;
			max-width: min(32rem, calc(100vw - 2 * var(--occ-page-gutter)));
			box-shadow: var(--occ-shadow-md);
		}
	}

	/* Toolbar: result count + sort ------------------------------------------ */
	.occ-shop-toolbar {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--occ-space-3) var(--occ-space-6);
		margin-bottom: var(--occ-space-6);
	}

	.occ-shop-toolbar .woocommerce-notices-wrapper {
		flex-basis: 100%;
	}

	.occ-shop-toolbar .woocommerce-notices-wrapper:empty {
		display: none;
	}

	.occ-shop-toolbar .woocommerce-result-count {
		float: none;
		margin: 0;
		color: var(--occ-fg-muted);
		font-size: var(--occ-text-sm);
	}

	.occ-shop-sort {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--occ-space-3);
		float: none;
		margin: 0;
	}

	.occ-shop-sort__label {
		font-size: var(--occ-text-sm);
		font-weight: var(--occ-fw-bold);
	}

	.occ-shop-sort .occ-field__control {
		width: auto;
		min-width: 12rem;
		font-size: var(--occ-text-sm);
	}

	/* Product grid ----------------------------------------------------------- */
	/* Mobile: two columns (collectors browse many cards at once); the card image is contained, never cropped. */
	.occ-shop-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--occ-space-6) var(--occ-space-3);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.occ-shop-grid__item {
		display: flex;
		min-width: 0;
	}

	.occ-shop-grid__item > .occ-product-card {
		flex: 1;
	}

	@media (max-width: 47.9375rem) {
		.occ-shop-grid .occ-product-card__media {
			padding: var(--occ-space-2);
		}

		.occ-shop-grid .occ-product-card__body {
			padding: var(--occ-space-3);
		}

		.occ-shop-grid .occ-product-card__title {
			font-size: var(--occ-text-lg);
		}

		.occ-shop-grid .occ-product-card__price {
			font-size: var(--occ-text-md);
		}
	}

	@media (min-width: 48rem) {
		.occ-shop-grid {
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: var(--occ-grid-gap);
		}
	}

	@media (min-width: 72rem) {
		.occ-shop-grid {
			grid-template-columns: repeat(4, minmax(0, 1fr));
		}
	}

	/* Loop add-to-cart (WC toggles .loading / .added and appends a.added_to_cart) */
	.occ-product-card__action {
		display: grid;
		gap: var(--occ-space-2);
		padding-top: var(--occ-space-2);
	}

	.occ-product-card__cart {
		width: 100%;
	}

	.occ-product-card__cart.loading {
		pointer-events: none;
		opacity: 0.7;
	}

	.occ-product-card__cart.loading::after {
		content: "";
		display: inline-block;
		flex: none;
		width: 1em;
		height: 1em;
		border: var(--occ-border-width-strong) solid currentColor;
		border-right-color: transparent;
		border-radius: var(--occ-radius-round);
		animation: occ-spin var(--occ-duration-slow) linear infinite;
	}

	.occ-product-card__cart.added::after {
		content: "";
		width: 0.4em;
		height: 0.75em;
		margin-left: var(--occ-space-1);
		border: solid currentColor;
		border-width: 0 var(--occ-border-width-strong) var(--occ-border-width-strong) 0;
		transform: rotate(45deg) translateY(-0.1em);
	}

	.occ-product-card__action .added_to_cart {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: var(--occ-touch-min);
		padding: 0;
		color: var(--occ-fg);
		font-size: var(--occ-text-sm);
		font-weight: var(--occ-fw-bold);
		text-underline-offset: 0.2em;
	}

	/* Pagination ------------------------------------------------------------- */
	.woocommerce-pagination {
		margin-top: var(--occ-space-12);
		text-align: start;
	}

	.woocommerce-pagination ul.page-numbers {
		display: flex;
		flex-wrap: wrap;
		gap: var(--occ-space-2);
		margin: 0;
		padding: 0;
		border: 0;
		list-style: none;
		white-space: normal;
	}

	.woocommerce-pagination ul.page-numbers li {
		float: none;
		border: 0;
		overflow: visible;
	}

	.woocommerce-pagination .page-numbers a,
	.woocommerce-pagination .page-numbers span.page-numbers {
		display: inline-grid;
		place-items: center;
		min-width: var(--occ-touch-min);
		min-height: var(--occ-touch-min);
		padding: 0 var(--occ-space-2);
		border: var(--occ-border-width) solid var(--occ-border);
		border-radius: var(--occ-radius-md);
		color: var(--occ-fg);
		background: var(--occ-surface);
		font-size: var(--occ-text-sm);
		line-height: 1;
		text-decoration: none;
	}

	.woocommerce-pagination .page-numbers a:hover {
		border-color: var(--occ-fg);
	}

	.woocommerce-pagination .page-numbers a:focus-visible {
		outline: 2px solid var(--occ-focus-color);
		outline-offset: var(--occ-focus-offset);
	}

	.woocommerce-pagination .page-numbers span.current {
		border-color: var(--occ-surface-inverse);
		color: var(--occ-fg-inverse);
		background: var(--occ-surface-inverse);
	}

	.woocommerce-pagination .page-numbers span.dots {
		border-color: transparent;
		background: none;
	}

	/* Empty state: 7/5 — what happened + widen, next to the Card Requester way out. -------------- */
	.occ-shop-empty {
		align-items: start;
		padding-block: var(--occ-space-8) var(--occ-space-4);
	}

	.occ-shop-empty > * {
		display: grid;
		gap: var(--occ-space-3);
		align-content: start;
	}

	.occ-shop-empty p {
		margin: 0;
	}

	.occ-shop-empty .occ-eyebrow {
		color: var(--occ-accent-ink);
	}

	.occ-shop-empty__title {
		margin: 0;
		font-family: var(--occ-font-display);
		font-size: var(--occ-text-2xl);
		font-weight: var(--occ-fw-regular);
		line-height: var(--occ-leading-heading);
	}

	.occ-shop-empty__main > :last-child {
		margin-top: var(--occ-space-3);
	}

	.occ-shop-empty__requester {
		padding: var(--occ-space-6);
		border: var(--occ-border-width) solid var(--occ-border-premium);
		border-radius: var(--occ-radius-lg);
		background: var(--occ-surface);
	}

	.occ-shop-empty__requester > :last-child {
		margin-top: var(--occ-space-3);
	}

	@media (min-width: 52.0625rem) {
		.occ-shop-empty__title {
			font-size: var(--occ-text-3xl);
		}

		.occ-shop-empty__requester {
			padding: var(--occ-space-8);
		}
	}
}