/**
 * دُرشکه — چیدمان صفحه‌های بازار (تالار فروش، در راه، تقاضا، پنل فروشنده، عضویت).
 *
 * این فایل فقط چیدمان است؛ رنگ، فونت و هندسه از tokens.css و اجزای مشترک از
 * components.css می‌آیند. مرجع: خروجی تأییدشدهٔ Claude Design «تالار فروش -
 * بازطراحی» (کبالت روشن): دسکتاپ شبکهٔ ۱۲۰۰، موبایل ۳۷۵، نقاط شکست ۶۰۰ / ۹۰۰.
 *
 * چیدمان فشرده هم با media query و هم با container query (به عرض قاب افزونه)
 * تعریف شده است تا در قالبی با ستون کناری یا محتوای باریک هم درست باشد. هر
 * تغییری در بلوک ≤۹۰۰ یا ≤۶۰۰ باید در هر دو نسخه اعمال شود.
 *
 * ترتیب بارگذاری: tokens.css → components.css → این فایل
 */

/* ============================================================================
   ۰. قاب افزونه
   ============================================================================ */

.dk-app {
	display: block;
	font-size: 16px;
	line-height: 1.85;
	margin: 0;
	max-width: none;
	min-width: 0;
	width: 100%;
}

/* قاب افزونه هرگز به عرض متن (۷۰ نویسه) قالب محدود نمی‌شود. */
.dk-entry > .dk-app,
.dk-entry > :has(> .dk-app),
.dk-entry > .wp-block-post-content:has(.dk-app),
.entry-content:has(> .dk-app) {
	max-width: none;
}

.dk-app {
	container-name: dkapp;
	container-type: inline-size;
}

.dk-app__content {
	min-width: 0;
}

.dk-app--bare {
	margin-top: var(--space-4);
}

/* در قالب، .dk-row یک ابزار چیدمان flex است؛ این‌جا ردیف خودرو. */
.dk-app .dk-row {
	align-items: normal;
	display: block;
	flex-wrap: nowrap;
	gap: 0;
}

.dk-showroom,
.dk-seller {
	direction: rtl;
	margin: 0;
	max-width: none;
	text-align: start;
}

/* ============================================================================
   ۱. سرصفحهٔ فهرست
   ============================================================================ */

.dk-app .dk-showroom__head {
	align-items: flex-end;
	display: flex;
	gap: var(--space-4);
	justify-content: space-between;
	margin: 0 0 var(--space-4);
}

.dk-app .dk-showroom__heading {
	min-width: 0;
}

.dk-app .dk-showroom__title,
.dk-app .dk-seller__title {
	color: var(--text-body);
	font-family: var(--font-fa);
	font-size: 28px;
	font-weight: var(--weight-bold);
	line-height: 1.35;
	margin: 0;
}

.dk-app .dk-seller__title {
	font-size: var(--text-h2);
	margin: var(--space-4) 0 12px;
}

.dk-app .dk-showroom__sub {
	color: var(--text-secondary);
	font-size: var(--text-size-body);
	line-height: var(--lh-body);
	margin: var(--space-1) 0 0;
}

.dk-app .dk-showroom__head .dk-btn {
	flex: 0 0 auto;
}

/* ============================================================================
   ۲. نوار فیلتر — با برچسب‌های دیده‌شونده
   ============================================================================ */

.dk-app .dk-filters {
	align-items: end;
	background: var(--surface-card);
	border: var(--border-width) solid var(--border-default);
	border-radius: var(--radius-md);
	display: grid;
	gap: 12px;
	grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr auto;
	margin: 0 0 var(--space-3);
	padding: var(--space-3);
}

.dk-app .dk-filters__field {
	gap: 6px;
}

.dk-app .dk-filters__actions {
	align-items: center;
	display: flex;
	gap: var(--space-2);
}

.dk-app .dk-filters .dk-input,
.dk-app .dk-filters .dk-select {
	height: 40px;
}

/* ============================================================================
   ۳. فهرست ردیفی خودرو (دسکتاپ)
   ============================================================================ */

.dk-app .dk-list {
	background: var(--surface-card);
	border: var(--border-width) solid var(--border-default);
	border-radius: var(--radius-md);
	margin: 0;
	overflow: hidden;
}

.dk-app .dk-list__head,
.dk-app .dk-row__main {
	align-items: center;
	display: grid;
	gap: var(--space-3);
	grid-template-columns: minmax(0, 1fr) 80px 110px 90px 170px 130px;
	padding: 12px var(--space-3);
}

.dk-app .dk-list__head {
	border-bottom: var(--border-width) solid var(--border-default);
	color: var(--text-secondary);
	font-size: var(--text-label);
	font-weight: var(--weight-semibold);
}

.dk-app .dk-list__head .dk-col--price {
	text-align: left;
}

.dk-app .dk-row + .dk-row {
	border-top: var(--border-width) solid var(--border-default);
}

.dk-app .dk-row__main {
	color: inherit;
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--dur-fast) var(--ease);
}

.dk-app .dk-row__main:hover,
.dk-app .dk-row__main:focus-visible {
	background: var(--surface-brand-wash);
	color: inherit;
	text-decoration: none;
}

.dk-app .dk-row__main:focus-visible {
	outline-offset: calc(var(--focus-offset) * -1);
}

.dk-app .dk-col {
	font-size: var(--text-size-body);
	min-width: 0;
}

.dk-app .dk-row__meta {
	display: contents;
}

.dk-app .dk-col--car {
	align-items: center;
	display: flex;
	gap: 12px;
	min-width: 0;
}

.dk-app .dk-car {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.dk-app .dk-car__name {
	font-size: 15px;
	font-weight: var(--weight-semibold);
	line-height: 1.6;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dk-app .dk-car__trim {
	color: var(--text-secondary);
	font-size: var(--text-label);
	line-height: 1.6;
}

.dk-app .dk-col--qty strong {
	font-weight: var(--weight-medium);
}

.dk-app .dk-col--eta bdi {
	direction: ltr;
	font-family: var(--font-en);
	font-variant-numeric: tabular-nums;
	unicode-bidi: isolate;
	white-space: nowrap;
}

.dk-app .dk-col--price {
	text-align: left;
}

.dk-app .dk-col--price .dk-price {
	font-size: 18px;
	line-height: 1.4;
}

.dk-app .dk-col--price .dk-price--locked {
	font-size: 16px;
}

.dk-app .dk-mlabel {
	display: none;
}

/* دکمهٔ بازکردن جزئیات — دکمهٔ ghost کوچک با فلش */
.dk-app .dk-col--action {
	justify-self: end;
}

.dk-app .dk-toggle {
	align-items: center;
	border-radius: var(--radius-sm);
	color: var(--button-ghost-text);
	display: inline-flex;
	font-size: var(--text-size-body);
	font-weight: var(--weight-semibold);
	gap: var(--space-2);
	height: var(--control-h-sm);
	line-height: 1;
	padding-inline: 12px;
	transition: background-color var(--dur-fast) var(--ease);
	white-space: nowrap;
}

.dk-app .dk-row__main:hover .dk-toggle {
	background: var(--surface-brand-wash-strong);
}

.dk-app .dk-row.is-open .dk-toggle {
	color: var(--text-selected);
}

/* ---- جزئیات موجودی زیر ردیف ---- */

.dk-app .dk-detail {
	background: var(--surface-page);
	border-top: var(--border-width) solid var(--border-default);
	padding: var(--space-3) var(--space-4) 20px;
}

.dk-app .dk-supplies {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;
}

/* سر جزئیات: قاب تصویر ۳:۲ (بدون برش) + عنوان و نام خودرو */
.dk-app .dk-detail__hero {
	align-items: center;
	display: flex;
	gap: var(--space-3);
	margin: 0 0 12px;
}

.dk-app .dk-detail__image {
	flex: 0 0 168px;
	margin: 0;
	width: 168px;
}

.dk-app .dk-detail__meta {
	min-width: 0;
}

.dk-app .dk-detail__hero .dk-supplies__title {
	margin: 0 0 2px;
}

.dk-app .dk-detail__car {
	color: var(--text-body);
	font-size: 15px;
	font-weight: var(--weight-semibold);
	line-height: 1.6;
	margin: 0;
}

.dk-app .dk-supplies__title {
	color: var(--text-secondary);
	font-size: var(--text-label);
	font-weight: var(--weight-semibold);
	line-height: 1.6;
	margin: 0 0 10px;
}

.dk-app .dk-supply-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.dk-app .dk-supply {
	align-items: center;
	background: var(--surface-card);
	border: var(--border-width) solid var(--border-default);
	border-radius: var(--radius-sm);
	display: grid;
	gap: var(--space-3);
	grid-template-columns: minmax(0, 1.3fr) 110px 110px 180px minmax(0, 250px);
	margin: 0;
	padding: 12px var(--space-3);
}

.dk-app .dk-supply--transit {
	grid-template-columns: minmax(0, 1.2fr) 90px 90px 130px minmax(0, 1.4fr) 150px auto;
}

/* هر خانه: برچسب ۱۳ خاکستری بالای مقدار */
.dk-app .dk-supply__loc,
.dk-app .dk-supply__cell {
	display: flex;
	flex-direction: column;
	font-size: var(--text-size-body);
	line-height: 1.6;
	min-width: 0;
}

.dk-app .dk-supply__loc strong {
	font-size: 15px;
	font-weight: var(--weight-semibold);
}

.dk-app .dk-supply__loc small,
.dk-app .dk-supply__cell small {
	color: var(--text-secondary);
	font-size: var(--text-label);
}

.dk-app .dk-supply__cell em,
.dk-app .dk-supply__loc em {
	color: var(--text-secondary);
	font-size: var(--text-label);
	font-style: normal;
	line-height: 1.6;
}

.dk-app .dk-supply__cell--price .dk-price {
	font-size: 16px;
	line-height: 1.6;
}

.dk-app .dk-supply__cell--price .dk-price--locked {
	font-size: 15px;
}

.dk-app .dk-supply__action {
	justify-self: end;
	min-width: 0;
}

.dk-app .dk-request-form {
	align-items: center;
	display: inline-flex;
	gap: var(--space-2);
	margin: 0;
}

.dk-app .dk-qty {
	margin: 0;
}

/* دکمه و ورودی تعداد هم‌قد (۴۰ پیکسل، مطابق طرح) */
.dk-app .dk-request-form .dk-btn {
	height: 40px;
}

.dk-app .dk-qty input {
	appearance: textfield;
	-moz-appearance: textfield;
	background: var(--input-background);
	border: var(--border-width) solid var(--input-border);
	border-radius: var(--radius-sm);
	color: var(--input-text);
	direction: ltr;
	font-family: var(--font-en);
	font-size: 15px;
	font-variant-numeric: tabular-nums;
	height: 40px;
	padding: 0 var(--space-1);
	text-align: center;
	transition: border-color var(--dur-fast) var(--ease);
	width: 56px;
}

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

.dk-app .dk-qty input:hover {
	border-color: var(--input-border-hover);
}

.dk-app .dk-qty input:focus-visible {
	border-color: var(--input-border-focus);
}

.dk-app .dk-qty input[aria-invalid="true"] {
	border-color: var(--input-border-error);
}

.dk-app .dk-request-error {
	color: var(--state-error);
	display: block;
	font-size: var(--text-caption);
	font-weight: var(--weight-medium);
	line-height: var(--lh-caption);
	margin-top: 6px;
	text-align: start;
}

/* پیام نتیجهٔ درخواست جای فرم می‌نشیند */
.dk-app .dk-supply__action .dk-alert {
	margin: 0;
	text-align: start;
	width: 100%;
}

/* ============================================================================
   ۴. فرم‌ها (پنل فروشنده، عضویت، ورود، تقاضا)
   ============================================================================ */

.dk-app .dk-form {
	background: var(--surface-card);
	border: var(--border-width) solid var(--border-default);
	border-radius: var(--radius-md);
	display: grid;
	gap: var(--space-3);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0;
	padding: var(--space-4);
}

.dk-app .dk-form--compact {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dk-app .dk-field--wide {
	grid-column: 1 / -1;
}

.dk-app .dk-field--static {
	background: var(--surface-muted);
	border-radius: var(--radius-sm);
	padding: 12px var(--space-3);
}

.dk-app .dk-field--static strong {
	font-weight: var(--weight-semibold);
}

.dk-app .dk-form__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	grid-column: 1 / -1;
}

.dk-app .dk-form [data-dk-inline-notice] {
	grid-column: 1 / -1;
	margin: 0;
}

/* ============================================================================
   ۵. پنل فروشنده
   ============================================================================ */

.dk-app .dk-list--seller .dk-list__head,
.dk-app .dk-row--seller {
	display: grid;
	gap: 12px;
	grid-template-columns: minmax(160px, 2fr) 1.2fr 1fr 0.6fr 1fr auto;
	padding: 12px var(--space-3);
}

.dk-app .dk-row--seller {
	align-items: center;
	color: inherit;
	cursor: pointer;
	list-style: none;
	transition: background-color var(--dur-fast) var(--ease);
}

.dk-app .dk-row--seller::-webkit-details-marker {
	display: none;
}

.dk-app .dk-row--seller:hover {
	background: var(--surface-brand-wash);
}

.dk-app .dk-row--seller small {
	color: var(--text-secondary);
	display: block;
	font-size: var(--text-label);
}

.dk-app .dk-row--seller .dk-tag {
	margin-top: var(--space-1);
}

.dk-app .dk-row--seller .dk-price {
	font-size: 15px;
}

.dk-app .dk-item {
	border-top: var(--border-width) solid var(--border-default);
}

.dk-app .dk-item:first-of-type {
	border-top: 0;
}

.dk-app .dk-item[open] > summary {
	background: var(--surface-brand-wash);
}

.dk-app .dk-col--toggle {
	color: var(--text-accent);
	justify-self: end;
	list-style: none;
}

.dk-app .dk-item__body {
	background: var(--surface-page);
	border-top: var(--border-width) solid var(--border-default);
	padding: var(--space-3) var(--space-4) var(--space-4);
}

.dk-app .dk-item__title {
	border-bottom: var(--border-width) solid var(--border-default);
	font-size: 15px;
	font-weight: var(--weight-semibold);
	line-height: 1.5;
	margin: var(--space-4) 0 12px;
	padding-bottom: var(--space-2);
}

.dk-app .dk-quick {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) 12px;
}

.dk-app .dk-quick__form {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
}

.dk-app .dk-quick .dk-btn--ghost {
	box-shadow: inset 0 0 0 var(--border-width) var(--border-default);
	color: var(--text-body);
}

.dk-app .dk-quick .dk-btn--ghost:hover {
	background: var(--surface-muted);
}

.dk-app .dk-panel {
	background: var(--surface-card);
	border: var(--border-width) solid var(--border-default);
	border-radius: var(--radius-md);
	margin: var(--space-3) 0 0;
	padding: 0 var(--space-3);
}

.dk-app .dk-panel[open] {
	padding-bottom: var(--space-3);
}

.dk-app .dk-panel__title {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-size: var(--text-h3);
	font-weight: var(--weight-bold);
	gap: var(--space-2);
	line-height: 1.5;
	list-style: none;
	min-height: var(--control-h);
	padding: 12px 0;
}

.dk-app .dk-panel__title::-webkit-details-marker {
	display: none;
}

.dk-app .dk-panel__title::before {
	color: var(--text-accent);
	content: '+';
	display: inline-block;
	font-family: var(--font-en);
	font-weight: var(--weight-bold);
	text-align: center;
	width: 12px;
}

.dk-app .dk-panel[open] .dk-panel__title::before {
	content: '−';
}

.dk-app .dk-panel > .dk-hint {
	margin: 0 0 12px;
}

/* دستگاه‌ها (VIN) */
.dk-app .dk-vins {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dk-app .dk-unit {
	align-items: center;
	border-top: var(--border-width) solid var(--border-default);
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 10px 0;
}

.dk-app .dk-unit:first-child {
	border-top: 0;
}

.dk-app .dk-unit form {
	display: flex;
	gap: var(--space-2);
	margin: 0;
	margin-inline-start: auto;
}

.dk-app .dk-unit__no {
	direction: ltr;
	font-family: var(--font-en);
	font-size: var(--text-size-body);
	font-variant-numeric: tabular-nums;
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-vin);
	text-transform: uppercase;
	unicode-bidi: isolate;
}

.dk-app .dk-unit--done .dk-unit__no {
	color: var(--text-secondary);
	text-decoration: line-through;
}

.dk-app .dk-unit small {
	color: var(--text-secondary);
	font-size: var(--text-label);
}

.dk-app .dk-vin-picker {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.dk-app .dk-vin-pick {
	align-items: center;
	border: var(--border-width) solid var(--border-default);
	border-radius: var(--radius-sm);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--font-en);
	font-size: var(--text-label);
	gap: var(--space-2);
	letter-spacing: 0.04em;
	min-height: var(--touch-min);
	padding: 0 12px;
}

.dk-app .dk-pending-list {
	list-style: none;
	margin: var(--space-2) 0;
	padding: 0;
}

.dk-app .dk-pending-list li {
	font-size: var(--text-size-body);
	padding: 2px 0;
}

/* ============================================================================
   ۶. عضویت و ورود
   ============================================================================ */

.dk-app .dk-steps {
	counter-reset: dk-step;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	list-style: none;
	margin: 0 0 var(--space-4);
	padding: 0;
}

.dk-app .dk-step {
	counter-increment: dk-step;
	height: var(--chip-h-filter);
	margin: 0;
	padding-inline: var(--space-3);
}

.dk-app .dk-step::before {
	content: counter(dk-step) '. ';
	margin-inline-end: var(--space-1);
}

.dk-app .dk-step.is-active {
	background: var(--surface-brand);
	border-color: var(--surface-brand);
	color: var(--text-on-brand);
	font-weight: var(--weight-semibold);
}

.dk-app .dk-step.is-done {
	border-color: var(--state-success);
	color: var(--state-success);
}

.dk-app .dk-summary {
	border-collapse: collapse;
	font-size: var(--text-size-body);
	line-height: 1.6;
	margin: var(--space-3) 0 0;
	width: 100%;
}

.dk-app .dk-summary th,
.dk-app .dk-summary td {
	border-bottom: var(--border-width) solid var(--border-default);
	padding: 10px var(--space-2);
	text-align: start;
}

.dk-app .dk-summary th {
	color: var(--text-secondary);
	font-weight: var(--weight-regular);
	width: 40%;
}

.dk-app .dk-summary td {
	font-weight: var(--weight-medium);
}

.dk-app .dk-resend {
	margin: var(--space-2) 0 0;
}

.dk-app .dk-register > p {
	margin: 0 0 var(--space-3);
}

.dk-app .dk-register .dk-form + .dk-form {
	margin-top: var(--space-3);
}

.dk-app .dk-register .dk-btn + .dk-btn {
	margin-inline-start: var(--space-2);
}

/* ============================================================================
   ۷. تالار تقاضا
   ============================================================================ */

.dk-app .dk-demand-card {
	background: var(--surface-card);
	border: var(--border-width) solid var(--border-default);
	border-radius: var(--radius-md);
	margin: 0 0 var(--space-3);
	padding: var(--space-3);
}

.dk-app .dk-demand-card__head {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-3);
	margin: 0 0 var(--space-2);
}

.dk-app .dk-demand-card__head strong {
	font-size: 15px;
	font-weight: var(--weight-semibold);
}

.dk-app .dk-demand-card .dk-price {
	font-size: 16px;
}

.dk-app .dk-demand-card .dk-form {
	margin-top: 12px;
}

.dk-app .dk-demand-card .dk-supply-list {
	margin-top: var(--space-2);
}

.dk-app .dk-demand-card .dk-supply {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ============================================================================
   ۸. پیشخوان (وضعیت پیامک در تنظیمات)
   ============================================================================ */

.dk-sms-status--simulated,
.dk-sms-status--incomplete {
	color: #9a6700;
}

.dk-sms-status--configured {
	color: #2e7d4f;
}

/* ============================================================================
   ۹. تبلت (تا ۹۰۰): ردیف فشرده، فیلتر سه‌ستونی
   ============================================================================ */

@media (max-width: 900px) {
	.dk-app__nav {
		margin-bottom: var(--space-4);
	}

	.dk-app .dk-filters {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.dk-app .dk-filters__field--search,
	.dk-app .dk-filters__actions {
		grid-column: 1 / -1;
	}

	.dk-app .dk-list__head {
		display: none;
	}

	/* هر خودرو یک خط فشرده: تصویر، نام و تیپ، قیمت، فلش؛ زیرش یک خط متا. */
	.dk-app .dk-row__main,
	.dk-app .dk-row__main--transit {
		align-items: center;
		column-gap: 10px;
		display: grid;
		grid-template-columns: 66px minmax(0, 1fr) auto auto;
		grid-template-rows: auto auto;
		padding: 10px 12px;
		row-gap: 2px;
	}

	.dk-app .dk-col--car {
		display: contents;
	}

	.dk-app .dk-thumb {
		grid-column: 1;
		grid-row: 1 / 3;
		height: 44px;
		width: 66px;
	}

	.dk-app .dk-thumb .dk-thumb__label {
		display: none;
	}

	.dk-app .dk-thumb .dk-thumb__icon {
		height: 18px;
		width: 18px;
	}

	.dk-app .dk-car {
		align-items: baseline;
		column-gap: 6px;
		flex-direction: row;
		flex-wrap: wrap;
		grid-column: 2;
		grid-row: 1;
	}

	.dk-app .dk-car__name {
		font-size: var(--text-size-body);
		line-height: 1.5;
	}

	.dk-app .dk-car__trim {
		line-height: 1.5;
	}

	.dk-app .dk-row__meta {
		color: var(--text-secondary);
		column-gap: 6px;
		display: flex;
		flex-wrap: wrap;
		font-size: var(--text-label);
		grid-column: 2 / 4;
		grid-row: 2;
		line-height: 1.5;
	}

	.dk-app .dk-row__meta .dk-col {
		font-size: var(--text-label);
	}

	.dk-app .dk-row__meta .dk-col + .dk-col::before {
		content: '·';
		margin-inline-end: 6px;
	}

	.dk-app .dk-row__meta strong {
		font-weight: var(--weight-medium);
	}

	.dk-app .dk-col--price {
		grid-column: 3;
		grid-row: 1;
	}

	.dk-app .dk-col--price .dk-price {
		font-size: 15px;
	}

	.dk-app .dk-col--price .dk-price--locked {
		font-size: var(--text-size-body);
	}

	.dk-app .dk-col--action {
		grid-column: 4;
		grid-row: 1 / 3;
	}

	/* کنترل باز/بسته‌کردن روی موبایل: مربع ۳۶ با حاشیه و فلش کبالت، همیشه دیدنی */
	.dk-app .dk-toggle {
		box-shadow: inset 0 0 0 var(--border-width) var(--border-default);
		color: var(--text-accent);
		height: 36px;
		justify-content: center;
		padding: 0;
		width: 36px;
	}

	.dk-app .dk-row__main:hover .dk-toggle {
		background: var(--surface-brand-wash);
	}

	.dk-app .dk-row.is-open .dk-toggle {
		background: var(--surface-selected);
		box-shadow: inset 0 0 0 var(--border-width) var(--border-accent);
	}

	.dk-app .dk-detail__image {
		flex-basis: 120px;
		width: 120px;
	}

	.dk-app .dk-toggle__text {
		display: none;
	}

	/* جزئیات موجودی: کارت‌های فشرده — محل و قیمت در خط اول، مشخصات در خط دوم */
	.dk-app .dk-detail {
		padding: 12px;
	}

	.dk-app .dk-supply,
	.dk-app .dk-supply--transit {
		align-items: baseline;
		gap: var(--space-2) 12px;
		grid-template-columns: minmax(0, 1fr) auto;
		padding: 12px;
	}

	.dk-app .dk-supply__loc {
		grid-column: 1;
		grid-row: 1;
	}

	.dk-app .dk-supply__loc strong {
		font-size: var(--text-size-body);
	}

	.dk-app .dk-supply__loc em {
		display: none;
	}

	.dk-app .dk-supply__cell--price {
		align-items: flex-end;
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
	}

	.dk-app .dk-supply__cell--price em {
		order: 2;
	}

	.dk-app .dk-supply__cell--price .dk-price {
		font-size: 15px;
	}

	.dk-app .dk-supply__cell {
		flex-direction: row;
		flex-wrap: wrap;
		font-size: var(--text-label);
		gap: var(--space-1);
	}

	/* یادداشت پرداخت/مبدأ زیر مقدار، نه کنار آن */
	.dk-app .dk-supply__cell small,
	.dk-app .dk-supply__loc small {
		flex-basis: 100%;
	}

	.dk-app .dk-supply__cell:not(.dk-supply__cell--price) em::after {
		content: ':';
	}

	.dk-app .dk-supply__cell--price {
		flex-direction: column;
		gap: 0;
	}

	.dk-app .dk-supply__cell small {
		flex: 1 0 100%;
	}

	.dk-app .dk-supply--transit .dk-supply__cell:nth-child(5) {
		grid-column: 1 / -1;
	}

	.dk-app .dk-supply__action {
		grid-column: 1 / -1;
		justify-self: stretch;
	}

	.dk-app .dk-request-form {
		display: flex;
	}

	.dk-app .dk-request-form .dk-btn {
		flex: 1 1 auto;
	}

	.dk-app .dk-supply__action:empty {
		display: none;
	}

	/* پنل فروشنده */
	.dk-app .dk-list--seller .dk-list__head {
		display: none;
	}

	.dk-app .dk-row--seller {
		grid-template-columns: 1fr 1fr;
		row-gap: var(--space-2);
	}

	.dk-app .dk-col--toggle {
		border-top: var(--border-width) solid var(--border-default);
		grid-column: 1 / -1;
		justify-self: stretch;
		padding-top: 10px;
	}

	.dk-app .dk-col--toggle .dk-toggle {
		color: var(--text-accent);
		display: flex;
		justify-content: space-between;
		width: 100%;
	}

	.dk-app .dk-col--toggle .dk-toggle__text {
		display: inline;
	}

	.dk-app .dk-item__body {
		padding: var(--space-3);
	}

	.dk-app .dk-form,
	.dk-app .dk-form--compact {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding: var(--space-3);
	}

	.dk-app .dk-demand-card .dk-supply {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container dkapp (max-width: 900px) {
	.dk-app .dk-filters {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.dk-app .dk-filters__field--search,
	.dk-app .dk-filters__actions {
		grid-column: 1 / -1;
	}

	.dk-app .dk-list__head {
		display: none;
	}

	.dk-app .dk-row__main,
	.dk-app .dk-row__main--transit {
		align-items: center;
		column-gap: 10px;
		display: grid;
		grid-template-columns: 66px minmax(0, 1fr) auto auto;
		grid-template-rows: auto auto;
		padding: 10px 12px;
		row-gap: 2px;
	}

	.dk-app .dk-col--car {
		display: contents;
	}

	.dk-app .dk-thumb {
		grid-column: 1;
		grid-row: 1 / 3;
		height: 44px;
		width: 66px;
	}

	.dk-app .dk-thumb .dk-thumb__label {
		display: none;
	}

	.dk-app .dk-thumb .dk-thumb__icon {
		height: 18px;
		width: 18px;
	}

	.dk-app .dk-car {
		align-items: baseline;
		column-gap: 6px;
		flex-direction: row;
		flex-wrap: wrap;
		grid-column: 2;
		grid-row: 1;
	}

	.dk-app .dk-car__name {
		font-size: var(--text-size-body);
		line-height: 1.5;
	}

	.dk-app .dk-car__trim {
		line-height: 1.5;
	}

	.dk-app .dk-row__meta {
		color: var(--text-secondary);
		column-gap: 6px;
		display: flex;
		flex-wrap: wrap;
		font-size: var(--text-label);
		grid-column: 2 / 4;
		grid-row: 2;
		line-height: 1.5;
	}

	.dk-app .dk-row__meta .dk-col {
		font-size: var(--text-label);
	}

	.dk-app .dk-row__meta .dk-col + .dk-col::before {
		content: '·';
		margin-inline-end: 6px;
	}

	.dk-app .dk-row__meta strong {
		font-weight: var(--weight-medium);
	}

	.dk-app .dk-col--price {
		grid-column: 3;
		grid-row: 1;
	}

	.dk-app .dk-col--price .dk-price {
		font-size: 15px;
	}

	.dk-app .dk-col--price .dk-price--locked {
		font-size: var(--text-size-body);
	}

	.dk-app .dk-col--action {
		grid-column: 4;
		grid-row: 1 / 3;
	}

	/* کنترل باز/بسته‌کردن روی موبایل: مربع ۳۶ با حاشیه و فلش کبالت، همیشه دیدنی */
	.dk-app .dk-toggle {
		box-shadow: inset 0 0 0 var(--border-width) var(--border-default);
		color: var(--text-accent);
		height: 36px;
		justify-content: center;
		padding: 0;
		width: 36px;
	}

	.dk-app .dk-row__main:hover .dk-toggle {
		background: var(--surface-brand-wash);
	}

	.dk-app .dk-row.is-open .dk-toggle {
		background: var(--surface-selected);
		box-shadow: inset 0 0 0 var(--border-width) var(--border-accent);
	}

	.dk-app .dk-detail__image {
		flex-basis: 120px;
		width: 120px;
	}

	.dk-app .dk-toggle__text {
		display: none;
	}

	.dk-app .dk-detail {
		padding: 12px;
	}

	.dk-app .dk-supply,
	.dk-app .dk-supply--transit {
		align-items: baseline;
		gap: var(--space-2) 12px;
		grid-template-columns: minmax(0, 1fr) auto;
		padding: 12px;
	}

	.dk-app .dk-supply__loc {
		grid-column: 1;
		grid-row: 1;
	}

	.dk-app .dk-supply__loc strong {
		font-size: var(--text-size-body);
	}

	.dk-app .dk-supply__loc em {
		display: none;
	}

	.dk-app .dk-supply__cell--price {
		align-items: flex-end;
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
	}

	.dk-app .dk-supply__cell--price em {
		order: 2;
	}

	.dk-app .dk-supply__cell--price .dk-price {
		font-size: 15px;
	}

	.dk-app .dk-supply__cell {
		flex-direction: row;
		flex-wrap: wrap;
		font-size: var(--text-label);
		gap: var(--space-1);
	}

	/* یادداشت پرداخت/مبدأ زیر مقدار، نه کنار آن */
	.dk-app .dk-supply__cell small,
	.dk-app .dk-supply__loc small {
		flex-basis: 100%;
	}

	.dk-app .dk-supply__cell:not(.dk-supply__cell--price) em::after {
		content: ':';
	}

	.dk-app .dk-supply__cell--price {
		flex-direction: column;
		gap: 0;
	}

	.dk-app .dk-supply__cell small {
		flex: 1 0 100%;
	}

	.dk-app .dk-supply--transit .dk-supply__cell:nth-child(5) {
		grid-column: 1 / -1;
	}

	.dk-app .dk-supply__action {
		grid-column: 1 / -1;
		justify-self: stretch;
	}

	.dk-app .dk-request-form {
		display: flex;
	}

	.dk-app .dk-request-form .dk-btn {
		flex: 1 1 auto;
	}

	.dk-app .dk-supply__action:empty {
		display: none;
	}

	.dk-app .dk-list--seller .dk-list__head {
		display: none;
	}

	.dk-app .dk-row--seller {
		grid-template-columns: 1fr 1fr;
		row-gap: var(--space-2);
	}

	.dk-app .dk-col--toggle {
		border-top: var(--border-width) solid var(--border-default);
		grid-column: 1 / -1;
		justify-self: stretch;
		padding-top: 10px;
	}

	.dk-app .dk-col--toggle .dk-toggle {
		color: var(--text-accent);
		display: flex;
		justify-content: space-between;
		width: 100%;
	}

	.dk-app .dk-col--toggle .dk-toggle__text {
		display: inline;
	}

	.dk-app .dk-item__body {
		padding: var(--space-3);
	}

	.dk-app .dk-form,
	.dk-app .dk-form--compact {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding: var(--space-3);
	}

	.dk-app .dk-demand-card .dk-supply {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ============================================================================
   ۱۰. موبایل (تا ۶۰۰)
   ============================================================================ */

@media (max-width: 600px) {
	.dk-app {
		font-size: 15px;
	}

	.dk-app__nav {
		margin-bottom: var(--space-3);
	}

	.dk-app__nav-inner {
		gap: var(--space-3);
		padding-inline: 0;
	}

	.dk-app .dk-app__link {
		font-size: var(--text-label);
		height: var(--touch-min);
	}

	/* سه تب در ۳۷۵ پیکسل: شمارنده بدون واژهٔ «دستگاه»، فاصلهٔ کمتر */
	.dk-app .dk-tabs {
		gap: var(--space-3);
	}

	.dk-app .dk-tab__unit {
		display: none;
	}

	.dk-app__account {
		display: none;
	}

	.dk-app .dk-showroom__head {
		align-items: flex-start;
		flex-direction: column;
		gap: var(--space-2);
		margin-bottom: var(--space-3);
	}

	.dk-app .dk-showroom__title {
		font-size: 22px;
		line-height: 1.4;
	}

	.dk-app .dk-showroom__sub {
		font-size: var(--text-label);
		line-height: 1.7;
	}

	.dk-app .dk-seller__title {
		font-size: 20px;
	}

	.dk-app .dk-tabs {
		margin-bottom: 12px;
	}

	.dk-app .dk-notice,
	.dk-app .dk-alert {
		font-size: var(--text-label);
		margin-bottom: 12px;
		padding: 12px;
	}

	/* فیلترها: جست‌وجو تمام‌عرض، چهار فهرست دوتا‌دوتا، ترتیب کنار دکمه‌ها */
	.dk-app .dk-filters {
		gap: 10px;
		grid-template-areas:
			'q q'
			'brand year'
			'color loc'
			'sort actions';
		grid-template-columns: 1fr 1fr;
		margin-bottom: 12px;
		padding: 12px;
	}

	.dk-app .dk-filters__field--search { grid-area: q; }
	.dk-app .dk-filters__field--brand { grid-area: brand; }
	.dk-app .dk-filters__field--year { grid-area: year; }
	.dk-app .dk-filters__field--color { grid-area: color; }
	.dk-app .dk-filters__field--loc { grid-area: loc; }
	.dk-app .dk-filters__field--sort { grid-area: sort; }
	.dk-app .dk-filters__actions { grid-area: actions; }

	.dk-app .dk-filters__actions {
		align-self: end;
	}

	.dk-app .dk-filters__actions .dk-btn--ghost {
		padding-inline: var(--space-2);
	}

	.dk-app .dk-filters .dk-btn {
		height: 40px;
	}

	.dk-app .dk-state {
		padding: var(--space-5) var(--space-3);
	}

	.dk-app .dk-form,
	.dk-app .dk-form--compact {
		grid-template-columns: 1fr;
		padding: var(--space-3);
	}

	.dk-app .dk-form__actions .dk-btn--primary {
		flex: 1 1 100%;
	}

	.dk-app .dk-quick .dk-btn {
		flex: 1 1 auto;
	}

	.dk-app .dk-unit form {
		flex: 1 0 100%;
		margin-inline-start: 0;
	}

	.dk-app .dk-unit form .dk-btn {
		flex: 1 1 0;
	}

	.dk-app .dk-summary th {
		width: 50%;
	}

	.dk-app .dk-demand-card .dk-supply {
		grid-template-columns: 1fr;
	}
}

@container dkapp (max-width: 600px) {
	.dk-app {
		font-size: 15px;
	}

	.dk-app .dk-showroom__head {
		align-items: flex-start;
		flex-direction: column;
		gap: var(--space-2);
		margin-bottom: var(--space-3);
	}

	.dk-app .dk-showroom__title {
		font-size: 22px;
		line-height: 1.4;
	}

	.dk-app .dk-showroom__sub {
		font-size: var(--text-label);
		line-height: 1.7;
	}

	.dk-app .dk-seller__title {
		font-size: 20px;
	}

	.dk-app .dk-tabs {
		margin-bottom: 12px;
	}

	.dk-app .dk-notice,
	.dk-app .dk-alert {
		font-size: var(--text-label);
		margin-bottom: 12px;
		padding: 12px;
	}

	.dk-app .dk-filters {
		gap: 10px;
		grid-template-areas:
			'q q'
			'brand year'
			'color loc'
			'sort actions';
		grid-template-columns: 1fr 1fr;
		margin-bottom: 12px;
		padding: 12px;
	}

	.dk-app .dk-filters__field--search { grid-area: q; }
	.dk-app .dk-filters__field--brand { grid-area: brand; }
	.dk-app .dk-filters__field--year { grid-area: year; }
	.dk-app .dk-filters__field--color { grid-area: color; }
	.dk-app .dk-filters__field--loc { grid-area: loc; }
	.dk-app .dk-filters__field--sort { grid-area: sort; }
	.dk-app .dk-filters__actions { grid-area: actions; }

	.dk-app .dk-filters__actions {
		align-self: end;
	}

	.dk-app .dk-filters__actions .dk-btn--ghost {
		padding-inline: var(--space-2);
	}

	.dk-app .dk-filters .dk-btn {
		height: 40px;
	}

	.dk-app .dk-state {
		padding: var(--space-5) var(--space-3);
	}

	.dk-app .dk-form,
	.dk-app .dk-form--compact {
		grid-template-columns: 1fr;
		padding: var(--space-3);
	}

	.dk-app .dk-form__actions .dk-btn--primary {
		flex: 1 1 100%;
	}

	.dk-app .dk-quick .dk-btn {
		flex: 1 1 auto;
	}

	.dk-app .dk-unit form {
		flex: 1 0 100%;
		margin-inline-start: 0;
	}

	.dk-app .dk-unit form .dk-btn {
		flex: 1 1 0;
	}

	.dk-app .dk-summary th {
		width: 50%;
	}

	.dk-app .dk-demand-card .dk-supply {
		grid-template-columns: 1fr;
	}
}

/* ===========================================================================
   راهنمای قیمت تقریبی (۱.۶.۰) — همان اجزای فهرست تالار فروش با ستون‌های خودش.
   هیچ رنگ یا اندازه خامی این‌جا نیست؛ فقط توکن‌های سطح B.
   =========================================================================== */

.dk-app .dk-guide__cta {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
}

.dk-app .dk-guide__link {
	font-size: var(--text-label);
}

.dk-app .dk-list--guide .dk-list__head,
.dk-app .dk-row__main--guide {
	grid-template-columns: minmax(0, 1.4fr) 64px minmax(0, 160px) minmax(0, 230px) 110px 120px;
}

.dk-app .dk-list--guide-model .dk-list__head,
.dk-app .dk-list--guide-model .dk-row__main--guide {
	grid-template-columns: 64px minmax(0, 200px) minmax(0, 260px) 130px 140px;
}

.dk-app .dk-list--guide-plain .dk-list__head,
.dk-app .dk-list--guide-plain .dk-row__main--guide {
	grid-template-columns: 64px minmax(0, 220px) minmax(0, 280px) 140px;
}

.dk-app .dk-guide__hero {
	margin: 0 0 var(--space-4);
	max-width: 360px;
}

.dk-app .dk-row__main--guide {
	align-items: start;
	cursor: default;
}

.dk-app .dk-row__main--guide:hover {
	background: transparent;
}

.dk-app .dk-row--guide .dk-col {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.dk-app .dk-row--guide .dk-col--car {
	align-items: center;
	flex-direction: row;
	gap: 12px;
}

.dk-app .dk-guide__band {
	align-items: baseline;
	color: var(--text-body);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
}

.dk-app .dk-guide__band .dk-price {
	font-size: var(--text-h3);
}

.dk-app .dk-guide__sep {
	color: var(--text-secondary);
}

.dk-app .dk-guide__state {
	color: var(--text-secondary);
	font-size: var(--text-size-body);
}

.dk-app .dk-guide__meta,
.dk-app .dk-guide__basis,
.dk-app .dk-guide__history {
	color: var(--text-secondary);
	display: block;
	font-size: var(--text-caption);
	line-height: var(--lh-caption);
}

.dk-app .dk-row--guide .dk-col--action {
	align-items: flex-start;
	justify-self: start;
}

.dk-app .dk-row--guide .dk-col--stock .dk-tag {
	align-self: flex-start;
}

@media (max-width: 900px) {
	.dk-app .dk-list--guide .dk-list__head {
		display: none;
	}

	/* یک ستون: هر خانه یک خط کامل، با برچسب بالای مقدار. */
	.dk-app .dk-list--guide .dk-list__head,
	.dk-app .dk-list--guide-model .dk-list__head,
	.dk-app .dk-list--guide-plain .dk-list__head {
		display: none;
	}

	.dk-app .dk-row__main--guide,
	.dk-app .dk-list--guide-model .dk-row__main--guide,
	.dk-app .dk-list--guide-plain .dk-row__main--guide {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto;
		padding: 12px;
		row-gap: var(--space-2);
	}

	.dk-app .dk-row--guide .dk-col {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	.dk-app .dk-row--guide .dk-thumb {
		grid-column: auto;
		grid-row: auto;
		flex: 0 0 auto;
	}

	.dk-app .dk-row--guide .dk-car {
		grid-column: auto;
		grid-row: auto;
		flex: 1 1 auto;
	}

	.dk-app .dk-row--guide .dk-col--action {
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--space-3);
	}

	.dk-app .dk-row--guide .dk-mlabel {
		color: var(--text-secondary);
		display: block;
		font-size: var(--text-caption);
		font-style: normal;
	}
}

@container dkapp (max-width: 900px) {
	.dk-app .dk-list--guide .dk-list__head {
		display: none;
	}

	/* یک ستون: هر خانه یک خط کامل، با برچسب بالای مقدار. */
	.dk-app .dk-list--guide .dk-list__head,
	.dk-app .dk-list--guide-model .dk-list__head,
	.dk-app .dk-list--guide-plain .dk-list__head {
		display: none;
	}

	.dk-app .dk-row__main--guide,
	.dk-app .dk-list--guide-model .dk-row__main--guide,
	.dk-app .dk-list--guide-plain .dk-row__main--guide {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto;
		padding: 12px;
		row-gap: var(--space-2);
	}

	.dk-app .dk-row--guide .dk-col {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	.dk-app .dk-row--guide .dk-thumb {
		grid-column: auto;
		grid-row: auto;
		flex: 0 0 auto;
	}

	.dk-app .dk-row--guide .dk-car {
		grid-column: auto;
		grid-row: auto;
		flex: 1 1 auto;
	}

	.dk-app .dk-row--guide .dk-col--action {
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--space-3);
	}

	.dk-app .dk-row--guide .dk-mlabel {
		color: var(--text-secondary);
		display: block;
		font-size: var(--text-caption);
		font-style: normal;
	}
}
