/* Atolyeman shop/category product filters (Phase D4.2). Loads only on the shop
   page and product taxonomy archives (see inc/shop-filters.php). Desktop: a
   sticky left sidebar column beside the product grid. Mobile (<=1024px): the
   sidebar becomes an off-canvas drawer behind a "Filtrele" toggle. Every color,
   space, radius and type value comes from tokens.css so the panel morphs with
   the active audience segment like the rest of the storefront. */

:root {
	--at-filters-w: 268px;
}

/* ---- Desktop layout -------------------------------------------------------
   Blocksy renders the archive as `#main .ct-container > section` holding the
   (mostly empty) products-header, the notices wrapper, the `.woo-listing-top`
   toolbar, the `ul.products` grid and pagination. We turn that <section> into
   a 2-column grid: the injected `.at-filters` aside sits in column 1, every
   other child is forced into column 2. The aside is the first DOM child, so it
   lands top-left; the empty header/notices rows collapse to 0 height, keeping
   the toolbar aligned with the top of the sidebar. */
#main .ct-container > section {
	display: grid;
	grid-template-columns: var(--at-filters-w) minmax(0, 1fr);
	column-gap: var(--at-space-8);
	align-items: start;
}
#main .ct-container > section > *:not(.at-filters):not(.at-filters-overlay) {
	grid-column: 2;
	min-width: 0;
}
#main .ct-container > section > .at-filters {
	grid-column: 1;
	/* Span (more than) every implicit row: otherwise the aside's height defines
	   row 1 and pushes the toolbar/product grid (auto-placed into later rows)
	   below it. `1 / -1` can't be used — negative lines ignore implicit tracks;
	   surplus spanned rows collapse to zero height. */
	grid-row: 1 / span 20;
	position: sticky;
	top: var(--at-space-6);
	align-self: start;
}

/* ---- Panel shell ----------------------------------------------------------- */
.at-filters {
	display: flex;
	flex-direction: column;
	gap: var(--at-space-6);
}
.at-filters__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.at-filters__title {
	font-family: var(--at-font-display);
	font-size: var(--at-fs-400);
	font-weight: 500;
	color: var(--at-text);
}
/* The in-panel close (X) only exists for the mobile drawer. */
.at-filters__close {
	display: none;
	appearance: none;
	border: 0;
	background: none;
	padding: var(--at-space-1);
	font-size: 1.5rem;
	line-height: 1;
	color: var(--at-text-muted);
	cursor: pointer;
	transition: color .15s ease;
}
.at-filters__close:hover {
	color: var(--at-text);
}
.at-filters__body {
	display: flex;
	flex-direction: column;
	gap: var(--at-space-8);
}

/* ---- Filter groups --------------------------------------------------------- */
.at-filter-group {
	display: flex;
	flex-direction: column;
	gap: var(--at-space-3);
	padding-bottom: var(--at-space-6);
	border-bottom: 1px solid var(--at-border);
}
.at-filter-group:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}
.at-filter-group__title {
	margin: 0;
	font-size: var(--at-fs-100);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--at-text-muted);
}

/* Muted count text shared by category rows and attribute chips. */
.at-filter-count {
	color: var(--at-text-muted);
	font-size: var(--at-fs-100);
	font-variant-numeric: tabular-nums;
}

/* ---- Categories ------------------------------------------------------------ */
.at-filter-cats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.at-filter-cats__item a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--at-space-3);
	padding: var(--at-space-2) 0;
	color: var(--at-text);
	text-decoration: none;
	font-size: var(--at-fs-200);
	transition: color .15s ease;
}
.at-filter-cats__item a:hover .at-filter-cats__name,
.at-filter-cats__item a:focus-visible .at-filter-cats__name {
	color: var(--at-accent);
}
.at-filter-cats__item.is-active a {
	color: var(--at-accent);
	font-weight: 600;
}
.at-filter-cats__item.is-active .at-filter-count {
	color: var(--at-accent);
}

/* ---- Price ----------------------------------------------------------------- */
.at-filter-price {
	display: flex;
	flex-direction: column;
	gap: var(--at-space-3);
}
.at-filter-price__row {
	display: flex;
	align-items: center;
	gap: var(--at-space-2);
}
.at-filter-price__field {
	display: flex;
	align-items: center;
	gap: var(--at-space-1);
	flex: 1 1 0;
	min-width: 0;
	padding: 0 var(--at-space-2);
	border: 1px solid var(--at-border);
	border-radius: var(--at-radius-sm);
	background: var(--at-surface);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.at-filter-price__field:focus-within {
	border-color: var(--at-accent);
	box-shadow: 0 0 0 1px var(--at-accent);
}
.at-filter-price__cur {
	color: var(--at-text-muted);
	font-size: var(--at-fs-200);
}
.at-filter-price__field input {
	width: 100%;
	min-width: 0;
	border: 0;
	outline: none;
	background: none;
	padding: var(--at-space-2) 0;
	color: var(--at-text);
	font-size: var(--at-fs-200);
	font-family: var(--at-font-sans);
	-moz-appearance: textfield;
}
/* !important: Blocksy borders every form control at higher specificity, which
   drew a second frame inside our own bordered field wrapper. */
.at-filter-price__field input[type="number"] {
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
.at-filter-price__field input::-webkit-outer-spin-button,
.at-filter-price__field input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.at-filter-price__sep {
	color: var(--at-text-muted);
}
.at-filter-price__submit {
	align-self: flex-start;
	padding-block: var(--at-space-2);
	padding-inline: var(--at-space-4);
	font-size: var(--at-fs-100);
}

/* ---- Attribute chips (kahve.com energy, Oakywood restraint) ---------------- */
.at-filter-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--at-space-2);
}
.at-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--at-space-2);
	padding: var(--at-space-2) var(--at-space-3);
	border: 1px solid var(--at-border);
	border-radius: 999px;
	background: var(--at-surface);
	color: var(--at-text);
	font-size: var(--at-fs-200);
	line-height: 1.2;
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.at-chip:hover,
.at-chip:focus-visible {
	border-color: var(--at-accent);
	color: var(--at-accent);
}
.at-chip.is-active {
	border-color: var(--at-accent);
	color: var(--at-accent);
	font-weight: 600;
}
.at-chip.is-active .at-filter-count {
	color: var(--at-accent);
}

/* ---- Temizle --------------------------------------------------------------- */
.at-filters__clear {
	align-self: flex-start;
	font-size: var(--at-fs-200);
	color: var(--at-text-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color .15s ease;
}
.at-filters__clear:hover,
.at-filters__clear:focus-visible {
	color: var(--at-accent);
}

/* ---- Mobile toggle button (lives inside .woo-listing-top) ------------------ */
.at-filters-toggle {
	display: none; /* desktop: hidden; the sidebar is always visible */
	align-items: center;
	gap: var(--at-space-2);
	appearance: none;
	padding: var(--at-space-2) var(--at-space-4);
	border: 1px solid var(--at-border);
	border-radius: var(--at-radius-sm);
	background: var(--at-surface);
	color: var(--at-text);
	font-size: var(--at-fs-200);
	font-family: var(--at-font-sans);
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease;
}
.at-filters-toggle:hover {
	border-color: var(--at-accent);
	color: var(--at-accent);
}
.at-filters-toggle__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--at-accent);
}

/* Overlay is only used for the mobile drawer; the [hidden] attribute keeps it
   out of the way until JS opens the drawer. */
.at-filters-overlay {
	position: fixed;
	inset: 0;
	z-index: 120;
	background: rgba(28, 26, 23, .45);
}

/* ---- Mobile: sidebar -> slide-in drawer ------------------------------------ */
@media (max-width: 1024px) {
	#main .ct-container > section {
		grid-template-columns: minmax(0, 1fr);
	}
	#main .ct-container > section > *:not(.at-filters):not(.at-filters-overlay) {
		grid-column: 1;
	}

	.at-filters-toggle {
		display: inline-flex;
	}

	#main .ct-container > section > .at-filters {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 130;
		width: min(86vw, 340px);
		margin: 0;
		padding: var(--at-space-6);
		overflow-y: auto;
		background: var(--at-bg);
		border-right: 1px solid var(--at-border);
		box-shadow: var(--at-shadow);
		transform: translateX(-100%);
		transition: transform .25s ease;
	}
	body.at-filters-open #main .ct-container > section > .at-filters {
		transform: translateX(0);
	}

	.at-filters__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		margin-right: calc(-1 * var(--at-space-2));
	}
	/* Filter rows are the drawer's primary controls — give them a real target. */
	.at-filter-cats__item a { padding: var(--at-space-3) 0; }

	/* Lock background scroll while the drawer is open. */
	body.at-filters-open {
		overflow: hidden;
	}
}

/* ---- Reduced motion -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	#main .ct-container > section > .at-filters,
	.at-chip,
	.at-filters-toggle,
	.at-filter-cats__item a {
		transition: none;
	}
}