@import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.boiwgh0w5b.bundle.scp.css';
@import '_content/TCGMarket.Components/TCGMarket.Components.6nnm7lgqp7.bundle.scp.css';

/* /Components/Layout/AppSideMenu.razor.rz.scp.css */
.appmenu-balance[b-fik5j2ed87] {
	margin: var(--spacing-medium);
	padding: var(--spacing-small) var(--spacing-medium);
	background-color: var(--background);
	border: 1px solid var(--muted);
	border-radius: var(--radius-small);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-tiny);
}

.appmenu-balance-row[b-fik5j2ed87] {
	display: flex;
	align-items: center;
	gap: var(--spacing-small);
}

.appmenu-balance-amount[b-fik5j2ed87] {
	flex: 1 1 auto;
	min-width: 0;
}

.appmenu[b-fik5j2ed87]  .divider {
	width: auto;
	margin-left: 20px;
	margin-right: 20px;
}

.appmenu-caption[b-fik5j2ed87] {
	padding-left: 20px;
	padding-right: 20px;
}

.appmenu-logout[b-fik5j2ed87] {
	margin: 10px 20px 20px 20px;
}

.appmenu-logout[b-fik5j2ed87]  .button {
	width: 100%;
}
/* /Components/Layout/Footer.razor.rz.scp.css */
.page-footer[b-dcalga9be0] {
    border-top: 1px solid var(--muted);
    padding-block: var(--spacing-large);
    padding-left: max(var(--spacing-medium), env(safe-area-inset-left));
    padding-right: max(var(--spacing-medium), env(safe-area-inset-right));
}

.page-footer-inner[b-dcalga9be0] {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-small) var(--spacing-medium);
}

.page-footer-link[b-dcalga9be0] {
    text-decoration: none;
}
/* /Components/Layout/Header.razor.rz.scp.css */
.header[b-eyxfki00j7] {
    box-shadow: var(--shadow-small);
}

/* Ширина контента шапки = Page Regular; вертикальный ритм задаём здесь. */
.header[b-eyxfki00j7]  .page {
    padding-block: var(--spacing-small);
    gap: 0;
}

/* Сетка шапки (как Grid в MAUI/Avalonia):
     колонки: auto 1fr auto  →  [меню] [центр] [корзина]
     строки:  auto auto       →  [меню/лого/корзина] / [поиск]
   Десктоп: поиск в центральной колонке (под лого). Мобилка: поиск на все 3 колонки. */
.header-bar[b-eyxfki00j7] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: var(--spacing-medium);
    row-gap: var(--spacing-small);
    min-height: 56px;
}

.header-side.left[b-eyxfki00j7] {
    grid-column: 1;
    grid-row: 1;
}

.header-side.right[b-eyxfki00j7] {
    grid-column: 3;
    grid-row: 1;
    justify-content: flex-end;
}

.header-side[b-eyxfki00j7] {
    display: flex;
    align-items: center;
    gap: var(--spacing-small);
}

/* Баджик накладывается на правый верхний угол иконки, а не стоит рядом. */
.icon-badge[b-eyxfki00j7] {
    position: relative;
    display: inline-flex;
}

.icon-badge[b-eyxfki00j7]  .badge {
    position: absolute;
    top: -2px;
    right: -2px;
    pointer-events: none;
    z-index: 1;
}

/* Лого — центральная колонка, строка 1, по центру. */
.header-title[b-eyxfki00j7] {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    min-width: 0;
    max-width: 100%;
}

.header-title img[b-eyxfki00j7] {
    display: block;
    width: auto;
    height: var(--controls-medium);
    max-width: 100%;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

/* Поиск — всегда на все 3 колонки (Col:0 ColSpan:3), строка 2. */
.header-search[b-eyxfki00j7] {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
}

/* Поиск на всю ширину ячейки (центральная колонка на десктопе, все колонки на мобилке). */
.header-search-inner[b-eyxfki00j7] {
    width: 100%;
    min-width: 0;
}

/* SearchField-форма сама inline-flex (ширина по контенту) — растягиваем на всю ширину контейнера. */
.header-search-inner[b-eyxfki00j7]  .searchfield {
    width: 100%;
}

/* Мобилка: лого подрезаем. */
@media (max-width: 640px) {
    .header-title[b-eyxfki00j7] {
        max-width: clamp(120px, 38vw, 200px);
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-5ud4z7z5g1] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.page-main[b-5ud4z7z5g1] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* Секция Page растягивается на всю высоту main, чтобы страницы могли растягивать/
   центрировать содержимое по вертикали (напр. пустые состояния каталога). Визуально
   инертно на остальных страницах: контент остаётся у верха, футер уже прибит к низу. */
.page-main[b-5ud4z7z5g1]  .page {
    flex: 1 1 auto;
}
/* /Components/Layout/NavGroup.razor.rz.scp.css */
.appmenu-nav-group[b-aos9rd2x57] {
	display: flex;
	flex-direction: column;
}

/* ::deep — target the unscoped <a> rendered by NavLink. */
.appmenu-nav-group[b-aos9rd2x57]  .appmenu-nav-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 20px;
	text-decoration: none;
	color: var(--foreground);
	transition: background-color var(--duration-fast) var(--ease-out),
	            color            var(--duration-fast) var(--ease-out);
}

@media (hover: hover) {
	.appmenu-nav-group[b-aos9rd2x57]  .appmenu-nav-row:hover {
		background-color: var(--muted);
	}
}

.appmenu-nav-group[b-aos9rd2x57]  .appmenu-nav-row:active {
	background-color: var(--secondary);
}

/* Active page — soft edge-to-edge pill: muted bg + accent text.
   The child icon inherits currentColor → also turns accent. */
.appmenu-nav-group[b-aos9rd2x57]  .appmenu-nav-row.active {
	background-color: var(--muted);
	color:            var(--accent);
}
/* /Components/Layout/NavRow.razor.rz.scp.css */
/* Icon + label live in NavRow's own scope (children of NavLink's <a>).
   The <a> itself (.appmenu-nav-row) is styled from NavGroup via ::deep,
   because NavLink renders it as a child component (no NavRow scope). */
.icon[b-os8riothaw] {
	width: 20px;
	height: 20px;
}

.appmenu-nav-label[b-os8riothaw] {
	flex: 1 1 auto;
	min-width: 0;
}
/* /Components/Pages/Account/Profile.razor.rz.scp.css */
.profile[b-ou7vd3mvq6] {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-large);
	/* Контент появляется плавно после лоадера. */
	animation: profile-fade-in-b-ou7vd3mvq6 200ms var(--ease-in-out) both;
}

@keyframes profile-fade-in-b-ou7vd3mvq6 {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Лоадер занимает всю свободную высоту (секция Page растянута на весь main),
   центрируется; страница не скроллится — футер остаётся виден. */
.profile-loading[b-ou7vd3mvq6] {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.profile-identity[b-ou7vd3mvq6] {
	display: flex;
	align-items: center;
	gap: var(--spacing-small);
}

.profile-status[b-ou7vd3mvq6] {
	width: 24px;
	height: 24px;
}

.profile-status.confirmed[b-ou7vd3mvq6] {
	color: var(--success);
	-webkit-mask-image: url("/icons/circle-check.svg");
	mask-image: url("/icons/circle-check.svg");
}

.profile-status.pending[b-ou7vd3mvq6] {
	color: var(--warning);
	-webkit-mask-image: url("/icons/hourglass.svg");
	mask-image: url("/icons/hourglass.svg");
}

.profile-fields[b-ou7vd3mvq6] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-medium);
	width: 100%;
}

.profile-field[b-ou7vd3mvq6] {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--spacing-tiny);
}

.profile-actions[b-ou7vd3mvq6] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-small);
	width: 100%;
}
/* /Components/Pages/Admin/Articles.razor.rz.scp.css */
.admin-list[b-ndlup5ruyj] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-medium);
}

.admin-list-header[b-ndlup5ruyj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Карточки: максимум 3 в ряд на десктопе, 2 на планшете, 1 на мобильном. */
.admin-grid[b-ndlup5ruyj] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-medium);
}

@media (max-width: 960px) {
    .admin-grid[b-ndlup5ruyj] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .admin-grid[b-ndlup5ruyj] {
        grid-template-columns: 1fr;
    }
}

.admin-card[b-ndlup5ruyj] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-small);
    height: 100%;
}

.admin-card-thumb[b-ndlup5ruyj] {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-small);
}

.admin-card-info[b-ndlup5ruyj] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-tiny);
    word-break: break-word;
}

.admin-card-actions[b-ndlup5ruyj] {
    display: flex;
    gap: var(--spacing-small);
    flex-wrap: wrap;
}
/* /Components/Pages/Admin/Banners.razor.rz.scp.css */
.admin-list[b-df6f4ndvcd] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-medium);
}

.admin-list-header[b-df6f4ndvcd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Карточки: максимум 3 в ряд на десктопе, 2 на планшете, 1 на мобильном. */
.admin-grid[b-df6f4ndvcd] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-medium);
}

@media (max-width: 960px) {
    .admin-grid[b-df6f4ndvcd] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .admin-grid[b-df6f4ndvcd] {
        grid-template-columns: 1fr;
    }
}

.admin-card[b-df6f4ndvcd] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-small);
    height: 100%;
}

.admin-card-thumb[b-df6f4ndvcd] {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-small);
}

.admin-card-info[b-df6f4ndvcd] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-tiny);
    word-break: break-word;
}

.admin-card-actions[b-df6f4ndvcd] {
    display: flex;
    gap: var(--spacing-small);
    flex-wrap: wrap;
}
/* /Components/Pages/Admin/Catalog.razor.rz.scp.css */
.catalog-switcher[b-ob3n2ltpum] {
	display: flex;
	justify-content: center;
}

/* Переключатель сущностей тянем на всю доступную ширину — элементы внутри (flex:1 1 0)
   распределятся поровну. ::deep, т.к. .buttongroup живёт в своём scope дочернего компонента. */
.catalog-switcher-desktop[b-ob3n2ltpum]  .buttongroup {
	display: flex;
	width: 100%;
}

/* Desktop shows the button group, mobile collapses to a select. */
.catalog-switcher-mobile[b-ob3n2ltpum] {
	display: none;
}

@media (max-width: 760px) {
	.catalog-switcher-desktop[b-ob3n2ltpum] {
		display: none;
	}

	.catalog-switcher-mobile[b-ob3n2ltpum] {
		display: block;
		width: 100%;
	}
}

.catalog-section[b-ob3n2ltpum] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-medium);
}

.catalog-section-header[b-ob3n2ltpum] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--spacing-medium);
}

.catalog-header-actions[b-ob3n2ltpum] {
	display: flex;
	align-items: center;
	gap: var(--spacing-small);
}

.catalog-grid[b-ob3n2ltpum] {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-medium);
}

@media (max-width: 960px) {
	.catalog-grid[b-ob3n2ltpum] {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.catalog-grid[b-ob3n2ltpum] {
		grid-template-columns: 1fr;
	}
}

/* Иконка игры в строке <Reorder> (имя/код — через <Label>, раскладка — через .reorder-content). */
.catalog-reorder-icon[b-ob3n2ltpum] {
	width: 28px;
	height: 28px;
	object-fit: contain;
}

.catalog-empty[b-ob3n2ltpum] {
	color: var(--secondary);
}

/* Sets section: search (с зоной игры) над тулбаром сортировки над гридом — как у товаров. */
.products-main[b-ob3n2ltpum] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-medium);
	min-width: 0;
}

/* Тулбар сетов: только сортировка справа (фильтр игры живёт в зоне SearchField). */
.sets-toolbar[b-ob3n2ltpum] {
	display: flex;
	justify-content: flex-end;
}

.sets-sort[b-ob3n2ltpum] {
	width: 246px;
	max-width: 100%;
}

.products-grid[b-ob3n2ltpum] {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--spacing-medium);
}
/* /Components/Pages/Admin/CatalogDialogs/AttributeDefinitionEditDialog.razor.rz.scp.css */
/* Опция в строке Reorder: подпись над значением, занимает свободное место (кнопки — справа). */
.attr-option-cell[b-kvibqva7hx] {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

/* Значение / Подпись / Добавить — стек друг под другом, кнопка во всю ширину под полями. */
.attr-option-add[b-kvibqva7hx] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-small);
}
/* /Components/Pages/Admin/CatalogDialogs/GameEditDialog.razor.rz.scp.css */
/* Иконка игры квадратная (Aspect 1:1) и при полной ширине формы занимает слишком много
   по высоте. Ограничиваем ширину слота — высота уменьшается во столько же раз. */
.game-icon-slot[b-z5gxhwoo8u] {
	width: 50%;
	max-width: 200px;
	margin-inline: auto;
}
/* /Components/Pages/Admin/CatalogDialogs/ProductEditDialog.razor.rz.scp.css */
.product-photo-grid[b-bom80s0rdc] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: var(--spacing-small);
}

.product-photo-cell[b-bom80s0rdc] {
    min-width: 0;
}

/* Filled cells are reorder-draggable (pointer-based, see gridreorder.js). touch-action:pan-y keeps
   vertical scrolling of the dialog working over the photos; a reorder drag engages on horizontal
   movement (and then owns the gesture). */
.product-photo-cell[data-reorder-item][b-bom80s0rdc] {
    touch-action: pan-y;
    cursor: grab;
}

/* The MediaSlot tile sets its own touch-action (manipulation); align it with the cell so vertical
   scroll passes through and a horizontal drag starts the reorder. */
.product-photo-cell[data-reorder-item][b-bom80s0rdc]  .mediaslot,
.product-photo-cell[data-reorder-item][b-bom80s0rdc]  .mediaslot-tile {
    touch-action: pan-y;
}

.product-photo-cell.dragging[b-bom80s0rdc] {
    opacity: 0.5;
    cursor: grabbing;
}

/* Highlight the drop target right on the MediaSlot border — the slot already carries a 2px dashed
   border (transparent when filled), so we just colour it accent: same dash/radius as an empty slot. */
.product-photo-cell.drop-over[b-bom80s0rdc]  .mediaslot-tile {
    border-color: var(--accent);
}
/* /Components/Pages/Admin/CatalogDialogs/ProductVariantsDialog.razor.rz.scp.css */
.variants-add[b-29s77dexlv] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-small);
}

/* Редкостей бывает много (особенно в Yu-Gi-Oh) — раскладываем чекбоксы в 2 колонки,
   заполнение построчно (1 2 / 3 4 / 5 6) — это поведение grid по умолчанию. */
/* Редкости — 2 колонки с колоночным (сверху-вниз) заполнением: первая колонка
   набивается целиком (1 2 3 4), затем вторая (5 6 7 8). grid-auto-flow: column
   требует явного числа рядов — оно приходит инлайном (--rarity-rows = ceil(n/2)). */
.variants-rarities[b-29s77dexlv] {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: repeat(var(--rarity-rows, 1), auto);
	grid-auto-flow: column;
	gap: var(--spacing-small) var(--spacing-medium);
}

/* Строка варианта-сингла — грид 2 колонки: слева две строки (набор / код·язык),
   справа редкость одной ячейкой во всю высоту. align-items:center центрирует редкость
   по вертикали относительно двухстрочного левого блока. */
.variant-single[b-29s77dexlv] {
	flex: 1 1 auto;
	min-width: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: var(--spacing-medium);
}

.variant-single-lines[b-29s77dexlv] {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-tiny);
}

/* Редкость справа: одна строка с эллипсисом (Label MaxLines=1), прижата вправо. */
.variant-single-rarity[b-29s77dexlv] {
	min-width: 0;
	max-width: 9rem;
	text-align: right;
}

/* Строка варианта в две строки (набор: язык + код; аксессуар: сводка атрибутов). */
.variant-stack[b-29s77dexlv] {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-tiny);
}
/* /Components/Pages/Admin/CatalogTabs/AttributeDefinitionsTab.razor.rz.scp.css */
.tab[b-fw9l3369am] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-medium);
}

.tab-header[b-fw9l3369am] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--spacing-medium);
}

.tab-grid[b-fw9l3369am] {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-medium);
}

@media (max-width: 960px) {
	.tab-grid[b-fw9l3369am] {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.tab-grid[b-fw9l3369am] {
		grid-template-columns: 1fr;
	}

	/* На мобилке Игра/Категория — в столбик, каждая во всю ширину (надёжнее, чем играть
	   с flex-basis: column гарантированно разносит их по строкам). */
	.tab-filters[b-fw9l3369am] {
		flex-direction: column;
	}
}

.tab-card[b-fw9l3369am] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-small);
	height: 100%;
}

.tab-card-info[b-fw9l3369am] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-tiny);
	min-width: 0;
	word-break: break-word;
}

.tab-card-actions[b-fw9l3369am] {
	display: flex;
	gap: var(--spacing-small);
	justify-content: flex-end;
	align-items: center;
	margin-top: auto;
}

/* Селекторы Игра/Категория ведут себя как кнопки в диалогах: пока влезают — делят строку
   50/50; как только места недостаточно — переносятся, и каждый занимает 100% ширины.
   Тот же приём, что у .control-actions (flex-basis 50% − половина gap, без сжатия).
   Каждый SelectField обёрнут в .tab-filter: правило адресует обёртку (она в scope страницы),
   а не корень компонента (у него собственный scope-атрибут — туда .tab-filters > * не достаёт). */
.tab-filters[b-fw9l3369am] {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-small);
}

.tab-filter[b-fw9l3369am] {
	flex: 1 0 calc(50% - var(--spacing-small) / 2);
	min-width: 0;
}
/* /Components/Pages/Admin/CatalogTabs/CategoriesTab.razor.rz.scp.css */
.tab[b-ngtzk4xira] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-medium);
}

.tab-header[b-ngtzk4xira] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--spacing-medium);
}

.tab-grid[b-ngtzk4xira] {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-medium);
}

@media (max-width: 960px) {
	.tab-grid[b-ngtzk4xira] {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.tab-grid[b-ngtzk4xira] {
		grid-template-columns: 1fr;
	}
}

.tab-card[b-ngtzk4xira] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-small);
	height: 100%;
}

.tab-card-info[b-ngtzk4xira] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-tiny);
	min-width: 0;
	word-break: break-word;
}

.tab-card-actions[b-ngtzk4xira] {
	display: flex;
	gap: var(--spacing-small);
	flex-wrap: wrap;
	margin-top: auto;
}
/* /Components/Pages/Admin/CatalogTabs/ProductsTab.razor.rz.scp.css */
.tab[b-egkuq5u7bk] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-medium);
}

.tab-header[b-egkuq5u7bk] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--spacing-medium);
}

.tab-header-actions[b-egkuq5u7bk] {
	display: flex;
	align-items: center;
	gap: var(--spacing-small);
}

/* Products tab: поиск (с зоной игры) над тулбаром фильтров/сортировки над гридом. */
.products-main[b-egkuq5u7bk] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-medium);
	min-width: 0;
}

/* Тулбар под поиском: [ Фильтры ] слева ⟷ [ Сортировка ] справа. */
.products-toolbar[b-egkuq5u7bk] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-small);
	flex-wrap: wrap;
}

/* Зона сортировки справа — фиксируем ширину SelectField, иначе он растянулся бы по флексу.
   max-width: 100% — на узких экранах поле не вылезает за контейнер. */
.products-sort[b-egkuq5u7bk] {
	width: 246px;
	max-width: 100%;
}

/* Кнопка-иконка «Фильтры» + бейдж с количеством рядом с ней (бейдж вне кнопки). */
.products-filter[b-egkuq5u7bk] {
	display: flex;
	align-items: center;
	gap: var(--spacing-tiny);
}
/* /Components/Pages/Admin/Index.razor.rz.scp.css */
.dashboard[b-eryy19rzdo] {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.dashboard-head[b-eryy19rzdo] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.dashboard-stats[b-eryy19rzdo] {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
}

/* На мобильном ужимаем гэп между карточками, как в каталоге (порог 600px, gap 4px). */
@media (max-width: 600px) {
	.dashboard-stats[b-eryy19rzdo] {
		gap: 4px;
	}
}
/* /Components/Pages/Admin/Orders.razor.rz.scp.css */
/* Страница на всю высоту Page: строка поиска + фильтр сверху, сетка занимает остаток со внутренним скроллом. */
.orders-page[b-irb4prb108] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-medium);
    height: calc(100vh - 180px);
}

/* Поиск слева растягивается, кнопка фильтра прижата справа. */
.orders-header[b-irb4prb108] {
    display: flex;
    align-items: center;
    gap: var(--spacing-small);
}

.orders-search[b-irb4prb108] {
    flex: 1;
    min-width: 0;
}

/* SearchField по умолчанию inline-flex (жмётся по контенту) — растягиваем на всю ширину строки. */
.orders-search[b-irb4prb108]  .searchfield {
    display: flex;
    width: 100%;
}

.orders-filter[b-irb4prb108] {
    display: flex;
    align-items: center;
    gap: var(--spacing-tiny);
    flex: 0 0 auto;
}

/* Ширины колонок — контент-специфичны, задаёт страница. Сумма = MinWidth сетки (1190). Класс col-* на th и td. */
.orders-page[b-irb4prb108]  .col-id      { width: 90px; }
.orders-page[b-irb4prb108]  .col-shop    { width: 244px; }
.orders-page[b-irb4prb108]  .col-user    { width: 244px; }
.orders-page[b-irb4prb108]  .col-total   { width: 110px; }
.orders-page[b-irb4prb108]  .col-date    { width: 150px; }
.orders-page[b-irb4prb108]  .col-status  { width: 150px; }
.orders-page[b-irb4prb108]  .col-rating  { width: 130px; }
.orders-page[b-irb4prb108]  .col-actions { width: 72px; text-align: right; }

/* Оценка покупателя — строка из 5 звёзд (заполненные/пустые), как в отзывах. */
.orders-page[b-irb4prb108]  .rating-stars {
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

.orders-page[b-irb4prb108]  .rating-stars .icon {
	width: 18px;
	height: 18px;
}

.orders-page[b-irb4prb108]  .rating-stars .star-filled { color: var(--accent); }
.orders-page[b-irb4prb108]  .rating-stars .star-empty  { color: var(--muted); }

/* Кнопка контекстного меню — 8px отступа от правого края ячейки (сверх её паддинга). */
.orders-page[b-irb4prb108]  .col-actions .contextmenu { margin-right: 8px; }

@media (hover: hover) {
    .orders-page[b-irb4prb108]  .datagrid-grid tbody tr:hover {
        background: var(--surface);
    }
}

/* Навигационные ячейки — реальные ссылки, заполняющие ячейку (клик → страница заказа).
   Надёжнее «растянутой ссылки» через position:relative на <tr> (в Safari поведение не определено). */
.cell-link[b-irb4prb108] {
    display: flex;
    align-items: center;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

/* Ячейка имени: аватар + имя в одну строку. */
.name-cell[b-irb4prb108] {
    gap: var(--spacing-small);
}

.name-cell[b-irb4prb108]  .avatar {
    flex: 0 0 auto;
}

/* Лоадер и пустой список — центрированы на месте сетки (занимают всё оставшееся место). */
.orders-loading[b-irb4prb108],
.orders-empty[b-irb4prb108] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.orders-cap[b-irb4prb108] {
    flex: 0 0 auto;
    text-align: center;
}

/* Контент (таблица/заглушка) проявляется opacity 0->1 за 200 мс — сглаживает переход с лоадера.
   Элементы монтируются только после загрузки, поэтому анимация играет один раз при появлении
   (и повторно при каждом поиске: на время загрузки контент сменяется лоадером). */
@keyframes orders-fade-in-b-irb4prb108 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.orders-page[b-irb4prb108]  .datagrid,
.orders-empty[b-irb4prb108] {
    animation: orders-fade-in-b-irb4prb108 200ms ease-out;
}
/* /Components/Pages/Admin/Promo.razor.rz.scp.css */
.admin-list[b-4tp59emu58] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-medium);
}

.admin-list-header[b-4tp59emu58] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Карточки: максимум 3 в ряд на десктопе, 2 на планшете, 1 на мобильном. */
.admin-grid[b-4tp59emu58] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-medium);
}

@media (max-width: 960px) {
    .admin-grid[b-4tp59emu58] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .admin-grid[b-4tp59emu58] {
        grid-template-columns: 1fr;
    }
}

.admin-card[b-4tp59emu58] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-small);
    height: 100%;
}

.admin-card-thumb[b-4tp59emu58] {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-small);
}

.admin-card-info[b-4tp59emu58] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-tiny);
    word-break: break-word;
}

.admin-card-actions[b-4tp59emu58] {
    display: flex;
    gap: var(--spacing-small);
    flex-wrap: wrap;
}
/* /Components/Pages/Admin/Reviews.razor.rz.scp.css */
/* Страница на всю высоту Page: заголовок + строка поиска/фильтр сверху, сетка занимает остаток. */
.reviews-page[b-k3immt117q] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-medium);
    height: calc(100vh - 180px);
}

/* Поиск слева растягивается, кнопка фильтра прижата справа (как в bulk-импорте / заказах). */
.reviews-header[b-k3immt117q] {
    display: flex;
    align-items: center;
    gap: var(--spacing-small);
}

.reviews-search[b-k3immt117q] {
    flex: 1;
    min-width: 0;
}

.reviews-search[b-k3immt117q]  .searchfield {
    display: flex;
    width: 100%;
}

.reviews-filter[b-k3immt117q] {
    display: flex;
    align-items: center;
    gap: var(--spacing-tiny);
    flex: 0 0 auto;
}

/* Ширины колонок — сумма = MinWidth сетки (1374). Аватар живёт в ячейке имени. */
.reviews-page[b-k3immt117q]  .col-order       { width: 130px; }
.reviews-page[b-k3immt117q]  .col-shop-name   { width: 236px; }
.reviews-page[b-k3immt117q]  .col-shop-email  { width: 220px; }
.reviews-page[b-k3immt117q]  .col-buyer-name  { width: 236px; }
.reviews-page[b-k3immt117q]  .col-buyer-email { width: 220px; }
.reviews-page[b-k3immt117q]  .col-rating      { width: 130px; }
.reviews-page[b-k3immt117q]  .col-date        { width: 150px; }
.reviews-page[b-k3immt117q]  .col-actions     { width: 72px; text-align: right; }

/* Кнопка контекстного меню — 8px отступа от правого края ячейки (сверх её паддинга). */
.reviews-page[b-k3immt117q]  .col-actions .contextmenu { margin-right: 8px; }

/* Ячейка имени: аватар + имя в одну строку. */
.name-cell[b-k3immt117q] {
    gap: var(--spacing-small);
}

.name-cell[b-k3immt117q]  .avatar {
    flex: 0 0 auto;
}

/* Ячейка № заказа: ссылка на заказ + кнопка-жалоба справа. */
.order-cell[b-k3immt117q] {
    display: flex;
    align-items: center;
    gap: var(--spacing-tiny);
    height: 100%;
}

.order-cell .cell-link[b-k3immt117q] {
    flex: 1;
    min-width: 0;
}

/* Клик по содержимому любой ячейки открывает диалог отзыва (клик по всей строке).
   Обработчик на содержимом ячейки надёжнее overlay/stretched-link (в Safari поведение не определено). */
.cell-link[b-k3immt117q] {
    display: flex;
    align-items: center;
    height: 100%;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.cell-link-center[b-k3immt117q] {
    justify-content: center;
}

@media (hover: hover) {
    .reviews-page[b-k3immt117q]  .datagrid-grid tbody tr:hover {
        background: var(--surface);
    }
}

/* Оценка — строка звёзд (клик по ячейке открывает попап отзыва, как и по всей строке). */
.rating-stars[b-k3immt117q] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.rating-stars .icon[b-k3immt117q] {
    width: 18px;
    height: 18px;
}

.rating-stars .star-filled[b-k3immt117q] { color: var(--accent); }
.rating-stars .star-empty[b-k3immt117q]  { color: var(--muted); }

/* Лоадер и пустой список — центрированы на месте сетки. */
.reviews-state[b-k3immt117q] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes reviews-fade-in-b-k3immt117q {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.reviews-page[b-k3immt117q]  .datagrid,
.reviews-state[b-k3immt117q] {
    animation: reviews-fade-in-b-k3immt117q 200ms ease-out;
}
/* /Components/Pages/Admin/Sellers.razor.rz.scp.css */
/* Страница на всю высоту Page: строка поиска сверху, сетка (DataGrid) занимает остаток со внутренним скроллом. */
.shops-page[b-mbhcfgvyqt] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-medium);
    height: calc(100vh - 180px);
}

.shops-search[b-mbhcfgvyqt] {
    width: 100%;
}

/* SearchField по умолчанию inline-flex (жмётся по контенту) — растягиваем на всю ширину Page. */
.shops-search[b-mbhcfgvyqt]  .searchfield {
    display: flex;
    width: 100%;
}

/* Ширины колонок — контент-специфичны, задаёт страница (дизайн сетки — в компоненте DataGrid).
   Все фиксированы, сумма = MinWidth сетки (1316): колонки не сжимаются, узкий экран → горизонтальный скролл.
   Класс col-* попадает и на th, и на td. */
.shops-page[b-mbhcfgvyqt]  .col-avatar     { width: 60px; }
.shops-page[b-mbhcfgvyqt]  .col-name       { width: 200px; }
.shops-page[b-mbhcfgvyqt]  .col-fullname   { width: 200px; }
.shops-page[b-mbhcfgvyqt]  .col-tin        { width: 120px; }
.shops-page[b-mbhcfgvyqt]  .col-rating     { width: 96px; }
.shops-page[b-mbhcfgvyqt]  .col-commission { width: 108px; }
.shops-page[b-mbhcfgvyqt]  .col-status   { width: 96px; text-align: center; }
.shops-page[b-mbhcfgvyqt]  .col-offers   { width: 100px; }
.shops-page[b-mbhcfgvyqt]  .col-orders   { width: 100px; }
.shops-page[b-mbhcfgvyqt]  .col-date     { width: 128px; }
.shops-page[b-mbhcfgvyqt]  .col-actions  { width: 52px; text-align: right; }

/* Кнопка контекстного меню — 8px отступа от правого края ячейки (сверх её паддинга). */
.shops-page[b-mbhcfgvyqt]  .col-actions .contextmenu { margin-right: 8px; }

/* Статус-иконка: цвет через currentColor, форма через mask (см. base .icon). Два состояния. */
.shops-status[b-mbhcfgvyqt] {
    width: 20px;
    height: 20px;
}

.shops-status.blocked[b-mbhcfgvyqt] {
    color: var(--error);
    -webkit-mask-image: url("/icons/ban.svg");
    mask-image: url("/icons/ban.svg");
}

.shops-status.ok[b-mbhcfgvyqt] {
    color: var(--success);
    -webkit-mask-image: url("/icons/circle-check.svg");
    mask-image: url("/icons/circle-check.svg");
}

/* Лоадер и пустой список — центрированы на месте сетки (занимают всё оставшееся место). */
.shops-loading[b-mbhcfgvyqt],
.shops-empty[b-mbhcfgvyqt] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Контент (таблица/заглушка) проявляется opacity 0->1 за 200 мс — сглаживает переход с лоадера. */
@keyframes shops-fade-in-b-mbhcfgvyqt {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.shops-page[b-mbhcfgvyqt]  .datagrid,
.shops-empty[b-mbhcfgvyqt] {
    animation: shops-fade-in-b-mbhcfgvyqt 200ms ease-out;
}
/* /Components/Pages/Admin/Settings.razor.rz.scp.css */
.admin-settings[b-ox38wi7i8n] {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.admin-settings-form[b-ox38wi7i8n] {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.admin-settings-loader[b-ox38wi7i8n] {
	display: flex;
	justify-content: center;
	padding: 40px 0;
}
/* /Components/Pages/Admin/Tickets.razor.rz.scp.css */
/* Страница на всю высоту Page: строка поиска + фильтр сверху, сетка занимает остаток со внутренним скроллом. */
.tickets-page[b-5iw8068m32] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-medium);
	height: calc(100vh - 180px);
}

.tickets-header[b-5iw8068m32] {
	display: flex;
	align-items: center;
	gap: var(--spacing-small);
}

.tickets-search[b-5iw8068m32] {
	flex: 1;
	min-width: 0;
}

.tickets-search[b-5iw8068m32]  .searchfield {
	display: flex;
	width: 100%;
}

.tickets-filter[b-5iw8068m32] {
	display: flex;
	align-items: center;
	gap: var(--spacing-tiny);
	flex: 0 0 auto;
}

/* Ширины колонок; сумма = MinWidth сетки (1162). Класс col-* на th и td. */
.tickets-page[b-5iw8068m32]  .col-id      { width: 90px; }
.tickets-page[b-5iw8068m32]  .col-status  { width: 130px; }
.tickets-page[b-5iw8068m32]  .col-topic   { width: 260px; }
.tickets-page[b-5iw8068m32]  .col-user    { width: 220px; }
.tickets-page[b-5iw8068m32]  .col-email   { width: 240px; }
.tickets-page[b-5iw8068m32]  .col-date    { width: 150px; }
.tickets-page[b-5iw8068m32]  .col-actions { width: 72px; text-align: right; }

.tickets-page[b-5iw8068m32]  .col-actions .contextmenu { margin-right: 8px; }

@media (hover: hover) {
	.tickets-page[b-5iw8068m32]  .datagrid-grid tbody tr:hover {
		background: var(--surface);
	}
}

/* Клик по ячейке открывает диалог обращения (кроме колонки действий). */
.cell-click[b-5iw8068m32] {
	display: flex;
	align-items: center;
	height: 100%;
	cursor: pointer;
}

.name-cell[b-5iw8068m32] {
	gap: var(--spacing-small);
}

.name-cell[b-5iw8068m32]  .avatar {
	flex: 0 0 auto;
}

.tickets-loading[b-5iw8068m32],
.tickets-empty[b-5iw8068m32] {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

@keyframes tickets-fade-in-b-5iw8068m32 {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.tickets-page[b-5iw8068m32]  .datagrid,
.tickets-empty[b-5iw8068m32] {
	animation: tickets-fade-in-b-5iw8068m32 200ms ease-out;
}
/* /Components/Pages/Admin/Transactions.razor.rz.scp.css */
/* Страница на всю высоту Page: строка поиска сверху, сетка занимает остаток со внутренним скроллом. */
.tx-page[b-ndmcdlgvat] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-medium);
    height: calc(100vh - 180px);
}

.tx-header[b-ndmcdlgvat] {
    display: flex;
    align-items: center;
    gap: var(--spacing-small);
}

.tx-search[b-ndmcdlgvat] {
    flex: 1;
    min-width: 0;
}

/* SearchField по умолчанию inline-flex — растягиваем на всю ширину строки. */
.tx-search[b-ndmcdlgvat]  .searchfield {
    display: flex;
    width: 100%;
}

/* Ширины колонок задаёт страница. Последняя (Описание) тянется до MinWidth сетки (1290). */
.tx-page[b-ndmcdlgvat]  .col-date      { width: 150px; }
.tx-page[b-ndmcdlgvat]  .col-kind      { width: 120px; }
.tx-page[b-ndmcdlgvat]  .col-op        { width: 170px; }
.tx-page[b-ndmcdlgvat]  .col-amount    { width: 130px; text-align: right; }
.tx-page[b-ndmcdlgvat]  .col-direction { width: 220px; }
.tx-page[b-ndmcdlgvat]  .col-user      { width: 240px; }
.tx-page[b-ndmcdlgvat]  .col-order     { width: 90px; }
.tx-page[b-ndmcdlgvat]  .col-desc      { width: 200px; }

/* Ячейка пользователя: аватар + (имя над ролью). */
.tx-user[b-ndmcdlgvat] {
    display: flex;
    align-items: center;
    gap: var(--spacing-small);
    min-width: 0;
}

.tx-user[b-ndmcdlgvat]  .avatar {
    flex: 0 0 auto;
}

.tx-user-text[b-ndmcdlgvat] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Ссылка на заказ заполняет ячейку. */
.cell-link[b-ndmcdlgvat] {
    display: flex;
    align-items: center;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

@media (hover: hover) {
    .tx-page[b-ndmcdlgvat]  .datagrid-grid tbody tr:hover {
        background: var(--surface);
    }
}

/* Лоадер и пустой список — центрированы на месте сетки. */
.tx-loading[b-ndmcdlgvat],
.tx-empty[b-ndmcdlgvat] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Плавное проявление контента после лоадера (как на других админ-таблицах). */
@keyframes tx-fade-in-b-ndmcdlgvat {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.tx-page[b-ndmcdlgvat]  .datagrid,
.tx-empty[b-ndmcdlgvat] {
    animation: tx-fade-in-b-ndmcdlgvat 200ms ease-out;
}
/* /Components/Pages/Admin/Users.razor.rz.scp.css */
/* Страница на всю высоту Page: строка поиска сверху, сетка (DataGrid) занимает остаток со внутренним скроллом. */
.users-page[b-rapko91tiq] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-medium);
    height: calc(100vh - 180px);
}

.users-search[b-rapko91tiq] {
    width: 100%;
}

/* SearchField по умолчанию inline-flex (жмётся по контенту) — растягиваем на всю ширину Page. */
.users-search[b-rapko91tiq]  .searchfield {
    display: flex;
    width: 100%;
}

/* Ширины колонок — контент-специфичны, задаёт страница (дизайн сетки — в компоненте DataGrid).
   Все фиксированы, сумма = MinWidth сетки (1188): колонки не сжимаются, узкий экран → горизонтальный скролл.
   Email критичен — с запасом. Класс col-* попадает и на th, и на td. */
.users-page[b-rapko91tiq]  .col-email   { width: 260px; }
.users-page[b-rapko91tiq]  .col-name    { width: 260px; }
.users-page[b-rapko91tiq]  .col-balance { width: 130px; }
.users-page[b-rapko91tiq]  .col-orders  { width: 100px; }
.users-page[b-rapko91tiq]  .col-role    { width: 140px; }
.users-page[b-rapko91tiq]  .col-status  { width: 96px; text-align: center; }
.users-page[b-rapko91tiq]  .col-date    { width: 150px; }
.users-page[b-rapko91tiq]  .col-actions { width: 52px; text-align: right; }

/* Кнопка контекстного меню — 8px отступа от правого края ячейки (сверх её паддинга). */
.users-page[b-rapko91tiq]  .col-actions .contextmenu { margin-right: 8px; }

/* Ячейка имени: аватар + имя в одну строку (min-width:0 позволяет имени сжаться и обрезаться). */
.user-cell[b-rapko91tiq] {
    display: flex;
    align-items: center;
    gap: var(--spacing-small);
    min-width: 0;
}

.user-cell[b-rapko91tiq]  .avatar {
    flex: 0 0 auto;
}

/* Статус-иконка: цвет через currentColor, форма через mask (см. base .icon). */
.users-status[b-rapko91tiq] {
    width: 20px;
    height: 20px;
}

.users-status.blocked[b-rapko91tiq] {
    color: var(--error);
    -webkit-mask-image: url("/icons/ban.svg");
    mask-image: url("/icons/ban.svg");
}

.users-status.confirmed[b-rapko91tiq] {
    color: var(--success);
    -webkit-mask-image: url("/icons/circle-check.svg");
    mask-image: url("/icons/circle-check.svg");
}

.users-status.pending[b-rapko91tiq] {
    color: var(--warning);
    -webkit-mask-image: url("/icons/hourglass.svg");
    mask-image: url("/icons/hourglass.svg");
}

/* Лоадер и пустой список — центрированы на месте сетки (занимают всё оставшееся место). */
.users-loading[b-rapko91tiq],
.users-empty[b-rapko91tiq] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Контент (таблица/заглушка) проявляется opacity 0->1 за 200 мс — сглаживает переход с лоадера. */
@keyframes users-fade-in-b-rapko91tiq {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.users-page[b-rapko91tiq]  .datagrid,
.users-empty[b-rapko91tiq] {
    animation: users-fade-in-b-rapko91tiq 200ms ease-out;
}
/* /Components/Pages/Articles/Detail.razor.rz.scp.css */
.article-detail[b-fhucs9y4gv] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-medium);
    max-width: 800px;
    margin: 0 auto;
}

.article-detail-cover[b-fhucs9y4gv] {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-medium);
}

/* Крупнее только обычный текст (абзацы/списки/h3), как в описании товара
   (.product-description). Заголовки и прочие модификаторы не трогаем — они
   масштабируются от базового размера. */
.markdown-body[b-fhucs9y4gv]  p,
.markdown-body[b-fhucs9y4gv]  li,
.markdown-body[b-fhucs9y4gv]  h3 {
    font-size: var(--font-size-content);
}
/* /Components/Pages/Articles/Index.razor.rz.scp.css */
.article-page[b-7ralokcgkk] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-large);
}

.article-grid[b-7ralokcgkk] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-medium);
}

@media (max-width: 600px) {
    .article-grid[b-7ralokcgkk] {
        grid-template-columns: 1fr;
    }
}

.article-card[b-7ralokcgkk] {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-medium);
    overflow: hidden;
    background-color: var(--surface);
    border: 1px solid var(--muted);
}

.article-card img[b-7ralokcgkk] {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.article-card-body[b-7ralokcgkk] {
    padding: var(--spacing-medium);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-tiny);
}

.article-pagination[b-7ralokcgkk] {
    display: flex;
    gap: var(--spacing-small);
    justify-content: center;
}
/* /Components/Pages/Auth/BecomeSeller.razor.rz.scp.css */
/* Agreement-checkbox validation message — Checkbox (InputBase) renders no error of its own, so
   it is surfaced manually here, styled like TextField's .textfield-error (red caption). */
.agreement-error[b-2xvqntiiov] {
	display: block;
	font-family: var(--font-family);
	font-size: var(--font-size-caption);
	font-weight: var(--font-weight-regular);
	color: var(--error);
	line-height: 1.2;
	padding: 0 var(--spacing-tiny);
}
/* /Components/Pages/Auth/Register.razor.rz.scp.css */
/* Agreement-checkbox validation message — Checkbox (InputBase) renders no error of its own, so
   it is surfaced manually here, styled like TextField's .textfield-error (red caption). */
.agreement-error[b-7l8oaxj1rb] {
	display: block;
	font-family: var(--font-family);
	font-size: var(--font-size-caption);
	font-weight: var(--font-weight-regular);
	color: var(--error);
	line-height: 1.2;
	padding: 0 var(--spacing-tiny);
}
/* /Components/Pages/Cards/Index.razor.rz.scp.css */
/* Страница «Способы оплаты»: заголовок, сетка карт, подпись. */
.cards-page[b-z5vkpwf18i] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-large);
}

.cards-loading[b-z5vkpwf18i],
.cards-empty[b-z5vkpwf18i] {
	display: flex;
	justify-content: center;
	padding: var(--spacing-huge) 0;
}

/* Пустое состояние — две строки текста по центру. */
.cards-empty[b-z5vkpwf18i] {
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-tiny);
}

/* Сетка карт — авто-заполнение; карты тянутся по ширине ячейки (1fr). Мин. ширина подобрана так, чтобы
   высота от aspect-ratio вмещала контент карты (иначе карта перестаёт держать пропорцию). Не растягиваем
   по высоте строки — карта сама держит высоту из aspect-ratio. */
.cards-grid[b-z5vkpwf18i] {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
	align-items: start;
	gap: var(--spacing-large);
}
/* /Components/Pages/Cart/Index.razor.rz.scp.css */
.cart-empty[b-re6zsf3l8i] {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-medium);
	padding: var(--spacing-huge) 0;
}

/* Shop list on the left, summary on the right; stacks with the summary below on narrow screens. */
.cart-columns[b-re6zsf3l8i] {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: var(--spacing-large);
	align-items: start;
}

.cart-main[b-re6zsf3l8i] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-large);
	min-width: 0;
}

.cart-aside[b-re6zsf3l8i] {
	position: sticky;
	top: var(--spacing-large);
}

/* Even spacing around the divider: kill the list gap, pad each item 4px top/bottom, and draw the
   line only between items (2nd onward), so it sits centered with equal padding on both sides. */
.cart-main[b-re6zsf3l8i]  .shop-body {
	gap: 0;
}

.cart-item[b-re6zsf3l8i] {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) 120px;
	gap: var(--spacing-regular);
	align-items: center;
	padding-block: var(--spacing-small);
}

.cart-item:first-child[b-re6zsf3l8i] {
	padding-top: 0;
}

.cart-item:last-child[b-re6zsf3l8i] {
	padding-bottom: 0;
}

.cart-item + .cart-item[b-re6zsf3l8i] {
	border-top: 1px solid var(--muted);
}

.cart-item-image[b-re6zsf3l8i] {
	position: relative;
	width: 104px;
	flex-shrink: 0;
	border-radius: var(--radius-small);
	overflow: hidden;
}

/* Both overlays share one height so the game icon and condition badge line up. */
.cart-badge[b-re6zsf3l8i] {
	position: absolute;
	z-index: 1;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: calc(100% - var(--spacing-small));
}

/* Game shown as a bare icon (no plate), centered in its 24px box. */
.cart-badge-game[b-re6zsf3l8i] {
	top: var(--spacing-tiny);
	left: var(--spacing-tiny);
	width: 24px;
}

.cart-badge-cond[b-re6zsf3l8i] {
	top: var(--spacing-tiny);
	right: var(--spacing-tiny);
}

.cart-item-details[b-re6zsf3l8i] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-tiny);
	min-width: 0;
}

.cart-item-name[b-re6zsf3l8i] {
	display: block;
	min-width: 0;
	text-decoration: none;
}

.cart-item-right[b-re6zsf3l8i] {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--spacing-small);
	white-space: nowrap;
}

/* Stretch the price/stepper block across the full column width. */
.cart-item-right[b-re6zsf3l8i]  .stepper {
	width: 100%;
	justify-content: space-between;
}

.cart-links[b-re6zsf3l8i] {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-regular);
	justify-content: center;
}

.cart-links a[b-re6zsf3l8i] {
	text-decoration: none;
}

@media (max-width: 900px) {
	.cart-columns[b-re6zsf3l8i] {
		grid-template-columns: 1fr;
	}

	.cart-aside[b-re6zsf3l8i] {
		position: static;
	}
}

/* Phones: tighten the item row so the name column gets room — narrower right block, smaller image,
   less vertical padding, and the name label dropped from Content (20) to Caption (14). */
@media (max-width: 600px) {
	.cart-item[b-re6zsf3l8i] {
		grid-template-columns: auto minmax(0, 1fr) 110px;
		gap: var(--spacing-small);
		padding-block: var(--spacing-tiny);
	}

	.cart-item-image[b-re6zsf3l8i] {
		width: 76px;
	}

	.cart-item-details[b-re6zsf3l8i] {
		gap: 0;
	}

	.cart-item-name[b-re6zsf3l8i]  .label.size-content {
		font-size: var(--font-size-caption);
	}
}
/* /Components/Pages/Catalog/Dialogs/CatalogFiltersDialog.razor.rz.scp.css */
.catalog-price[b-hib9j4i5i3] {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-small);
}

/* NumberField сам не тянется/не сжимается — задаём это с уровня контейнера через ::deep. */
/* flex-wrap + flex-basis: на широком две колонки тянутся, при нехватке места переносятся и растягиваются на всю ширину. */
.catalog-price[b-hib9j4i5i3]  .numberfield {
	flex: 1 1 180px;
	min-width: 0;
}
/* /Components/Pages/Catalog/Index.razor.rz.scp.css */
.catalog-controls[b-dgmxa5jcea] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-medium);
}

.catalog-filter[b-dgmxa5jcea] {
	display: flex;
	align-items: center;
	gap: var(--spacing-tiny);
}

.catalog-sort[b-dgmxa5jcea] {
	min-width: 220px;
	max-width: 100%;
}

/* Бесшовный переход скелетон→карточка. Карточка проявляется через fade (opacity 0→1),
   но раньше под полупрозрачной карточкой светился тёмный фон страницы — «чернота».
   Даём ячейке фон --surface (как у скелетона и у самой карточки): fade идёт поверх
   surface-плашки, поэтому плавно проявляется только контент карточки (фото/текст/рамка),
   а фон не мигает. Радиус совпадает с ItemCard. Пустые хвостовые ячейки не трогаем. */
.catalog-grid[b-dgmxa5jcea]  .virtualgrid-cell:not(.empty) {
	background-color: var(--surface);
	border-radius: var(--radius-medium);
}

.catalog-empty[b-dgmxa5jcea] {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--foreground);
	text-align: center;
	padding: var(--spacing-large) 0;
}

/* Лоадер каталога занимает всю доступную высоту (Page растянут на всю высоту main), центрируя спиннер. */
.catalog-loader[b-dgmxa5jcea] {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* /Components/Pages/Catalog/Product.razor.rz.scp.css */
.product[b-49zijjma2g] {
	display: flex;
	flex-direction: column;
}

/* Десктоп: слева визуал, справа описание. */
.product-top[b-49zijjma2g] {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 48px;
	align-items: start;
	margin-bottom: 24px;
}

/* fit-content + auto-поля: Card3D (собственный margin, бокс ~360px) и плоская карусель (320px)
   центрируются, не обрезаясь фиксированной шириной контейнера. */
.product-visual[b-49zijjma2g] {
	width: fit-content;
	max-width: 100%;
	margin: 0 auto;
}

.product-flat-carousel[b-49zijjma2g] {
	width: 320px;
	max-width: 100%;
	border-radius: 8px;
	overflow: hidden;
}

.product-no-image[b-49zijjma2g] {
	width: 320px;
	max-width: 100%;
	aspect-ratio: 19 / 20;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: var(--surface-2, #f0f0f0);
	color: var(--text-muted, #888);
}

/* Крупнее только обычный текст (абзацы и списки); заголовки, цитаты и прочие модификаторы
   не трогаем — иначе выросло бы всё, т.к. они масштабируются от базового размера. */
.product-description[b-49zijjma2g]  p,
.product-description[b-49zijjma2g]  li,
.product-description[b-49zijjma2g]  h3 {
	font-size: var(--font-size-content);
}

/* Статы-таблица в описании — заголовок пустой (markdown его требует), прячем его;
   безрамочно, метка слева, значение справа с отступом. */
.product-description[b-49zijjma2g]  table {
	border-collapse: collapse;
	margin: var(--spacing-small) 0;
	font-size: var(--font-size-caption); /* мельче базового текста описания (content) */
}

.product-description[b-49zijjma2g]  thead {
	display: none;
}

.product-description[b-49zijjma2g]  td {
	padding: var(--spacing-tiny) 0;
	vertical-align: middle;
	font-weight: 600; /* статы жирными */
}

.product-description[b-49zijjma2g]  td:last-child {
	padding-left: var(--spacing-large);
}

.product-market[b-49zijjma2g] {
	margin-bottom: 24px;
}

.product-offers[b-49zijjma2g] {
	display: flex;
	flex-direction: column;
}

.product-controls[b-49zijjma2g] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-bottom: 16px;
}

.product-filter[b-49zijjma2g] {
	display: flex;
	align-items: center;
	gap: 8px;
}

.product-sort[b-49zijjma2g] {
	margin-left: auto;
	min-width: 220px;
}

.product-loading[b-49zijjma2g],
.product-missing[b-49zijjma2g],
.product-empty[b-49zijjma2g] {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px 0;
	text-align: center;
}

/* Мобилка: визуал по центру, затем описание, маркет, фильтры, офферы (порядок из DOM). */
@media (max-width: 768px) {
	.product-top[b-49zijjma2g] {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: 16px;
	}

	.product-description[b-49zijjma2g] {
		width: 100%;
	}
}
/* /Components/Pages/Checkout/Index.razor.rz.scp.css */
.co-empty[b-byg6u0hxjg] {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-medium);
	padding: var(--spacing-huge) 0;
}

/* Warning shown when the placed order differed from what was on screen and nothing was charged. */
.co-alert[b-byg6u0hxjg] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-small);
	padding: var(--spacing-medium);
	background: color-mix(in srgb, var(--warning) 12%, var(--surface));
	border: 1px solid var(--warning);
	border-radius: var(--radius-medium);
}

.co-alert-list[b-byg6u0hxjg] {
	margin: 0;
	padding-left: var(--spacing-medium);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-tiny);
}

/* Shop list on the left, summary on the right; stacks with the summary below on narrow screens. */
.co-columns[b-byg6u0hxjg] {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: var(--spacing-large);
	align-items: start;
}

.co-main[b-byg6u0hxjg] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-large);
	min-width: 0;
}

.co-aside[b-byg6u0hxjg] {
	position: sticky;
	top: var(--spacing-large);
}

/* Even spacing around the divider: kill the list gap, pad each item 4px top/bottom, and draw the
   line only between items (2nd onward), so it sits centered with equal padding on both sides. */
.co-main[b-byg6u0hxjg]  .shop-body {
	gap: 0;
}

/* Item row mirrors the cart: image | details | price×qty. */
.co-item[b-byg6u0hxjg] {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) 120px;
	gap: var(--spacing-regular);
	align-items: center;
	padding-block: var(--spacing-small);
}

.co-item:first-child[b-byg6u0hxjg] {
	padding-top: 0;
}

.co-item:last-child[b-byg6u0hxjg] {
	padding-bottom: 0;
}

.co-item + .co-item[b-byg6u0hxjg] {
	border-top: 1px solid var(--muted);
}

.co-item.unavailable[b-byg6u0hxjg] {
	opacity: 0.6;
}

.co-item-image[b-byg6u0hxjg] {
	position: relative;
	width: 104px;
	flex-shrink: 0;
	border-radius: var(--radius-small);
	overflow: hidden;
}

/* Both overlays share one height so the game icon and condition badge line up. */
.co-badge[b-byg6u0hxjg] {
	position: absolute;
	z-index: 1;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: calc(100% - var(--spacing-small));
}

/* Game shown as a bare icon (no plate), centered in its 24px box. */
.co-badge-game[b-byg6u0hxjg] {
	top: var(--spacing-tiny);
	left: var(--spacing-tiny);
	width: 24px;
}

.co-badge-cond[b-byg6u0hxjg] {
	top: var(--spacing-tiny);
	right: var(--spacing-tiny);
}

.co-item-details[b-byg6u0hxjg] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-tiny);
	min-width: 0;
}

.co-item-name[b-byg6u0hxjg] {
	display: block;
	min-width: 0;
}

.co-item-right[b-byg6u0hxjg] {
	display: flex;
	flex-direction: column;
	align-items: end;
	gap: var(--spacing-small);
	white-space: nowrap;
}

.co-block[b-byg6u0hxjg] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-small);
}

.co-block-actions[b-byg6u0hxjg] {
	display: flex;
	gap: var(--spacing-small);
}

/* Поле оплаты с баланса над способами оплаты. */
.co-balance[b-byg6u0hxjg] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-tiny);
}

.co-block-actions[b-byg6u0hxjg]  .button {
	flex: 1;
}

/* Saved-point rows inside the "Выберите пункт" dialog and the payment options. */
.co-points-list[b-byg6u0hxjg] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-small);
}

.co-payment[b-byg6u0hxjg] {
	display: flex;
	align-items: center;
	gap: var(--spacing-small);
	padding: var(--spacing-small) var(--spacing-regular);
	border: 1px solid var(--muted);
	border-radius: var(--radius-small);
	cursor: pointer;
	transition: border-color 0.2s;
}

.co-payment:hover[b-byg6u0hxjg] {
	border-color: var(--secondary);
}

.co-payment.active[b-byg6u0hxjg] {
	border-color: var(--accent);
}

.radio-icon[b-byg6u0hxjg] {
	display: inline-block;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	background: url("/icons/radio-off.svg") no-repeat center / contain;
}

.radio-icon.radio-on[b-byg6u0hxjg] {
	background: url("/icons/radio-on.svg") no-repeat center / contain;
}

.co-point[b-byg6u0hxjg] {
	display: flex;
	flex-direction: column;
}

@media (max-width: 900px) {
	.co-columns[b-byg6u0hxjg] {
		grid-template-columns: 1fr;
	}

	.co-aside[b-byg6u0hxjg] {
		position: static;
	}
}

/* Phones: tighten the item row so the name column gets room — narrower right block, smaller image,
   less vertical padding, and the name label dropped from Content (20) to Caption (14). */
@media (max-width: 600px) {
	.co-item[b-byg6u0hxjg] {
		grid-template-columns: auto minmax(0, 1fr) 110px;
		gap: var(--spacing-small);
		padding-block: var(--spacing-tiny);
	}

	.co-item-image[b-byg6u0hxjg] {
		width: 76px;
	}

	.co-item-details[b-byg6u0hxjg] {
		gap: 0;
	}

	.co-item-name[b-byg6u0hxjg]  .label.size-content {
		font-size: var(--font-size-caption);
	}
}
/* /Components/Pages/Checkout/Result.razor.rz.scp.css */
.pay-result[b-7iknyn3dol] {
	flex: 1;
	min-height: 60vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-small);
	text-align: center;
}

.pay-result-icon[b-7iknyn3dol] {
	width: 64px;
	height: 64px;
	margin-bottom: var(--spacing-small);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
}

.pay-result-icon.success[b-7iknyn3dol] {
	background-color: var(--success);
	mask-image: url("/icons/banknote-check.svg");
	-webkit-mask-image: url("/icons/banknote-check.svg");
}

.pay-result-icon.failure[b-7iknyn3dol] {
	background-color: var(--error);
	mask-image: url("/icons/banknote-x.svg");
	-webkit-mask-image: url("/icons/banknote-x.svg");
}

.pay-result-icon.cancelled[b-7iknyn3dol] {
	background-color: var(--error);
	mask-image: url("/icons/ban.svg");
	-webkit-mask-image: url("/icons/ban.svg");
}

.pay-result-icon.processing[b-7iknyn3dol] {
	background-color: var(--accent);
	mask-image: url("/icons/banknote-check.svg");
	-webkit-mask-image: url("/icons/banknote-check.svg");
}
/* /Components/Pages/Home.razor.rz.scp.css */
.home[b-ue4chhnymk] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-large);
}

/* Ряд логотипов игр над промо-каруселью. Всегда в одну строку; логотипы —
   прозрачные вордмарки, лежат прямо на фоне страницы (без плашек). */
.home-games[b-ue4chhnymk] {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-around;
    gap: var(--spacing-large);
}

/* Максимальный размер логотипа 240x120 (пропорция вордмарков 2:1). flex-basis 240
   без роста, но со сжатием: на узких экранах логотипы уменьшаются пропорционально
   (width:100% + height:auto), max-height ограничивает сверху. */
.home-game[b-ue4chhnymk] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 240px;
    min-width: 0;
    max-width: 240px;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.home-game img[b-ue4chhnymk] {
    width: 100%;
    /* Резервируем высоту по проектной пропорции вордмарка (2:1) ещё до загрузки картинки,
       иначе ряд подрастает при декодировании и страница дёргается. */
    aspect-ratio: 2 / 1;
    max-height: 120px;
    object-fit: contain;
}

.home-game:hover[b-ue4chhnymk] {
    opacity: 0.8;
    transform: scale(1.03);
}

@media (max-width: 600px) {
    .home-games[b-ue4chhnymk] {
        gap: var(--spacing-medium);
    }
}

/* Блок «Новые поступления»: шапка как у секции статей + адаптивная сетка. */
.home-recent-header[b-ue4chhnymk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-medium);
}

/* Загружаем 6 карточек, но показываем только полные ряды под текущее число колонок:
   5 кол. -> 5 (1 ряд), 4 кол. -> 4 (1 ряд), 3 кол. -> 6 (2 ряда),
   2 кол. -> 6 (3 ряда). «Хвост» скрываем через nth-child. */
.home-recent-grid[b-ue4chhnymk] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-medium);
}

/* Фиксированная высота ячейки, как CellHeight="340" у VirtualGrid в каталоге:
   ItemCard тянется на height:100%, media забирает остаток — карточки без фото
   не схлопываются и совпадают по размеру с каталогом. */
.home-recent-cell[b-ue4chhnymk] {
    height: 340px;
}

.home-recent-cell:nth-child(6)[b-ue4chhnymk] {
    display: none;
}

@media (max-width: 1140px) {
    .home-recent-grid[b-ue4chhnymk] {
        grid-template-columns: repeat(4, 1fr);
    }

    .home-recent-cell:nth-child(n + 5)[b-ue4chhnymk] {
        display: none;
    }
}

@media (max-width: 900px) {
    .home-recent-grid[b-ue4chhnymk] {
        grid-template-columns: repeat(3, 1fr);
    }

    .home-recent-cell:nth-child(n + 5)[b-ue4chhnymk] {
        display: revert;
    }
}

@media (max-width: 600px) {
    /* Компактный gap как у каталога (VirtualGrid CompactCellGap="4" при <=600px).
       2 колонки держим и на самых узких экранах (как каталог с MinColumns=2),
       карточки 5-6 остаются видимыми (revert из блока <=900px) -> 6 штук, 3 ряда. */
    .home-recent-grid[b-ue4chhnymk] {
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
    }
}

/* Промо-карусель по умолчанию скруглена на --radius-small (10px); тянем её к
   --radius-medium (20px), как у соседних карточек .home-banner / .home-articles-card.
   Оверрайд только для промо через ::deep, чтобы не менять радиус всех каруселей сайта. */
.home-promo[b-ue4chhnymk]  .carousel {
    border-radius: var(--radius-medium);
}

.home-banners[b-ue4chhnymk] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-medium);
}

@media (max-width: 600px) {
    .home-banners[b-ue4chhnymk] {
        grid-template-columns: 1fr;
    }
}

.home-banner[b-ue4chhnymk] {
    position: relative;
    border-radius: var(--radius-medium);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    display: block;
    text-decoration: none;
    color: inherit;
}

.home-banner img[b-ue4chhnymk] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-banner-content[b-ue4chhnymk] {
    position: relative;
    height: 100%;
    padding: var(--spacing-large);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-small);
    justify-content: flex-end;
    color: var(--primary);
    background: linear-gradient(to top, rgb(0 0 0 / 0.85), rgb(0 0 0 / 0.35) 55%, transparent 90%);
}

/* ::deep reaches the <span> rendered inside the Label component. flex-shrink +
   max-height stop the -webkit-box from collapsing to one line in the flex column. */
.home-banner-content[b-ue4chhnymk]  .label {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    flex-shrink: 0;
    max-height: calc(var(--font-size-title) * 1.4 * 2);
}

/* Stretched-link overlay: a sibling <a> makes the whole card clickable without
   nesting anchors; the real Button is layered above it. */
.home-banner-link[b-ue4chhnymk] {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* CTA above the overlay so it stays independently clickable. */
.home-banner-content[b-ue4chhnymk]  .button {
    align-self: center;
    flex-shrink: 0;
    z-index: 2;
}

.home-articles-header[b-ue4chhnymk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-medium);
}

.home-articles-grid[b-ue4chhnymk] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-medium);
}

@media (max-width: 600px) {
    .home-articles-grid[b-ue4chhnymk] {
        grid-template-columns: 1fr;
    }
}

.home-articles-card[b-ue4chhnymk] {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-medium);
    overflow: hidden;
    background-color: var(--surface);
    border: 1px solid var(--muted);
}

.home-articles-card img[b-ue4chhnymk] {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.home-articles-card-body[b-ue4chhnymk] {
    padding: var(--spacing-medium);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-tiny);
}
/* /Components/Pages/Orders/Detail.razor.rz.scp.css */
/* Шапка заказа: номер слева, статус-бэйдж справа. */
.order-head[b-y8t3mdaub8] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-regular);
}

/* Блок (информация / доставка): заголовок + содержимое колонкой. */
.order-ship-block[b-y8t3mdaub8] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-medium);
}

/* Штрихкод всегда на белом фоне (в т.ч. в тёмной теме) — иначе сканер не читает. */
.order-barcode[b-y8t3mdaub8] {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-small);
	background: #ffffff;
	padding: var(--spacing-regular);
	border-radius: var(--radius-small);
}

.order-barcode svg[b-y8t3mdaub8] {
	display: block;
	width: 100%;
	height: 180px;
}

/* Строки «Информация» — плотнее, чем блок. */
.order-info[b-y8t3mdaub8] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-tiny);
}

/* Магазин под заголовком — как шапка страницы магазина: крупный аватар + название (с галочкой) + рейтинг.
   inline-flex + align-self:flex-start — кликабельна только область контента, а не вся ширина строки. */
.order-shop-header[b-y8t3mdaub8] {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: var(--spacing-medium);
	text-decoration: none;
	color: inherit;
	max-width: 100%;
}

.order-shop-info[b-y8t3mdaub8] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-tiny);
	min-width: 0;
}

.order-shop-info[b-y8t3mdaub8]  .shop-name {
	min-width: 0;
}

/* Строка трек-номера: подпись слева, значение справа. */
.order-track-row[b-y8t3mdaub8] {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--spacing-regular);
}

/* Лента шагов доставки — сверху вниз, кружок + подпись. */
.delivery-steps[b-y8t3mdaub8] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-small);
}

.delivery-step[b-y8t3mdaub8] {
	display: flex;
	align-items: center;
	gap: var(--spacing-small);
}

.delivery-step-time[b-y8t3mdaub8] {
	margin-left: auto;
	white-space: nowrap;
}

.delivery-dot[b-y8t3mdaub8] {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--secondary);
}

.delivery-dot.accent[b-y8t3mdaub8]  { background: var(--accent); }
.delivery-dot.neutral[b-y8t3mdaub8] { background: var(--secondary); }
.delivery-dot.success[b-y8t3mdaub8] { background: var(--success); }
.delivery-dot.error[b-y8t3mdaub8]   { background: var(--error); }

/* Футер карточки заказа — ИТОГО (как «СУММА» в корзине). */
.order-foot[b-y8t3mdaub8] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-tiny);
	margin-top: var(--spacing-small);
	padding-top: var(--spacing-small);
	border-top: 1px solid var(--muted);
}

.order-foot-row[b-y8t3mdaub8],
.order-foot-refund[b-y8t3mdaub8],
.order-foot-total[b-y8t3mdaub8] {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--spacing-regular);
}

.order-foot-refund[b-y8t3mdaub8] {
	margin-top: var(--spacing-tiny);
}

/* Блок действий/пояснения (частичное подтверждение) — колонкой. */
.order-confirm-block[b-y8t3mdaub8] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-medium);
}

/* Ссылка на поддержку в заметке о возврате средств. */
.order-support-link[b-y8t3mdaub8] {
	color: var(--accent);
}

/* Предупреждающий бокс (акцентный) — пояснение о сокращённом заказе. */
.order-warning[b-y8t3mdaub8] {
	padding: var(--spacing-regular);
	border: 1px solid var(--accent);
	border-radius: var(--radius-medium);
	background: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* Позиции заказа в одной карточке — строки как в корзине (grid: фото | детали | цена/кол-во). */
.order-items[b-y8t3mdaub8] {
	display: flex;
	flex-direction: column;
}

.cart-item[b-y8t3mdaub8] {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) 120px;
	gap: var(--spacing-regular);
	align-items: center;
	padding-block: var(--spacing-small);
}

.cart-item:first-child[b-y8t3mdaub8] { padding-top: 0; }
.cart-item:last-child[b-y8t3mdaub8]  { padding-bottom: 0; }

.cart-item + .cart-item[b-y8t3mdaub8] {
	border-top: 1px solid var(--muted);
}

.cart-item-image[b-y8t3mdaub8] {
	position: relative;
	width: 104px;
	flex-shrink: 0;
	border-radius: var(--radius-small);
	overflow: hidden;
}

.cart-item-noimage[b-y8t3mdaub8] {
	aspect-ratio: 3 / 4;
	background: var(--surface);
	display: flex;
	align-items: center;
	justify-content: center;
}

.cart-item-noimage .icon[b-y8t3mdaub8] {
	width: 28px;
	height: 28px;
	color: var(--muted);
}

/* Оба оверлея одной высоты, чтобы иконка игры и бэйдж состояния совпадали по линии. */
.cart-badge[b-y8t3mdaub8] {
	position: absolute;
	z-index: 1;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: calc(100% - var(--spacing-small));
}

.cart-badge-game[b-y8t3mdaub8] {
	top: var(--spacing-tiny);
	left: var(--spacing-tiny);
	width: 24px;
}

.cart-badge-cond[b-y8t3mdaub8] {
	top: var(--spacing-tiny);
	right: var(--spacing-tiny);
}

.cart-item-details[b-y8t3mdaub8] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-tiny);
	min-width: 0;
}

.cart-item-name[b-y8t3mdaub8] {
	display: block;
	min-width: 0;
	text-decoration: none;
}

.cart-item-right[b-y8t3mdaub8] {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--spacing-small);
	white-space: nowrap;
}

@media (max-width: 600px) {
	.cart-item[b-y8t3mdaub8] {
		grid-template-columns: auto minmax(0, 1fr) 110px;
		gap: var(--spacing-small);
		padding-block: var(--spacing-tiny);
	}

	.cart-item-image[b-y8t3mdaub8] {
		width: 76px;
	}

	.cart-item-details[b-y8t3mdaub8] {
		gap: 0;
	}

	.cart-item-name[b-y8t3mdaub8]  .label.size-content {
		font-size: var(--font-size-caption);
	}
}

/* Слоты фото отзыва — flex с переносом; слоты растягиваются, кап роста = ячейка при полной строке из 5. */
.order-photo-grid[b-y8t3mdaub8] {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--spacing-small);
}

.order-photo-grid[b-y8t3mdaub8]  .mediaslot {
	flex: 1 1 96px;
	min-width: 96px;
	max-width: calc((100% - 4 * var(--spacing-small)) / 5);
}

/* Фото и видео сборки, прикреплённые продавцом. */
.order-media[b-y8t3mdaub8] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-small);
}

.order-media-grid[b-y8t3mdaub8] {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--spacing-small);
}

.order-media-grid.start[b-y8t3mdaub8] {
	justify-content: flex-start;
}

.order-media-grid[b-y8t3mdaub8]  .mediaelement {
	flex: 1 1 96px;
	min-width: 96px;
	max-width: calc((100% - 4 * var(--spacing-small)) / 5);
}

/* Блок отзыва под позициями заказа. */
.order-review[b-y8t3mdaub8] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-small);
}

/* Форма отзыва: рейтинг → текст → фото → кнопка. */
.order-review-form[b-y8t3mdaub8] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-medium);
}

.order-missing[b-y8t3mdaub8] {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-medium);
	padding: var(--spacing-large) 0;
}

/* Блок отсутствующих позиций частично подтверждённого заказа — под списком позиций внутри карточки. */
.order-missing-items[b-y8t3mdaub8] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-small);
	margin-top: var(--spacing-small);
	padding-top: var(--spacing-small);
	border-top: 1px solid var(--muted);
}
/* /Components/Pages/Orders/Index.razor.rz.scp.css */
/* Заголовок сверху, поиск, строка фильтр+сортировка, сетка карточек; страница скроллится естественно. */
.orders-page[b-ewxn3fbhnb] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-medium);
}

.orders-search[b-ewxn3fbhnb]  .searchfield {
	display: flex;
	width: 100%;
}

/* Фильтр слева, сортировка справа. */
.orders-controls[b-ewxn3fbhnb] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-small);
}

.orders-filter[b-ewxn3fbhnb] {
	display: flex;
	align-items: center;
	gap: var(--spacing-tiny);
	flex: 0 0 auto;
}

.orders-sort[b-ewxn3fbhnb] {
	flex: 0 0 auto;
	min-width: 220px;
	max-width: 100%;
}

/* Карточки заказов раскладывает VirtualGrid (макс. 3 колонки, на мобиле 1). */
.orders-grid[b-ewxn3fbhnb] {
	animation: orders-fade-in-b-ewxn3fbhnb 200ms ease-out;
}

/* Лоадер и пустое состояние центрируются в заметной области. */
.orders-loading[b-ewxn3fbhnb],
.orders-empty[b-ewxn3fbhnb] {
	min-height: 50vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-medium);
}

.orders-empty[b-ewxn3fbhnb] {
	animation: orders-fade-in-b-ewxn3fbhnb 200ms ease-out;
}

/* Контент проявляется opacity 0->1 за 200 мс — сглаживает переход с лоадера (как у продавца). */
@keyframes orders-fade-in-b-ewxn3fbhnb {
	from { opacity: 0; }
	to   { opacity: 1; }
}
/* /Components/Pages/PickupPoints/Index.razor.rz.scp.css */
/* Страница «Адреса пунктов»: шапка с кнопкой, сетка карточек-адресов. */
.points-page[b-f9vkpszyr1] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-large);
}

/* Шапка: заголовок слева, «Добавить» справа. */
.points-head[b-f9vkpszyr1] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-medium);
}

.points-loading[b-f9vkpszyr1],
.points-empty[b-f9vkpszyr1] {
	display: flex;
	justify-content: center;
	padding: var(--spacing-huge) 0;
}

/* Пустое состояние — две строки по центру. */
.points-empty[b-f9vkpszyr1] {
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-tiny);
}

/* Сетка карточек — авто-заполнение; карты тянутся по ширине ячейки. Не растягиваем по высоте строки —
   карта держит высоту из aspect-ratio. */
.points-grid[b-f9vkpszyr1] {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	align-items: start;
	gap: var(--spacing-large);
}
/* /Components/Pages/Recipients/Index.razor.rz.scp.css */
/* Страница «Получатели»: шапка с кнопкой, сетка карточек получателей. */
.recipients-page[b-a3j5h9umea] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-large);
}

/* Шапка: заголовок слева, «Добавить» справа. */
.recipients-head[b-a3j5h9umea] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-medium);
}

.recipients-loading[b-a3j5h9umea],
.recipients-empty[b-a3j5h9umea] {
	display: flex;
	justify-content: center;
	padding: var(--spacing-huge) 0;
}

/* Пустое состояние — две строки по центру. */
.recipients-empty[b-a3j5h9umea] {
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-tiny);
}

/* Сетка карточек — авто-заполнение; карточки тянутся по ширине ячейки.
   grid-auto-rows: 1fr + height:100% на карточке — все карточки одной высоты (основной с бейджем
   не выше остальных). */
.recipients-grid[b-a3j5h9umea] {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	grid-auto-rows: 1fr;
	gap: var(--spacing-large);
}

/* На мобильном ужимаем гэп, как в каталоге (compact-порог 600px, gap 4px). */
@media (max-width: 600px) {
	.recipients-grid[b-a3j5h9umea] {
		gap: 4px;
	}
}
/* /Components/Pages/Seller/BankDetails.razor.rz.scp.css */
.bank-details[b-9n285gjde0] {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.bank-details-form[b-9n285gjde0] {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
/* /Components/Pages/Seller/BulkImport.razor.rz.scp.css */
.import-scope[b-v4tc7iowpe] {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-block: 16px;
}

.import-loading[b-v4tc7iowpe] {
	display: flex;
	justify-content: center;
	padding: 32px 0;
}

.import-defaults[b-v4tc7iowpe] {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-block: 16px;
}

.import-toolbar[b-v4tc7iowpe] {
	display: flex;
	gap: 12px;
	align-items: center;
	/* Небольшой отступ до таблицы снизу (--spacing-small). */
	margin-block: 16px var(--spacing-small);
}

.import-search[b-v4tc7iowpe] {
	flex: 1 1 auto;
	min-width: 0;
}

/* SearchField's root is inline-flex (intrinsic width) — stretch it to fill the toolbar slot. */
.import-search[b-v4tc7iowpe]  .searchfield {
	width: 100%;
}

/* Fixed reserved slot so the search row never shifts when the badge appears/disappears. The filter
   button is pinned to the right edge; the count badge grows leftward into the reserved space. */
.import-filter[b-v4tc7iowpe] {
	flex: 0 0 auto;
	width: 72px; /* badge(24) + gap(8) + IconButton Medium(40) */
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
}

/* Сегментед-контрол выбора колонок — только на мобилке; на десктопе видны все колонки. */
.import-tabs[b-v4tc7iowpe] {
	display: none;
}

/* Кнопки управления — в обычном потоке вплотную под таблицей (не sticky, без верхнего зазора);
   снизу оставляем отступ до конца страницы. */
.import-submitbar[b-v4tc7iowpe] {
	display: flex;
	justify-content: center;
	padding-block: 0 12px;
	margin-top: 0;
}

/* Dialog-style footer centered in the wide page: СБРОСИТЬ + ОПУБЛИКОВАТЬ split the row
   50/50 (via .control-actions), capped to a comfortable width so they don't span the table. */
.import-actions[b-v4tc7iowpe] {
	width: 100%;
	max-width: 480px;
}

/* === Мобилка: показать сегментед-контрол выбора колонок (сама таблица прячет колонки в BulkImportGrid). === */
@media (max-width: 600px) {
	.import-tabs[b-v4tc7iowpe] {
		display: flex;
		justify-content: center;
		margin-bottom: 12px;
	}
}
/* /Components/Pages/Seller/BulkImportGrid.razor.rz.scp.css */
/* Окно/скролл, липкая шапка, chevron-сортировка, table-layout:fixed, высота строки и границы ячеек теперь
   даёт общий DataGrid. Здесь — только специфика bulk-импорта: точная ширина таблицы, ширины колонок,
   редактируемые ячейки и мобильное скрытие групп колонок. */

/* Host задаёт окну сетки фиксированную высоту: DataGrid внутри — flex:1, поэтому заполняет её и скроллит. */
.import-grid-host[b-7i47knt958] {
	height: 70vh;
	display: flex;
	flex-direction: column;
}

/* Таблица на всю ширину окна (width:100% из DataGrid), а min-width = сумма фиксированных колонок держит
   их ширины и включает горизонтальный скролл, когда окно уже суммы. --grid-width-* приходят инлайном из
   компонента; переносим в min-width DataGrid стайлшитом (не инлайном), чтобы мобильный медиазапрос мог
   переключить его на ширину видимого сегмента. */
.import-grid-host[b-7i47knt958]  .datagrid {
	--datagrid-min-width: var(--grid-width-all);
}

/* Фиксированные ширины колонок (обязательны для table-layout: fixed; box-sizing:border-box даёт DataGrid). */
.import-grid-host[b-7i47knt958]  .thumb-col    { width: 48px; padding-right: 0; }
.import-grid-host[b-7i47knt958]  .code-col     { width: 96px; }
.import-grid-host[b-7i47knt958]  .clamped-col  { width: 220px; }
.import-grid-host[b-7i47knt958]  .attribute-col { width: 220px; }
/* Boolean-атрибут: в ячейке лишь переключатель — колонка уже прочих. Подписи заголовка разрешаем перенос
   (узкая колонка иначе обрезала бы длинную подпись, т.к. шапка по умолчанию nowrap); выравнивание влево,
   как у остальных колонок. */
.import-grid-host[b-7i47knt958]  .attribute-col-bool { width: 112px; }
.import-grid-host[b-7i47knt958]  .datagrid-grid thead th.attribute-col-bool { white-space: normal; }
.import-grid-host[b-7i47knt958]  .quantity-col { width: 108px; }
.import-grid-host[b-7i47knt958]  .price-col    { width: 136px; }
.import-grid-host[b-7i47knt958]  .photos-col   { width: 124px; }
.import-grid-host[b-7i47knt958]  .actions-col  { width: 68px; }

/* Значения в ячейках не переносим (короткие коды/числа); имя и редкость (clamped-col) — исключение. */
.import-grid-host[b-7i47knt958]  .datagrid-grid tbody td {
	white-space: nowrap;
}

/* Имя / редкость — фиксированная 220px, текст переносится ВНУТРИ (Label клампит до 3 строк). overflow-wrap:
   anywhere ломает длинные неразрывные токены, чтобы их max-content не превышал 220px. */
.import-grid-host[b-7i47knt958]  .clamped-col {
	white-space: normal;
	overflow-wrap: anywhere;
}

/* Ячейка имени (до 3 строк): жёстко ограничиваем по высоте и режем лишнее, чтобы длинное имя не переросло
   константную высоту строки и не сбило виртуализацию. */
.name-cell[b-7i47knt958] {
	display: flex;
	flex-direction: column;
	max-height: 52px;
	overflow: hidden;
}

/* Label.clamp резервирует min-height под 2 строки; здесь снимаем резервирование, чтобы одну строку
   vertical-align:middle ячейки центрировал по высоте. */
.import-grid-host[b-7i47knt958]  .clamped-col .label.clamp {
	min-height: 0;
}

/* Hover-подсветка строки — легче вести взгляд по широкой таблице. */
@media (hover: hover) {
	.import-grid-host[b-7i47knt958]  .datagrid-grid tbody tr:hover {
		background: var(--muted);
	}
}

/* Поля кол-ва и цены заполняют свою ячейку целиком — ширину задаёт фиксированная колонка. */
.import-quantity[b-7i47knt958],
.import-price[b-7i47knt958] {
	width: 100%;
}

.import-quantity[b-7i47knt958]  .numberfield,
.import-price[b-7i47knt958]  .numberfield {
	width: 100%;
}

/* Миниатюра товара: пропорции карты, клик открывает крупное фото в диалоге. */
.import-thumb[b-7i47knt958] {
	display: block;
	width: 40px;
	height: 52px;
	padding: 0;
	border: none;
	background: transparent;
	border-radius: var(--radius-tiny);
	overflow: hidden;
	cursor: zoom-in;
}

.import-thumb img[b-7i47knt958] {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.import-photos[b-7i47knt958] {
	display: flex;
	gap: 4px;
}

/* Фикс. слоты 48×48, не сжимаются при пересчёте ширин колонок. */
.import-photos[b-7i47knt958]  .mediaslot {
	flex: 0 0 auto;
	width: 48px;
}

.import-row-actions[b-7i47knt958] {
	display: flex;
	gap: 4px;
	width: 100%;
	justify-content: center;
}

/* === Мобилка: прятать неактивные группы колонок и сузить таблицу до видимых ===
   «Все» (show-all) не прячет; «Данные» прячет фото, «Фото» прячет группу данных. Класс колонки QuickGrid
   попадает и на th, и на td, поэтому заголовок и ячейки прячутся вместе. Ширину таблицы переключаем на
   --grid-width-mobile (только видимые колонки), иначе скрытые оставили бы пустое место. */
@media (max-width: 600px) {
	.import-grid-host[b-7i47knt958]  .datagrid {
		--datagrid-min-width: var(--grid-width-mobile);
	}

	.import-grid-host.show-data[b-7i47knt958]  .col-photos {
		display: none;
	}

	.import-grid-host.show-photos[b-7i47knt958]  .col-values {
		display: none;
	}
}
/* /Components/Pages/Seller/Dashboard.razor.rz.scp.css */
.dashboard[b-nszj9oyzk4] {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.dashboard-avatar[b-nszj9oyzk4] {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 8px 0;
}

.dashboard-stats[b-nszj9oyzk4] {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
}

/* EditForm рендерит <form> — растягиваем его на высоту card-content, чтобы кнопка прибилась к низу. */
.dashboard-card-form[b-nszj9oyzk4] {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

/* Обёртки полей заполняют высоту карточки, чтобы .dashboard-card-actions ушли вниз (margin-top:auto). */
.dashboard-settings[b-nszj9oyzk4],
.dashboard-personal[b-nszj9oyzk4] {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.dashboard-settings-row[b-nszj9oyzk4] {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Кнопка сохранения прибита к нижней части карточки; подпись-подтверждение над ней. */
.dashboard-card-actions[b-nszj9oyzk4] {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dashboard-card-actions[b-nszj9oyzk4]  .button {
	width: 100%;
}

.dashboard-lists[b-nszj9oyzk4],
.dashboard-row[b-nszj9oyzk4] {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 16px;
}

/* На мобильном ужимаем гэп между карточками, как в каталоге (порог 600px, gap 4px). */
@media (max-width: 600px) {
	.dashboard-stats[b-nszj9oyzk4],
	.dashboard-lists[b-nszj9oyzk4],
	.dashboard-row[b-nszj9oyzk4] {
		gap: 4px;
	}
}

.dashboard-table-wrap[b-nszj9oyzk4] {
	overflow-x: auto;
}

.dashboard-table[b-nszj9oyzk4] {
	width: 100%;
	border-collapse: collapse;
}

.dashboard-table th[b-nszj9oyzk4] {
	text-align: left;
	padding: 8px 12px;
	border-bottom: 1px solid var(--muted);
	white-space: nowrap;
}

.dashboard-table td[b-nszj9oyzk4] {
	padding: 12px;
	border-bottom: 1px solid var(--muted);
	vertical-align: middle;
}

.dashboard-table tbody tr:last-child td[b-nszj9oyzk4] {
	border-bottom: none;
}

.dashboard-table tbody tr:hover[b-nszj9oyzk4] {
	background: var(--surface);
}

.dashboard-table.clickable tbody tr[b-nszj9oyzk4] {
	cursor: pointer;
}

.dashboard-list-more[b-nszj9oyzk4] {
	margin-top: 16px;
}

.dashboard-list-more[b-nszj9oyzk4]  .button {
	width: 100%;
}
/* /Components/Pages/Seller/DropoffPoints.razor.rz.scp.css */
/* Страница «Адреса отправки»: шапка с кнопкой, сетка карточек-адресов (как «Адреса пунктов»). */
.dropoffs-page[b-92ta5uw8ix] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-large);
}

/* Шапка: заголовок слева, «Добавить» справа. */
.dropoffs-head[b-92ta5uw8ix] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-medium);
}

.dropoffs-loading[b-92ta5uw8ix],
.dropoffs-empty[b-92ta5uw8ix] {
	display: flex;
	justify-content: center;
	padding: var(--spacing-huge) 0;
}

/* Пустое состояние — две строки по центру. */
.dropoffs-empty[b-92ta5uw8ix] {
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-tiny);
}

/* Сетка карточек — авто-заполнение; карты тянутся по ширине ячейки, высоту держит aspect-ratio. */
.dropoffs-grid[b-92ta5uw8ix] {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	align-items: start;
	gap: var(--spacing-large);
}
/* /Components/Pages/Seller/Offers.razor.rz.scp.css */
.offers-header[b-odejcbpssq] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-medium);
}

.offers-actions[b-odejcbpssq] {
	display: flex;
	align-items: center;
	gap: var(--spacing-small);
}

.offers-toolbar[b-odejcbpssq] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-medium);
	margin: var(--spacing-small) 0 var(--spacing-medium);
}

.offers-filter[b-odejcbpssq] {
	display: flex;
	align-items: center;
	gap: var(--spacing-tiny);
}

/* Совпадает с шириной сортировки в админ-каталоге; max-width — чтобы не вылезало на узких экранах. */
.offers-sort[b-odejcbpssq] {
	width: 246px;
	max-width: 100%;
}
/* /Components/Pages/Seller/OrderDetail.razor.rz.scp.css */
/* Шапка заказа: номер слева, статус-бэйдж справа. */
.order-head[b-7rufuprjuu] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-regular);
}

/* Блок сдачи заказа в пункт приёма (подтверждённый заказ): штрихкод + адрес. */
.order-ship-block[b-7rufuprjuu] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-medium);
}

/* Список строк «Информация» (Создан / Обработать до / Отправить до) — плотнее, чем блок. */
.order-info[b-7rufuprjuu] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-tiny);
}

/* Строка трек-номера в блоке доставки: подпись слева, значение справа. */
.order-track-row[b-7rufuprjuu] {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--spacing-regular);
}

/* Лента шагов доставки — сверху вниз, кружок + подпись. */
.delivery-steps[b-7rufuprjuu] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-small);
}

.delivery-step[b-7rufuprjuu] {
	display: flex;
	align-items: center;
	gap: var(--spacing-small);
}

/* Дата/время достижения стадии — прижата к правому краю строки шага. */
.delivery-step-time[b-7rufuprjuu] {
	margin-left: auto;
	white-space: nowrap;
}

/* Кружок-маркер шага: настоящий круг, цвет зависит от состояния. */
.delivery-dot[b-7rufuprjuu] {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--secondary);
}

.delivery-dot.accent[b-7rufuprjuu]  { background: var(--accent); }
.delivery-dot.neutral[b-7rufuprjuu] { background: var(--secondary); }
.delivery-dot.success[b-7rufuprjuu] { background: var(--success); }
.delivery-dot.error[b-7rufuprjuu]   { background: var(--error); }

/* Штрихкод всегда на белом фоне (в т.ч. в тёмной теме) — иначе сканер не читает. */
.order-barcode[b-7rufuprjuu] {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-small);
	background: #ffffff;
	padding: var(--spacing-regular);
	border-radius: var(--radius-small);
}

.order-barcode svg[b-7rufuprjuu] {
	display: block;
	width: 100%;
	height: 180px;
}

/* Футер карточки заказа — дата оформления, срок подтверждения и ИТОГО (как «СУММА» в корзине). */
.order-foot[b-7rufuprjuu] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-tiny);
	margin-top: var(--spacing-small);
	padding-top: var(--spacing-small);
	border-top: 1px solid var(--muted);
}

.order-foot-row[b-7rufuprjuu],
.order-foot-refund[b-7rufuprjuu],
.order-foot-total[b-7rufuprjuu] {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--spacing-regular);
}

/* Строка возврата — над ИТОГО в частично подтверждённом заказе; отделена от строк с датами. */
.order-foot-refund[b-7rufuprjuu] {
	margin-top: var(--spacing-tiny);
}

/* Фото сборки + кнопки подтверждения — колонкой внутри Page.Narrow. */
.order-confirm-block[b-7rufuprjuu] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-medium);
}

/* Предупреждающий бокс (акцентный) — сообщение о неполной комплектации при подтверждении. */
.order-warning[b-7rufuprjuu] {
	padding: var(--spacing-regular);
	border: 1px solid var(--accent);
	border-radius: var(--radius-medium);
	background: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* Позиции заказа в одной карточке — строки 1:1 как в корзине (grid: фото | детали | цена/кол-во). */
.order-items[b-7rufuprjuu] {
	display: flex;
	flex-direction: column;
}

.cart-item[b-7rufuprjuu] {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) 120px;
	gap: var(--spacing-regular);
	align-items: center;
	padding-block: var(--spacing-small);
}

.cart-item:first-child[b-7rufuprjuu] {
	padding-top: 0;
}

.cart-item:last-child[b-7rufuprjuu] {
	padding-bottom: 0;
}

.cart-item + .cart-item[b-7rufuprjuu] {
	border-top: 1px solid var(--muted);
}

.cart-item-image[b-7rufuprjuu] {
	position: relative;
	width: 104px;
	flex-shrink: 0;
	border-radius: var(--radius-small);
	overflow: hidden;
}

.cart-item-noimage[b-7rufuprjuu] {
	aspect-ratio: 3 / 4;
	background: var(--surface);
	display: flex;
	align-items: center;
	justify-content: center;
}

.cart-item-noimage .icon[b-7rufuprjuu] {
	width: 28px;
	height: 28px;
	color: var(--muted);
}

/* Оба оверлея одной высоты, чтобы иконка игры и бэйдж состояния совпадали по линии. */
.cart-badge[b-7rufuprjuu] {
	position: absolute;
	z-index: 1;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: calc(100% - var(--spacing-small));
}

.cart-badge-game[b-7rufuprjuu] {
	top: var(--spacing-tiny);
	left: var(--spacing-tiny);
	width: 24px;
}

.cart-badge-cond[b-7rufuprjuu] {
	top: var(--spacing-tiny);
	right: var(--spacing-tiny);
}

.cart-item-details[b-7rufuprjuu] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-tiny);
	min-width: 0;
}

.cart-item-name[b-7rufuprjuu] {
	display: block;
	min-width: 0;
	text-decoration: none;
}

.cart-item-right[b-7rufuprjuu] {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--spacing-small);
	white-space: nowrap;
}

.cart-item-right[b-7rufuprjuu]  .stepper {
	width: 100%;
	justify-content: space-between;
}

@media (max-width: 600px) {
	.cart-item[b-7rufuprjuu] {
		grid-template-columns: auto minmax(0, 1fr) 110px;
		gap: var(--spacing-small);
		padding-block: var(--spacing-tiny);
	}

	.cart-item-image[b-7rufuprjuu] {
		width: 76px;
	}

	.cart-item-details[b-7rufuprjuu] {
		gap: 0;
	}

	.cart-item-name[b-7rufuprjuu]  .label.size-content {
		font-size: var(--font-size-caption);
	}
}

/* Слоты фото/видео подтверждения — flex с переносом; слоты растягиваются и заполняют
   всю ширину строки (min-width задаёт порог переноса). */
.order-photo-grid[b-7rufuprjuu] {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--spacing-small);
}

/* Слоты растягиваются и заполняют строку впритык (как space-between), но кап роста
   равен размеру ячейки при полной строке из 5 — поэтому ВСЕ ячейки одинаковые, а
   неполная строка после переноса упирается в кап и центрируется (justify-content: center).
   min-width задаёт порог переноса на узких экранах. */
.order-photo-grid[b-7rufuprjuu]  .mediaslot {
	flex: 1 1 96px;
	min-width: 96px;
	max-width: calc((100% - 4 * var(--spacing-small)) / 5);
}

.order-confirm[b-7rufuprjuu] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-tiny);
}

/* Фото и видео сборки, прикреплённые продавцом — показываются на всех статусах, когда есть. */
.order-media[b-7rufuprjuu] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-small);
}

/* Сетка плиток — идентична слотам в блоке подтверждения (та же ширина/перенос из 5 в ряд,
   неполная строка после переноса упирается в кап и центрируется — justify-content: center). */
.order-media-grid[b-7rufuprjuu] {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--spacing-small);
}

/* Меньше 5 плиток — одна неполная строка выравнивается по левому краю (а не по центру). */
.order-media-grid.start[b-7rufuprjuu] {
	justify-content: flex-start;
}

.order-media-grid[b-7rufuprjuu]  .mediaelement {
	flex: 1 1 96px;
	min-width: 96px;
	max-width: calc((100% - 4 * var(--spacing-small)) / 5);
}

/* Блок отзыва покупателя под позициями заказа. Сама карточка — переиспользуемый ShopReviewCard
   (тот же вид, что на странице магазина); здесь только заголовок и отступ до карточки. */
.order-review[b-7rufuprjuu] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-small);
}

.order-missing[b-7rufuprjuu] {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-medium);
	padding: var(--spacing-large) 0;
}

/* Блок отсутствующих позиций частично подтверждённого заказа — под списком позиций внутри карточки,
   отделён верхней линией так же, как футер с ИТОГО. Сами строки — обычные .cart-item в .order-items. */
.order-missing-items[b-7rufuprjuu] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-small);
	margin-top: var(--spacing-small);
	padding-top: var(--spacing-small);
	border-top: 1px solid var(--muted);
}
/* /Components/Pages/Seller/Orders.razor.rz.scp.css */
/* Страница на всю высоту Page: поиск + фильтр сверху, сетка занимает остаток со внутренним скроллом. */
.orders-page[b-4nmgil7bql] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-medium);
	height: calc(100vh - 180px);
}

.orders-header[b-4nmgil7bql] {
	display: flex;
	align-items: center;
	gap: var(--spacing-small);
}

.orders-search[b-4nmgil7bql] {
	flex: 1;
	min-width: 0;
}

.orders-search[b-4nmgil7bql]  .searchfield {
	display: flex;
	width: 100%;
}

.orders-filter[b-4nmgil7bql] {
	display: flex;
	align-items: center;
	gap: var(--spacing-tiny);
	flex: 0 0 auto;
}

/* Ширины колонок — сумма = MinWidth сетки (906). Аватар живёт в ячейке покупателя. */
.orders-page[b-4nmgil7bql]  .col-id     { width: 90px; }
.orders-page[b-4nmgil7bql]  .col-user   { width: 276px; }
.orders-page[b-4nmgil7bql]  .col-total  { width: 110px; }
.orders-page[b-4nmgil7bql]  .col-date   { width: 150px; }
.orders-page[b-4nmgil7bql]  .col-status { width: 150px; }
.orders-page[b-4nmgil7bql]  .col-rating { width: 130px; }

/* Оценка покупателя — строка из 5 звёзд (заполненные/пустые), как в отзывах. */
.orders-page[b-4nmgil7bql]  .rating-stars {
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

.orders-page[b-4nmgil7bql]  .rating-stars .icon {
	width: 18px;
	height: 18px;
}

.orders-page[b-4nmgil7bql]  .rating-stars .star-filled { color: var(--accent); }
.orders-page[b-4nmgil7bql]  .rating-stars .star-empty  { color: var(--muted); }

@media (hover: hover) {
	.orders-page[b-4nmgil7bql]  .datagrid-grid tbody tr:hover {
		background: var(--surface);
	}
}

/* Навигационные ячейки — реальные ссылки, заполняющие ячейку (клик → страница заказа).
   Надёжнее «растянутой ссылки» через position:relative на <tr> (в Safari поведение не определено). */
.cell-link[b-4nmgil7bql] {
	display: flex;
	align-items: center;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.cell-link-center[b-4nmgil7bql] {
	justify-content: center;
}

/* Ячейка покупателя: аватар + имя в одну строку. */
.buyer-cell[b-4nmgil7bql] {
	gap: var(--spacing-small);
}

.buyer-cell[b-4nmgil7bql]  .avatar {
	flex: 0 0 auto;
}

.orders-loading[b-4nmgil7bql],
.orders-empty[b-4nmgil7bql] {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.orders-cap[b-4nmgil7bql] {
	flex: 0 0 auto;
	text-align: center;
}

/* Контент (таблица/заглушка) проявляется opacity 0->1 за 200 мс — сглаживает переход с лоадера.
   Элементы монтируются только после загрузки, поэтому анимация играет один раз при появлении
   (и повторно при каждом поиске: на время загрузки контент сменяется лоадером). */
@keyframes orders-fade-in-b-4nmgil7bql {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.orders-page[b-4nmgil7bql]  .datagrid,
.orders-empty[b-4nmgil7bql] {
	animation: orders-fade-in-b-4nmgil7bql 200ms ease-out;
}
/* /Components/Pages/Seller/Payout.razor.rz.scp.css */
.payout-page[b-mwox0tcset] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-medium);
}

.payout-loader[b-mwox0tcset] {
	display: flex;
	justify-content: center;
	padding: 40px 0;
}

.payout-balance[b-mwox0tcset] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-tiny);
}

.payout-bank[b-mwox0tcset] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-tiny);
}

.payout-bank-link[b-mwox0tcset] {
	text-decoration: none;
	width: fit-content;
}

.payout-form[b-mwox0tcset] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-small);
}

.payout-history[b-mwox0tcset] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-medium);
}

/* Ширины колонок истории — контент-специфичны, задаёт страница. Сумма фиксированных = MinWidth сетки (520). */
.payout-history[b-mwox0tcset]  .col-date   { width: 200px; }
.payout-history[b-mwox0tcset]  .col-amount { width: 180px; }
.payout-history[b-mwox0tcset]  .col-status { width: 140px; text-align: center; }
/* /Components/Pages/Seller/Reviews.razor.rz.scp.css */
/* Страница на всю высоту Page: заголовок + строка поиска/фильтр сверху, сетка занимает остаток. */
.reviews-page[b-j7yax6oxg2] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-medium);
    height: calc(100vh - 180px);
}

.reviews-header[b-j7yax6oxg2] {
    display: flex;
    align-items: center;
    gap: var(--spacing-small);
}

.reviews-search[b-j7yax6oxg2] {
    flex: 1;
    min-width: 0;
}

.reviews-search[b-j7yax6oxg2]  .searchfield {
    display: flex;
    width: 100%;
}

.reviews-filter[b-j7yax6oxg2] {
    display: flex;
    align-items: center;
    gap: var(--spacing-tiny);
    flex: 0 0 auto;
}

/* Ширины колонок — сумма = MinWidth сетки (778). */
.reviews-page[b-j7yax6oxg2]  .col-order       { width: 130px; }
.reviews-page[b-j7yax6oxg2]  .col-buyer-name  { width: 316px; }
.reviews-page[b-j7yax6oxg2]  .col-rating      { width: 130px; }
.reviews-page[b-j7yax6oxg2]  .col-date        { width: 150px; }
.reviews-page[b-j7yax6oxg2]  .col-actions     { width: 72px; text-align: right; }

/* Кнопка контекстного меню — 8px отступа от правого края ячейки (сверх её паддинга). */
.reviews-page[b-j7yax6oxg2]  .col-actions .contextmenu { margin-right: 8px; }

/* Ячейка имени: аватар + имя в одну строку. */
.name-cell[b-j7yax6oxg2] {
    gap: var(--spacing-small);
}

.name-cell[b-j7yax6oxg2]  .avatar {
    flex: 0 0 auto;
}

.order-cell[b-j7yax6oxg2] {
    display: flex;
    align-items: center;
    gap: var(--spacing-tiny);
    height: 100%;
}

.order-cell .cell-link[b-j7yax6oxg2] {
    flex: 1;
    min-width: 0;
}

/* Навигационные ячейки — реальные ссылки, заполняющие ячейку (клик → страница заказа). */
.cell-link[b-j7yax6oxg2] {
    display: flex;
    align-items: center;
    height: 100%;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.cell-link-center[b-j7yax6oxg2] {
    justify-content: center;
}

@media (hover: hover) {
    .reviews-page[b-j7yax6oxg2]  .datagrid-grid tbody tr:hover {
        background: var(--surface);
    }
}

/* Оценка — строка звёзд (клик по ячейке открывает попап отзыва, как и по всей строке). */
.rating-stars[b-j7yax6oxg2] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.rating-stars .icon[b-j7yax6oxg2] {
    width: 18px;
    height: 18px;
}

.rating-stars .star-filled[b-j7yax6oxg2] { color: var(--accent); }
.rating-stars .star-empty[b-j7yax6oxg2]  { color: var(--muted); }

.reviews-state[b-j7yax6oxg2] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes reviews-fade-in-b-j7yax6oxg2 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.reviews-page[b-j7yax6oxg2]  .datagrid,
.reviews-state[b-j7yax6oxg2] {
    animation: reviews-fade-in-b-j7yax6oxg2 200ms ease-out;
}
/* /Components/Pages/Shop/Reviews.razor.rz.scp.css */
.shop-reviews-loading[b-0yufvqsifj] {
    display: flex;
    justify-content: center;
    padding: var(--spacing-large) 0;
}

.shop-reviews-page[b-0yufvqsifj] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-medium);
}

.shop-reviews-header[b-0yufvqsifj] {
    display: flex;
    align-items: center;
    gap: var(--spacing-medium);
}

.shop-reviews-title[b-0yufvqsifj] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-tiny);
    min-width: 0;
}

.shop-reviews-meta[b-0yufvqsifj] {
    display: flex;
    align-items: center;
    gap: var(--spacing-tiny);
}

/* Строка управления: фильтр по оценке слева, сортировка справа — всегда в одну строку. */
.shop-reviews-controls[b-0yufvqsifj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-small);
    flex-wrap: nowrap;
}

/* Фильтр растёт по содержимому в свободное место строки, но может ужиматься (flex-shrink),
   чтобы не выйти за Page — при нехватке места SelectField сворачивает лишнее в «+N». */
.shop-reviews-filter[b-0yufvqsifj] {
    flex: 0 1 auto;
    min-width: 170px;
}

.shop-reviews-filter[b-0yufvqsifj]  .selectfield {
    width: 100%;
    min-width: 0;
}

.shop-reviews-sort[b-0yufvqsifj] {
    flex: 0 0 auto;
    min-width: 220px;
}

/* Контейнер виртуализации — обычный блок: интервал между карточками задаёт сам элемент,
   чтобы не задевать спейсеры Virtualize. */
.shop-reviews-item[b-0yufvqsifj] {
    padding-bottom: var(--spacing-small);
}

.shop-reviews-placeholder[b-0yufvqsifj] {
    display: flex;
    justify-content: center;
    padding: var(--spacing-medium) 0;
}

.shop-reviews-empty[b-0yufvqsifj] {
    padding: var(--spacing-large) 0;
    text-align: center;
}
/* /Components/Pages/Shop/Shop.razor.rz.scp.css */
.shop-header[b-06inirddgd] {
	display: flex;
	align-items: center;
	gap: 16px;
}

.shop-info[b-06inirddgd] {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.shop-meta[b-06inirddgd] {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--primary, #222);
}

.shop-meta-divider[b-06inirddgd] {
	color: var(--secondary, #888);
}

/* SearchField-форма сама inline-flex (ширина по контенту и растёт при вводе) —
   фиксируем на всю ширину контейнера, тогда текст скроллится внутри инпута. */
.shop-search[b-06inirddgd]  .searchfield {
	width: 100%;
}

.shop-controls[b-06inirddgd] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.shop-filter[b-06inirddgd] {
	display: flex;
	align-items: center;
	gap: 8px;
}

.shop-sort[b-06inirddgd] {
	margin-left: auto;
	min-width: 220px;
}

.shop-loading[b-06inirddgd],
.shop-missing[b-06inirddgd],
.shop-empty[b-06inirddgd] {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px 0;
	text-align: center;
}

/* Секция «3 последних отзыва» под шапкой магазина. */
.shop-reviews[b-06inirddgd] {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Отзывы-превью строкой: три карточки в ряд на десктопе, в столбец на узких экранах. */
.shop-reviews-strip[b-06inirddgd] {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 12px;
}

/* Кнопка «ЕЩЁ N ОТЗЫВОВ» под строкой превью — на всю ширину, но не шире 700px, по центру. */
.shop-reviews-more[b-06inirddgd] {
	display: flex;
	justify-content: center;
}

.shop-reviews-more[b-06inirddgd]  .button {
	width: 100%;
	max-width: 700px;
}
/* /Components/Pages/Support.razor.rz.scp.css */
.support-page[b-ejh03chzj5] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-medium);
	padding: var(--spacing-large) 0;
}

.support-form[b-ejh03chzj5] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-medium);
}

.support-success[b-ejh03chzj5] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-medium);
}

.support-note[b-ejh03chzj5] {
	padding-top: var(--spacing-small);
}

.support-note[b-ejh03chzj5]  .support-link {
	color: var(--accent);
	text-decoration: none;
}

.support-note[b-ejh03chzj5]  .support-link:hover {
	text-decoration: underline;
}
/* /Components/Pages/Transactions/Index.razor.rz.scp.css */
/* Страница на всю высоту Page: шапка сверху, сетка занимает остаток со внутренним скроллом. */
.tx-page[b-hv0p0c5ead] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-medium);
    height: calc(100vh - 180px);
}

/* Заголовок слева, кнопка экспорта — справа. */
.tx-header[b-hv0p0c5ead] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-small);
}

/* Ширины колонок задаёт страница. Комментарий тянется до MinWidth сетки (960). */
.tx-page[b-hv0p0c5ead]  .col-id      { width: 300px; }
.tx-page[b-hv0p0c5ead]  .col-type    { width: 130px; }
.tx-page[b-hv0p0c5ead]  .col-amount  { width: 140px; text-align: right; }
.tx-page[b-hv0p0c5ead]  .col-comment { width: 240px; }
.tx-page[b-hv0p0c5ead]  .col-date    { width: 150px; }

@media (hover: hover) {
    .tx-page[b-hv0p0c5ead]  .datagrid-grid tbody tr:hover {
        background: var(--surface);
    }
}

/* Лоадер и пустой список — центрированы на месте сетки. */
.tx-loading[b-hv0p0c5ead],
.tx-empty[b-hv0p0c5ead] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Плавное проявление контента после лоадера (как на других таблицах). */
@keyframes tx-fade-in-b-hv0p0c5ead {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.tx-page[b-hv0p0c5ead]  .datagrid,
.tx-empty[b-hv0p0c5ead] {
    animation: tx-fade-in-b-hv0p0c5ead 200ms ease-out;
}
/* /Components/Shared/AddressCard.razor.rz.scp.css */
/* Карта-подложка 16:10 со скруглением; контент поверх абсолютом. */
.address-card[b-k1qll33bgz] {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	border-radius: var(--radius-medium);
	border: 2px solid var(--muted);
	background: var(--surface);
	overflow: hidden;
	box-sizing: border-box;
}

/* Основной адрес — акцентная обводка. */
.address-card-default[b-k1qll33bgz] {
	border-color: var(--accent);
}

/* Статик-карта заполняет карточку фоном. */
.address-card-map[b-k1qll33bgz] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Пин по центру карты (точка всегда в центре кадра). Остриё — на центр точки. */
.address-card-marker[b-k1qll33bgz] {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 32px;
	height: 41px;
	transform: translate(-50%, -100%);
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
	pointer-events: none;
}

/* Оверлей сверху: город/адрес слева, действия справа. Прижат к верху — снизу карты логотип/копирайт
   Яндекса, перекрывать его нельзя. Тёмный градиент — для читаемости белого текста поверх карты. */
.address-card-top[b-k1qll33bgz] {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-small);
	padding: var(--spacing-regular);
	background: linear-gradient(to bottom, rgba(14, 14, 16, 0.85), rgba(14, 14, 16, 0));
}

.address-card-info[b-k1qll33bgz] {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--spacing-tiny);
	min-width: 0;
	flex: 1;
}

.address-card-menu[b-k1qll33bgz] {
	margin-left: auto;
	flex-shrink: 0;
}
/* /Components/Shared/AddressField.razor.rz.scp.css */
.dropoff-address-field[b-ufirvrk7ov] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-tiny);
}

.dropoff-address-label[b-ufirvrk7ov] {
	font-family: var(--font-family);
	font-size: var(--font-size-caption);
	font-weight: var(--font-weight-regular);
	color: var(--secondary);
	line-height: 1.2;
	padding: 0 var(--spacing-tiny);
}

.dropoff-address-shell[b-ufirvrk7ov] {
	display: flex;
	align-items: center;
	gap: var(--spacing-small);
	min-height: var(--controls-medium);
	padding: var(--spacing-tiny) var(--spacing-tiny) var(--spacing-tiny) var(--spacing-medium);
	background: var(--surface);
	border: 1px solid var(--secondary);
	border-radius: var(--radius-small);
}

.dropoff-address-value[b-ufirvrk7ov] {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--primary);
	font-family: var(--font-family);
	font-size: var(--font-size-content);
	font-weight: var(--font-weight-regular);
	line-height: 1.2;
}

.dropoff-address-value.empty[b-ufirvrk7ov] {
	color: var(--secondary);
}
/* /Components/Shared/AddressPicker.razor.rz.scp.css */
.address-picker-widget[b-y6sipxtn4i] {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
/* /Components/Shared/ArticleEditDialog.razor.rz.scp.css */
.article-edit-meta[b-04phakm7g0] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-small);
}
/* /Components/Shared/AttributeFields.razor.rz.scp.css */
/* Поля-атрибуты идут колонкой — каждое на своей строке. Текстовые/селект-поля разделяет их собственное
   зарезервированное место под ошибку, поэтому свой gap контейнеру не нужен (не меняем их вертикальный ритм). */
.attribute-fields[b-9bh94jwpom] {
	display: flex;
	flex-direction: column;
}

/* Switch по природе inline-flex и без собственного вертикального ритма: без обёртки соседние булевы поля
   липли друг к другу (в диалоге) или выстраивались в одну строку (в форме массового импорта). Даём каждому
   строку высотой с контрол — переключатели разделены и выровнены по общему ритму полей. */
.attribute-fields-bool[b-9bh94jwpom] {
	display: flex;
	align-items: center;
	min-height: var(--controls-medium);
}
/* /Components/Shared/BankDetailsOtpDialog.razor.rz.scp.css */
.bank-details-otp-dialog[b-fsxi9aptur] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-medium);
}
/* /Components/Shared/BulkImportFiltersDialog.razor.rz.scp.css */
.bulk-filters[b-evn3xc9ymp] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-medium);
}

.bulk-filter-group[b-evn3xc9ymp] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-tiny);
}

.bulk-filter-options[b-evn3xc9ymp] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-tiny);
}

/* [ ] Rarity .......... {count} — checkbox left, occurrence count pushed to the right edge. */
.bulk-filter-option[b-evn3xc9ymp] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-small);
}

.bulk-filter-count[b-evn3xc9ymp] {
	flex: 0 0 auto;
	font-size: var(--font-size-caption);
	color: var(--secondary);
}
/* /Components/Shared/CheckoutSummary.razor.rz.scp.css */
.summary[b-yd6ld10koh] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-medium);
}

.summary-header[b-yd6ld10koh] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-regular);
}

.summary-rows[b-yd6ld10koh] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-small);
}

.summary-row[b-yd6ld10koh] {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--spacing-regular);
}

.summary-row.total[b-yd6ld10koh] {
	margin-top: var(--spacing-small);
	padding-top: var(--spacing-small);
	border-top: 1px solid var(--muted);
}

.summary-actions[b-yd6ld10koh] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-regular);
	margin-top: var(--spacing-small);
}

.summary-actions[b-yd6ld10koh]  .button {
	width: 100%;
}
/* /Components/Shared/CookieConsent.razor.rz.scp.css */
.cookie-consent[b-x287u2upu8] {
	position: fixed;
	left: max(var(--spacing-regular), env(safe-area-inset-left));
	right: max(var(--spacing-regular), env(safe-area-inset-right));
	bottom: max(var(--spacing-medium), env(safe-area-inset-bottom));
	margin-inline: auto;
	max-width: 720px;
	/* Below dialogs/reconnect overlay (1000/9999) but above page content. */
	z-index: 900;
	display: flex;
	align-items: center;
	gap: var(--spacing-medium);
	padding: var(--spacing-regular) var(--spacing-medium);
	background: var(--surface);
	border: 1px solid var(--muted);
	border-radius: var(--radius-medium);
	box-shadow: var(--shadow-large);
}

.cookie-consent[b-x287u2upu8]  .button {
	flex-shrink: 0;
}

@media (max-width: 600px) {
	.cookie-consent[b-x287u2upu8] {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}
}
/* /Components/Shared/CreateOfferDialog.razor.rz.scp.css */
/* Gap самой формы — scoped-переопределение глобального .dialog-extended (spacing-medium),
   только для диалога создания оффера; остальные .dialog-extended не трогаем. */
.dialog-extended[b-wrbnmpx0g7] {
	gap: var(--spacing-small);
}

.offer-section[b-wrbnmpx0g7] {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* Секция «Параметры» — поля идут без зазора (собственные отступы полей достаточны). */
.offer-section.parameters[b-wrbnmpx0g7] {
	gap: 0;
}

/* Количество и Цена в одну строку, поровну на всю ширину (как .offer-photo-grid:
   элементы-дети заполняют 1fr-колонки, ::deep не нужен). */
.offer-price-row[b-wrbnmpx0g7] {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}

.offer-photo-grid[b-wrbnmpx0g7] {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.75rem;
}
/* /Components/Shared/DeleteAccountDialog.razor.rz.scp.css */
.delete-account-dialog[b-8fjs2cllom] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-medium);
}
/* /Components/Shared/DropoffField.razor.rz.scp.css */
.dropoff-field[b-fzdwd0dbxx] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-tiny);
	width: 100%;
}

.dropoff-field-label[b-fzdwd0dbxx] {
	font-family: var(--font-family);
	font-size: var(--font-size-caption);
	font-weight: var(--font-weight-regular);
	color: var(--secondary);
	line-height: 1.2;
	padding: 0 var(--spacing-tiny);
}

.dropoff-field-card[b-fzdwd0dbxx] {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	border-radius: var(--radius-medium);
	overflow: hidden;
	box-sizing: border-box;
}

.dropoff-field-card.empty[b-fzdwd0dbxx] {
	border: 2px dashed var(--secondary);
	display: flex;
	flex-direction: column;
}

/* Invalid state — matches TextField: the card border turns --error and the message below
   (.dropoff-field-error) goes red. */
.dropoff-field-card.empty.error[b-fzdwd0dbxx] {
	border-color: var(--error);
}

.dropoff-field-card.filled[b-fzdwd0dbxx] {
	border: 1px solid var(--muted);
	cursor: pointer;
}

.dropoff-field-card.filled:focus-visible[b-fzdwd0dbxx] {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.dropoff-field-city[b-fzdwd0dbxx] {
	padding: var(--spacing-small);
}

.dropoff-field-empty-center[b-fzdwd0dbxx] {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-small);
	color: var(--secondary);
}

.dropoff-field-pin[b-fzdwd0dbxx] {
	width: 32px;
	height: 32px;
	background-color: currentColor;
	-webkit-mask: url("/icons/pin.svg") no-repeat center / contain;
	mask: url("/icons/pin.svg") no-repeat center / contain;
}

.dropoff-field-map[b-fzdwd0dbxx] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Brand pin overlaid at the card centre — the static map is centred on the selected point
   (ll), so the point is at the centre; translate -100% Y puts the pin's tip there. Reuses the
   same coloured /icons/map-pin.svg as the live map markers (multi-colour, so an <img>, not a mask). */
.dropoff-field-marker[b-fzdwd0dbxx] {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -100%);
	width: 36px;
	height: 46px;
	pointer-events: none;
	z-index: 1;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

/* Pinned to the TOP — the bottom of the static map carries the Yandex logo and copyright,
   which the API terms forbid covering. */
.dropoff-field-address[b-fzdwd0dbxx] {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-tiny);
	padding: var(--spacing-small) var(--spacing-medium);
	background: color-mix(in srgb, var(--background) 60%, transparent);
	color: #fff;
	font-family: var(--font-family);
}

/* Caption above the address making it clear the point is a Yandex Delivery pickup point,
   not one of our own. */
.dropoff-field-provider[b-fzdwd0dbxx] {
	font-size: var(--font-size-caption);
	color: rgba(255, 255, 255, 0.8);
}

.dropoff-field-address-text[b-fzdwd0dbxx] {
	font-size: var(--font-size-content);
	font-weight: var(--font-weight-regular);
}

/* Validation message — same metrics/colour and reserved space (min-height) as TextField's
   .textfield-error, so the layout doesn't jump when the message appears. */
.dropoff-field-error[b-fzdwd0dbxx] {
	font-family: var(--font-family);
	font-size: var(--font-size-caption);
	font-weight: var(--font-weight-regular);
	color: var(--error);
	line-height: 1.2;
	padding: 0 var(--spacing-tiny);
	min-height: var(--font-size-caption);
}
/* /Components/Shared/DropoffPicker.razor.rz.scp.css */
.dropoff-picker[b-2sb79wuh7f] {
	position: relative;
	display: grid;
	grid-template-columns: minmax(280px, 360px) 1fr;
	grid-template-rows: 1fr;
	width: 100%;
	height: 100%;
	min-height: 0;
}

.dropoff-picker-toggle[b-2sb79wuh7f] {
	display: none;
}

.dropoff-picker-list[b-2sb79wuh7f] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-small);
	padding: var(--spacing-medium);
	overflow-y: auto;
	border-right: 1px solid var(--muted);
	min-height: 0;
}

.dropoff-picker-item[b-2sb79wuh7f] {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--spacing-tiny);
	padding: var(--spacing-small) var(--spacing-medium);
	background: transparent;
	border: 1px solid var(--muted);
	border-radius: var(--radius-small);
	cursor: pointer;
	text-align: left;
	color: var(--primary);
	font-family: var(--font-family);
}

@media (hover: hover) {
	.dropoff-picker-item:hover[b-2sb79wuh7f] {
		background: var(--muted);
	}
}

.dropoff-picker-provider[b-2sb79wuh7f] {
	font-size: var(--font-size-caption);
	color: var(--secondary);
}

.dropoff-picker-address[b-2sb79wuh7f] {
	font-size: var(--font-size-content);
	font-weight: var(--font-weight-regular);
}

.dropoff-picker-schedule[b-2sb79wuh7f] {
	font-size: var(--font-size-caption);
	color: var(--secondary);
}

.dropoff-picker-empty[b-2sb79wuh7f],
.dropoff-picker-more[b-2sb79wuh7f] {
	color: var(--secondary);
	font-family: var(--font-family);
	font-size: var(--font-size-caption);
	text-align: center;
	padding: var(--spacing-small);
}

.dropoff-picker-map[b-2sb79wuh7f] {
	width: 100%;
	height: 100%;
	min-height: 0;
}

/* Hide only the optional "Открыть Яндекс Карты" control — the mandatory Yandex logo and the
   "Условия использования" link stay (license requirement). :has() pins it to the control that
   actually contains that button, so our zoom/geolocation controls are untouched. ::deep crosses
   into the ymaps3 DOM, which is built by JS and carries no scoped-CSS attribute. */
.dropoff-picker-map[b-2sb79wuh7f]  .ymaps3--control:has(.ymaps3--open-maps-button) {
	display: none;
}

/* Mobile: one view at a time, no header row — the list/map toggle floats over the
   top of the content; the list gets top padding so it clears the floating toggle. */
@media (max-width: 720px) {
	.dropoff-picker[b-2sb79wuh7f] {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
	}

	.dropoff-picker-toggle[b-2sb79wuh7f] {
		display: flex;
		justify-content: center;
		position: absolute;
		top: var(--spacing-small);
		left: 50%;
		transform: translateX(-50%);
		z-index: 2;
	}

	.dropoff-picker-list[b-2sb79wuh7f],
	.dropoff-picker-map[b-2sb79wuh7f] {
		grid-row: 1;
		grid-column: 1;
	}

	.dropoff-picker-list[b-2sb79wuh7f] {
		border-right: none;
		padding-top: calc(var(--controls-medium) + var(--spacing-medium));
	}

	.dropoff-picker.view-list .dropoff-picker-map[b-2sb79wuh7f] {
		display: none;
	}

	.dropoff-picker.view-map .dropoff-picker-list[b-2sb79wuh7f] {
		display: none;
	}
}
/* /Components/Shared/EditOfferDialog.razor.rz.scp.css */
.offer-section[b-tg6ifuihy6] {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.offer-photo-grid[b-tg6ifuihy6] {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.75rem;
}

/* Шапка с неизменяемым контекстом оффера: товар + игра·категория + печать. */
.edit-offer-head[b-tg6ifuihy6] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-tiny);
}
/* /Components/Shared/GameCard.razor.rz.scp.css */
.game-card[b-u4dgak28i9] {
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 30px;
	padding: 1.5rem;
	height: 100%;
	transition: border-color 0.2s, transform 0.2s;
	cursor: pointer;
}

.game-card:hover[b-u4dgak28i9] {
	border-color: var(--color-accent);
	transform: translateY(-2px);
}

.game-card-title[b-u4dgak28i9] {
	margin-bottom: 0.5rem;
	color: var(--color-text);
}

.game-card-text[b-u4dgak28i9] {
	font-size: 14px;
	margin-bottom: 0;
}
/* /Components/Shared/Loader.razor.rz.scp.css */
.loader-overlay[b-r35viycml6] {
	display: flex;
	justify-content: center;
	padding-top: 6rem;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	z-index: 1;
}

.loader-overlay.visible[b-r35viycml6] {
	opacity: 1;
}

.loader-spinner[b-r35viycml6] {
	width: 2.5rem;
	height: 2.5rem;
	border: 3px solid var(--color-text);
	border-top-color: var(--color-accent);
	border-radius: 50%;
	animation: loader-spin-b-r35viycml6 0.7s linear infinite;
}

@keyframes loader-spin-b-r35viycml6 {
	to {
		transform: rotate(360deg);
	}
}
/* /Components/Shared/OfferProduct.razor.rz.scp.css */
/* Surface-блок дизайн-системы (как Card): мягкая заливка --muted вместо прозрачного
   фона и белой рамки --primary, которые выбивались из стиля. Бордюр по умолчанию
   прозрачный и подсвечивается на hover; фокус-ринг — --accent. Отдельный элемент
   вместо компонента Button, т.к. карточке нужны переменная высота и full-bleed фото. */
.offer-product[b-11rm5hx4ck] {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: stretch;
	column-gap: 0.75rem;
	width: 100%;
	padding: var(--spacing-small);
	border: 1px solid transparent;
	border-radius: var(--radius-small);
	background-color: var(--muted);
	color: var(--primary);
	font-family: var(--font-family), system-ui;
	text-align: left;
	cursor: pointer;
	outline: 1px solid transparent;
	outline-offset: 0;
	transition: background-color var(--duration-medium) var(--ease-in-out),
		border-color var(--duration-medium) var(--ease-in-out),
		outline-color var(--duration-medium) var(--ease-in-out),
		outline-offset var(--duration-medium) var(--ease-in-out);
}

@media (hover: hover) {
	.offer-product:hover[b-11rm5hx4ck] {
		border-color: var(--secondary);
		background-color: color-mix(in srgb, var(--foreground) 10%, var(--muted));
	}
}

.offer-product:active[b-11rm5hx4ck] {
	background-color: color-mix(in srgb, var(--foreground) 16%, var(--muted));
}

.offer-product:focus-visible[b-11rm5hx4ck] {
	outline-color: var(--accent);
	outline-offset: 2px;
}

/* The text column (1fr) drives the row height; the photo lives in the auto column and is
   subordinate. The thumb stretches to the text-driven row height and derives its width
   from aspect-ratio (1:1). Being a grid cell, it is confined to its column and can never
   overlap the text — the reserve is nothing but that square aspect. */
.offer-product-thumb[b-11rm5hx4ck] {
	position: relative;
	align-self: stretch;
	aspect-ratio: 1 / 1;
	cursor: zoom-in;
}

/* The image is taken out of flow so it never contributes to — only fills — the
   text-driven height. inset: 0 + margin: auto centres it; max-* with width/height: auto
   keeps the natural proportions and makes the img box equal the painted graphic, so the
   radius rounds the actual photo and not the transparent letterbox. */
.offer-product-thumb img[b-11rm5hx4ck] {
	position: absolute;
	inset: 0;
	margin: auto;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	border-radius: var(--radius-tiny);
}

.offer-product-thumb-empty[b-11rm5hx4ck] {
	cursor: default;
	border-radius: var(--radius-tiny);
	background-color: color-mix(in srgb, var(--foreground) 8%, transparent);
}

/* Card text is the design-system <Label> with MaxLines: the name reserves and clamps to two lines,
   the meta lines to one. Because the name's height is fixed at two lines regardless of length, the
   text column no longer grows and the stretch+aspect thumb stays a fixed square. */
.offer-product-info[b-11rm5hx4ck] {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.125rem;
}
/* /Components/Shared/OfferProductPicker.razor.rz.scp.css */
/* Список результатов поиска товара. Стиль живёт здесь (в scoped-css самого пикера),
   а не в CreateOfferDialog: div .offer-results рендерит именно этот компонент, поэтому
   в scope диалога селектор не применялся — из-за этого карточки шли вплотную. Зазор
   между карточками — spacing-small. Собственного скролла у списка нет: товары выводятся
   целиком, а при нехватке места скроллится само тело диалога (.dialog-child-content). */
.offer-results[b-re636vb0e6] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-small);
}
/* /Components/Shared/OrderCard.razor.rz.scp.css */
/* Карточка заказа — surface-блок-ссылка (как Card, но кликается целиком). Тянется на высоту ячейки грида. */
.order-card[b-oq66fakbcq] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-tiny);
	padding: var(--spacing-regular);
	background: var(--surface);
	border: 1px solid var(--muted);
	border-radius: var(--radius-medium);
	box-shadow: var(--shadow-small);
	text-decoration: none;
	color: inherit;
	height: 100%;
	box-sizing: border-box;
}

/* Шапка: номер слева, бэйдж статуса справа. */
.order-card-head[b-oq66fakbcq] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-small);
}

/* Оценка покупателя (звёзды) вместо бэйджа статуса — тот же стиль, что в карточке отзыва. */
.order-card-stars[b-oq66fakbcq] {
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

.order-card-stars .icon[b-oq66fakbcq] {
	width: 16px;
	height: 16px;
}

.order-card-stars .star-filled[b-oq66fakbcq] { color: var(--accent); }
.order-card-stars .star-empty[b-oq66fakbcq]  { color: var(--muted); }

/* Ряд превью: слоты фиксированного пиксельного размера под 5 штук (портрет 3:4), выравнивание слева.
   Одинаковы на всех карточках → фото везде одной высоты. У ячеек скруглений нет. */
.order-card-images[b-oq66fakbcq] {
	display: flex;
	flex-wrap: nowrap;
	overflow: hidden;
	gap: var(--spacing-tiny);
	/* Высота ряда жёстко фиксирована — карточка не прыгает независимо от пропорций фото и момента
	   отрисовки. Плитки тянутся на эту высоту, изображения вписываются с сохранением пропорций. */
	height: 80px;
	/* По умолчанию плитки жмутся влево. Когда ряд заполнен (остаток до края маленький), C# добавляет
	   класс distributed и они раскладываются по всей ширине (space-between). */
	justify-content: flex-start;
}

.order-card-images.distributed[b-oq66fakbcq] {
	justify-content: space-between;
	gap: 0;
}

.order-card-tile[b-oq66fakbcq] {
	flex: 0 0 auto;
	width: 56px;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Изображение вписывается в ячейку целиком (contain); небольшое скругление — на самом фото. */
.order-card-tile img[b-oq66fakbcq] {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: var(--radius-tiny);
	display: block;
}

.order-card-tile-empty[b-oq66fakbcq] {
	width: 28px;
	height: 28px;
	color: var(--muted);
}

/* Плитка со свёрнутыми позициями [+M] — небольшое скругление и заметный фон. */
.order-card-tile-more[b-oq66fakbcq] {
	background: var(--muted);
	border-radius: var(--radius-tiny);
}

/* Магазин: аватар слева, название над рейтингом в колонке, дата прижата вправо в той же строке. */
.order-card-shop[b-oq66fakbcq] {
	display: flex;
	align-items: center;
	gap: var(--spacing-small);
	min-width: 0;
}

.order-card-shop-who[b-oq66fakbcq] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-tiny);
	min-width: 0;
	flex: 1 1 auto;
}

.order-card-shop-who[b-oq66fakbcq]  .shop-name {
	min-width: 0;
}

/* Дата — прижата к правому краю строки магазина. */
.order-card-shop > .label[b-oq66fakbcq] {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* Стоимость товаров — подпись слева, значение справа. */
.order-card-total[b-oq66fakbcq] {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--spacing-small);
	margin-top: auto;
}
/* /Components/Shared/PaymentCard.razor.rz.scp.css */
/* Банковская карта по макету Figma: тёмная поверхность, толстая рамка, крупное скругление. Ширина
   тянется по контейнеру, высота — по контенту (как в Figma, height auto). */
.payment-card[b-d5r0eb9y25] {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* Строки распределяются по высоте через space-between (динамический гэп). Жёсткий gap не задаём:
	   иначе фикс-высота контента превышает высоту от aspect-ratio и карта перестаёт держать пропорцию. */
	justify-content: space-between;
	padding: 20px;
	border-radius: 30px;
	border: 2px solid #393939;
	background: var(--surface);
	box-sizing: border-box;
	width: 100%;
	/* Пропорции реальной карты (85,6 × 53,98 мм ≈ 1,586). Ресайз с сохранением аспекта. */
	aspect-ratio: 1.6;
}

/* Основная карта выделена акцентной обводкой. */
.payment-card-default[b-d5r0eb9y25] {
	border-color: var(--accent);
}

/* Верхняя строка: бэйдж «Основная» слева, действия (контекст-меню) справа. */
.payment-card-top[b-d5r0eb9y25] {
	align-self: stretch;
	display: flex;
	align-items: center;
	min-height: var(--controls-small);
}

.payment-card-actions[b-d5r0eb9y25] {
	margin-left: auto;
}

/* Чип — просто прямоугольник со скруглением и заливкой Accent (как в макете). */
.payment-card-chip[b-d5r0eb9y25] {
	flex-shrink: 0;
	width: 70px;
	height: 50px;
	border-radius: 10px;
	background: var(--accent);
}

/* Ряд номера карты — четыре группы в строку на всю ширину. */
.payment-card-number[b-d5r0eb9y25] {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding: 5px 0;
	align-self: stretch;
}

/* Замаскированная группа: серая плашка-пилюля. Растягивается, занимая равные доли строки. */
.payment-card-mask[b-d5r0eb9y25] {
	flex: 1 1 0;
	height: 18px;
	border-radius: var(--radius-small);
	background: var(--secondary);
}

/* Последняя группа — реальные 4 цифры, по центру, той же ширины что и замаскированные группы. */
.payment-card-digits[b-d5r0eb9y25] {
	flex: 1 1 0;
	display: flex;
	justify-content: center;
	align-items: center;
	white-space: nowrap;
}

/* Нижний ряд (имя + срок) — уже номера, прижат влево; обе группы замаскированы. */
.payment-card-name[b-d5r0eb9y25] {
	display: flex;
	align-items: center;
	gap: 20px;
	width: 243px;
	max-width: 100%;
}

.payment-card-name .payment-card-mask[b-d5r0eb9y25] {
	height: 16px;
}

/* Правый блок нижнего ряда фиксированной ширины (как в макете). */
.payment-card-mask-fixed[b-d5r0eb9y25] {
	flex: 0 0 auto;
	width: 90px;
}
/* /Components/Shared/PenaltyDialog.razor.rz.scp.css */
.penalty-dialog-body[b-b688jg3vx9] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-medium);
}

.penalty-dialog-field[b-b688jg3vx9] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-tiny);
}
/* /Components/Shared/PeriodChart.razor.rz.scp.css */
.period-chart[b-g8r6y8l4ai] {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.period-chart-head[b-g8r6y8l4ai] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.period-chart-loader[b-g8r6y8l4ai],
.period-chart-empty[b-g8r6y8l4ai] {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 320px;
}

/* На узких экранах переключатель периода переносится под заголовок и тянется на всю ширину карточки. */
@media (max-width: 640px) {
	.period-chart-head[b-g8r6y8l4ai] {
		flex-direction: column;
		align-items: stretch;
	}

	.period-chart-head[b-g8r6y8l4ai]  .buttongroup {
		display: flex;
		width: 100%;
	}

	.period-chart-head[b-g8r6y8l4ai]  .buttongroup-item {
		flex: 1;
	}
}
/* /Components/Shared/RecipientCard.razor.rz.scp.css */
/* Карточка получателя: имя/телефон слева, действия справа. */
.recipient-card[b-ccy0374gog] {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-small);
	width: 100%;
	height: 100%;
	padding: var(--spacing-regular);
	border-radius: var(--radius-medium);
	border: 2px solid var(--muted);
	background: var(--surface);
	box-sizing: border-box;
}

/* Основной получатель — акцентная обводка. */
.recipient-card-default[b-ccy0374gog] {
	border-color: var(--accent);
}

.recipient-card-info[b-ccy0374gog] {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--spacing-tiny);
	min-width: 0;
	flex: 1;
}

.recipient-card-menu[b-ccy0374gog] {
	margin-left: auto;
	flex-shrink: 0;
}
/* /Components/Shared/ReviewDetailsDialog.razor.rz.scp.css */
/* Ограничиваем ширину как Page.Narrow (560px), чтобы диалог не был большим. */
.review-details[b-hl6lo47mux] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-medium);
    max-width: 560px;
}

.review-details-head[b-hl6lo47mux] {
    display: flex;
    align-items: center;
    gap: var(--spacing-small);
}

.review-details-who[b-hl6lo47mux] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-tiny);
    min-width: 0;
    flex: 1;
}

.review-details-stars[b-hl6lo47mux] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.review-details-stars .icon[b-hl6lo47mux] {
    width: 18px;
    height: 18px;
}

.review-details-stars .star-filled[b-hl6lo47mux] { color: var(--accent); }
.review-details-stars .star-empty[b-hl6lo47mux]  { color: var(--muted); }

/* Полоса миниатюр — как на карточке отзыва магазина: фиксированная высота, ширина по своему
   соотношению сторон, горизонтальный скролл, клик открывает лайтбокс. */
.review-details-photos[b-hl6lo47mux] {
    display: flex;
    gap: var(--spacing-tiny);
    overflow-x: auto;
    padding-bottom: 2px;
}

.review-details-photo[b-hl6lo47mux] {
    flex: 0 0 auto;
    height: 72px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: var(--radius-small);
    overflow: hidden;
}

.review-details-photo img[b-hl6lo47mux] {
    display: block;
    height: 100%;
    width: auto;
    object-fit: cover;
}
/* /Components/Shared/RoleChangeDialog.razor.rz.scp.css */
/* Флекс-колонка с зазором: разводит блок текста, SelectField/OtpField и ряд кнопок,
   чтобы поля не прилипали к кнопкам действий. */
.role-dialog[b-yjskrqa002] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-medium);
}

/* Строки пояснения. Базовый .label — строчный, поэтому несколько <Label> без
   колонки склеились бы в одну длинную строку и растянули диалог. Флекс-колонка
   ставит каждую короткую строку на свою линию с плотным интервалом абзаца. */
.role-dialog-text[b-yjskrqa002] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-tiny);
}
/* /Components/Shared/SellerOfferFiltersDialog.razor.rz.scp.css */
.offer-filters[b-3fwcee9g5m] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-medium);
}

.offer-filter-group[b-3fwcee9g5m] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-tiny);
}

.offer-filter-options[b-3fwcee9g5m] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-tiny);
}

/* [ ] Option .......... {count} — checkbox left, count pushed to the right edge. */
.offer-filter-option[b-3fwcee9g5m] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-small);
}

.offer-filter-count[b-3fwcee9g5m] {
	flex: 0 0 auto;
	font-size: var(--font-size-caption);
	color: var(--secondary);
}
/* /Components/Shared/ShopOrderCard.razor.rz.scp.css */
.shop-name[b-kx8uupjvqh] {
	flex: 1 1 auto;
	min-width: 0;
	text-decoration: none;
}

.shop-body[b-kx8uupjvqh] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-small);
}

.shop-foot[b-kx8uupjvqh] {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--spacing-regular);
	margin-top: var(--spacing-small);
	padding-top: var(--spacing-small);
	border-top: 1px solid var(--muted);
}

.shop-min[b-kx8uupjvqh] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-tiny);
	margin-top: var(--spacing-small);
}

.shop-min-bar[b-kx8uupjvqh] {
	height: 6px;
	border-radius: 3px;
	background: var(--muted);
	overflow: hidden;
}

.shop-min-fill[b-kx8uupjvqh] {
	height: 100%;
	border-radius: 3px;
	background: var(--accent);
	transition: width 0.2s ease;
}

.shop-min-text[b-kx8uupjvqh] {
	display: flex;
	align-items: baseline;
	gap: 4px;
}
/* /Components/Shared/ShopReviewCard.razor.rz.scp.css */
.shop-review[b-2oaqxhf7af] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-small);
}

.shop-review-head[b-2oaqxhf7af] {
    display: flex;
    align-items: center;
    gap: var(--spacing-small);
}

.shop-review-who[b-2oaqxhf7af] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.shop-review-stars[b-2oaqxhf7af] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.shop-review-stars .icon[b-2oaqxhf7af] {
    width: 16px;
    height: 16px;
}

.shop-review-stars .star-filled[b-2oaqxhf7af] { color: var(--accent); }
.shop-review-stars .star-empty[b-2oaqxhf7af]  { color: var(--muted); }

/* Полоса миниатюр: фиксированная высота, ширина у каждой — по своему соотношению сторон.
   Высота одинакова во всех карточках (и на странице магазина, и на странице всех отзывов). */
.shop-review-photos[b-2oaqxhf7af] {
    display: flex;
    gap: var(--spacing-tiny);
    overflow-x: auto;
    padding-bottom: 2px;
}

.shop-review-photo[b-2oaqxhf7af] {
    flex: 0 0 auto;
    height: 72px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: var(--radius-small);
    overflow: hidden;
}

.shop-review-photo img[b-2oaqxhf7af] {
    display: block;
    height: 100%;
    width: auto;
    object-fit: cover;
}
/* /Components/Shared/ShopVerifyDialog.razor.rz.scp.css */
/* Флекс-колонка с зазором: разводит блок текста, OtpField и ряд кнопок,
   чтобы поля не прилипали к кнопкам действий. */
.verify-dialog[b-idxp0pspkw] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-medium);
}

/* Строки пояснения. Базовый .label — строчный, поэтому несколько <Label> без
   колонки склеились бы в одну длинную строку и растянули диалог. Флекс-колонка
   ставит каждую короткую строку на свою линию с плотным интервалом абзаца. */
.verify-dialog-text[b-idxp0pspkw] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-tiny);
}
/* /Components/Shared/StatCard.razor.rz.scp.css */
/* Карточка тянется на всю высоту ячейки грида, чтобы значения в ряду выровнялись по нижнему краю. */
[b-g30kkn5c55] .card {
	height: 100%;
	display: flex;
	flex-direction: column;
}

[b-g30kkn5c55] .card-content {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.stat-card[b-g30kkn5c55] {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
}

/* Значение прижато к нижнему краю и центрировано по горизонтали. */
.stat-card > :last-child[b-g30kkn5c55] {
	margin-top: auto;
}
/* /Components/Shared/Stepper.razor.rz.scp.css */
.stepper[b-jxcecy1cuk] {
	display: flex;
	align-items: stretch;
	width: 8.5rem;
	height: 2rem;
	border-radius: 0.5rem;
	overflow: hidden;
	background-color: var(--color-surface-hover);
}

.stepper-btn[b-jxcecy1cuk] {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	background-color: var(--color-accent);
	border: none;
	padding: 0;
	cursor: pointer;
}

.stepper-btn:disabled[b-jxcecy1cuk] {
	background-color: var(--color-text-muted);
	cursor: default;
}

.stepper-value[b-jxcecy1cuk] {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	font-size: 14px;
	font-weight: 500;
	color: var(--color-text);
}
/* /Components/Shared/TicketDialog.razor.rz.scp.css */
.ticket-dialog[b-km34twd2um] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-medium);
	min-width: 320px;
}

.ticket-dialog-head[b-km34twd2um] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-small);
}

.ticket-dialog-user[b-km34twd2um] {
	display: flex;
	align-items: center;
	gap: var(--spacing-small);
}

.ticket-dialog-user-text[b-km34twd2um] {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ticket-dialog-meta[b-km34twd2um] {
	display: flex;
	flex-direction: column;
	gap: 2px;
}