/* ==========================================================================
   «Прямые поставки из Китая» «как приложение» (29.09.2026) —
   pages/china-shop.blade.php (/china, корень .china-page). Подключён ПОСЛЕ
   встроенного <style> страницы и перекрывает его.
   Телефон (≤768) — china_shop_screen.dart приложения: шапка page-mhead
   «Прямые поставки из Китая» 18/600, лист light 20/24/20, карточка магазина
   белая r20 (аватар 64 круглый, бейджи в ряд), «О магазине» отдельной
   карточкой, «Товары магазина» + счётчик, подкатегории чипами в ленте с
   прокруткой вбок, сетка 2 колонки (10 / 30), карточка — прежняя (фото r20,
   как ItemCardTile). Экран в приложении поверх таббара — нижнего меню нет.
   ПК (≥769) — прежняя раскладка (сайдбар 280 | сетка) в новом стиле:
   фон light, белые карточки r24, сайдбар «липкий» top 144.
   Логика прежняя: .is-open (скрипт страницы), .is-active, ссылки
   ?subcategory=, «← Все товары» только при выбранной подкатегории.
   ========================================================================== */

.china-page {
	--page-gutter: 15px; /* боковой отступ .container — для page-mhead */
}

/* --------------------------------------------------------------------------
   ОБЩЕЕ (все ширины)
   -------------------------------------------------------------------------- */

/* аватар круглый; без фото — флаг 48×32 r4 на light (ChinaFlagMark) */
.china-page .china-store-avatar {
	border: 0;
	border-radius: 50%;
	background: var(--light);
}

.china-page .china-store-avatar svg {
	width: 48px;
	height: 32px;
	border-radius: 4px;
	box-shadow: 0 1px 4px rgb(0 0 0 / 15%); /* как .china-flag-mark */
}

.china-page .china-store-name {
	color: var(--black);
}

/* бейджи — violet 8 %, текст violet */
.china-page .china-store-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 32px;
	padding: 0 12px;
	border-radius: 999px;
	background: var(--card-lilac);
	background: color-mix(in srgb, var(--accent) 8%, transparent);
	color: var(--accent);
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	white-space: nowrap;
}

/* «О магазине»: заголовок 16/600, подпись 12/500 labelGray над значением
   13/600, описание 13/500 (china_shop_screen.dart _about / _row) */
.china-page .china-store-meta {
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	color: var(--label-gray);
}

.china-page .china-store-meta div {
	margin: 0;
}

/* нет ни адреса, ни телефона, ни описания — блока нет (как в приложении) */
.china-page .china-store-meta:not(:has(.cn-meta-row, .cn-meta-desc)) {
	display: none;
}

.china-page .cn-about-title {
	font-size: 16px;
	font-weight: 600;
	line-height: 20px;
	color: var(--black);
}

.china-page .cn-meta-row b {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	font-weight: 600;
	line-height: 18px;
	color: var(--black);
}

.china-page .cn-meta-desc {
	font-size: 13px;
	font-weight: 500;
	line-height: 18px;
	color: var(--black);
	white-space: pre-line; /* переносы строк описания */
}

/* «Товары магазина» + счётчик */
.china-page .china-section-title {
	margin: 0;
	color: var(--black);
}


/* пусто — тихий текст по центру (как в приложении) */
.china-page .china-empty {
	padding: 40px 20px;
	border-radius: 0;
	background: none;
	text-align: center;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	color: rgb(22 14 24 / 40%); /* black 40 % */
}

/* пагинация: кнопки 44, r12, белые, текущая фиолетовая (как listing-v2) */
.china-page .pagination {
	gap: 8px;
	margin: 32px auto 0;
}

.china-page .pagination a {
	min-width: 44px;
	height: 44px;
	padding: 0 6px;
	border-radius: 12px;
	background: var(--white);
	font-size: 15px;
	font-weight: 600;
}

.china-page .pagination .active a {
	background: var(--accent);
	color: var(--white);
}

.china-page .pagination li:not(.active) a:hover {
	background: var(--card-lilac);
}

/* ==========================================================================
   ПК (≥769) — сайдбар + сетка, белые карточки r24 на светлом фоне
   ========================================================================== */
@media (min-width: 769px) {
	body:has(.china-page) {
		background: var(--light);
	}

	.china-page {
		padding: 24px 0 60px;
	}

	/* --- магазин: одна белая карточка (шапка магазина + «О магазине») --- */
	.china-page .cn-store {
		padding: 24px;
		border-radius: 24px;
		background: var(--white);
	}

	.china-page .china-store-card {
		display: grid;
		grid-template-columns: 80px minmax(0, 1fr) auto;
		align-items: center;
		gap: 16px 20px;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
	}

	.china-page .china-store-avatar {
		width: 80px;
		height: 80px;
	}

	.china-page .china-store-name {
		margin: 0;
		font-size: 28px;
		font-weight: 700;
		line-height: 1.2;
		letter-spacing: -0.4px;
		word-break: break-word;
	}

	.china-page .china-store-role {
		margin: 6px 0 0;
		font-size: 14px;
		font-weight: 500;
		line-height: 1.4;
		color: var(--gray);
	}

	.china-page .china-store-actions {
		gap: 8px;
		margin: 0;
	}

	.china-page .china-store-badge {
		height: 36px;
		padding: 0 16px;
		font-size: 14px;
		font-weight: 600;
		line-height: 1;
	}

	/* «О магазине» — под чертой: адрес и телефон в ряд, описание ниже */
	.china-page .china-store-meta {
		display: flex;
		flex-wrap: wrap;
		gap: 14px 48px;
		margin-top: 20px;
		padding-top: 20px;
		border-top: 1px solid var(--card-lilac);
		font-size: 13px;
	}

	.china-page .cn-about-title,
	.china-page .cn-meta-desc {
		flex: 0 0 100%;
	}

	.china-page .cn-meta-row b {
		margin-top: 4px;
		font-size: 15px;
		line-height: 20px;
	}

	.china-page .cn-meta-desc {
		max-width: 860px;
		font-size: 14px;
		line-height: 1.55;
	}

	/* --- раскладка: сайдбар слева (на всех ширинах ПК, не только > 900) --- */
	.china-page .china-grid-layout {
		grid-template-columns: 280px minmax(0, 1fr);
		gap: 24px;
		margin-top: 24px;
	}

	/* сайдбар — белая карточка, «липкий» под шапкой 124 */
	.china-page .china-sidebar {
		position: sticky;
		top: 144px;
		padding: 20px 16px;
		border: 0;
		border-radius: 24px;
		background: var(--white);
	}

	.china-page .china-sidebar-title {
		margin: 0 0 12px;
		padding: 0 8px;
		font-size: 18px;
		font-weight: 700;
		line-height: 1.2;
		letter-spacing: 0;
		text-transform: none;
		color: var(--black);
	}

	.china-page .china-sidebar-reset {
		display: flex;
		align-items: center;
		height: 40px;
		margin: 0 0 8px;
		padding: 0 12px;
		border-radius: 12px;
		background: var(--light);
		color: var(--accent);
		font-size: 14px;
		font-weight: 600;
	}

	.china-page .china-sidebar-reset:hover {
		background: var(--card-lilac);
	}

	.china-page .china-sidebar-cat {
		margin: 0 0 4px;
	}

	.china-page .china-sidebar-cat-head {
		min-height: 48px;
		padding: 8px;
		gap: 12px;
		border-radius: 14px;
		color: var(--black);
		font-size: 15px;
		font-weight: 500;
	}

	.china-page .china-sidebar-cat-head:hover,
	.china-page .china-sidebar-cat.is-open .china-sidebar-cat-head {
		background: var(--light);
		color: var(--black);
	}

	.china-page .china-sidebar-cat.is-open .china-sidebar-cat-head {
		font-weight: 600;
	}

	.china-page .china-sidebar-icon {
		width: 32px;
		height: 32px;
	}

	.china-page .china-sidebar-arrow {
		border-left-color: var(--label-gray);
	}

	.china-page .china-sidebar-cat-head:hover .china-sidebar-arrow {
		border-left-color: var(--black);
	}

	.china-page .china-sidebar-cat.is-open .china-sidebar-arrow {
		border-left-color: var(--accent);
	}

	/* подкатегории (показ по .is-open — прежний) */
	.china-page .china-subcats {
		padding: 4px 0 8px 52px;
	}

	.china-page .china-subcats a {
		padding: 8px 12px;
		border: 0;
		border-radius: 10px;
		font-size: 14px;
		font-weight: 500;
		line-height: 18px;
		color: rgb(22 14 24 / 70%); /* black 70 % */
	}

	.china-page .china-subcats a:hover {
		background: var(--light);
		color: var(--black);
	}

	.china-page .china-subcats a.is-active,
	.china-page .china-subcats a.is-active:hover {
		background: var(--card-lilac);
		background: color-mix(in srgb, var(--accent) 8%, transparent);
		color: var(--accent);
		font-weight: 600;
	}

	/* --- область товаров — белая карточка, пагинация под ней --- */
	.china-page .cn-items-card {
		padding: 24px;
		border-radius: 24px;
		background: var(--white);
	}

	.china-page .china-breadcrumbs {
		gap: 8px;
		margin: 0 0 12px;
		font-size: 14px;
		color: var(--gray);
	}

	.china-page .china-breadcrumbs .sep {
		color: var(--light-gray);
	}

	.china-page .china-breadcrumbs .active {
		color: var(--accent);
		font-weight: 500;
	}

	.china-page .china-section-title {
		font-size: 28px;
		font-weight: 700;
		line-height: 1.2;
		letter-spacing: -0.3px;
	}


	.china-page .cn-items-card .posts-grid,
	.china-page .cn-items-card .china-empty {
		margin-top: 24px;
	}

	.china-page .china-empty {
		padding: 48px 20px 24px;
	}

	/* --- сетка и карточка — как на новой главной (listing-v2 / home-v2) --- */
	.china-page .posts-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 28px 20px;
	}

	.china-page .post-item {
		display: flex;
		flex-direction: column;
	}

	.china-page .post-item-image {
		border-radius: 20px;
	}

	.china-page .post-item-title {
		order: 1;
		margin-top: 12px;
		font-size: 16px;
		font-weight: 500;
	}

	.china-page .post-item-location {
		order: 2;
		margin-top: 2px;
	}

	.china-page .post-item-pair {
		order: 3;
		margin-top: 6px;
	}

	.china-page .post-item-price {
		font-size: 22px;
		font-weight: 700;
	}
}

/* карточки уже — «Цена не указана» 22 px переносилась на две строки */
@media (min-width: 769px) and (max-width: 1200px) {
	.china-page .post-item-price {
		font-size: 18px;
	}
}

@media (min-width: 769px) and (max-width: 992px) {
	.china-page .cn-store,
	.china-page .cn-items-card {
		padding: 20px;
	}

	.china-page .china-grid-layout {
		grid-template-columns: 240px minmax(0, 1fr);
		gap: 20px;
	}

	.china-page .china-sidebar {
		padding: 16px 12px;
	}

	.china-page .china-subcats {
		padding-left: 44px;
	}
}

/* узкий ПК: бейджи — строкой под названием; сетка — 2 колонки */
@media (min-width: 769px) and (max-width: 900px) {
	.china-page .china-store-card {
		grid-template-columns: 80px minmax(0, 1fr);
	}

	.china-page .china-store-actions {
		grid-column: 2;
		justify-content: flex-start;
	}

	.china-page .posts-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ==========================================================================
   ТЕЛЕФОН (≤768) — china_shop_screen.dart
   ========================================================================== */
@media (max-width: 768px) {
	body:has(.china-page),
	main.content:has(.china-page) {
		background: var(--light);
	}

	/* в приложении экран поверх таббара — нижнего меню нет (как у профиля
	   продавца); запас подвала под меню не нужен */
	body:has(.china-page) .mobile-menu {
		display: none;
	}

	body:has(.china-page) .footer {
		margin-bottom: max(24px, env(safe-area-inset-bottom));
	}

	.china-page {
		padding: 0 0 40px;
	}

	/* шапка: заголовок 18/600, под рядом 16 + скругление листа 24 */
	.china-page .page-mhead {
		padding-bottom: 40px;
	}

	.china-page .page-mhead__title {
		min-width: 0;
		overflow: hidden;
		font-size: 18px;
		line-height: 20px;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	/* лист: 20 / 24 / 20 */
	.china-page .page-msheet {
		padding-top: 24px;
	}

	/* --- карточка магазина: белая r20, p16 --- */
	.china-page .china-store-card {
		flex-wrap: wrap;
		align-items: center;
		gap: 0;
		padding: 16px;
		border: 0;
		border-radius: 20px;
		background: var(--white);
	}

	.china-page .china-store-avatar {
		width: 64px;
		height: 64px;
		margin-right: 12px;
	}

	.china-page .china-store-info {
		flex: 1 1 0;
		min-width: 0;
	}

	.china-page .china-store-name {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		margin: 0;
		font-size: 20px;
		font-weight: 600;
		line-height: 24px;
		word-break: break-word;
	}

	.china-page .china-store-role {
		margin: 4px 0 0;
		font-size: 12px;
		font-weight: 500;
		line-height: 16px;
		color: rgb(22 14 24 / 40%); /* black 40 % */
	}

	/* бейджи — ряд во всю ширину, зазор 8; на узком экране подпись
	   чуть ужимается (FittedBox приложения), а не обрезается */
	.china-page .china-store-actions {
		display: flex;
		flex-wrap: nowrap;
		gap: 8px;
		width: 100%;
		margin: 12px 0 0;
	}

	.china-page .china-store-badge {
		display: block;
		flex: 1 1 auto;
		min-width: 0;
		padding: 0 8px;
		overflow: hidden;
		text-align: center;
		text-overflow: ellipsis;
		font-size: min(12px, 3.2vw);
		line-height: 32px;
	}

	/* --- «О магазине» — отдельная белая карточка r20, p16 --- */
	.china-page .china-store-meta {
		margin-top: 12px;
		padding: 16px;
		border-radius: 20px;
		background: var(--white);
	}

	.china-page .china-store-meta .cn-meta-row {
		margin-top: 10px;
	}

	.china-page .china-store-meta .cn-about-title + .cn-meta-row,
	.china-page .china-store-meta .cn-meta-desc {
		margin-top: 12px;
	}

	/* --- товары: заголовок + счётчик, чипы, сетка — одной колонкой;
	   заголовок встаёт над чипами (order), крошек нет --- */
	.china-page .china-grid-layout {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin-top: 24px;
	}

	.china-page .china-grid-layout > main,
	.china-page .cn-items-card {
		display: contents;
	}

	.china-page .cn-items-head {
		order: -1;
		margin-bottom: 12px;
	}

	.china-page .china-grid-layout:not(:has(.china-sidebar a)) .cn-items-head {
		margin-bottom: 16px;
	}

	.china-page .china-breadcrumbs {
		display: none;
	}

	.china-page .china-section-title {
		font-size: 20px;
		font-weight: 600;
		line-height: 24px;
	}

	/* --- подкатегории — чипы в ленте с прокруткой вбок (от края до края).
	   Дерево сайдбара «раскрыто» в плоский ряд: заголовки групп скрыты,
	   списки — display: contents; .is-open на показ здесь не влияет --- */
	.china-page .china-sidebar {
		position: static;
		display: flex;
		flex-wrap: nowrap;
		gap: 6px;
		margin: 0 -20px 16px;
		padding: 0 20px;
		overflow-x: auto;
		border: 0;
		border-radius: 0;
		background: none;
		scrollbar-width: none;
	}

	.china-page .china-sidebar::-webkit-scrollbar {
		display: none;
	}

	.china-page .china-sidebar:not(:has(a)) {
		display: none;
	}

	.china-page .china-sidebar-title,
	.china-page .china-sidebar-cat-head,
	.china-page .cn-sidebar-empty {
		display: none;
	}

	.china-page .china-sidebar-list,
	.china-page .china-sidebar-cat,
	.china-page .china-sidebar .china-sidebar-cat .china-subcats,
	.china-page .china-subcats li {
		display: contents;
	}

	/* чип: 6×10, r10, белый, 12/600 lh20 black 60 %; активный — violet */
	.china-page .china-sidebar-reset,
	.china-page .china-subcats a {
		flex: 0 0 auto;
		display: block;
		margin: 0;
		padding: 6px 10px;
		border: 0;
		border-radius: 10px;
		background: var(--white);
		color: rgb(22 14 24 / 60%); /* black 60 % */
		font-size: 12px;
		font-weight: 600;
		line-height: 20px;
		white-space: nowrap;
	}

	.china-page .china-sidebar-reset:hover,
	.china-page .china-subcats a:hover {
		background: var(--white);
		color: rgb(22 14 24 / 60%);
	}

	.china-page .china-subcats a.is-active,
	.china-page .china-subcats a.is-active:hover {
		background: var(--accent);
		color: var(--white);
	}

	/* --- сетка (items_grid_sliver.dart: 10 / 30), карточка прежняя --- */
	.china-page .posts-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 30px 10px;
	}

	.china-page .post-item-image {
		border-radius: 20px;
	}

	.china-page .pagination {
		margin-top: 30px;
	}

	.china-page .pagination a {
		min-width: 40px;
		height: 40px;
	}
}

@media (max-width: 576px) {
	.china-page .posts-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}