/* Ürün arşivi: alt kategoriler, araç çubuğu, ızgara, sayfalama. */

/*
 * Alt dolgu sayfalamaya bırakıldı: sayfalama kendi üst boşluğunu taşır,
 * altında da hizmet bandının kendi 100'ü var. İkisi üst üste binince liste
 * ile bant arasında 180 px'lik bir boşluk kalıyordu.
 */
.dj-catalog__wrap {
	padding-block: var(--dj-space-40) 0;
}

.dj-catalog__intro {
	max-width: calc(900 * var(--dj-u));
	color: var(--dj-muted);
	margin-block-start: var(--dj-space-60);
}

/* --- Alt kategori kartları --- */

.dj-subcats {
	margin-bottom: calc(42 * var(--dj-u));
}

.dj-subcats__list {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--dj-gutter);
	list-style: none;
}

/*
 * Beşten fazla alt kategori: aynı şerit karusele döner.
 *
 * Kart ölçüsü değişmez — bir ekranda yine `--dj-subcats-per-view` kadar kart
 * durur, fazlası kaydırılır. Izgara sütun şablonu burada geçersizdir; yoksa
 * altıncı kart satıra sıkışıp kartların genişliğini bozuyordu (ölçüldü: beş
 * kart 153.5 px, altıncısı 402.5 px). Kaydırma ve oklar anasayfadaki kategori
 * karuselinin bileşeninden gelir; ikinci bir kaydırma sistemi yoktur.
 *
 * Bir ekranda görünen kart sayısı dar ekranda azalır. Şeritteki
 * `--dj-subcats-per-view` satır içi yazıldığı için kırılma noktaları onu
 * değil, buradaki `--dj-subcats-cols` değerini değiştirir.
 */
.dj-subcats--carousel {
	--dj-subcats-cols: var(--dj-subcats-per-view);
	/* Anasayfadaki daire ölçüsü (XD Rectangle 608). */
	--dj-subcats-arrow: calc(60 * var(--dj-u));
}

/*
 * Oklar — anasayfa kategori karuselinin birebir aynısı
 *
 * XD'de daire 60, merkezi kapsayıcının kenarında: yarısı ilk/son kartın
 * üstünde, yarısı dışarıda. Şeridin sol kenarı ilk kartın, sağ kenarı son
 * görünür kartın kenarıdır; kutuyu yarıçapı kadar dışarı almak merkezi tam
 * o kenara oturtur. Ölçü, çerçeve, zemin, chevron, hover ve pasif durum
 * ortak `.dj-carousel__arrow` ailesinden gelir — ikinci bir tanım yok.
 *
 * Dikey merkez kartın kendi ortasıdır; kaydırma payı (`--dj-carousel-pad-b`)
 * düşülmezse ok kartın merkezinin altına düşer.
 */
.dj-subcats--carousel .dj-carousel__arrow {
	width: var(--dj-subcats-arrow);
	height: var(--dj-subcats-arrow);
	top: calc((100% - var(--dj-carousel-pad-b)) / 2);
}

.dj-subcats--carousel .dj-carousel__arrow--prev {
	inset-inline-start: calc(-1 * var(--dj-subcats-arrow) / 2);
}

.dj-subcats--carousel .dj-carousel__arrow--next {
	inset-inline-end: calc(-1 * var(--dj-subcats-arrow) / 2);
}

.dj-subcats--carousel .dj-subcats__list {
	grid-template-columns: none;
	grid-auto-flow: column;
	grid-auto-columns: calc(
		(100% - var(--dj-gutter) * (var(--dj-subcats-cols) - 1)) / var(--dj-subcats-cols)
	);
	gap: var(--dj-gutter);
}

.dj-subcats__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: var(--dj-space-12);
	height: calc(230 * var(--dj-u));
	padding: var(--dj-space-24);
	background: var(--dj-surface);
	border-radius: var(--dj-radius-md);
	text-align: center;
	transition: background-color var(--dj-transition);
}

.dj-subcats__link:hover {
	background: var(--dj-line);
	color: var(--dj-ink);
}

/*
 * Bulunulan kategori şeritte de okunur. Halka içeriden çizilir, kartın
 * kutusunu büyütmez; kart yine bağlantıdır, `aria-current="page"` taşır.
 */
.dj-subcats__link.is-current {
	background: var(--dj-line);
	box-shadow: inset 0 0 0 1px var(--dj-ink);
}

.dj-subcats__link.is-current .dj-subcats__label {
	font-weight: var(--dj-fw-bold);
}

.dj-subcats__media {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 0;
}

.dj-subcats__media img {
	max-height: calc(120 * var(--dj-u));
	width: auto;
	object-fit: contain;
}

.dj-subcats__label {
	font-size: var(--dj-fs-16);
	font-weight: var(--dj-fw-semibold);
	color: var(--dj-ink);
}

/* --- Araç çubuğu --- */

.dj-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--dj-space-24);
	flex-wrap: wrap;
	margin-bottom: var(--dj-space-50);
}

.dj-toolbar__start,
.dj-toolbar__end {
	display: flex;
	align-items: center;
	gap: var(--dj-space-16);
	flex-wrap: wrap;
}

.dj-toolbar__filter {
	display: inline-flex;
	align-items: center;
	gap: var(--dj-space-12);
	font-size: var(--dj-fs-22);
	font-weight: var(--dj-fw-semibold);
	color: var(--dj-ink);
}

.dj-toolbar__filter svg {
	width: calc(26 * var(--dj-u));
	height: calc(26 * var(--dj-u));
}

.dj-toolbar__filter-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: calc(22 * var(--dj-u));
	height: calc(22 * var(--dj-u));
	padding: 0 6px;
	border-radius: var(--dj-radius-pill);
	background: var(--dj-ink);
	color: var(--dj-white);
	font-size: var(--dj-fs-12);
}

.dj-toolbar__count {
	margin: 0;
	color: var(--dj-gray-400);
	font-size: var(--dj-fs-18);
}

.dj-toolbar__form {
	margin: 0;
}

/* Tasarım: sıralama 287x59, adet 184x59. */
.dj-toolbar .dj-select {
	min-width: calc(287 * var(--dj-u));
	font-size: var(--dj-fs-18);
}

.dj-toolbar__form:last-child .dj-select {
	min-width: calc(184 * var(--dj-u));
}

.dj-viewswitch {
	display: flex;
	gap: calc(15 * var(--dj-u));
}

.dj-viewswitch__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(60 * var(--dj-u));
	height: calc(60 * var(--dj-u));
	border-radius: var(--dj-radius-md);
	color: var(--dj-gray-400);
	transition: background-color var(--dj-transition), color var(--dj-transition);
}

.dj-viewswitch__btn svg {
	width: calc(22 * var(--dj-u));
	height: calc(22 * var(--dj-u));
}

.dj-viewswitch__btn.is-active {
	background: var(--dj-surface);
	color: var(--dj-ink);
}

/* --- Uygulanan filtreler --- */

.dj-active-filters {
	display: flex;
	align-items: center;
	gap: var(--dj-space-12);
	flex-wrap: wrap;
	margin-bottom: var(--dj-space-24);
}

.dj-active-filters__label {
	font-size: var(--dj-fs-14);
	color: var(--dj-muted);
}

.dj-active-filters__list {
	display: flex;
	gap: var(--dj-space-8);
	flex-wrap: wrap;
	list-style: none;
}

.dj-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: calc(8 * var(--dj-u)) calc(14 * var(--dj-u));
	border-radius: var(--dj-radius-pill);
	background: var(--dj-surface);
	font-size: var(--dj-fs-14);
	color: var(--dj-ink);
	transition: background-color var(--dj-transition);
}

.dj-chip:hover {
	background: var(--dj-line);
	color: var(--dj-ink);
}

.dj-chip__label {
	color: var(--dj-muted);
}

.dj-chip svg {
	width: calc(14 * var(--dj-u));
	height: calc(14 * var(--dj-u));
	color: var(--dj-muted);
}

.dj-active-filters__clear {
	font-size: var(--dj-fs-14);
	text-decoration: underline;
	text-underline-offset: 3px;
	color: var(--dj-muted);
}

/* ------------------------------------------------------------------ */
/* Masaüstü arşiv ızgarası — deterministik satır sistemi               */
/*                                                                     */
/* Kök neden: kart esnek bir sütundu ve görsel sahnesi `flex: 1 1 auto` */
/* ile artan/azalan bütün payı yutuyordu. Kartın DIŞ yüksekliği ızgara  */
/* gerdirmesi + `min-height` ile eşitleniyor, ama İÇ dağılım içeriğin   */
/* fonksiyonuydu: altındaki bir satır kısaldığında (fiyatı olmayan      */
/* ürün, tek satırlık ad, eksik kategori) sahne büyüyor, onunla         */
/* birlikte belge satırı, kategori, ad, fiyat ve CTA aşağı kayıyordu.   */
/* Ölçüldü (1440, televizyon): fiyatı düşen tek kartta sahne +43.13,    */
/* docs/kategori/ad/CTA çapalarının tamamı 43.12–43.13 px kaydı.        */
/*                                                                     */
/* Bugün canlıda hizalı görünmesinin tek sebebi katalogdaki 31 ürünün   */
/* tamamının aynı içerik profilini üretmesi (enerji + belge + 2 satır   */
/* ad + 1 satır kategori + indirimli fiyat). Profilden sapan ilk ürün   */
/* satırı bozuyor.                                                      */
/*                                                                     */
/* Çözüm: kart, ızgara satırları ayrılmış bir CSS Grid'e döner. Payı    */
/* artık sahne değil, en alttaki boş `1fr` izi yutar. İşaretleme        */
/* değişmez; `--dj-card-image-*`, rozet bandı ve packshot sistemi       */
/* olduğu gibi kalır.                                                   */
/*                                                                     */
/* Satırların toplamı mevcut `min-height` formülüne birebir eşittir,    */
/* bu yüzden normal kartta görünüm değişmez (artık pay = 0):            */
/*   30 + 79 + 64(4×16) + 44 + 15.18 + 5.52 + 47.72 = 285.42            */
/*   285.42u + (464.58u − AD − KAT − FİY) + AD + KAT + FİY = 750u + AD  */
/* Sahne izinin ölçüsü öğenin kendi ölçüsü değildir: sahne `-22u`       */
/* negatif üst payla durduğu için öğe izden o kadar uzun çizilir —      */
/* onaylı `--dj-card-image-rise` davranışı aynen korunur.               */
/* CTA ayrı bir satır değildir: sahnenin içinde mutlak konumlu olduğu   */
/* için sahne sabitlenince CTA da sabitlenir (onaylı davranış korunur). */
/*                                                                     */
/* Kapsam yalnız masaüstü arşiv ızgarasıdır. 899 ve altı bu dosyanın    */
/* kendi kompakt kart bloğuna aittir ve dokunulmaz.                     */
/* ------------------------------------------------------------------ */

@media (min-width: 900px) {
	[data-dj-grid][data-view="grid"] .dj-card {
		/* Ayrılmış satır ölçüleri — hepsi mevcut kuralların tokenlarından. */
		--dj-ag-head: calc(79 * var(--dj-u));
		/* Favori düğmesi 44u; satırın kendi `min-height`i (40u) bunun altında. */
		--dj-ag-docs: calc(44 * var(--dj-u));
		/* Gövde: üst boşluk + kategori satırı + iç boşluk + ayrılmış ad alanı. */
		--dj-ag-body: calc(
			11.74 * var(--dj-u) + var(--dj-card-category-line) + 3.44 * var(--dj-u) +
			var(--dj-card-title-lines) * var(--dj-card-title-line)
		);
		/* Fiyat: üst boşluk + ayrılmış tek satır (indirimli/indirimsiz aynı). */
		--dj-ag-price: calc(5.52 * var(--dj-u) + var(--dj-lh-normal) * var(--dj-fs-24));
		/*
		 * Sahne, kartın ayrılmış iç yüksekliğinden diğer satırların
		 * düşülmesiyle bulunur. Sabit bir piksel yazılmaz; tipografi
		 * 1440'ın altında tabana oturduğu için sahne o aralıkta kendiliğinden
		 * kısalır — mevcut davranışın aynısı.
		 */
		--dj-ag-media: calc(
			(750 * var(--dj-u) + var(--dj-card-title-line))
			- var(--dj-space-30) - var(--dj-card-padding-b)
			- 4 * var(--dj-space-16)
			- var(--dj-ag-head) - var(--dj-ag-docs) - var(--dj-ag-body) - var(--dj-ag-price)
		);

		display: grid;
		/*
		 * Artan payı son iz yutar: fiyat izi en az ayrılmış ölçüsündedir,
		 * gerisini `1fr` alır. Fiyat mürekkebi izin başına sabitlendiği için
		 * (aşağıdaki `align-self`) fiyat Y'si paydan etkilenmez; boşluk
		 * kartın altında, fiyatın altında kalır.
		 */
		grid-template-rows:
			var(--dj-ag-head)
			var(--dj-ag-media)
			var(--dj-ag-docs)
			var(--dj-ag-body)
			minmax(var(--dj-ag-price), 1fr);
	}

	/*
	 * Satır kutuları ayrıldı; öğeler kendi ölçülerinde kalsın, izi
	 * gerdirerek doldurmasınlar. Aksi hâlde eksik içerikli bir kartta
	 * öğe uzayıp mürekkebi kendi satırının ortasına kaydırıyordu.
	 */
	[data-dj-grid][data-view="grid"] .dj-card > :is(.dj-card__docs, .dj-card__body, .dj-card__price) {
		align-self: start;
	}

	/*
	 * “Ürün Bilgi Formu” dar kartta ikinci satıra kırılıp belge satırını
	 * büyütmesin. Metin kısaltılmaz; sığmadığında üç nokta ile biter.
	 */
	[data-dj-grid][data-view="grid"] .dj-card__doc-link {
		min-width: 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/*
	 * Fiyat çifti (güncel + üstü çizili eski) tek satırda kalır. `.dj-price`
	 * esnek bir kutudur; sarmayı `white-space` değil `flex-wrap` durdurur —
	 * liste görünümünde onaylanan çözümün aynısı (product.css `.dj-grid
	 * [data-view="list"] .dj-card__price`). İkinci satıra düşen fiyat
	 * ayrılmış satırı aşıp kartı uzatıyordu.
	 */
	[data-dj-grid][data-view="grid"] .dj-card__price {
		flex-wrap: nowrap;
		white-space: nowrap;
	}
}

/* --- Duyarlı --- */

@media (max-width: 1279px) {
	.dj-subcats__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.dj-subcats--carousel {
		--dj-subcats-cols: 4;
	}

	.dj-toolbar .dj-select {
		min-width: calc(170 * var(--dj-u));
	}
}

/*
 * Tablet ve mobil (mobil XD yok; masaüstü hiyerarşisinden türetildi).
 *
 * Alt kategoriler: çok satırlı ızgara 768'de 404, 390'da 504 px yer tutup
 * ürünleri ilk ekranın altına itiyordu. Şerit tek satırdır; sığıyorsa kartlar
 * eşit bölünür (768'de beşi birden), sığmıyorsa bir sonraki kartın kenarı
 * görünür kalır ve parmakla kaydırılır. Şerit ekran kenarına kadar akar —
 * anasayfa kategori şeridiyle aynı dil; sayfada yatay taşma oluşmaz.
 *
 * Araç çubuğu: iki esnek satır yerine sabit bir ızgara. `display: contents`
 * yalnız yerleşimi değiştirir; işaretleme ve form davranışı aynıdır.
 */
@media (max-width: 1023px) {
	.dj-subcats {
		margin-bottom: var(--dj-space-8);
	}

	.dj-subcats:not(.dj-subcats--carousel) .dj-subcats__list {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(120px, 1fr);
		gap: var(--dj-space-12);
		margin-inline: calc(-1 * var(--dj-page-padding));
		padding-inline: var(--dj-page-padding);
		padding-block-end: var(--dj-carousel-pad-b);
		scroll-padding-inline: var(--dj-page-padding);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.dj-subcats:not(.dj-subcats--carousel) .dj-subcats__list::-webkit-scrollbar {
		display: none;
	}

	.dj-subcats:not(.dj-subcats--carousel) .dj-subcats__item {
		min-width: 0;
		scroll-snap-align: start;
	}

	/* Karusel: bir sonraki kartın kenarı görünsün. */
	.dj-subcats--carousel {
		--dj-subcats-cols: 4.5;
	}

	.dj-subcats__link {
		gap: var(--dj-space-8);
		height: 150px;
		padding: var(--dj-space-12) var(--dj-space-8);
	}

	.dj-subcats__media img {
		max-height: 80px;
	}

	.dj-subcats__label {
		font-size: var(--dj-fs-14);
		line-height: 1.25;
		text-wrap: balance;
	}

	.dj-rule-title {
		margin-block: var(--dj-space-30) var(--dj-space-24);
	}

	.dj-viewswitch {
		display: none;
	}

	.dj-toolbar {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) 220px 128px;
		grid-template-areas:
			"filter . sort per"
			"count  count count count";
		align-items: center;
		gap: var(--dj-space-12);
		margin-bottom: var(--dj-space-24);
	}

	.dj-toolbar__start,
	.dj-toolbar__end {
		display: contents;
	}

	/* Metin bağlantısı yerine dokunulabilir hap: 44 px, seçim kutularıyla aynı boy. */
	.dj-toolbar__filter {
		grid-area: filter;
		justify-content: center;
		gap: var(--dj-space-8);
		height: 44px;
		padding-inline: 18px;
		border: 1px solid var(--dj-line);
		border-radius: var(--dj-radius-pill);
		background: var(--dj-white);
		font-size: var(--dj-fs-15);
		transition: border-color var(--dj-transition);
	}

	.dj-toolbar__filter:hover {
		border-color: var(--dj-gray-400);
	}

	.dj-toolbar__filter svg {
		width: 18px;
		height: 18px;
	}

	.dj-toolbar__filter-count {
		min-width: 20px;
		height: 20px;
	}

	/* Masaüstündeki `--dj-gray-400` beyaz zeminde 13 px'te okunmuyor (2:1). */
	.dj-toolbar__count {
		grid-area: count;
		color: var(--dj-muted);
		font-size: var(--dj-fs-14);
	}

	.dj-toolbar__form {
		grid-area: sort;
		min-width: 0;
	}

	.dj-toolbar__form:last-child {
		grid-area: per;
	}

	.dj-toolbar .dj-toolbar__form .dj-select {
		min-width: 0;
		width: 100%;
		height: 44px;
		padding-inline: var(--dj-space-16) 38px;
		background-position: right 14px center;
		background-size: 16px;
		font-size: var(--dj-fs-14);
		text-overflow: ellipsis;
	}

	.dj-catalog__wrap .woocommerce-pagination {
		margin-block-start: var(--dj-space-50);
	}
}

/*
 * 390: araç çubuğu iki satır — üstte iki birincil kontrol (Filtrele,
 * Sıralama), altta sonuç sayısı ve sayfa başına adet. Üç sütunlu ızgara:
 * eşit iki sütunda “Varsayılan Sıralama” 169 px'e sığmayıp kırpılıyordu;
 * sıralama ve sayaç geniş, filtre ve adet dar alanı paylaşır.
 */
@media (max-width: 767px) {
	/*
	 * Dar ekranda şerit bir ekranda **tam iki kart** gösterir: üçüncü kart
	 * ezilmez, parmakla kaydırılarak gelir. Kart genişliği sabit px değil,
	 * kapsayıcının kendi ölçüsünden türer: (genişlik − bir boşluk) / 2.
	 * Kaydırma kilidi (snap) kartı kenara oturtur; çubuk gizlenir.
	 */
	.dj-subcats {
		--dj-subcats-gap: var(--dj-space-12);
	}

	/*
	 * Şerit kenara kadar akmaz: kaydırma alanı sayfa dolgusunun içinde
	 * biter, üçüncü kart bu alanın dışında kalır ve hiçbir parçası görünmez.
	 * Kart genişliği iç genişlikten türer: (iç genişlik − boşluk) / 2.
	 * Sabit px genişlik verilmez.
	 */
	.dj-subcats:not(.dj-subcats--carousel) .dj-subcats__list {
		grid-auto-columns: calc((100% - var(--dj-subcats-gap)) / 2);
		gap: var(--dj-subcats-gap);
		margin-inline: 0;
		padding-inline: 0;
		scroll-padding-inline: 0;
	}

	/* Beşten fazla kartta aynı ölçü karusel bileşeninden gelir. */
	.dj-subcats--carousel {
		--dj-subcats-cols: 2;
	}

	.dj-subcats--carousel .dj-subcats__list {
		grid-auto-columns: calc((100% - var(--dj-subcats-gap)) / 2);
		gap: var(--dj-subcats-gap);
	}

	.dj-subcats__link {
		height: 148px;
		gap: var(--dj-space-8);
		padding: var(--dj-space-12);
		border-radius: var(--dj-radius-md);
	}

	.dj-subcats__media img {
		max-height: 74px;
	}

	.dj-subcats__label {
		font-size: var(--dj-fs-14);
		line-height: var(--dj-lh-snug);
	}

	.dj-rule-title {
		gap: var(--dj-space-16);
		margin-block: var(--dj-space-24) var(--dj-space-20);
	}

	.dj-rule-title h1 {
		font-size: var(--dj-fs-24);
		white-space: normal;
		text-align: center;
	}

	/*
	 * Üç kontrol tek satırda: Filtrele, sıralama ve sayfa başına adet.
	 * Sonuç sayısı dar ekranda tasarımda yok; bilgi ekran okuyucuda kalır.
	 * Sütunlar esner, 360 px'te de taşma olmaz.
	 */
	.dj-toolbar {
		/*
		 * Üç kutu neredeyse eşit: orta sütun en uzun etiketi ("Sıralama")
		 * taşıdığı için biraz geniş. 360 px'te en uzun adet seçeneği
		 * ("48 Ürün") dahil hiçbir etiket kırpılmaz.
		 */
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr);
		grid-template-areas: "filter sort per";
		gap: var(--dj-space-8);
		margin-bottom: var(--dj-space-20);
	}

	.dj-toolbar__filter {
		width: 100%;
		justify-content: center;
		padding-inline: var(--dj-space-12);
		gap: var(--dj-space-8);
		font-size: var(--dj-fs-14);
	}

	.dj-toolbar__filter svg {
		width: 16px;
		height: 16px;
	}

	/*
	 * Etkin filtre sayısı satıra girmez, kutunun köşesinde durur (başlıktaki
	 * sepet sayacı gibi): ikon + metin grubu diğer iki kontrolle aynı
	 * biçimde ortalı kalır, dar sütunda ikon kırpılmaz.
	 */
	.dj-toolbar__filter {
		position: relative;
	}

	.dj-toolbar__filter-count {
		position: absolute;
		top: -6px;
		inset-inline-end: -2px;
	}

	.dj-toolbar .dj-toolbar__form .dj-select {
		padding-inline: var(--dj-space-10, 10px) 30px;
		background-position: right 10px center;
		background-size: 16px;
		font-size: var(--dj-fs-14);
		text-overflow: ellipsis;
	}

	/*
	 * Üç kontrol aynı görsel dili konuşur: Filtrele düğmesiyle aynı yazı
	 * ağırlığı, aynı 16 px ikon, aynı 8 px ikon–metin aralığı ve ikon +
	 * metin grubu kutunun tam ortasında.
	 *
	 * Yerel `select` korunur (seçenekler, klavye, ekran okuyucu, gönderim
	 * değişmez); metni saydamlaşır ve üzerine kısa etiket ile ok birlikte
	 * ortalanmış tek bir katman olarak çizilir. Sıralamada etiket
	 * "Sıralama", adet kutusunda seçili değerdir ("12 Ürün").
	 */
	.dj-toolbar .dj-toolbar__form .dj-select {
		font-weight: var(--dj-fw-semibold);
	}

	.dj-select-wrap {
		position: relative;
		display: block;
	}

	.dj-select-wrap::after {
		content: attr(data-dj-short-label);
		position: absolute;
		inset-block: 0;
		left: 50%;
		display: flex;
		align-items: center;
		max-width: calc(100% - 2 * var(--dj-space-8));
		padding-inline-end: calc(16px + var(--dj-space-8));
		overflow: hidden;
		transform: translateX(-50%);
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101213' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right center / 16px;
		font-size: var(--dj-fs-14);
		font-weight: var(--dj-fw-semibold);
		white-space: nowrap;
		color: var(--dj-ink);
		pointer-events: none;
	}

	[dir="rtl"] .dj-select-wrap::after {
		background-position: left center;
	}

	.dj-toolbar .dj-toolbar__form .dj-select-wrap .dj-select {
		background-image: none;
		color: transparent;
	}

	.dj-select-wrap .dj-select option {
		color: var(--dj-ink);
	}

	/* Sonuç sayısı görsel olarak kaldırıldı; erişilebilirlik için duruyor. */
	.dj-toolbar__count {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.dj-active-filters {
		gap: var(--dj-space-8);
		margin-bottom: var(--dj-space-20);
	}

	.dj-catalog__wrap .woocommerce-pagination {
		margin-block-start: var(--dj-space-40);
	}
}

/* ------------------------------------------------------------------ */
/* Kategori görsel yer tutucusu                                        */
/*                                                                     */
/* Terime görsel atanmadığında rastgele ürün fotoğrafı ödünç alınmaz;   */
/* nötr bir blok gösterilir. Gerçek görsel atanınca kendiliğinden       */
/* devre dışı kalır.                                                    */
/* ------------------------------------------------------------------ */

.dj-cat-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: calc(96 * var(--dj-u));
	border-radius: var(--dj-radius-md);
	background: repeating-linear-gradient(
		135deg,
		var(--dj-surface-2) 0 10px,
		var(--dj-line) 10px 11px
	);
	color: var(--dj-gray-400);
}

.dj-cat-placeholder span {
	font-size: var(--dj-fs-32);
	font-weight: var(--dj-fw-bold);
	line-height: 1;
	opacity: 0.65;
}

.dj-cat-card .dj-cat-placeholder {
	aspect-ratio: 4 / 3;
	min-height: 0;
}

/* ------------------------------------------------------------------ */
/* Arşiv ızgarası — tablet ve mobil kart                               */
/*                                                                     */
/* 899 ve altında ızgara tek sütundu: 768'de kart 688 × 788, 390'da    */
/* 350 × 623; 12 ürün 12 349 / 10 742 px sayfa demekti. Burada iki     */
/* sütun ve kompakt kart kurulur.                                      */
/*                                                                     */
/* Kapsam yalnız arşiv ızgarasıdır (`[data-view="grid"]` ve bu dosya   */
/* yalnız katalogda yüklenir): anasayfa şeridi, benzer ürünler ve      */
/* masaüstü kartı değişmez. Kart işaretlemesi aynıdır; satır sırası,   */
/* ayrılmış satır yükseklikleri (başlık 2 satır, fiyat) ve eylemler    */
/* masaüstündeki gibi korunur, yalnız ölçüler dar karta göre verilir.  */
/* 1023 altında `--dj-u` 1 px olduğu için değerler doğrudan px'tir.    */
/* ------------------------------------------------------------------ */

@media (min-width: 768px) and (max-width: 899px) {
	.dj-grid[data-view="grid"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dj-grid[data-view="grid"] .dj-card {
		--dj-card-padding: 20px;
		--dj-card-padding-b: 20px;
		--dj-card-title-line: calc(1.4 * 17px);
		--dj-card-category-line: calc(var(--dj-lh-normal) * 13px);
		--dj-card-image-rise: 8px;

		gap: var(--dj-space-12);
		min-height: 0;
		padding: 20px;
	}

	.dj-grid[data-view="grid"] .dj-card__head {
		height: 52px;
	}

	.dj-grid[data-view="grid"] .dj-badge-discount {
		min-width: 62px;
		border-radius: 5px;
	}

	.dj-grid[data-view="grid"] .dj-badge-discount__label {
		padding: 5px 3px 4px;
		font-size: 11px;
	}

	.dj-grid[data-view="grid"] .dj-badge-discount__value {
		padding: 6px 3px 7px;
		font-size: 18px;
	}

	.dj-grid[data-view="grid"] .dj-badge-rating {
		gap: 4px;
		height: 30px;
		padding-inline: 9px 8px;
		font-size: var(--dj-fs-14);
	}

	.dj-grid[data-view="grid"] .dj-badge-rating svg {
		width: 17px;
		height: 16px;
	}

	.dj-grid[data-view="grid"] .dj-card__media {
		min-height: 220px;
	}

	.dj-grid[data-view="grid"] .dj-card__quick {
		inset-block-start: 20px;
		gap: var(--dj-space-8);
	}

	.dj-grid[data-view="grid"] .dj-card__quick .dj-icon-btn--round {
		width: 44px;
		height: 44px;
	}

	.dj-grid[data-view="grid"] .dj-card__view svg {
		width: 22px;
		height: 14px;
	}

	.dj-grid[data-view="grid"] .dj-card__quick [data-dj-compare-toggle] svg {
		width: 20px;
		height: 21px;
	}

	/* Stoklu ve stoksuz CTA aynı kutu: dikey dolgu yerine sabit en az boy. */
	.dj-grid[data-view="grid"] .dj-card .dj-card__cart-slot .dj-card__cart {
		width: calc(100% - 24px);
		max-width: 240px;
		min-width: 0;
		min-height: 44px;
		padding-block: 0;
		padding-inline: var(--dj-space-16);
		font-size: var(--dj-fs-15);
	}

	.dj-grid[data-view="grid"] .dj-card__docs {
		gap: var(--dj-space-8);
		min-height: 40px;
	}

	.dj-grid[data-view="grid"] .dj-card .dj-energy {
		--dj-energy-h: 34px;
	}

	.dj-grid[data-view="grid"] .dj-card__doc-link {
		font-size: var(--dj-fs-14);
	}

	.dj-grid[data-view="grid"] .dj-card__fav {
		width: 40px;
		height: 40px;
	}

	.dj-grid[data-view="grid"] .dj-card__fav svg {
		width: 24px;
		height: 22px;
	}

	.dj-grid[data-view="grid"] .dj-card__body {
		gap: 2px;
		margin-block-start: 4px;
	}

	.dj-grid[data-view="grid"] .dj-card__category {
		font-size: var(--dj-fs-14);
	}

	.dj-grid[data-view="grid"] .dj-card__title {
		font-size: 17px;
		line-height: 1.4;
	}

	/* Güncel fiyat önde kalır; eski fiyat bir kademe küçük okunur. */
	.dj-grid[data-view="grid"] .dj-card__price {
		margin-top: 0;
		font-size: var(--dj-fs-18);
		min-height: calc(var(--dj-lh-normal) * var(--dj-fs-18));
	}

	.dj-grid[data-view="grid"] .dj-card__price del {
		font-size: 0.8em;
	}
}

/* Dokunmatikte hızlı bakış sütunu puan rozetinin altından başlar. */
@media (min-width: 768px) and (max-width: 899px) and (hover: none) {
	.dj-grid[data-view="grid"] .dj-card__quick {
		inset-block-start: 62px;
	}
}

/*
 * 390: ızgara tek sütundur. Kart, anasayfadaki onaylı ürün kartıyla aynı
 * dizilimi kullanır (`product.css` → `:is(.dj-popular, .dj-cards)`); burada
 * yalnız ızgaranın kendi ölçüleri kalır. İki sütunluk sıkıştırılmış kart
 * kuralları tablete (768–899) taşındı.
 */
@media (max-width: 767px) {
	.dj-grid[data-view="grid"] {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--dj-space-16);
	}
}