/**
 * Sepet: başlıktaki çekmece ve `/sepet/` sayfası.
 *
 * Çekmece, favori çekmecesiyle aynı kabuğu paylaşır (genişlik, başlık, perde,
 * kapatma, animasyon); yalnız satır içeriği ve eylemler farklıdır. Tipografi,
 * renk, yarıçap, düğme ve odak sistemi mevcut tokenlardan gelir.
 */

/* ------------------------------------------------------------------ */
/* Ortak satır parçaları                                               */
/* ------------------------------------------------------------------ */

/*
 * Ürün görseli kutunun içine tamamı sığar: kırpma yok. Kaynak, favoriler
 * sayfasındaki düzeltilmiş sistemle aynı — oransal `medium` boyutu
 * (`dijitsu_cart_item_image()`).
 */
.dj-cart-item__media {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	overflow: hidden;
	padding: 8px;
	border-radius: var(--dj-radius-md);
	background: var(--dj-surface);
	transition: background-color 220ms ease;
}

.dj-cart-item__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	transition: transform 220ms ease;
}

@media (hover: hover) {
	.dj-cart-item__media:hover {
		background: var(--dj-line);
	}

	.dj-cart-item__media:hover img {
		transform: scale(1.025);
	}
}

@media (prefers-reduced-motion: reduce) {
	.dj-cart-item__media img {
		transition: none;
		transform: none !important;
	}
}

/*
 * İçerik alanının genel bağlantı alt çizgisi ürün adına uygulanmaz
 * (`.dj-entry__content a`); hover'da yalnız renk değişir.
 */
.dj-cart-item__title,
.dj-entry__content a.dj-cart-item__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	color: var(--dj-ink);
	font-size: var(--dj-fs-16);
	font-weight: var(--dj-fw-semibold);
	line-height: 1.45;
	text-decoration: none;
	transition: color 180ms ease;
}

@media (hover: hover) {
	.dj-cart-item__title:hover {
		color: var(--dj-muted);
	}
}

.dj-cart-item__title:focus-visible {
	outline: 2px solid var(--dj-focus);
	outline-offset: 3px;
	border-radius: var(--dj-radius-sm);
}

/* Kaldırma: favoriler sayfasıyla aynı sade davranış. */
.dj-cart-item__remove {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--dj-muted);
	cursor: pointer;
	transition: background-color 180ms ease, color 180ms ease;
}

.dj-cart-item__remove svg {
	width: 13px;
	height: 13px;
}

/*
 * Görünen daire 32 px; dokunma alanı her genişlikte 44 × 44 (favoriler ve
 * karşılaştırmadaki çözüm). Merkezden ölçülür, kutu ölçüsü değişmez.
 */
.dj-cart-item__remove::after {
	content: "";
	position: absolute;
	inset: calc(50% - 22px);
}

@media (hover: hover) {
	.dj-cart-item__remove:hover {
		background: var(--dj-line);
		color: var(--dj-ink);
	}
}

.dj-cart-item__remove:focus-visible {
	background: var(--dj-line);
	color: var(--dj-ink);
	outline: 2px solid var(--dj-focus);
	outline-offset: 2px;
}

/* İstek sürerken denetimler pasif; ölçü değişmediği için düzen kaymaz. */
.is-cart-busy .dj-cart-item__remove,
.is-cart-busy .dj-qty__btn,
.is-cart-busy .dj-cart-clear {
	pointer-events: none;
	opacity: 0.55;
}

/* ------------------------------------------------------------------ */
/* Çekmece                                                             */
/* ------------------------------------------------------------------ */

.dj-drawer--cart .dj-drawer__panel {
	display: flex;
	flex-direction: column;
	/* Favori çekmecesiyle aynı genişlik mantığı. */
	width: min(clamp(430px, calc(470 * var(--dj-u)), 470px), 92vw);
}

.dj-drawer--cart .dj-drawer__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}

.dj-cart-list {
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1 1 auto;
}

.dj-cart-item {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr) 32px;
	gap: 4px 18px;
	padding-block: 20px;
	border-bottom: 1px solid var(--dj-line);
}

.dj-cart-item:first-child {
	padding-block-start: 6px;
}

.dj-cart-item .dj-cart-item__media {
	width: 88px;
	height: 88px;
	grid-column: 1;
	grid-row: 1 / span 2;
	align-self: start;
}

.dj-cart-item__body {
	display: grid;
	gap: 6px;
	justify-items: start;
	min-width: 0;
	grid-column: 2;
	grid-row: 1 / span 2;
}

.dj-cart-item .dj-cart-item__remove {
	grid-column: 3;
	grid-row: 1;
	align-self: start;
}

.dj-cart-item__meta {
	margin: 0;
	color: var(--dj-ink);
	font-size: var(--dj-fs-14);
	font-weight: var(--dj-fw-semibold);
}

.dj-cart-item .variation {
	margin: 0;
	color: var(--dj-muted);
	font-size: var(--dj-fs-14);
}

/* Ara toplam ve eylemler listenin altında, kaydırmadan bağımsız. */
.dj-drawer--cart .dj-drawer__body > .dj-cart-drawer__summary {
	position: sticky;
	inset-block-end: 0;
	margin-top: auto;
	padding-block: var(--dj-space-16);
	border-top: 1px solid var(--dj-line);
	background: var(--dj-white);
}

.dj-cart-subtotal {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--dj-space-16);
	margin: 0 0 var(--dj-space-16);
	color: var(--dj-muted);
	font-size: var(--dj-fs-16);
}

.dj-cart-subtotal strong {
	color: var(--dj-ink);
	font-size: var(--dj-fs-20);
	font-weight: var(--dj-fw-bold);
}

.dj-cart-drawer__actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--dj-space-12);
}

.dj-cart-drawer__actions .dj-btn {
	min-height: 48px;
	padding-inline: 12px;
	font-size: var(--dj-fs-14);
	font-weight: var(--dj-fw-bold);
}

/*
 * Çekmecedeki “Ödemeye Geç”, sepet sayfasındaki “Ödemeye Geç” ve “Uygula” ile
 * aynı koyu CTA davranışını kullanır: kenarlık normalde de vardır (zeminle aynı
 * renk), bu yüzden hover'da beyaz zemine geçerken kutu ölçüsü değişmez —
 * düzen kayması sıfır. Ölçek/kaydırma efekti yok. “Sepeti Gör” (outline)
 * kendi davranışını korur.
 */
.dj-cart-drawer__actions .dj-btn--primary {
	border: 1px solid var(--dj-ink);
	background: var(--dj-ink);
	color: var(--dj-white);
	transition: background-color var(--dj-transition), color var(--dj-transition), border-color var(--dj-transition);
}

@media (hover: hover) {
	.dj-cart-drawer__actions .dj-btn--primary:hover {
		background: var(--dj-white);
		color: var(--dj-ink);
		border-color: var(--dj-ink);
	}
}

.dj-cart-drawer__actions .dj-btn--primary:active {
	background: var(--dj-white);
	color: var(--dj-ink);
	border-color: var(--dj-ink);
}

/* Odak halkası hover renklerinden bağımsız; ikisi çakışmaz. */
.dj-cart-drawer__actions .dj-btn--primary:focus-visible {
	outline: 2px solid var(--dj-focus);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Boş sepet                                                           */
/* ------------------------------------------------------------------ */

.dj-cart-empty {
	display: grid;
	justify-items: center;
	gap: 10px;
	padding-block: var(--dj-space-60);
	text-align: center;
}

.dj-cart-empty__icon {
	display: inline-flex;
	color: var(--dj-gray-400);
}

.dj-cart-empty__icon svg {
	width: 46px;
	height: 46px;
}

.dj-cart-empty__title {
	margin: 8px 0 0;
	color: var(--dj-ink);
	font-size: var(--dj-fs-18);
	font-weight: var(--dj-fw-semibold);
}

.dj-cart-empty__text {
	margin: 0;
	max-width: 340px;
	color: var(--dj-muted);
	font-size: var(--dj-fs-14);
	line-height: 1.5;
}

.dj-cart-empty__cta {
	margin-top: var(--dj-space-16);
}

.dj-cart-empty--page {
	padding-block: var(--dj-space-80);
}

/* ------------------------------------------------------------------ */
/* Sepet sayfası                                                       */
/* ------------------------------------------------------------------ */

/*
 * Sepet kabuğu kabın tam genişliğini kullanır: `.dj-entry__content` okunabilir
 * metin için 860 tasarım px ile sınırlıdır, sepet tablosu ise iki kolonlu
 * düzeni taşır.
 */
.dj-entry--cart .dj-entry__content {
	max-width: none;
}

.dj-entry--cart .dj-entry__header {
	margin: 0;
}

.dj-cart-page {
	display: grid;
	grid-template-columns: minmax(0, 68fr) minmax(0, 30fr);
	gap: var(--dj-space-40);
	align-items: start;
	margin-block-start: var(--dj-space-40);
}

.dj-cart-table__head,
.dj-cart-row {
	display: grid;
	grid-template-columns: minmax(0, 44fr) minmax(0, 16fr) minmax(0, 20fr) minmax(0, 16fr) 32px;
	align-items: center;
	gap: var(--dj-space-16);
}

.dj-cart-table__head {
	padding-block-end: 14px;
	border-bottom: 1px solid var(--dj-line);
	color: var(--dj-ink);
	font-size: var(--dj-fs-14);
	font-weight: var(--dj-fw-semibold);
	text-align: center;
}

/*
 * İçerik alanının genel liste girintisi (`.dj-entry__content ul`) buraya
 * uygulanmamalı: satırlar başlık satırından 23 px içeride kalıyordu, bu yüzden
 * kolon başlıkları kendi sütunlarının tam üstüne oturmuyordu.
 */
.dj-cart-table__list,
.dj-entry__content .dj-cart-table__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dj-cart-row {
	padding-block: 22px;
	border-bottom: 1px solid var(--dj-line);
	text-align: center;
}

/*
 * Sepette son satırın altında da ayraç vardır: kupon ve eylem satırı bu
 * çizginin altında başlar. Çizgi tablo alanının genişliğindedir, sipariş
 * özeti kartına uzamaz (ayrı ızgara sütunu).
 */

.dj-cart-row__product {
	display: flex;
	align-items: center;
	gap: 20px;
	min-width: 0;
	text-align: start;
}

.dj-cart-row__product .dj-cart-item__media {
	width: 104px;
	height: 104px;
}

.dj-cart-row__info {
	display: grid;
	gap: 6px;
	min-width: 0;
}

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

/*
 * Varyasyon / ürün verisi: WooCommerce'in `dl.variation` çıktısı. Tarayıcı
 * varsayılanında değer 40 px girintili alt satıra düşüyordu; “Renk: Siyah”
 * biçiminde etiket + değer tek satır.
 */
.dj-cart-row__info .variation {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 2px 6px;
	margin: 0;
	color: var(--dj-muted);
	font-size: var(--dj-fs-14);
	line-height: 1.4;
}

.dj-cart-row__info .variation dt,
.dj-cart-row__info .variation dd {
	margin: 0;
	font-weight: var(--dj-fw-regular);
}

.dj-cart-row__info .variation dd {
	color: var(--dj-ink);
	overflow-wrap: anywhere;
}

.dj-cart-row__info .variation dd p {
	margin: 0;
}

/* Dar ekran ödeme çubuğu (`.dj-buybar` kabuğu, product.css): içerik alanının bağlantı alt çizgisi uygulanmaz. */
.dj-entry__content a.dj-buybar__submit {
	text-decoration: none;
}

.dj-cart-row__price,
.dj-cart-row__subtotal {
	color: var(--dj-ink);
	font-size: var(--dj-fs-16);
}

.dj-cart-row__subtotal {
	font-weight: var(--dj-fw-semibold);
}

.dj-cart-row__price del,
.dj-cart-row__subtotal del {
	display: block;
	color: var(--dj-muted);
	font-size: var(--dj-fs-14);
	font-weight: var(--dj-fw-regular);
}

.dj-cart-row__price ins,
.dj-cart-row__subtotal ins {
	background: transparent;
	text-decoration: none;
}

/* Satır içi etiketler yalnız mobil kartta görünür. */
.dj-cart-row__label {
	display: none;
}

/* --- Adet --- */

.dj-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--dj-line);
	border-radius: var(--dj-radius-pill);
	overflow: hidden;
}

.dj-qty .quantity {
	margin: 0;
	float: none;
}

.dj-qty input.qty {
	width: 44px;
	min-height: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--dj-ink);
	font-family: inherit;
	font-size: var(--dj-fs-16);
	font-weight: var(--dj-fw-semibold);
	text-align: center;
	-moz-appearance: textfield;
}

.dj-qty input.qty::-webkit-outer-spin-button,
.dj-qty input.qty::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.dj-qty__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	min-height: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--dj-ink);
	font-family: inherit;
	font-size: var(--dj-fs-18);
	line-height: 1;
	cursor: pointer;
	transition: background-color 180ms ease;
}

@media (hover: hover) {
	.dj-qty__btn:hover {
		background: var(--dj-surface);
	}
}

.dj-qty__btn:focus-visible,
.dj-qty input.qty:focus-visible {
	outline: 2px solid var(--dj-focus);
	outline-offset: -2px;
}

/* --- Kupon, güncelle, temizle --- */

/*
 * Son ürün ayracının altındaki tek satır: solda kupon kodu + Uygula, sağda
 * Sepeti Temizle; ikisi de aynı taban çizgisinde. Ayraç tablo alanına aittir,
 * özet kartına uzamaz.
 */
.dj-cart-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--dj-space-16);
	/* Ayraç son ürün satırının kendi alt çizgisidir; burada ikinci çizgi yok. */
	padding-block-start: var(--dj-space-24);
	margin-top: 0;
}

.dj-cart-coupon {
	display: flex;
	align-items: center;
	gap: var(--dj-space-12);
	flex: 1 1 360px;
	max-width: 440px;
	min-width: 0;
}

.dj-cart-coupon .input-text {
	box-sizing: border-box;
	flex: 1 1 auto;
	min-width: 0;
	min-height: 48px;
	padding: 12px 18px;
	border: 1px solid var(--dj-line);
	border-radius: var(--dj-radius-md);
	background: var(--dj-white);
	color: var(--dj-ink);
	font-family: inherit;
	font-size: var(--dj-fs-16);
}

.dj-cart-coupon .input-text:focus-visible {
	outline: 2px solid var(--dj-focus);
	outline-offset: -1px;
}

.dj-cart-tools__actions {
	display: flex;
	align-items: center;
	gap: var(--dj-space-12);
}

/*
 * “Uygula” ve “Sepeti Temizle” aynı ikincil düğme ailesinde: ana siyah
 * “Ödemeye Geç” ile yarışmazlar, yıkıcı kırmızı de kullanılmaz.
 */
.dj-cart-tools .dj-btn {
	flex: none;
	min-height: 48px;
	padding-inline: 22px;
	font-size: var(--dj-fs-14);
	font-weight: var(--dj-fw-semibold);
}

/* JavaScript açıkken adet anında kaydedilir; bu düğme yalnız yedek. */
.dj-cart-js .dj-cart-update {
	display: none;
}

/*
 * Sepet sayfasının siyah CTA'ları — “Uygula” ve “Ödemeye Geç” — sitedeki
 * mevcut koyu düğme davranışının aynısını kullanır (giriş penceresi ve favori
 * satırındaki CTA ile aynı aile): kenarlık normalde de vardır (zeminle aynı
 * renk), böylece hover'da beyaz zemine geçerken kutu ölçüsü değişmez —
 * düzen kayması sıfır. Ölçek, kaydırma ya da gölge efekti yok.
 */
.dj-cart-coupon__apply,
.dj-order-summary__action .dj-btn,
.woocommerce .dj-order-summary__action a.button.alt {
	border: 1px solid var(--dj-ink);
	background: var(--dj-ink);
	color: var(--dj-white);
	transition: background-color var(--dj-transition), color var(--dj-transition), border-color var(--dj-transition);
}

@media (hover: hover) {
	.dj-cart-coupon__apply:hover,
	.dj-order-summary__action .dj-btn:hover,
	.woocommerce .dj-order-summary__action a.button.alt:hover {
		background: var(--dj-white);
		color: var(--dj-ink);
		border-color: var(--dj-ink);
	}
}

.dj-cart-coupon__apply:focus-visible,
.dj-order-summary__action .dj-btn:focus-visible {
	outline: 2px solid var(--dj-focus);
	outline-offset: 2px;
}

.dj-cart-coupon__apply:active,
.dj-order-summary__action .dj-btn:active {
	background: var(--dj-white);
	color: var(--dj-ink);
	border-color: var(--dj-ink);
}

/* --- Sipariş özeti --- */

/*
 * WooCommerce'in `.cart-collaterals` sarmalayıcısı kendi yüzdelik genişliğini
 * ve yüzdürmesini taşır; burada iki kolonu ızgara kurduğu için sıfırlanır.
 */
.dj-cart-summary {
	width: 100%;
	float: none;
	margin: 0;
}

/*
 * Özet, iki kolonun bulunduğu masaüstü aralığında (≥1200 — ızgaranın tek
 * kolona düştüğü sınırın üstü) kaydırma boyunca görünümde kalır.
 *
 * Yapışmanın çalışması için kolonun kendisinin de gerilmemesi gerekir;
 * `.dj-cart-page` zaten `align-items: start` kullandığından ızgara öğesi
 * içeriği kadar yüksektir ve yapışkan kutu kendi ebeveyninin sınırında
 * durur — alt bilgiye geldiğinde doğal olarak akışa döner. Ata zincirinde
 * `overflow`, `transform` ya da `contain` yok (denetlendi), bu yüzden ek
 * bir sıfırlama gerekmiyor.
 *
 * Üst pay: masaüstünde başlık yapışkan değil (o token yalnız ≤1023'te
 * tanımlı), bu yüzden yedek 0 ile okunur ve üzerine sayfa ritminden bir
 * nefes payı eklenir.
 */
@media (min-width: 1200px) {
	/*
	 * Yapışan kutu, kolonun **içindeki** karttır; kolonun kendisi satır
	 * boyunca gerilir. `.dj-cart-page` `align-items: start` kullandığı için
	 * ızgara öğesi içeriği kadar yüksek kalıyor, bu da yapışkan kutuya
	 * hareket alanı bırakmıyordu (kutu = alan → hiç yapışmaz). Kolon
	 * gerildiğinde kart, sol listenin yüksekliği boyunca görünümde kalır ve
	 * kolonun sonunda doğal olarak akışa döner — alt bilgiye taşmaz.
	 */
	.dj-cart-page__summary {
		align-self: stretch;
	}

	.dj-cart-page__summary > .dj-cart-summary {
		position: sticky;
		top: calc(var(--dj-sticky-header-offset, 0px) + var(--dj-space-24));
		/* Uzun özetlerde kutu görünümü aşarsa kendi içinde kaydırır. */
		max-height: calc(100dvh - var(--dj-sticky-header-offset, 0px) - 2 * var(--dj-space-24));
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

.dj-order-summary {
	padding: var(--dj-space-24);
	border: 1px solid var(--dj-line);
	border-radius: var(--dj-card-radius);
	background: var(--dj-white);
}

/*
 * İçerik alanının genel `h2` üst boşluğu (`.dj-entry__content h2`, 1.4em)
 * karta uygulanmaz: başlığın üstü kenar dolgusunun ~34 px fazlasıydı.
 * Yalnız boşluk sıfırlanır; görünen punto (genel `h2` ölçeği) değişmez.
 */
.dj-order-summary .dj-order-summary__title {
	margin-block-start: 0;
}

.dj-order-summary__title {
	margin: 0 0 var(--dj-space-12);
	color: var(--dj-ink);
	font-size: var(--dj-fs-20);
	font-weight: var(--dj-fw-bold);
}

/*
 * Özet satırları tablo olarak çizilir (kargo satırı WooCommerce'in kendi
 * `<tr>` şablonundan gelir); görünüm iki sütunlu sade bir liste gibidir.
 */
.dj-order-summary__lines {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}

.dj-order-summary__lines tr {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--dj-space-16);
	min-height: 46px;
	padding-block: 10px;
	border: 0;
}

.dj-order-summary__lines th,
.dj-order-summary__lines td {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: var(--dj-fs-16);
	font-weight: var(--dj-fw-regular);
}

.dj-order-summary__lines th {
	color: var(--dj-muted);
	text-align: start;
}

.dj-order-summary__lines td {
	color: var(--dj-ink);
	text-align: end;
}

.dj-order-summary__line--discount td {
	color: var(--dj-green);
}

.dj-order-summary__line--total {
	margin-top: 4px;
	padding-block-start: var(--dj-space-16);
	border-top: 1px solid var(--dj-line) !important;
}

.dj-order-summary__line--total th,
.dj-order-summary__line--total td {
	color: var(--dj-ink);
	font-weight: var(--dj-fw-bold);
}

.dj-order-summary__line--total td {
	font-size: var(--dj-fs-20);
}

/*
 * “… KDV dahil” eki WooCommerce'in kendi çıktısıdır (fiyatlar vergi dahil
 * gösterildiğinde). Toplam tutarla yarışmasın diye sessiz ve küçük kalır.
 */
.dj-order-summary__line--total .includes_tax {
	display: block;
	margin-top: 3px;
	color: var(--dj-muted);
	font-size: var(--dj-fs-14);
	font-weight: var(--dj-fw-regular);
}

/*
 * WooCommerce'in kargo satırı: seçenekler, adres notu ve hesaplayıcı bağlantısı
 * kendi çıktısıdır; burada yalnız kart diline uydurulur.
 */
.dj-order-summary__lines .woocommerce-shipping-totals {
	flex-wrap: wrap;
}

.dj-order-summary__lines .woocommerce-shipping-totals td {
	flex: 1 1 auto;
}

.dj-order-summary__lines .woocommerce-shipping-methods {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dj-order-summary__lines .woocommerce-shipping-methods li + li {
	margin-top: 6px;
}

.dj-order-summary__lines .woocommerce-shipping-destination,
.dj-order-summary__lines .woocommerce-shipping-calculator,
.dj-order-summary__muted {
	color: var(--dj-muted);
	font-size: var(--dj-fs-14);
}

/*
 * Hedef notu tutarın altında, aynı sağ kenarda. Hücre “Kargo” etiketinden
 * sonra başladığı için başa yaslı not satırın ortasında asılı kalıyordu.
 */
.dj-order-summary__lines .woocommerce-shipping-destination {
	display: block;
	width: 100%;
	margin-top: 6px;
	text-align: end;
}

/* Kupon satırındaki WooCommerce “[Kaldır]” bağlantısı indirim yeşilini almaz. */
.dj-order-summary__line--discount .woocommerce-remove-coupon {
	margin-inline-start: 6px;
	color: var(--dj-muted);
	font-size: var(--dj-fs-14);
}

.dj-order-summary__action {
	margin-top: var(--dj-space-16);
}

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

/*
 * Özet kartı dar sütunda okunaklı kalmıyor (1024'te ~273 px); iki kolon
 * 1200'ün altında alt alta geçer.
 */
@media (max-width: 1199px) {
	.dj-cart-page {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--dj-space-30);
	}

	/*
	 * Tek sütuna geçince kart sağa hizalanır. Genişlik açıkça verilir:
	 * yalnız `margin-inline-start: auto` verilseydi ızgara öğesi gerilmeyi
	 * bırakıp içeriğine göre daralırdı (1024'te 224 px).
	 */
	.dj-cart-page__summary {
		width: min(460px, 100%);
		margin-inline-start: auto;
	}
}

/*
 * Tablet ve mobil satır kartı (≤1023). 768'de beş sütunlu tabloda ürün adı
 * 147 px'e sıkışıp kesiliyor, 148 px'lik adet seçici 123 px'lik sütunundan
 * taşıp ara toplama değiyordu. Satır alan adlı ızgaraya döner: görsel solda,
 * ad + birim fiyat üstte, adet ve ara toplam altta aynı bantta, kaldırma sağ
 * üstte (favoriler satırıyla aynı dil). `auto` sütunu adet seçicinin
 * genişliğini alır; ad ve fiyat onun üstünden de akar.
 */
@media (max-width: 1023px) {
	.dj-cart-table__head {
		display: none;
	}

	.dj-cart-row {
		grid-template-columns: 104px auto minmax(0, 1fr) 32px;
		grid-template-rows: auto auto 1fr;
		grid-template-areas:
			"media info  info remove"
			"media price price price"
			"media qty   sub  sub";
		align-items: start;
		gap: 6px 20px;
		padding-block: 20px;
		text-align: start;
	}

	.dj-cart-row__product {
		display: contents;
	}

	.dj-cart-row__product .dj-cart-item__media {
		grid-area: media;
		width: 104px;
		height: 104px;
	}

	.dj-cart-row__info {
		grid-area: info;
	}

	/*
	 * Uzun model adları iki satırda kesiliyordu; dar ekranda üç satır.
	 * `.dj-entry__content a.dj-cart-item__title` (0,2,1) ezilecek kadar özgül.
	 */
	.dj-cart-shell .dj-cart-row .dj-cart-item__title {
		-webkit-line-clamp: 3;
		line-clamp: 3;
	}

	.dj-cart-row__price {
		grid-area: price;
		font-size: var(--dj-fs-15);
	}

	.dj-cart-row__qty {
		grid-area: qty;
		align-self: end;
		margin-top: 6px;
	}

	.dj-cart-row__subtotal {
		grid-area: sub;
		display: flex;
		flex-wrap: wrap;
		align-content: center;
		align-items: baseline;
		justify-content: flex-end;
		column-gap: 6px;
		align-self: end;
		min-height: 46px;
		text-align: end;
	}

	.dj-cart-row .dj-cart-item__remove {
		grid-area: remove;
	}

	.dj-cart-row__label {
		display: inline;
		margin-inline-end: 6px;
		color: var(--dj-muted);
		font-size: var(--dj-fs-14);
		font-weight: var(--dj-fw-regular);
	}

	.dj-cart-row__subtotal .dj-cart-row__label {
		margin-inline-end: 0;
	}

	/* Artı/eksi kendini anlatır; “Adet” etiketi seçiciyi içeri itiyordu. */
	.dj-cart-row__qty .dj-cart-row__label {
		display: none;
	}

	/*
	 * Adet seçici: 44 × 44 düğmeler ve alan. Ürün detayının genel `.dj-qty`
	 * yüksekliği (düğme yüksekliği token'ı, 768'de 60) ve WooCommerce'in
	 * `.quantity .qty` genişliği (3.631em) burada geçerli değil.
	 */
	.dj-cart-row__qty .dj-qty {
		height: auto;
	}

	.dj-cart-row__qty .dj-qty__btn {
		width: 44px;
		height: 44px;
		min-height: 44px;
	}

	.dj-cart-row__qty .quantity input.qty {
		width: 44px;
		height: 44px;
		min-height: 44px;
	}

	/* WooCommerce'in satır içi özet bağlantıları: görünüm aynı, dokunma alanı 44+. */
	.dj-order-summary__line--discount .woocommerce-remove-coupon,
	.dj-order-summary__lines .shipping-calculator-button {
		display: inline-block;
		padding-block: 12px;
		margin-block: -12px;
	}
}

@media (max-width: 767px) {
	/*
	 * 390: adet seçici (134 px) görselin altından başlayan ayrı bantta, ara
	 * toplam aynı bandın sağında. İkinci sütun (22 px) seçicinin görsel
	 * sütununa sığmayan kısmıdır; ad ve fiyat onun üstünden akar.
	 */
	.dj-cart-row {
		grid-template-columns: 96px 22px minmax(0, 1fr) 32px;
		grid-template-rows: auto 1fr auto;
		grid-template-areas:
			"media info  info remove"
			"media price price price"
			"qty   qty   sub  sub";
		gap: 6px 16px;
	}

	.dj-cart-row__product .dj-cart-item__media {
		width: 96px;
		height: 96px;
	}

	.dj-cart-row__qty {
		margin-top: 10px;
	}

	/* Etiket tutarın üstünde: uzun tutar iki satıra kırılıp satırları farklılaştırmıyor. */
	.dj-cart-row__subtotal {
		flex-direction: column;
		/* Sütun yönünde sarma, ≤1023'teki `align-content: center` ile tutarı ortalıyordu. */
		flex-wrap: nowrap;
		align-items: flex-end;
		justify-content: center;
		gap: 2px;
		margin-top: 10px;
	}

	.dj-cart-row__subtotal .dj-cart-row__label {
		font-size: var(--dj-fs-14);
	}

	.dj-cart-tools {
		flex-direction: column;
		align-items: stretch;
		gap: var(--dj-space-12);
	}

	.dj-cart-coupon {
		flex: none;
		max-width: none;
	}

	.dj-cart-coupon .input-text {
		flex: 1 1 auto;
	}

	.dj-cart-tools .dj-cart-coupon__apply {
		min-width: 104px;
	}

	/*
	 * “Sepeti Temizle” yıkıcı ikincil eylem: tam genişlik hap olarak “Ödemeye
	 * Geç” ile yarışmaz, sağda içerik genişliğinde kalır.
	 */
	.dj-cart-tools__actions {
		flex-wrap: wrap;
		justify-content: flex-end;
	}

	.dj-cart-tools .dj-cart-clear,
	.dj-cart-tools .dj-cart-update {
		min-height: 44px;
	}

	.dj-cart-page__summary {
		width: 100%;
		margin-inline-start: 0;
	}

	.dj-cart-drawer__actions {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Dar ekranda ortak mobil yüzey ölçüsü (bkz. header.css `--dj-sheet-*`). */
@media (max-width: 767px) {
	.dj-drawer--cart .dj-drawer__panel {
		width: calc(100% - var(--dj-sheet-gap) * 2);
		max-width: none;
	}
}