/* ========================================= */
/* ШАПКА И НАВИГАЦИЯ                         */
/* ========================================= */
.header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 20px; 
    padding-bottom: 10px; 
    border-bottom: 1px solid var(--border-color); 
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.5em;
    font-weight: 700;
    font-family: var(--font-display);
    letter-spacing: -0.02em;
}

.icon { width: 20px; height: 20px; fill: currentColor; }
/* Кубик в лого — контурная иконка: с fill получается «клякса», рисуем линиями */
.logo-container .icon { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Иконки в шапке (корзина, конверт, колокол) — тоже контурные */
.header-btn .icon { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.header-btn {
    background: var(--accent-blue);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 8px 16px;
    margin-left: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.header-btn:hover { background: var(--accent-hover); }
/* Кнопки в шапке/навигации никогда не тянутся: перебиваем глобальное button{width:100%}
   (components.css) — иначе колокольчик/корзина/тема раздуваются на всю строку. */
.header .header-btn,
.header .btn-black,
.header-right-block > button,
.nav-tabs .header-btn { width: auto; flex: 0 0 auto; }

.nav-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color-thin);
    padding-bottom: 10px;
}
.nav-tab {
    background: none;
    border: none;
    font-size: 1.1em;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    padding: 5px 10px;
}
.nav-tab.active { color: var(--text-main); border-bottom: 2px solid var(--border-color); }
.nav-tab:hover:not(.active) { color: var(--text-main); }

/* ========================================= */
/* ПОИСК И ФИЛЬТРЫ                           */
/* ========================================= */
.search-filters-container {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 30px;
    padding: 25px;
    margin-bottom: 25px;
    text-align: center;
}
.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}
/* Кнопка «поиск по фото» живёт В строке поиска (справа от инпута), а не под ним */
.search-input-wrapper .search-input { flex: 1 1 auto; min-width: 0; }
.search-input-wrapper .photo-search-btn { flex: 0 0 auto; }
.search-input-wrapper > svg {
    position: absolute;
    left: 15px;
    color: var(--text-muted);
    /* лупа — контурная иконка; глобальный .icon{fill:currentColor} превращал её в «кляксу» */
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}
.search-input {
    padding: 15px 20px 15px 45px;
    border-radius: 20px;
}

.filter-toggle-btn {
    background: none; border: none; color: var(--text-muted); font-size: 0.95em;
    cursor: pointer; margin-top: 15px; font-weight: 600; display: inline-flex;
    align-items: center; gap: 5px;
}
.filter-toggle-btn:hover { color: var(--text-main); }

/* === Поиск по фото === */
.photo-search-btn {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; cursor: pointer;
    border: 1px solid var(--border-color); background: var(--bg-card); font-size: 20px;
    display: inline-flex; align-items: center; justify-content: center; transition: all .15s;
}
.photo-search-btn:hover { border-color: var(--text-main); transform: translateY(-1px); }
.photo-search-bar {
    display: none; align-items: center; justify-content: space-between; gap: 10px;
    margin: 4px 0 14px; padding: 10px 14px; border-radius: 12px;
    background: var(--bg-main, #f5f6f8); border: 1px solid var(--border-color-thin);
}
.photo-search-bar #photoSearchLabel { font-weight: 600; }
.repair-photo-btn { font-size: 18px; }
.repair-photo-bar #repairPhotoLabel { font-weight: 600; }
.repair-photo-footer {
    margin: 0 0 14px; padding: 0 2px;
}
.req-card-photo {
    margin: 8px 0; border-radius: 10px; overflow: hidden;
    border: 1px solid var(--border-color-thin); background: var(--bg-main);
}
.req-card-photo img {
    display: block; width: 100%; max-height: 140px; object-fit: cover; cursor: pointer;
}
.req-photo-badge {
    font-size: 12px; color: var(--text-muted); margin: 4px 0 2px;
}

/* === ИДЕАЛЬНЫЕ ОТСТУПЫ ДЛЯ ИНДИВИДУАЛЬНОГО ЗАКАЗА === */
.collapsible-filters {
    display: none;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dashed var(--border-color-thin);
    text-align: left;
}
.collapsible-filters h3 { margin-bottom: 15px; }

.collapsible-filters input[type="text"],
.collapsible-filters input[type="file"],
.collapsible-filters select {
    height: 46px; 
    margin-bottom: 15px !important;
}

.collapsible-filters textarea {
    min-height: 80px;
    margin-bottom: 15px !important;
    resize: vertical;
}

.collapsible-filters .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}
.collapsible-filters .grid select { margin-bottom: 0 !important; } /* gap делает отступ */

.material-row { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    margin-bottom: 15px;
}
.material-row select { margin-bottom: 0 !important; }

.btn-help {
    width: 46px; height: 46px; padding: 0; margin: 0;
    background: var(--bg-main); color: var(--text-main);
    border-radius: 10px; font-weight: bold; font-size: 18px; cursor: pointer;
    border: 1px solid var(--border-color); display: flex;
    align-items: center; justify-content: center; flex-shrink: 0;
}
.filter-buttons-group { display: flex; gap: 15px; margin-top: 5px; }
.filter-buttons-group button { height: 46px; margin: 0; }

/* ===== Липкая шапка (следует за прокруткой) ===== */
.site-header {
    position: sticky; top: 0; z-index: 100;
    background: var(--bg-main);
    /* выходим за padding body (20px), чтобы фон шёл от края до края и был прижат к верху */
    margin: -20px -20px 0;
    padding: 20px 20px 0;
    transition: box-shadow var(--duration-normal, .24s) var(--ease-out, ease), padding var(--duration-fast, .16s) ease;
}
.site-header.scrolled { box-shadow: var(--shadow-md, 0 6px 18px rgba(15,23,42,.10)); }
.site-header.scrolled .header { padding-top: 6px; padding-bottom: 6px; }
.site-header.scrolled .nav-tabs { margin-bottom: 12px; }

/* ===== Плавающие кнопки ===== */
.fab {
    position: fixed; bottom: 24px; z-index: 95;
    width: auto; margin: 0;                 /* перебиваем глобальное button { width:100% } */
    border: none; cursor: pointer; font-family: inherit;
    opacity: 0; transform: translateY(16px) scale(.96); pointer-events: none;
    transition: opacity .25s var(--ease-out, ease), transform .25s var(--ease-out, ease), box-shadow .2s ease;
}
.fab.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
/* контурные иконки: глобальный .icon заливается (fill), из-за чего куб и стрелка
   выглядят кляксой — тут рисуем их линиями */
.fab .icon { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fab-custom {
    left: 22px; display: inline-flex; align-items: center; gap: 9px;
    width: auto; max-width: calc(100vw - 44px);
    background: var(--text-main); color: var(--bg-card);
    padding: 13px 20px; border-radius: var(--radius-pill, 999px);
    font-weight: 600; font-size: .95rem; white-space: nowrap;
    box-shadow: 0 8px 24px var(--fab-shadow);
}
.fab-custom:hover { transform: translateY(-2px); box-shadow: 0 12px 30px var(--fab-shadow-hover); }
.fab-top {
    right: 22px; width: 50px; height: 50px; border-radius: 50%; padding: 0; flex: 0 0 auto;
    background: var(--bg-card); color: var(--text-main);
    border: 1px solid var(--border-color-thin);
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 22px var(--fab-top-shadow);
}
.fab-top:hover { transform: translateY(-2px); box-shadow: 0 12px 28px var(--fab-top-shadow-hover); }
.fab-top .icon { transform: rotate(180deg); width: 22px; height: 22px; }

/* --- Категории и фильтры на витрине --- */
.cat-bar { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 8px; }
.cat-chip { padding:7px 14px; border-radius:999px; cursor:pointer; font-size:13px;
  border:1px solid var(--border-color); background:var(--bg-card); color:var(--text-main);
  white-space:nowrap; transition:all .15s; }
.cat-chip:hover { border-color:var(--text-main); }
.cat-chip.active { background:var(--text-main); color:var(--bg-card); border-color:var(--text-main); }
.catalog-filters { display:flex; gap:10px; align-items:center; margin-bottom:14px; flex-wrap:wrap; }
.catalog-filters select, .catalog-filters input { padding:8px; border:1px solid var(--border-color);
  border-radius:var(--border-radius); background:var(--bg-input); color:var(--text-main); }

/* ========================================= */
/* ВИТРИНА: боковая панель + сетка            */
/* ========================================= */
.catalog-layout { display: grid; grid-template-columns: 232px 1fr; gap: 24px; align-items: start; }
.catalog-main { min-width: 0; }
.catalog-side { position: sticky; top: calc(var(--header-h, 112px) + 12px); align-self: start; min-width: 0; }
.side-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 16px; }
.side-h { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em;
    font-size: .72em; font-weight: 600; color: var(--text-muted); margin: 16px 0 8px; }
.side-h-first { margin-top: 0; }
.catalog-side .cat-bar { flex-direction: column; gap: 4px; margin: 0; }
.catalog-side .cat-chip { display: block; width: 100%; text-align: left; border-color: var(--border-color-thin); }
.catalog-side .cat-chip:hover { border-color: var(--text-main); }
.catalog-side .cat-chip.active { border-color: var(--text-main); }
.catalog-side #maxPriceInput { margin: 0; }
.catalog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-bottom: 16px; flex-wrap: wrap; }
.catalog-toolbar #sortSelect { width: auto; max-width: 220px; margin: 0; }
.catalog-count { color: var(--text-muted); font-size: 14px; }

.catalog-pager {
    display: flex;
    justify-content: center;
    margin: 20px 0 8px;
}

.catalog-pager .btn-small {
    min-width: 180px;
}

.catalog-load-skels {
    margin-top: 12px;
}

.catalog-load-sentinel {
    width: 100%;
    height: 1px;
    pointer-events: none;
    visibility: hidden;
}

/* Карточка товара: бейджи, мета, выравнивание по левому краю */
.product-image-placeholder { position: relative; }
.pcard-tags { position: absolute; top: 8px; left: 8px; display: flex; gap: 6px; z-index: 1; }
.pcard-tag { background: color-mix(in srgb, var(--bg-card) 94%, transparent); border: 1px solid var(--border-color-thin);
    border-radius: 999px; font-size: 11px; font-weight: 600; padding: 3px 8px; color: var(--text-main); }
.product-title { text-align: left; }
.product-price { text-align: left; }
.product-price .from { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.product-meta { display: flex; gap: 8px; flex-wrap: wrap; color: var(--text-muted);
    font-size: 12.5px; margin-bottom: 8px; text-align: left; }
.product-meta span { display: inline-flex; align-items: center; }

/* Полоса статусов заказа — см. блок ORDER STEPPER в конце файла */

/* Сводка мейкера */
.mk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin: 4px 0 20px; }
.mk-stat { background: var(--bg-card); border: 1px solid var(--border-color-thin); border-radius: var(--radius-md); padding: 14px 16px; }
.mk-stat .v { font-family: var(--font-display); font-weight: 700; font-size: 1.5em; line-height: 1.1; letter-spacing: -.02em; }
.mk-stat .k { color: var(--text-muted); font-size: 13px; margin-top: 2px; }


/* ========================================= */
/* ПОДВАЛ                                     */
/* ========================================= */
.site-footer { border-top: 1px solid var(--border-color-thin); margin-top: 40px; padding: 24px 20px; }
.footer-inner { max-width: 1180px; margin: 0 auto; display: flex; align-items: center;
    justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--text-muted); font-size: 14px; }
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-links a { color: var(--text-muted); text-decoration: none; }
.footer-links a:hover { color: var(--text-main); text-decoration: underline; }

/* ========================================= */
/* ВИТРИНА МЕЙКЕРА (публичный профиль)         */
/* ========================================= */
.maker-modal-content {
    max-width: min(920px, 96vw);
    max-height: 90vh;
    overflow-y: auto;
}

.maker-storefront__hero {
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-color-thin);
}

.maker-storefront__title {
    margin: 0 0 8px;
    font-size: 1.45rem;
    line-height: 1.25;
}

.maker-storefront__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.maker-storefront__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    color: var(--text-muted);
    font-size: 0.92em;
    margin-bottom: 10px;
}

.maker-storefront__bio {
    margin: 0 0 10px;
    color: var(--text-muted);
    line-height: 1.5;
}

.maker-storefront__specs {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.88em;
    color: var(--text-muted);
}

.maker-storefront__section {
    margin-top: var(--space-4);
}

.maker-storefront__h {
    margin: 0 0 12px;
    font-size: 1.05rem;
}

.maker-storefront__products {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.maker-storefront__empty {
    color: var(--text-muted);
    margin: 0;
}

.maker-storefront__reviews {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.maker-storefront__review-photo {
    max-width: 120px;
    border-radius: var(--radius-sm);
    margin-top: 6px;
}

.maker-storefront__reply {
    margin-top: 8px;
    padding: 8px 12px;
    background: var(--bg-hover);
    border-radius: var(--radius-sm);
    font-size: 0.9em;
}

/* =====================================================
   EMOTIONAL MINIMALISM — ШАПКА И НАВИГАЦИЯ
   ===================================================== */

/* Градиентная полоса под шапкой — тонкая, не навязчивая */
.site-header::after {
    content: "";
    display: block;
    height: 2px;
    background: var(--accent-gradient-wide, linear-gradient(90deg, #6366f1, #a855f7, #06b6d4));
    opacity: 0.55;
    margin-top: -1px; /* перекрывает border-bottom .header */
}

/* Логотип — название с градиентным акцентом на ховере */
.logo-container {
    cursor: default;
    transition: opacity var(--duration-fast);
}
.logo-container:hover { opacity: 0.85; }

/* Активная вкладка навигации — градиентный индикатор снизу */
.nav-tab {
    position: relative;
    transition: color var(--duration-fast) var(--ease-out);
}
.nav-tab.active {
    color: var(--accent, #6366f1) !important;
    border-bottom: 2px solid transparent !important;
}
.nav-tab.active::after {
    content: "";
    position: absolute;
    bottom: -2px; /* выровнено с border-bottom nav-tabs */
    left: 20%;
    right: 20%;
    height: 2px;
    background: var(--accent-gradient);
    border-radius: 999px;
}
.nav-tab:hover:not(.active) { color: var(--accent, #6366f1) !important; }

/* Header buttons — мягкий акцент при ховере */
.header-btn:hover {
    background: var(--accent-blue, #eef2ff) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
    color: var(--accent, #6366f1) !important;
}

/* Поиск — плавный focus glow */
.search-filters-container {
    transition: box-shadow var(--duration-normal) var(--ease-out);
}
.search-filters-container:focus-within {
    box-shadow: 0 0 0 3px var(--focus-ring-alpha), var(--shadow-md);
}

/* Сайдбар каталога — категории с accent при активном */
.catalog-side .cat-chip.active {
    background: var(--accent-gradient) !important;
    color: #fff !important;
    border-color: transparent !important;
}
.catalog-side .cat-chip:hover:not(.active) {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}

/* Нижняя навигация (mobile) — активная вкладка с градиентным акцентом */
.mobile-tab.active {
    color: var(--accent, #6366f1) !important;
}
.mobile-tab--center .mobile-tab-fab {
    background: var(--accent-gradient) !important;
    box-shadow: 0 6px 20px var(--fab-shadow) !important;
}
.mobile-tab-badge {
    background: var(--danger, #ef4444) !important;
}

/* Подвал — тонкая градиентная линия сверху */
.site-footer {
    border-top: none !important;
    position: relative;
}
.site-footer::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: var(--accent-gradient-wide);
    opacity: 0.35;
}

/* =====================================================
   EMOTIONAL MINIMALISM — ВИТРИНА МЕЙКЕРА
   ===================================================== */
.mk-stat {
    transition: box-shadow var(--duration-fast), transform var(--duration-fast);
    border-radius: var(--radius-md);
}
.mk-stat:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.mk-stat .v {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
@supports not (-webkit-text-fill-color: transparent) {
    .mk-stat .v { color: var(--accent); }
}

/* Trust-bar числа — акцент */
.trust-stat__val {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
@supports not (-webkit-text-fill-color: transparent) {
    .trust-stat__val { color: var(--accent); }
}

/* =====================================================
   EMOTIONAL MINIMALISM — AUTH OVERLAY
   ===================================================== */
.auth-overlay {
    background: linear-gradient(135deg, #1e1b4b 0%, #4c1d95 50%, #0c4a6e 100%) !important;
}
.auth-ov-decor {
    background:
        radial-gradient(40% 50% at 25% 30%, rgba(129,140,248,.5), transparent 70%),
        radial-gradient(35% 45% at 75% 70%, rgba(167,139,250,.35), transparent 70%),
        radial-gradient(30% 40% at 50% 50%, rgba(34,211,238,.2), transparent 70%) !important;
}

/* =====================================================
   EMOTIONAL MINIMALISM — УВЕДОМЛЕНИЯ
   ===================================================== */
.notif-card--unread {
    border-left-color: var(--accent, #6366f1) !important;
}

/* =====================================================
   EMOTIONAL MINIMALISM — ПОИСК
   ===================================================== */
.search-suggest__item--active,
.search-suggest__item:hover {
    background: var(--accent-blue, #eef2ff) !important;
    color: var(--accent, #6366f1) !important;
}

/* =====================================================
   EMOTIONAL MINIMALISM — ДЕТАЛИ ТОВАРА
   ===================================================== */
.detail-thumb.active {
    border-color: var(--accent, #6366f1) !important;
    box-shadow: 0 0 0 2px var(--accent, #6366f1) !important;
}