/ с
кастомным маркером. Дочерние категории идут с отступом внутри. */
.filter-group { padding: 0; }
.filter-group > summary {
list-style: none;
cursor: pointer;
user-select: none;
padding: 8px 14px 4px;
font-size: 10.5px;
font-weight: 600;
color: var(--mute-soft);
text-transform: uppercase;
letter-spacing: 0.4px;
font-family: var(--font-mono);
display: flex;
align-items: center;
gap: 8px;
transition: color 0.15s, background 0.15s;
}
.filter-group > summary:hover {
color: var(--accent);
background: var(--bg-alt);
}
.filter-group > summary::-webkit-details-marker { display: none; }
.filter-group > summary::before {
content: "▶";
font-size: 12px;
color: var(--accent);
transition: transform 0.15s;
flex-shrink: 0;
}
.filter-group[open] > summary::before { transform: rotate(90deg); }
.filter-item--indent { padding-left: 28px; }
/* Категория «нет в наличии» — серым, но всё ещё кликабельной (продавец
может специально выбрать). См. apps/catalog/views.py::_category_tree
is_empty (n_total>0 && n_available=0). */
.filter-item--empty { opacity: 0.55; }
.filter-item--empty .label { color: var(--mute); }
.filter-group--empty > summary { color: var(--mute); font-style: italic; }
.filter-group--nested { margin-left: 16px; }
.filter-section {
padding: 6px 0;
border-bottom: 1px solid var(--border);
}
.filter-section:last-child { border-bottom: 0; }
/* Длинные списки чекбоксов скроллятся, чтобы кнопка «Применить» в
foot'е меню не уезжала за viewport. Sort-секции (без чекбоксов)
остаются как есть — там 2-3 пункта. */
.filter-section:has(input[type="checkbox"]) {
max-height: 280px;
overflow-y: auto;
}
/* Если внутри секции уже есть .pop-scroll — он сам скроллится (320px).
Без этого сброса было бы два скроллбара рядом: внешний у .filter-section
и внутренний у .pop-scroll. Скролл оставляем ровно один — на .pop-scroll. */
.filter-menu .filter-section:has(.pop-scroll) {
max-height: none;
overflow: visible;
}
.filter-item {
display: flex; align-items: center; gap: 10px;
padding: 8px 14px;
font-size: 13px;
color: var(--ink-soft);
cursor: pointer;
user-select: none;
transition: background 0.15s;
}
.filter-item:hover { background: var(--bg-alt); color: var(--ink); }
.filter-item input[type="checkbox"] {
margin: 0; accent-color: var(--accent); cursor: pointer;
}
.filter-item .label { flex: 1; }
.filter-item.sort-row.active {
background: var(--accent-soft); color: var(--accent); font-weight: 500;
}
/* Серое неактивное значение фасета: под текущим выбором даёт 0 товаров —
видно (с числом 0), но не кликается. */
.filter-item.is-disabled { opacity: 0.45; cursor: default; }
.filter-item.is-disabled:hover { background: none; color: var(--ink-soft); }
.filter-item.is-disabled input[type="checkbox"] { cursor: default; }
.filter-count {
font-size: 11px; color: var(--mute); font-variant-numeric: tabular-nums;
margin-left: auto; padding-left: 8px;
}
.filter-group-title {
padding: 8px 14px 4px;
font-size: 10.5px; font-weight: 600;
color: var(--mute-soft);
text-transform: uppercase; letter-spacing: 0.4px;
font-family: var(--font-mono);
}
/* Заголовок multi-select блока: подпись слева + иконки select-all/none справа. */
.filter-group-title-row {
display: flex; align-items: center; justify-content: space-between;
padding-right: 8px;
}
.filter-group-title-row .filter-group-title { padding-right: 6px; }
.filter-group-actions { display: flex; gap: 2px; }
.filter-icon-btn {
width: 24px; height: 24px;
display: inline-flex; align-items: center; justify-content: center;
padding: 0;
background: transparent;
border: 1px solid transparent;
border-radius: 5px;
color: var(--mute-soft);
cursor: pointer;
transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
.filter-icon-btn:hover, .filter-icon-btn:focus-visible {
color: var(--accent);
background: var(--accent-soft);
border-color: var(--accent-soft);
outline: none;
}
.filter-icon-btn svg { width: 14px; height: 14px; display: block; }
.filter-input {
width: 100%; height: 32px;
padding: 0 10px;
border: 1px solid var(--border);
border-radius: 6px;
font: inherit; font-size: 12.5px;
background: var(--bg-card); color: var(--ink);
outline: none;
transition: border-color 0.15s;
}
.filter-input:focus { border-color: var(--accent); }
.filter-search-wrap { padding: 8px 12px; }
.filter-range {
display: flex; align-items: center; gap: 6px;
padding: 8px 12px;
}
.filter-range .filter-input { flex: 1; min-width: 0; }
.filter-range .sep { color: var(--mute-soft); font-size: 12px; }
.filter-foot {
display: flex; gap: 8px;
padding: 10px 12px;
background: var(--bg-subtle);
border-top: 1px solid var(--border);
}
.filter-foot button {
flex: 1; height: 32px;
border-radius: 6px;
border: 1px solid var(--border-strong);
background: var(--bg-card);
color: var(--ink-soft);
font: inherit; font-size: 12px; font-weight: 500;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.filter-foot button:hover {
background: var(--bg-alt); border-color: var(--accent); color: var(--accent);
}
.filter-foot button.primary {
background: var(--accent); border-color: var(--accent); color: #fff;
}
.filter-foot button.primary:hover {
background: var(--accent-hover); border-color: var(--accent-hover);
}
/* ───── Строки таблицы ───── */
.tbl-card tbody tr.data-row { height: 52px; }
/* Если у сорта несколько модификаций (rowspan>1 на cell-name) —
первая строка чуть выше, чтобы аватар + 2 строки имени влезли
без перетягивания. Эталон base-2.html:254. */
.tbl-card tbody tr.data-row.row-base.multi { height: 60px; }
/* Белый фон только на data-row td. Раньше был на `.tbl-card tbody td`,
что специфичностью (0,1,2) перекрывало `.group-header-row td` (0,1,1)
— заливка категорий теряла свой bg-subtle. */
.tbl-card tbody tr.data-row td { background: var(--bg-card); }
.row-base td { border-top: 1px solid var(--border); }
.row-cont td:not(.cell-name) { border-top: 1px dashed var(--border); }
.tbl-card td.cell-name {
vertical-align: middle; padding: 0 14px;
border-right: 1px solid var(--border);
}
.name-flex {
display: flex; align-items: center; gap: 10px;
padding: 8px 0;
}
.name-text { min-width: 0; flex: 1; }
.sort-name {
font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.25;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
overflow: hidden;
}
/* Ширина колонок каталога — на
с
кастомным маркером. Дочерние категории идут с отступом внутри. */
.filter-group { padding: 0; }
.filter-group > summary {
list-style: none;
cursor: pointer;
user-select: none;
padding: 8px 14px 4px;
font-size: 10.5px;
font-weight: 600;
color: var(--mute-soft);
text-transform: uppercase;
letter-spacing: 0.4px;
font-family: var(--font-mono);
display: flex;
align-items: center;
gap: 8px;
transition: color 0.15s, background 0.15s;
}
.filter-group > summary:hover {
color: var(--accent);
background: var(--bg-alt);
}
.filter-group > summary::-webkit-details-marker { display: none; }
.filter-group > summary::before {
content: "▶";
font-size: 12px;
color: var(--accent);
transition: transform 0.15s;
flex-shrink: 0;
}
.filter-group[open] > summary::before { transform: rotate(90deg); }
.filter-item--indent { padding-left: 28px; }
/* Категория «нет в наличии» — серым, но всё ещё кликабельной (продавец
может специально выбрать). См. apps/catalog/views.py::_category_tree
is_empty (n_total>0 && n_available=0). */
.filter-item--empty { opacity: 0.55; }
.filter-item--empty .label { color: var(--mute); }
.filter-group--empty > summary { color: var(--mute); font-style: italic; }
.filter-group--nested { margin-left: 16px; }
.filter-section {
padding: 6px 0;
border-bottom: 1px solid var(--border);
}
.filter-section:last-child { border-bottom: 0; }
/* Длинные списки чекбоксов скроллятся, чтобы кнопка «Применить» в
foot'е меню не уезжала за viewport. Sort-секции (без чекбоксов)
остаются как есть — там 2-3 пункта. */
.filter-section:has(input[type="checkbox"]) {
max-height: 280px;
overflow-y: auto;
}
/* Если внутри секции уже есть .pop-scroll — он сам скроллится (320px).
Без этого сброса было бы два скроллбара рядом: внешний у .filter-section
и внутренний у .pop-scroll. Скролл оставляем ровно один — на .pop-scroll. */
.filter-menu .filter-section:has(.pop-scroll) {
max-height: none;
overflow: visible;
}
.filter-item {
display: flex; align-items: center; gap: 10px;
padding: 8px 14px;
font-size: 13px;
color: var(--ink-soft);
cursor: pointer;
user-select: none;
transition: background 0.15s;
}
.filter-item:hover { background: var(--bg-alt); color: var(--ink); }
.filter-item input[type="checkbox"] {
margin: 0; accent-color: var(--accent); cursor: pointer;
}
.filter-item .label { flex: 1; }
.filter-item.sort-row.active {
background: var(--accent-soft); color: var(--accent); font-weight: 500;
}
/* Серое неактивное значение фасета: под текущим выбором даёт 0 товаров —
видно (с числом 0), но не кликается. */
.filter-item.is-disabled { opacity: 0.45; cursor: default; }
.filter-item.is-disabled:hover { background: none; color: var(--ink-soft); }
.filter-item.is-disabled input[type="checkbox"] { cursor: default; }
.filter-count {
font-size: 11px; color: var(--mute); font-variant-numeric: tabular-nums;
margin-left: auto; padding-left: 8px;
}
.filter-group-title {
padding: 8px 14px 4px;
font-size: 10.5px; font-weight: 600;
color: var(--mute-soft);
text-transform: uppercase; letter-spacing: 0.4px;
font-family: var(--font-mono);
}
/* Заголовок multi-select блока: подпись слева + иконки select-all/none справа. */
.filter-group-title-row {
display: flex; align-items: center; justify-content: space-between;
padding-right: 8px;
}
.filter-group-title-row .filter-group-title { padding-right: 6px; }
.filter-group-actions { display: flex; gap: 2px; }
.filter-icon-btn {
width: 24px; height: 24px;
display: inline-flex; align-items: center; justify-content: center;
padding: 0;
background: transparent;
border: 1px solid transparent;
border-radius: 5px;
color: var(--mute-soft);
cursor: pointer;
transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
.filter-icon-btn:hover, .filter-icon-btn:focus-visible {
color: var(--accent);
background: var(--accent-soft);
border-color: var(--accent-soft);
outline: none;
}
.filter-icon-btn svg { width: 14px; height: 14px; display: block; }
.filter-input {
width: 100%; height: 32px;
padding: 0 10px;
border: 1px solid var(--border);
border-radius: 6px;
font: inherit; font-size: 12.5px;
background: var(--bg-card); color: var(--ink);
outline: none;
transition: border-color 0.15s;
}
.filter-input:focus { border-color: var(--accent); }
.filter-search-wrap { padding: 8px 12px; }
.filter-range {
display: flex; align-items: center; gap: 6px;
padding: 8px 12px;
}
.filter-range .filter-input { flex: 1; min-width: 0; }
.filter-range .sep { color: var(--mute-soft); font-size: 12px; }
.filter-foot {
display: flex; gap: 8px;
padding: 10px 12px;
background: var(--bg-subtle);
border-top: 1px solid var(--border);
}
.filter-foot button {
flex: 1; height: 32px;
border-radius: 6px;
border: 1px solid var(--border-strong);
background: var(--bg-card);
color: var(--ink-soft);
font: inherit; font-size: 12px; font-weight: 500;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.filter-foot button:hover {
background: var(--bg-alt); border-color: var(--accent); color: var(--accent);
}
.filter-foot button.primary {
background: var(--accent); border-color: var(--accent); color: #fff;
}
.filter-foot button.primary:hover {
background: var(--accent-hover); border-color: var(--accent-hover);
}
/* ───── Строки таблицы ───── */
.tbl-card tbody tr.data-row { height: 52px; }
/* Если у сорта несколько модификаций (rowspan>1 на cell-name) —
первая строка чуть выше, чтобы аватар + 2 строки имени влезли
без перетягивания. Эталон base-2.html:254. */
.tbl-card tbody tr.data-row.row-base.multi { height: 60px; }
/* Белый фон только на data-row td. Раньше был на `.tbl-card tbody td`,
что специфичностью (0,1,2) перекрывало `.group-header-row td` (0,1,1)
— заливка категорий теряла свой bg-subtle. */
.tbl-card tbody tr.data-row td { background: var(--bg-card); }
.row-base td { border-top: 1px solid var(--border); }
.row-cont td:not(.cell-name) { border-top: 1px dashed var(--border); }
.tbl-card td.cell-name {
vertical-align: middle; padding: 0 14px;
border-right: 1px solid var(--border);
}
.name-flex {
display: flex; align-items: center; gap: 10px;
padding: 8px 0;
}
.name-text { min-width: 0; flex: 1; }
.sort-name {
font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.25;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
overflow: hidden;
}
/* Ширина колонок каталога — на ![]()
` вместо ``. Геометрия общая, фоновый градиент
у `![]()
` виден как «skeleton» пока картинка догружается. */
.ph-avatar {
width: 56px; height: 56px; border-radius: 8px;
flex-shrink: 0;
background:
linear-gradient(160deg,
hsl(var(--hue, 220) 70% 92%) 0%,
hsl(var(--hue, 220) 65% 80%) 100%);
color: hsl(var(--hue, 220) 55% 28%);
display: grid; place-items: center;
font-weight: 700; font-size: 19px; letter-spacing: -0.5px;
font-family: var(--font-sans);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.5),
0 1px 2px rgba(10,14,26,0.06);
user-select: none;
}
/* Реальное фото из МС: 112×112 ужатое в 56×56 (retina-ready).
`object-fit: cover` обрезает до квадрата. Background оставляем как
skeleton — пока картинка не загрузилась (lazy) или сломан src. */
.ph-avatar--photo {
background: var(--surface, #f3f4f8);
object-fit: cover;
display: block;
}
/* ───── Шапки групп товаров (▼ Голубика · 5 сортов) ─────
Структура: ...
`display: flex` стоит на ВНУТРЕННЕМ div, не на td: flex на самом
ломает table-cell механику (td теряет растяжение по colspan,
полоса не покрывает всю ширину строки). Эталон base-2 делает так
же — ` … ` (строка 1214).
Параметры (height/padding/cursor/hover/border) выравнены под
эталон base-2.html:216-238. */
.group-header-row td {
padding: 0 16px; height: 40px;
background: var(--bg-subtle);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
cursor: pointer; user-select: none;
transition: background 0.12s;
}
.group-header-row td:hover { background: var(--bg-alt); }
.group-header-row:first-child td { border-top: 0; }
.group-header-inner {
display: flex; align-items: center; gap: 10px;
height: 100%;
}
.group-toggle {
display: inline-grid; place-items: center;
width: 20px; height: 20px;
background: none; border: none; cursor: pointer; padding: 0;
font-size: 10px; color: var(--ink-soft);
transition: transform 0.18s;
flex-shrink: 0;
}
.group-toggle.collapsed { transform: rotate(-90deg); }
.group-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.group-meta { font-size: 12px; color: var(--mute); }
.group-total {
margin-left: auto;
font-family: var(--font-mono);
font-size: 11.5px; font-weight: 500; color: var(--ink-soft);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* ───── Пагинация / «Показать ещё» ───── */
.pagination {
display: flex; flex-wrap: wrap; align-items: center;
gap: 8px; margin: 14px 0 24px; padding: 0 2px;
font-size: 13px;
}
.pagination:empty { display: none; }
.load-more-btn {
padding: 8px 20px;
font-size: 13px; font-weight: 500;
background: white; color: var(--accent);
border: 1.5px solid var(--accent);
border-radius: 8px; cursor: pointer;
transition: background .12s, color .12s;
}
.load-more-btn:hover { background: var(--accent-soft, #eef2ff); }
.load-more-btn:disabled { opacity: .55; cursor: default; }
.pgn-done { color: var(--mute); font-size: 13px; }
.pagination .pgn-btn {
display: inline-flex; align-items: center; justify-content: center;
min-width: 30px; height: 30px; padding: 0 8px;
border: 1px solid var(--border); border-radius: 6px;
background: #fff; color: inherit; text-decoration: none;
font-variant-numeric: tabular-nums;
transition: background .12s, border-color .12s;
}
.pagination a.pgn-btn:hover {
background: var(--accent-soft);
border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.pagination .pgn-current {
background: var(--accent); color: #fff;
border-color: var(--accent); font-weight: 600; cursor: default;
}
.pagination .pgn-disabled {
color: color-mix(in srgb, currentColor 35%, transparent);
background: #fafafa; cursor: default;
}
.pagination .pgn-ellipsis {
display: inline-flex; align-items: center; justify-content: center;
min-width: 22px; height: 30px; color: color-mix(in srgb, currentColor 50%, transparent);
}
.pagination .pgn-info {
margin-left: auto; color: color-mix(in srgb, currentColor 60%, transparent);
}
/* ═════ Редизайн каталога 2026-06-17 (handoff PP.zip) ═════ */
/* ───── Шкала готовности .rd (Блок 4) — цвет тира + мини-метр из 3 делений ───── */
.rd {
display: inline-flex; align-items: center; gap: 7px;
min-height: 23px; padding: 3px 11px 3px 9px; border-radius: 999px;
font-size: 11.5px; font-weight: 600; white-space: normal; line-height: 1.25;
}
/* Иконка-корзина в строке на странице /cart/ (рядом со степпером). */
.cart-row-del {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; margin-left: 8px; vertical-align: middle;
border: 1px solid var(--border); border-radius: 8px;
background: var(--bg-card); color: var(--mute); cursor: pointer;
}
.cart-row-del:hover {
color: var(--bad, #dc2626); border-color: var(--bad, #dc2626);
background: var(--bad-soft, #fef2f2);
}
.rd-meter { display: inline-flex; align-items: flex-end; gap: 2px; }
.rd-meter i { width: 3.5px; border-radius: 2px; background: currentColor; opacity: .24; }
.rd-meter i:nth-child(1) { height: 6px; }
.rd-meter i:nth-child(2) { height: 8px; }
.rd-meter i:nth-child(3) { height: 10px; }
.rd--ready { background: var(--ok-soft); color: var(--ok); }
.rd--soon { background: var(--warn-soft); color: var(--warn); }
.rd--growing { background: var(--bg-alt); color: var(--ink-soft); }
.rd--incoming { background: var(--info-soft); color: var(--info); }
.rd--scheduled { background: var(--info-soft); color: var(--info); }
.rd--ready .rd-meter i { opacity: 1; }
.rd--soon .rd-meter i:nth-child(-n+2) { opacity: 1; }
.rd--growing .rd-meter i:nth-child(1) { opacity: 1; }
.rd--scheduled .rd-meter i { opacity: .28; }
.rd--scheduled .rd-meter i:nth-child(1) { opacity: 1; }
/* ───── Шапка .pb: средняя зона (Отправить прайс | Контакты) + зона заказа (Блок 3) ───── */
.pb__send { flex-shrink: 0; }
/* Попап «Отправить прайс»: обычная ссылка / ссылка-вход для клиента (2026-06-24) */
.pb__share { position: relative; display: inline-flex; flex-shrink: 0; }
.share-pop {
position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
min-width: 280px; background: #fff; border: 1px solid var(--border);
border-radius: 10px; box-shadow: 0 10px 30px rgba(15, 23, 42, .16); padding: 6px;
}
.share-pop-item {
display: block; width: 100%; text-align: left; padding: 9px 11px; border: 0;
background: none; border-radius: 7px; cursor: pointer; font-size: 13px;
color: #1f2937; line-height: 1.3;
}
.share-pop-item:hover { background: var(--bg-subtle); }
/* Код встройки прайса на чужой сайт (embed-виджет). */
.share-embed { padding: 8px 10px 10px; border-top: 1px solid var(--border); }
.share-embed-hint { font-size: 12px; color: var(--mute); margin-bottom: 6px; }
.share-embed-code {
width: 100%; font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11.5px; line-height: 1.45; color: var(--ink);
border: 1px solid var(--border); border-radius: 6px; padding: 7px 9px;
background: var(--bg-subtle); resize: vertical;
}
.share-embed-copy { width: 100%; margin-top: 6px; }
.share-embed-doc { display: inline-block; margin-top: 6px; font-size: 12px; color: var(--accent); }
.share-client { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 8px; }
.share-client-q {
width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--border);
border-radius: 7px; font-size: 13px; margin-bottom: 6px; outline: none;
}
.share-client-q:focus { border-color: var(--accent, #4338ca); }
.share-client-list { max-height: 230px; overflow-y: auto; color: #6b7280; font-size: 12px; }
.share-client-item {
display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
width: 100%; text-align: left; padding: 7px 9px; border: 0; background: none;
border-radius: 7px; cursor: pointer;
}
.share-client-item:hover { background: var(--accent-soft, var(--bg-subtle)); }
.share-client-name { font-size: 13px; color: #1f2937; font-weight: 600; }
.share-client-email { font-size: 11px; color: #6b7280; }
.share-active { margin-top: 6px; border-top: 1px solid var(--border); padding-top: 6px; }
.share-active-list { max-height: 230px; overflow-y: auto; font-size: 12px; }
.share-active-row { display: flex; align-items: center; gap: 8px; padding: 5px 7px; border-radius: 7px; }
.share-active-row:hover { background: var(--bg-subtle); }
.share-active-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.share-active-email { font-size: 12px; color: #1f2937; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-active-sub { font-size: 10px; color: #6b7280; }
.share-active-revoke { flex-shrink: 0; font-size: 11px; padding: 3px 9px; border: 1px solid #fca5a5; border-radius: 6px; background: #fff; color: #b91c1c; cursor: pointer; }
.share-active-revoke:hover { background: #fef2f2; }
.share-active-revoke:disabled { opacity: .5; cursor: default; }
.share-client-result { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 8px; }
.share-client-link {
font-size: 12px; word-break: break-all; background: var(--bg-subtle);
border-radius: 6px; padding: 8px 10px; margin-bottom: 6px;
font-family: ui-monospace, "JetBrains Mono", monospace; color: #1f2937;
}
.share-client-hint { font-size: 11px; color: #6b7280; padding: 2px 4px 0; }
.share-client-newms { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 8px; }
.share-client-newms-hint { font-size: 11px; color: #6b7280; margin-bottom: 6px; }
.share-client-inn,
.share-client-ms-q,
.share-client-ms-email-input {
width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--border);
border-radius: 7px; font-size: 13px; margin-bottom: 6px; outline: none;
}
.share-client-inn:focus,
.share-client-ms-q:focus,
.share-client-ms-email-input:focus { border-color: var(--accent, #4338ca); }
.share-client-ms-list { max-height: 200px; overflow-y: auto; }
.share-client-ms-email { border-top: 1px dashed var(--border); margin-top: 6px; padding-top: 8px; }
.share-client-reg { color: var(--accent, #4338ca); font-weight: 600; }
.share-result-line { font-size: 12px; color: #1f2937; padding: 2px 4px; }
.share-result-line b { color: #6b7280; font-weight: 600; }
.share-result-copy { color: var(--accent, #4338ca); font-weight: 600; }
.share-client-err { font-size: 12px; color: #b42318; padding: 6px 4px; }
/* Свободное пространство между табами и корзиной — две равные колонки,
контент каждой отцентрирован. */
.pb__mid { flex: 1 1 auto; display: flex; align-items: center; min-width: 0; }
.pb__midcol { flex: 1 1 0; display: flex; justify-content: flex-start; align-items: center; gap: 8px; min-width: 0; }
/* Контакты — телефон над почтой, по центру, без заливки. */
.pb__mid .pb__contacts {
display: flex; flex-direction: column; align-items: center; gap: 3px;
font-family: var(--font-sans); font-size: 12.5px; text-align: center;
}
.pb__mid .pb__contacts a {
display: inline-flex; align-items: center; gap: 6px;
color: var(--pb-soft); text-decoration: none; font-weight: 500;
}
.pb__mid .pb__contacts a:hover { color: var(--pb-accent); }
.pb__mid .pb__contacts a svg { flex-shrink: 0; opacity: .6; }
.pb__mid .pb__contacts .pb__dot { display: none; }
/* Условия заказа + Корзина — одной строкой справа. */
.pb__order { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* Корзина в шапке прайса (перенесена из тёмного меню) — зелёный блок:
счётчик + сумма + прогресс до следующей скидки (как на скрине). */
.pb__cart {
display: inline-flex; flex-direction: column; gap: 1px; flex-shrink: 0;
padding: 6px 14px; border-radius: 10px; text-decoration: none; line-height: 1.25;
background: #e8f6ec; border: 1px solid #cdebd6;
}
.pb__cart:hover { background: #ddf0e3; border-color: #b6e0c4; }
.pb__cart-top {
display: flex; align-items: center; gap: 8px;
color: #15803d; font-weight: 700; font-size: 14px; white-space: nowrap;
}
.pb__cart-num {
display: inline-grid; place-items: center; min-width: 20px; height: 20px;
padding: 0 6px; border-radius: 10px; background: #16a34a; color: #fff;
font-size: 12px; font-weight: 700;
}
.pb__cart-sum { color: var(--ink); font-weight: 800; font-size: 15px; }
.pb__cart-tier { font-size: 11px; color: var(--mute); white-space: nowrap; }
/* Корзина переехала в белую шапку каталога → прячем её в тёмном верхнем меню. */
body:has(.catalog-theme) .topbar .cart-btn { display: none; }
/* Узкий экран: средняя зона и зона заказа переносятся под табы. */
@media (max-width: 1080px) {
.pb__mid { flex: 1 1 100%; order: 3; justify-content: space-between; margin-top: 6px; }
.pb__order { order: 4; margin-top: 6px; }
}
/* ───── Ручной ресайз колонок (Блок 5) — хват на правом крае ───── */
.col-resizer {
position: absolute; top: 0; right: -3px; width: 8px; height: 100%;
z-index: 6; cursor: col-resize; touch-action: none;
}
.col-resizer::after {
content: ''; position: absolute; left: 3px; top: 7px; bottom: 7px; width: 2px;
border-radius: 2px; background: transparent; transition: background .12s;
}
.col-resizer:hover::after,
.tbl-card th.col-resizing .col-resizer::after { background: var(--accent); }
body.col-resizing-active { cursor: col-resize !important; user-select: none; }
body.col-resizing-active .col-filter { pointer-events: none; }
`. Геометрия общая, фоновый градиент
у `![]()
` виден как «skeleton» пока картинка догружается. */
.ph-avatar {
width: 56px; height: 56px; border-radius: 8px;
flex-shrink: 0;
background:
linear-gradient(160deg,
hsl(var(--hue, 220) 70% 92%) 0%,
hsl(var(--hue, 220) 65% 80%) 100%);
color: hsl(var(--hue, 220) 55% 28%);
display: grid; place-items: center;
font-weight: 700; font-size: 19px; letter-spacing: -0.5px;
font-family: var(--font-sans);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.5),
0 1px 2px rgba(10,14,26,0.06);
user-select: none;
}
/* Реальное фото из МС: 112×112 ужатое в 56×56 (retina-ready).
`object-fit: cover` обрезает до квадрата. Background оставляем как
skeleton — пока картинка не загрузилась (lazy) или сломан src. */
.ph-avatar--photo {
background: var(--surface, #f3f4f8);
object-fit: cover;
display: block;
}
/* ───── Шапки групп товаров (▼ Голубика · 5 сортов) ─────
Структура:
...
`display: flex` стоит на ВНУТРЕННЕМ div, не на td: flex на самом
ломает table-cell механику (td теряет растяжение по colspan,
полоса не покрывает всю ширину строки). Эталон base-2 делает так
же — ` ───── */
.col-resizer {
position: absolute; top: 0; right: -3px; width: 8px; height: 100%;
z-index: 6; cursor: col-resize; touch-action: none;
}
.col-resizer::after {
content: ''; position: absolute; left: 3px; top: 7px; bottom: 7px; width: 2px;
border-radius: 2px; background: transparent; transition: background .12s;
}
.col-resizer:hover::after,
.tbl-card th.col-resizing .col-resizer::after { background: var(--accent); }
body.col-resizing-active { cursor: col-resize !important; user-select: none; }
body.col-resizing-active .col-filter { pointer-events: none; }
…