/* Admin design tokens — перенос с эталона «Династии».
   Отличается только палитра: фирменный зелёный ДОМ45 вместо индиго.
   Всё остальное (отступы, радиусы, тени, шрифты) оставлено как в эталоне. */

:root {
    /* Color — палитра ДОМ45, взята из лендинга (public/lp/css/style.css) */
    --color-primary: #288e62;
    --color-primary-hover: #1f7350;
    --color-secondary: #399f73;
    --color-neutral: #9c9c9c;
    --color-bg: #fafafa;
    --color-surface: #ffffff;
    --color-text: #1b1b1b;
    --color-text-secondary: #6b6b6b;
    --color-border: #e6eae8;
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-error: #ef4444;

    /* Тонкий скроллбар прокручиваемых областей (см. app.css). */
    --scrollbar-thumb: rgba(17, 17, 20, 0.18);
    --scrollbar-thumb-hover: rgba(17, 17, 20, 0.32);

    /* Tinted surfaces */
    --color-bg-alt: #f2f5f3;
    --color-primary-ring: rgba(40, 142, 98, 0.14);
    --color-primary-glow: rgba(40, 142, 98, 0.32);

    /* Палитра лендинга lp — зеркалит public/lp/css/style.css.
       Используется на дашборде витрины, чтобы плитки раздела читались
       в тех же цветах, что и сам лендинг. */
    --lp1-bg: #f5f5f5;
    --lp1-panel: #ffffff;
    --lp1-ink: #1b1b1b;
    --lp1-ink-2: #565656;
    --lp1-green: #288e62;
    --lp1-green-2: #0d500a;
    --lp1-line: rgba(27, 27, 27, 0.12);
    --lp1-line-2: rgba(40, 142, 98, 0.38);

    /* Палитра лендинга lp2 — зеркалит :root в resources/views/lp2/home.blade.php.
       Тот же зелёный, но холоднее серые и жёстче линии. */
    --lp2-bg: #f5f5f5;
    --lp2-panel: #ffffff;
    --lp2-ink: #0a0a0a;
    --lp2-ink-2: #535353;
    --lp2-green: #288e62;
    --lp2-green-2: #1f6e4b;
    --lp2-line: #ececec;
    --lp2-line-2: #dcdcdc;

    /* Палитра лендинга milan — зеркалит public/milan/css.
       Тёплый песочный фон и тёмная хвоя вместо чистого зелёного. */
    --milan-bg: #f7f5f2;
    --milan-panel: #ffffff;
    --milan-ink: #292f2c;
    --milan-ink-2: #6b6b6b;
    --milan-green: #29573b;
    --milan-green-2: #4b6656;
    --milan-line: rgba(41, 47, 44, 0.12);
    --milan-line-2: rgba(41, 87, 59, 0.34);

    /* Spacing (4px base) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    /* Radius */
    --radius-chip: 4px;
    --radius-control: 6px;
    --radius-panel: 8px;
    --radius-card: 12px;
    --radius-pill: 9999px;

    /* Elevation (hover/focus only — DESIGN.md) */
    --shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.08);
    --shadow-primary-glow: 0 4px 12px var(--color-primary-glow);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
    --focus-ring: 0 0 0 3px var(--color-primary-ring);

    /* Type */
    --font-display: 'General Sans', system-ui, sans-serif;
    --font-body: 'DM Sans', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--color-text);
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

/* ---- Buttons ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 38px;
    padding: 0 var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease,
        border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.btn--sm { height: 32px; }
.btn--lg { height: 44px; padding: 0 var(--space-6); }

.btn-primary {
    background: var(--color-primary);
    color: var(--color-surface);
}

.btn-primary:hover {
    background: var(--color-primary-hover);
    box-shadow: var(--shadow-primary-glow);
}

.btn-secondary {
    background: transparent;
    border-color: var(--color-border);
    color: var(--color-text);
}

.btn-secondary:hover {
    border-color: var(--color-neutral);
}

.btn-ghost {
    background: transparent;
    color: var(--color-text-secondary);
}

.btn-ghost:hover {
    color: var(--color-text);
}

.btn-danger {
    background: transparent;
    border-color: var(--color-error);
    color: var(--color-error);
}

.btn-danger:hover {
    background: var(--color-error);
    color: var(--color-surface);
}

/* ---- Form fields ---- */
.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.field-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
}

.field-control {
    position: relative;
    display: flex;
    align-items: center;
}

.field-control > .fa-solid,
.field-control > .fa-regular {
    position: absolute;
    left: var(--space-3);
    color: var(--color-neutral);
    font-size: 14px;
    pointer-events: none;
}

.field-control:has(.fa-solid, .fa-regular) .text-input {
    padding-left: 38px;
}

.text-input {
    width: 100%;
    padding: 10px var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    background: var(--color-surface);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.4;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.text-input::placeholder {
    color: var(--color-neutral);
}

.text-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}

.text-input.has-error {
    border-color: var(--color-error);
}

textarea.text-input {
    min-height: 96px;
    padding: var(--space-3) var(--space-4);
    resize: vertical;
    line-height: 1.5;
}

/* Native select styled to match .text-input */
.select-input {
    width: 100%;
    padding: 10px var(--space-4);
    padding-right: var(--space-10);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    background-color: var(--color-surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239c9c9c'%3E%3Cpath d='M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-4) center;
    background-size: 16px;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.4;
    appearance: none;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.select-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}

.select-input.has-error {
    border-color: var(--color-error);
}

/* Inline checkbox + label row */
.field-check {
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
}

.field-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.field-check .field-label {
    margin: 0;
    cursor: pointer;
}

/* ---- Toggle switch ---- */
.toggle-field {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    user-select: none;
}

.toggle {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.toggle__input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.toggle__track {
    display: inline-flex;
    align-items: center;
    width: 40px;
    height: 22px;
    padding: 2px;
    border-radius: var(--radius-pill);
    background: var(--color-border);
    transition: background-color 0.18s ease;
}

.toggle__thumb {
    width: 18px;
    height: 18px;
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: transform 0.18s ease;
}

.toggle__input:checked + .toggle__track {
    background: var(--color-primary);
}

.toggle__input:checked + .toggle__track .toggle__thumb {
    transform: translateX(18px);
}

.toggle__input:focus-visible + .toggle__track {
    box-shadow: var(--focus-ring);
}

.toggle__input:disabled + .toggle__track {
    opacity: 0.55;
    cursor: not-allowed;
}

.toggle-field__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.toggle-field__label {
    font-size: 14px;
    color: var(--color-text);
}

.toggle-field__hint {
    font-size: 12px;
    color: var(--color-text-secondary);
}

.toggle-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Compact grid for short numeric fields (room counts) */
.field-grid--compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 900px) {
    .field-grid--compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 540px) {
    .field-grid--compact {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Two-column layout for related/short fields */
.field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

@media (max-width: 640px) {
    .field-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.field-error {
    font-size: 13px;
    color: var(--color-error);
}

.field-hint {
    font-size: 13px;
    color: var(--color-text-secondary);
}

/* ---- Chips ---- */
.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--color-bg-alt);
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: 500;
}

.chip--active { background: var(--color-primary); color: var(--color-surface); }
.chip--success { background: rgba(16, 185, 129, 0.12); color: var(--color-success); }
.chip--warning { background: rgba(245, 158, 11, 0.14); color: var(--color-warning); }
.chip--error { background: rgba(239, 68, 68, 0.12); color: var(--color-error); }

/* ---- Detail / show page ---- */
.admin-detail {
    max-width: 880px;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.admin-detail__card {
    padding: var(--space-8);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
}

.admin-detail__section + .admin-detail__section {
    margin-top: var(--space-8);
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-border);
}

.admin-detail__section-title {
    margin-bottom: var(--space-5);
    font-size: 16px;
}

/* Label → value grid */
.admin-detail__grid {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: var(--space-4) var(--space-5);
}

.admin-detail__label {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.admin-detail__value {
    font-size: 14px;
    color: var(--color-text);
    word-break: break-word;
}

.admin-detail__value--muted {
    color: var(--color-neutral);
}

.admin-detail__value code {
    padding: 0.15em 0.4em;
    border-radius: var(--radius-chip);
    background: var(--color-bg-alt);
    font-family: var(--font-mono);
    font-size: 0.9em;
}

@media (max-width: 640px) {
    .admin-detail__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-1) 0;
    }

    .admin-detail__label {
        margin-top: var(--space-3);
    }
}

/* Rendered HTML descriptions (no sanitization — trusted admin input) */
.admin-prose {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text);
}

.admin-prose > * + * { margin-top: 0.75em; }
.admin-prose h1 { font-size: 1.7em; font-weight: 600; line-height: 1.2; }
.admin-prose h2 { font-size: 1.45em; font-weight: 600; line-height: 1.25; }
.admin-prose h3 { font-size: 1.25em; font-weight: 600; }
.admin-prose h4 { font-size: 1.1em; font-weight: 600; }
.admin-prose ul, .admin-prose ol { padding-left: 1.4em; }
.admin-prose ul { list-style: disc; }
.admin-prose ol { list-style: decimal; }
.admin-prose a { color: var(--color-primary); text-decoration: underline; }

.admin-prose blockquote {
    padding-left: var(--space-4);
    border-left: 3px solid var(--color-border);
    color: var(--color-text-secondary);
}

.admin-prose code {
    padding: 0.15em 0.35em;
    border-radius: var(--radius-chip);
    background: var(--color-bg-alt);
    font-family: var(--font-mono);
    font-size: 0.9em;
}

.admin-prose pre {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-control);
    background: var(--color-text);
    color: var(--color-surface);
    font-family: var(--font-mono);
    font-size: 13px;
    overflow-x: auto;
}

.admin-prose pre code { padding: 0; background: transparent; color: inherit; }

.admin-prose img { max-width: 100%; height: auto; border-radius: var(--radius-chip); }

.admin-prose table {
    width: 100%;
    border-collapse: collapse;
}

.admin-prose th, .admin-prose td {
    border: 1px solid var(--color-border);
    padding: var(--space-2) var(--space-3);
    text-align: left;
    vertical-align: top;
}

.admin-prose th { background: var(--color-bg-alt); font-weight: 600; }

/* Chips/links to child categories */
.admin-detail__children {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.admin-detail__child {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-bg-alt);
    color: var(--color-text);
    font-size: 13px;
    transition: border-color 0.12s ease, background-color 0.12s ease;
}

.admin-detail__child:hover {
    border-color: var(--color-primary);
    background: var(--color-surface);
}

/* Clickable table rows (index) — hover background is already applied to all rows */
.admin-table tbody tr.is-clickable {
    cursor: pointer;
}

/* ---- Section head with an action (e.g. image block) ---- */
.admin-detail__section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.admin-detail__section-head .admin-detail__section-title {
    margin-bottom: 0;
}

/* ---- Status flags row (in the section head) ---- */
.detail-flags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.detail-flags .chip i {
    font-size: 11px;
    margin-right: 2px;
}

/* ---- Facts grid: compact label-over-value cards (two columns) ---- */
.detail-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0;
}

.detail-fact {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-panel);
    background: var(--color-bg);
}

.detail-fact--wide {
    grid-column: 1 / -1;
}

.detail-fact dt {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.detail-fact dd {
    margin: 0;
    font-size: 14px;
    color: var(--color-text);
    word-break: break-word;
}

.detail-fact dd a {
    color: var(--color-primary);
    text-decoration: none;
}

.detail-fact dd a:hover {
    text-decoration: underline;
}

.detail-fact dd code {
    padding: 0.15em 0.4em;
    border-radius: var(--radius-chip);
    background: var(--color-bg-alt);
    font-family: var(--font-mono);
    font-size: 0.9em;
}

.detail-fact__muted {
    color: var(--color-neutral);
}

@media (max-width: 640px) {
    .detail-facts {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- Content block (descriptions): labelled card ---- */
.detail-block + .detail-block {
    margin-top: var(--space-4);
}

.detail-block__label {
    display: inline-block;
    margin-bottom: var(--space-2);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.detail-block .admin-prose {
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-panel);
    background: var(--color-bg);
}

.detail-block__empty {
    padding: var(--space-3) var(--space-4);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-panel);
    background: var(--color-bg);
    color: var(--color-neutral);
    font-size: 13px;
}

/* ---- Product price display (offer / on-request) ---- */
.price {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    white-space: nowrap;
}

.price__old {
    color: var(--color-neutral);
    text-decoration: line-through;
}

.price__offer {
    color: var(--color-error);
    font-weight: 600;
}

.price--request {
    color: var(--color-text-secondary);
    font-style: italic;
}

/* Big headline price on the show page */
.price-headline {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-text);
}

.price-headline .price__offer {
    font-size: 24px;
}

.admin-detail__hint {
    margin-top: var(--space-2);
    margin-bottom: var(--space-5);
    font-size: 13px;
    color: var(--color-text-secondary);
}

/* ---- Category image block ---- */
.category-image {
    display: flex;
    gap: var(--space-5);
    align-items: flex-start;
}

.category-image__preview {
    flex-shrink: 0;
    width: 180px;
    height: 180px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-panel);
    overflow: hidden;
    background: var(--color-bg-alt);
}

.category-image__preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.category-image__meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
    flex: 1;
}

.category-image__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

@media (max-width: 640px) {
    .category-image {
        flex-direction: column;
    }

    .category-image__preview {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        max-width: 240px;
    }
}

/* ---- Превью трансляции камеры (Ivideon embed) ---- */
.camera-preview {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-panel);
    overflow: hidden;
    background: #000;
    aspect-ratio: 16 / 9;
    max-width: 640px;
}

.camera-preview__frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ---- Image modal: left-aligned form fields (override centered .modal__body) ---- */
#category-image-modal .modal__body,
#product-image-modal .modal__body,
#product-video-modal .modal__body,
#product-subgallery-modal .modal__body,
#product-subgallery-image-modal .modal__body {
    align-items: stretch;
    text-align: left;
}

#category-image-modal .modal__icon,
#product-image-modal .modal__icon,
#product-video-modal .modal__icon,
#product-categories-modal .modal__icon,
#product-subgallery-modal .modal__icon,
#product-subgallery-image-modal .modal__icon {
    align-self: center;
    background: var(--color-primary-ring);
    color: var(--color-primary);
}

#product-categories-modal .modal__body {
    align-items: stretch;
}

#category-image-modal .modal__title,
#product-image-modal .modal__title,
#product-video-modal .modal__title,
#product-subgallery-modal .modal__title,
#product-subgallery-image-modal .modal__title {
    text-align: center;
}

#product-subgallery-modal .gallery {
    width: 100%;
    max-height: 420px;
    overflow-y: auto;
}

#category-image-modal .field,
#product-image-modal .field,
#product-video-modal .field {
    width: 100%;
}

/* Надёжное скрытие (перебивает .field { display: flex }) */
#category-image-modal .is-hidden,
#product-image-modal .is-hidden,
#product-video-modal .is-hidden {
    display: none !important;
}

/* ---- Fullscreen blocking loader (native <dialog> → top layer, over modals) ---- */
.admin-loader {
    margin: 0;
    padding: 0;
    max-width: 100vw;
    max-height: 100vh;
    width: 100vw;
    height: 100vh;
    border: none;
    background: transparent;
    overflow: hidden;
}

.admin-loader[open] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
}

.admin-loader::backdrop {
    background: rgba(10, 10, 10, 0.55);
    backdrop-filter: blur(2px);
}

.admin-loader__spinner {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-pill);
    border: 4px solid rgba(255, 255, 255, 0.25);
    border-top-color: var(--color-surface);
    animation: admin-loader-spin 0.7s linear infinite;
}

.admin-loader__label {
    color: var(--color-surface);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* Прогресс загрузки файла */
.admin-loader__progress {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 260px;
    max-width: 70vw;
}

.admin-loader__progress.is-hidden {
    display: none;
}

.admin-loader__track {
    flex: 1;
    height: 6px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.25);
    overflow: hidden;
}

.admin-loader__bar {
    height: 100%;
    width: 0;
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    transition: width 0.15s ease;
}

.admin-loader__percent {
    min-width: 40px;
    text-align: right;
    color: var(--color-surface);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

@keyframes admin-loader-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .admin-loader__spinner {
        animation-duration: 1.6s;
    }
}

/* Превью текущей картинки в режиме «Изменить alt» */
.image-modal-preview {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-panel);
    overflow: hidden;
    background: var(--color-bg-alt);
}

.image-modal-preview img {
    display: block;
    width: 100%;
    max-height: 220px;
    object-fit: contain;
}

#category-image-modal input[type="file"],
#product-image-modal input[type="file"],
#product-video-modal input[type="file"] {
    padding: var(--space-2) var(--space-3);
    font-size: 13px;
    cursor: pointer;
}

#category-image-modal input[type="file"]::file-selector-button,
#product-image-modal input[type="file"]::file-selector-button,
#product-video-modal input[type="file"]::file-selector-button {
    margin-right: var(--space-3);
    padding: 6px var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    background: var(--color-bg-alt);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 13px;
    cursor: pointer;
}

#category-image-modal input[type="file"]::file-selector-button:hover,
#product-image-modal input[type="file"]::file-selector-button:hover,
#product-video-modal input[type="file"]::file-selector-button:hover {
    border-color: var(--color-primary);
}

/* Video preview inside modal */
.image-modal-preview video {
    display: block;
    width: 100%;
    max-height: 260px;
    background: #000;
}

/* ---- Product category chips ---- */
.category-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.category-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-bg-alt);
    color: var(--color-text);
    font-size: 13px;
}

.category-chip--main {
    border-color: var(--color-primary);
    background: var(--color-primary-ring);
    font-weight: 600;
}

.category-chip--main i {
    color: var(--color-primary);
    font-size: 11px;
}

/* ---- Offer-tag order (drag-and-drop chips in the picker modal) ---- */
.ot-order {
    width: 100%;
    text-align: left;
}

.ot-order__label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

.ot-order__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    min-height: 36px;
}

.ot-order__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-bg-alt);
    color: var(--color-text);
    font-size: 13px;
    cursor: grab;
}

.ot-order__chip:active {
    cursor: grabbing;
}

.ot-order__chip.is-dragging {
    opacity: 0.5;
    outline: 2px dashed var(--color-primary);
    outline-offset: -2px;
}

.ot-order__chip i {
    color: var(--color-neutral);
    font-size: 11px;
}

/* ---- Category picker (modal) ---- */
.cat-picker {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    padding: var(--space-2);
    text-align: left;
}

/* Инлайн-создание элемента в модалке-пикере (особенности проекта) */
.tag-create {
    display: flex;
    gap: var(--space-2);
    width: 100%;
    margin-top: var(--space-3);
}

.tag-create .text-input {
    flex: 1;
    min-width: 0;
}

.tag-create .btn {
    flex-shrink: 0;
}

.cat-picker__row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-chip);
    cursor: pointer;
}

.cat-picker__row:hover {
    background: var(--color-bg-alt);
}

.cat-picker__check {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.cat-picker__name {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: var(--color-text);
}

.cat-picker__star {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--radius-chip);
    background: transparent;
    color: var(--color-border);
    cursor: pointer;
    transition: color 0.12s ease, background-color 0.12s ease;
}

.cat-picker__star:not(:disabled):hover {
    color: var(--color-warning);
    background: var(--color-bg-alt);
}

.cat-picker__star.is-main {
    color: var(--color-warning);
}

.cat-picker__star:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ---- Product gallery (grid) ---- */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--space-4);
}

.gallery__empty {
    grid-column: 1 / -1;
    color: var(--color-neutral);
    font-size: 13px;
}

.gallery-item {
    margin: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-panel);
    overflow: hidden;
    background: var(--color-surface);
    position: relative;
    cursor: grab;
}

.gallery-item:active {
    cursor: grabbing;
}

.pg-hint {
    margin: -6px 0 12px;
}

.gallery-item.is-dragging {
    opacity: 0.5;
    outline: 2px dashed var(--color-primary);
    outline-offset: -2px;
}

.gallery-item__preview {
    aspect-ratio: 4 / 3;
    background: var(--color-bg-alt);
}

.gallery-item__preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-item__preview--video {
    background: #000;
    display: flex;
    align-items: center;
}

.gallery-item__preview--video video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.gallery-item__preview--file {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-error);
    font-size: 40px;
}

.gallery-item__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3);
    min-height: 0;
}

.gallery-item__alt {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gallery-item__desc {
    font-size: 12px;
    color: var(--color-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gallery-item__actions {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    display: flex;
    gap: var(--space-1);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.gallery-item:hover .gallery-item__actions,
.gallery-item:focus-within .gallery-item__actions {
    opacity: 1;
}

.gallery-item__actions .icon-btn {
    background: var(--color-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* Карточки без drag-and-drop (интерьеры, цвета фасада) — курсор как у обычного элемента. */
.gallery-item--static {
    cursor: default;
}

.gallery-item--static .gallery-item__actions {
    opacity: 1;
}

/* ---- Цвет фасада: превью-заливка и парный пикер в модалке ---- */
.gallery-item__preview--swatch {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-item__swatch-empty {
    color: var(--color-neutral);
    font-size: 24px;
}

.hex-field {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.hex-field input[type="color"] {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    background: none;
    cursor: pointer;
    flex-shrink: 0;
}

.hex-field .text-input {
    flex: 1;
}

/* ── Правка порядка прямо в списке ───────────────────────────────────
   Используется и на витринах лендингов, и в списке построенных домов,
   поэтому живёт в общем файле, а не в landing.css. */
.admin-position-input {
    width: 64px;
    padding: 4px 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    text-align: right;
    transition: border-color .15s, box-shadow .15s;
}

.admin-position-input:hover {
    border-color: var(--color-primary);
}

.admin-position-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-ring);
}

.admin-position-input:disabled {
    opacity: .6;
}

/* короткая подсветка результата сохранения */
.admin-position-input.is-saved {
    border-color: var(--color-success);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, .15);
}

.admin-position-input.has-error {
    border-color: var(--color-error);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .15);
}

.admin-position-empty {
    color: var(--color-text-secondary);
}